jquery常用的方法

Attribute： $(”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) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式 jQuery 是一个广泛使用的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画以及Ajax交互等任务。以下是对标题“jquery常用的方法”中提到的一些主要jQuery方法的详细解释： 1. **添加样式**: `$(”p”).addClass(css中定义的样式类型)` - 这个方法用于向指定的元素添加CSS类，例如`addClass("highlight")`可以将一个名为`highlight`的样式添加到所有`<p>`元素上。 2. **设置属性**: `$(”img”).attr({src:”test.jpg”,alt:”test Image”})` - 使用对象字面量形式批量设置属性，如同时设置图片的`src`和`alt`属性。`$(”img”).attr(”src”,”test.jpg”)`仅设置`src`属性。 3. **动态设置属性值**: `$(”img”).attr(”title”, function() { return this.src })` - 使用函数返回值作为属性值，这允许根据元素的现有状态动态设置属性，如这里使用`this.src`作为图片的`title`。 4. **获取和设置元素内容**: `$(”元素名称”).html()`用于获取元素的所有内容，包括子元素和文本；`$(”元素名称”).html(”<b>new stuff</b>”);`用于替换元素的HTML内容。 5. **删除属性**: `$(”元素名称”).removeAttr(”属性名称”)` - 用于移除元素的特定属性，例如`removeAttr("id")`将移除元素的`id`属性。 6. **移除样式**: `$(”元素名称”).removeClass(”class”)` - 移除元素上的指定CSS类。 7. **获取和设置文本**: `$(”元素名称”).text()`用于获取元素的纯文本内容，不包括HTML标签；`$(”元素名称”).text(value);`用于设置元素的文本内容。 8. **切换样式**: `$(”元素名称”).toggleClass(class)` - 根据元素是否已包含指定样式，添加或移除该样式。这对于实现条件样式非常有用。 9. **输入元素的值**: `$(”input 元素名称”).val()`用于获取`<input>`元素的值，`$(”input 元素名称”).val(value);`用于设置其值。 10. **元素操作**： - `$(”元素名称”).after(content);` - 在元素后面添加内容。 - `$(”元素名称”).append(content);` - 将内容添加到元素的末尾。 - `$(”元素名称”).appendTo(content);` - 将元素添加到其他内容的后面。 - `$(”元素名称”).before(content);` - 在元素前面添加内容。 - `$(”元素名称”).clone(布尔表达式);` - 克隆元素，可选地保留事件绑定。 - `$(”元素名称”).empty();` - 清空元素的所有子元素。 - `$(”元素名称”).insertAfter(content);` - 将元素插入到其他内容之后。 - `$(”元素名称”).insertBefore(content);` - 将元素插入到其他内容之前。 - `$(”元素名称”).prepend(content);` - 将内容添加到元素的开头。 - `$(”元素名称”).prependTo(content);` - 将元素添加到其他内容的开头。 - `$(”元素”).remove();` - 删除匹配的元素。 - `$(”元素”).wrap(”html”);` - 用HTML包裹元素。 - `$(”元素”).wrap(element);` - 用DOM元素包裹元素。 11. **遍历和选择**： - `add(expr)`, `add(html)`, `add(elements)` - 添加额外的元素到选择集中。 - `children(expr)` - 获取元素的直接子元素。 - `contains(str)` - 检查元素是否包含指定的文本。 - `end()` - 结束最近的过滤操作，返回之前的集合。 - `filter(expression)`, `filter(filter)` - 从集合中筛选出匹配的元素。 - `find(expr)` - 在当前集合中搜索匹配的后代元素。 - `is(expr)` - 检查元素是否匹配给定的选择器。 - `next(expr)` - 获取元素的下一个相邻元素。 - `not(el)`, `not(expr)`, `not(elems)` - 移除匹配的元素。 - `parent(expr)` - 获取元素的直接父元素。 - `parents(expr)` - 获取元素的所有祖先元素。 - `prev(expr)` - 获取元素的前一个相邻元素。 - `siblings(expr)` - 获取元素的所有同级元素。 12. **核心方法**： - `$(html).appendTo(”body”)` - 将HTML字符串插入到body元素中。 - `$(elems)` - 创建一个jQuery对象，表示一组DOM元素。 - `$(function(){……..});` - 页面加载完成后执行函数，相当于`$(document).ready(function() {...})`。 - `$(”div > p”).css(”border”, “1px solid gray”);` - 为所有`<div>`的直接子`<p>`元素设置边框样式。 - `$.extend(prop)` - 扩展jQuery对象，添加新的方法或属性。 - `jQuery( expression, [context] )` - 选择元素，`expression`是选择器，`context`是可选的上下文元素。 13. **遍历函数**： - `each( callback )` - 遍历jQuery对象中的每个元素，`callback`是一个接收索引和元素作为参数的函数，`this`指向当前元素。 以上就是jQuery中一些常见的方法，它们构成了jQuery强大功能的基础，极大地简化了JavaScript的DOM操作和事件处理。在实际开发中，结合这些方法，开发者可以轻松地创建交互式网页和复杂的用户界面。