本文整理自锋利的jQuery(第二版)第三章
查找节点
var $li = $("ul li:eq(1)"); //获得元素节点
var li_text = $li.text(); //获得文本内容
var name = $li.attr("name") //查找属性节点
var class = $li.attr("class") //查找属性节点
创建节点
var li_2 = $("<li></li>") //创建元素节点
var li_2 = $("<li>香蕉</li>") //创建文本节点
var li_2 = $("<li title="香蕉">香蕉</li>") //创建属性节点
$("ul").append($li_1)
插入节点
$("ul").append($li_1) //在ul元素内部末尾追加$li_1
appendTo() //顺序相反
prepend() //添加到内部的最前面
prependTo() //顺序相反
after() //在元素后添加元素,是外部
insertAfter() //顺序相反
before() //前面添加
insertbefore() //顺序相反
删除节点
remove()
- 删除所有匹配的元素
- 后代元素也会被删除
- 可以通过参数选择性的删除元素
- 该方法返回值指向被删除的节点,所以可以在以后利用
var $li = $("ul li:eq(1)"),ewmove()
$("ul").append($li) //又被添加到ul
detach()
与 remove()的区别
- 不会把匹配的元素从jQuery对象中删除 //不是和remove()一样吗?
- 不会把绑定的事件,附加的数据删除
empty()
清空节点,可以清空元素中的所有后代元素.保留自身
复制节点
clone()
$("ul li").click(function(){
$(this).clone().appendTo("ul")
})默认情况下被复制的元素并不具备任何行为.我们可以通过为clone()方法传递一个布尔型参数,让他在复制的同时复制所绑定的事件.$(this).clone(true).appendTo("ul")
替换节点
p.replaceWith("<span>增加</span>") //用span替换p
p.replaceAll("<span>增加</span>") //完全相反 用p替换span替换后,原先所绑定的事件和被替换的元素一起消失.需要在新元素上重新绑定.
包裹节点
$("span").warp("<p></p>") //用p标签把span包裹起来
$("span").warpAll("<p></p>") //用p标签把所有匹配的span元素包裹起来
$("span").warpInner("<p></p>") //将每一个匹配的span元素的子内容(包括文本节点)用p标签包裹起来.属性操作
通常通过attr()和prop()获取和设置属性.
官方建议:具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用
prop()，其他的使用attr().
$("label").attr("name") //获得属性
$("label").attr("name","增加") //设置属性
$("label").attr({"name","增加","value":"add"}) //同时设置多个属性
$("label").removeAttr("title") //删除属性
prop() //用法相同
removeProp()样式操作
$("p").attr("class","info") //用attr可以设置类,此时类只有info
$("p").addClass("info") //追加class
$("p").removeClass("info") //移除class
$("p").removeClass("info high") //同时移除两个class
$("p").removeClass() //移除所有class
$("p").toggleClass("class") //class类存在则移除,不存在则添加.妙用无穷啊!
$("p").hasClass("class") //返回true/false 判断是否含有某个class设置和获取HTML、文本、值
$("label").html() //得到html
$("lable")html("<span>删除</span>") //设置html
$("label").text() //得到label的文本内容
$("lable")html("删除") //设置label的文本内容
$(":radio").val() //得到表单的值
$(":radio").val("0") //设置表单的值遍历节点
$("ul").children() //获得匹配元素的子元素集合
$("ul li:eq(0)").next() //获得匹配元素的后面紧邻的匹配元素
$("ul li:eq(2)").prev() //获得匹配元素的前面紧邻的匹配元素
$("ul li.active").siblings() //获得匹配元素的前后所有的的匹配元素
//closest 取得最近的匹配元素 ，首先匹配自身，逐级向上匹配父元素。
$(document).click(function(e){
$("e.target").closest("li").css("color","red") //target 事件对象 最初触发事件的DOM对象
})
$("ul").parent() //获得父元素
$("ul").parents("div") //获得每个匹配元素的第一个div祖先元素
$("ul").find(".avtive") //后代 很常用CSS-DOM操作
读取和设置style对象的各种属性
$("p").css("color") //获得p元素的样式颜色
$("p").css("color","red") //设置p元素的样式颜色
$("p").css({color:"red"，"font-size":"12px"}) //同时设置p元素的多个样式
$("p").css({color:"red"，"fontSize":"12px"}) //不要“-”时，采用驼峰式写法
$("p").height()
$("p").width()offset()获得元素在当前视窗的相对偏移，返回值包含两个属性（top,left）,只对可见元素有效
var offset = $("p").offset();
var top = offset.top;
var left = offset.left;position()获得元素相对于第一个position不等于static的祖先元素的偏移量,返回值包含两个属性（top,left）,只对可见元素有效
var position = $("p").position();
var top = position.top;
var left = position.left;
scrollTop()和scrollLeft()获得滚动条距顶端和左侧的距离
var $p = $("p");
var scrollTop = $p.scrollTop(); //元素的滚动条距离顶端的距离
var scrollLeft = $p.scrollLeft();
$("textarea").scrollTop(300); //元素的垂直滚动条滚动到指定位置
$("textarea").scrollLeft(300); //元素的水平滚动条滚动到指定位置
其他
//单击选中文本框中的文字
$("input:text").on("click",function(){
$(this).select();
})