JQuery对象操作(附对应JS方法)

JQuery作为一种JS库,继承并优化了JS访问DOM对象的特性,更加方便的操作DOM对象,在本文,结合《JQ内核详解》这本书,罗列了一系列JQ中对文档对象的操作方法,并附有对应的JS方法,作为一份参考资料,日后查询


     大类                                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() 获取当前元素相邻的上一个同级元素

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭