JQUERY 常用方法大全

JQUERY 常用方法大全 JQUERY 常用方法大全 $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/值，参数是map $(”img”).attr(”src”,”test.jpg”); 给某个元素添加属性/值 $(”img”).attr(”title”, function() { return this.src }); 给某个元素添加属性/值 $(”元素名称”).html(); 获得该元素内的内容（元素，文本等） $(”元素名称”).html(”<b>new stuff</b>”); 给某元素设置内容 $(”元素名称”).removeAttr(”属性名称”) 给某元素删除指定的属性以及该属性的值 $(”元素名称”).removeClass(”class”) 给某元素删除指定的样式 $(”元素名称”).text(); 获得该元素的文本 $(”元素名称”).text(value); 设置该元素的文本值为value $(”元素名称”).toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式 $(”input元素名称”).val(); 获取input元素的值 $(”input元素名称”).val(value); 设置input元素的值为value **jQuery 是一个强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。以下是一些jQuery中常用的方法及其详细解释：** 1. **`addClass(class)`**: 此方法向匹配的元素添加指定的CSS样式类。例如，`$("p").addClass("highlight")`将给所有段落添加名为`highlight`的样式类。 2. **`attr(name, value)` / `attr(map)`**: 使用此方法可以设置或获取元素的属性。如`$("img").attr("src", "test.jpg")`用于更改图片的源URL，而`$("img").attr({"src": "test.jpg", "alt": "test Image"})`则同时设置多个属性。 3. **`attr(name, function)`**: 如果你想要根据元素的当前属性计算新的值，可以提供一个函数。例如，`$("img").attr("title", function() { return this.src })`将图片的`src`属性作为`title`属性的值。 4. **`html()`**: 用于获取或设置元素的HTML内容。`$(".content").html()`将返回匹配元素的HTML内容，而`.html(newContent)`则会替换这些元素的内容。 5. **`removeAttr(attributeName)`**: 删除匹配元素的指定属性，例如`$("input").removeAttr("disabled")`将取消所有输入框的禁用状态。 6. **`removeClass(class)`**: 移除匹配元素的指定样式类。`$(".highlight").removeClass("highlight")`将移除所有具有`highlight`样式的元素的该样式。 7. **`text()`**: 获取或设置元素的文本内容。`$("#myElement").text()`返回元素的文本，`.text(newText)`则替换文本。 8. **`toggleClass(class)`**: 根据元素是否已包含指定样式类，切换该样式类。如果元素已有该类，则移除；反之，添加。 9. **`val()`**: 对于`<input>`元素，`val()`用于获取或设置其值。如`$("input[name='username']").val("JohnDoe")`将用户名输入框的值设为"JohnDoe"。 除了上述基本操作，jQuery还提供了多种DOM操作和遍历方法： - **`after(content)`**: 在每个匹配元素之后插入内容。 - **`append(content)`**: 将内容追加到每个匹配元素的内部。 - **`appendTo(content)`**: 将匹配元素追加到指定内容的末尾。 - **`before(content)`**: 在每个匹配元素之前插入内容。 - **`clone(keepData)`**: 克隆匹配元素，可选地保留其数据和事件绑定。 - **`empty()`**: 清空匹配元素的所有子元素。 - **`insertAfter(content)`**: 将匹配元素插入到指定内容之后。 - **`insertBefore(content)`**: 将匹配元素插入到指定内容之前。 - **`prepend(content)`**: 在每个匹配元素的内部开头插入内容。 - **`prependTo(content)`**: 将匹配元素放在指定内容的开头。 - **`remove()`**: 删除匹配的所有元素，可选地使用一个表达式过滤元素。 - **`wrap(wrapper)`**: 包裹匹配元素，可以用HTML字符串或DOM元素。 - **`wrapAll(wrapper)`**: 用一个单一的包裹元素包围所有匹配元素。 - **`wrapInner(wrapper)`**: 用一个包裹元素包围匹配元素的内部内容。 此外，jQuery的`Core`部分提供了创建jQuery对象和执行函数的功能： - **`$(html).appendTo("body")`**: 相当于在HTML文档的`body`中动态添加内容。 - **`$(elems)`**: 从DOM中选择元素。 - **`$(function(){...})`**: 等同于`$(document).ready(function(){...})`，在文档加载完成后执行回调函数。 - **`$(expression, context)`**: 在指定的上下文中查找匹配的元素。 - **`each(callback)`**: 遍历匹配的元素集合，并对每个元素执行回调函数。 jQuery的其他功能包括选择器、事件处理、动画效果等，这仅是jQuery庞大功能集的一小部分。通过熟练掌握这些方法，开发者可以更高效地进行DOM操作和实现复杂的用户交互。