| 大类 | JQ方法 | 备注 |
| 创建元素 | var $h1 = $(“<h1></h1>”) | 将内含的HTML包装为JQuery对象，并返回 |
| 创建文本 | var $h1 = $("<h1>DOM模型</h1>") | 可以用任何HTML代码创建文本 |
| 创建属性 | var $h1 = $(“<h1 class = ‘red’>DOM模型</h1>”) | 可以用任何HTML代码创建文本 |
| 节点内插入元素 | $("body").append("ul") | 向与前者匹配的元素内追加新内容（插在最后一个子元素） |
| $("ul").appendTo("body")（具有破坏性） | 把与前者匹配的元素追加到后者中（插在最后一个子元素） | |
| $("body").prepend("ul") | 向与前者匹配的元素内追加新内容（插在第一个子元素） | |
| $("ul").prependTo("body"）（具有破坏性） | 把与前者匹配的元素追加到后者中（插在第一个子元素） | |
| 节点外插入元素 | $("div").affter("<p>lyo<p>") | 向与前者匹配的元素之后插入新内容 |
| $("<p>lyo<p>").insertAffter("div")（具有破坏性） | 把与前者匹配的元素插入到另一个指定元素集合的后面 | |
| $("div").before("<p>lyo<p>") | 向与前者匹配的元素之前插入新内容 | |
| $("<p>lyo<p>").insertBefore("div")（具有破坏性） | 把与前者匹配的元素插入到另一个指定元素集合的前面 | |
| 删除元素 | var $p=$("p").remove() | 从DOM中删除所有匹配的元素，并可以返回被删除的元素 |
| var $p=$("p").emtpy() | 删除匹配的元素集合中所有的子节点 | |
| 复制元素 | var $div = $("div").clone() | 复制匹配的dom元素并选中这些复制副本 |
| 替换元素 | $("p").replaceWith("<div>lyo</div>") | 把所有与前者匹配的元素替换成后面的HTML或DOM元素 |
| $("<div>lyo</div>").replaceAll("p") | 把所有与后者匹配的元素替换成前面的HTML或DOM元素 | |
| 包裹元素 | $("p”).wrap(<span class ‘wrap’ /") | 匹配前者的每个元素外被后者包裹 |
| $("p”).wrapInner(<span class ‘wrap’ /") | 匹配前者的每个元素内包裹后者 | |
| $("p”).wrapAll(<span class ‘wrap’ /") | 匹配前者的元素集外被后者包裹 | |
| 设置属性 | $("p”).attr(“title”,"段落文本") | 可以批量设置属性，两个参数分别为 1、指定属性名 2、指定属性值 |
| 获取属性 | alert（$("p”).attr(“title”)) | 只设定一个参数表示读取该属性值 |
| 删除属性 | $(“p”).removeAttr(“title”) | 删除指定的元素属性 |
| 追加样式 | $("p”).addClass(“lyo”) | 为元素追加新的样式，指定类名即可，但需要先定义CSS类样式 |
| 移除样式 | $("p”).removeClass(“lyo”) | 若要删除多个类样式，可以用空格将其分隔，移除所有的话，可以不传递参数 |
| 切换样式 | $("p”).toggleClass(“lyo”) | 1、做为开关的类样式名 2、是否打开样式（true/false/表达式返回bool值），若没有设置该参数，系统会根据该元素是否存在自动切换显示隐藏 |
| 判断样式 | alert（$("p”).hasClass(“lyo”)） 或 alert（$("p”).is(“lyo”)） |
判断元素是否包含指定的类样式，返回bool值 |
| 读写HTML | var s =$(“div”).html() //读 $(“p”).html(s) //写 |
1、不含参数表读取指定节点下结构 2、包含参数表向指定节点写入字符串，覆盖指定节点原来包含的所有内容 |
| 读写文本 | var s =$(“div”).text() //读 $(“p”).text(s) //写 |
同上 |
| 读写表单值 | $(this).val(“lyo”) | 1、不含参数表示读取值 2、含参数表示写入值,参数可以是选项值，也可以是value属性值 |
| 读写CSS样式 | $("p").css(“color”,"red") $("p").css({color:"red",fontsize:”2px”}) |
注意单个样式与多个样式设置时的符号区别 |
| 绝对偏移 | var o1=$(“div”).eq(0).offset() | 获取相对窗口左上角的相对偏移，返回top和Left属性 |
| 相对偏移 | var o1=$(“div”).eq(0).position() | 该指定元素与距离最近的父级元素左上角的偏移距离，但如果父级元素的Position没有定义为absolute/fixed/relative，则当前元素最近的父级定位元素应为body |
| 元素高宽 | $("div”).height(140px) $("div”).width() |
1、无参，读取高宽，返回Px 2、有参，设置高宽 |
| 元素遍历 | var li = $(“body”).children() | 获取当前元素包含的所有子元素，返回集合，可以用~.eq()筛选，或是用数组~[1] |
| var li = $(“body”).parent() | 获取当前元素包含的父元素 | |
| var li = $(“body”).next() | 获取当前元素相邻的下一个同级元素 | |
| var li = $(“body”).parent() | 获取当前元素相邻的上一个同级元素 |
时间： 2024-08-28 05:25:21