jQuery DOM操作总结

·查找元素节点
var str = $("#myDiv").text(); //<div id="myDiv" title="hello">123</div>
alert(str); //结果:123


·查找属性节点
var str = $("#myDiv").attr("title"); //<div id="myDiv" title="hello">123</div>
alert(str); //结果:hello


·创建元素节点
var $li1 = $("<span></span>"); //传入元素标记,自动包装并创建第一个li元素对象
var $li2 = $("<span></span>"); //第二个,创建时需要遵循XHTML规则(闭合、小写)
$("#myDiv").append($li1); //往id为myDiv的元素中添加一个元素
$("#myDiv").append($li2); //结果:<div id="myDiv"><span></span><span></span></div>


$("#myDIv").append($li1).append($li2); //客串:传说中的链式写法,省一行代码 ^_^


·创建文本节点
var $li1 = $("<span>first</span>");
var $li2 = $("<span>second</span>");
$("#myDIv").append($li1).append($li2);
//结果:<div id="myDiv"><span>first</span><span>second</span></div>


·创建属性节点
var $li1 = $("<span title="111">first</span>");
var $li2 = $("<span title="222">second</span>");
$("#myDIv").append($li1).append($li2); 
//结果:<div id="myDiv"><span title="111">first</span><span title="222">second</span></div>


·插入节点
$("#myDiv").append("<span></span>"); //往id为myDiv的元素插入span元素
$("<span></span>").appendTo("#myDiv"); //倒过来,将span元素插入到id为myDiv的元素


$("#myDiv").prepend("<span></span>"); //往id为myDiv的元素内最前面插入span元素
$("<span></span>").prependTo("#myDiv"); //倒过来,将span元素插入到id为myDiv的元素内的最前面


$("#myDiv").after("<span></span>"); //往id为myDiv的元素后面插入span元素(同级,不是子元素)
$("<span></span>").insertAfter("#myDiv"); //倒过来,将span元素插入到id为myDiv的元素后面(同级,不是子元素)


$("#myDiv").before("<span></span>"); //往id为myDiv的元素前面插入span元素(同级,不是子元素)
$("<span></span>").insertBefore("#myDiv"); //倒过来,将span元素插入到id为myDiv的元素前面(同级,不是子元素)


·删除节点
$("#myDiv").remove(); //将id为myDiv的元素移除


·清空节点
$("#myDiv").remove("span"); //将id为myDiv的元素内的所有span元素移除


·复制节点
$("#myDiv span").click( function(){ //点击id为myDiv的元素内的span元素,触发click事件
    $(this).clone().appendTo("#myDiv"); //将span元素克隆,然后再添加到id为myDiv的元素内
    $(this).clone(true).appendTo("#myDiv"); //如果clone传入true参数,表示同时复制事件
})


·替换节点
$("p").replaceWith("<strong>您好</strong>"); //将所有p元素替换成后者 <p>您好</p> --> <strong>您好</strong>
$("<strong>您好</strong>").replaceAll("p"); //倒过来写,同上


·包裹节点
$("strong").wrap("<b></b>"); //用b元素把所有strong元素单独包裹起来 <b><strong>您好</strong></b><b><strong>您好</strong></b>
$("strong").wrapAll("<b></b>"); //用b元素把所有strong元素全部包裹起来 <b><strong>您好</strong><strong>您好</strong></b>
$("strong").wrapInner("<b></b>"); //把b元素包裹在strong元素内 <strong><b>您好</b></strong>


·属性操作
var txt = $("#myDiv").arrt("title"); //获取id为myDiv的元素的title属性
$("#myDiv").attr("title","我是标题内容"); //设置id为myDiv的元素的title属性的值
$("#myDiv").attr({"title":"我是标题内容", "alt":"我还是标题"); //一次性设置多个属性的值
$("#myDiv").removeArrt("alt"); //移除id为myDiv的元素的title属性


·样式操作
var txt = $("#myDiv").arrt("class"); //获取id为myDiv的元素的样式
$("#myDiv").attr("class","myClass"); //设置id为myDiv的元素的样式
$("#myDiv").addClass("other"); //在id为myDiv的元素中追加样式
$("#myDiv").removeClass("other"); //在id为myDiv的元素中移除other样式
$("#myDiv").removeClass("myClass other"); //在id为myDiv的元素中移除myClass和other多个样式
$("#myDiv").removeClass(); //在id为myDiv的元素中移除所有样式
$("#myDiv").toggleClass("other"); //切换样式,在有other样式和没other样式之间切换
$("#myDiv").hasClass("other"); //判断是否有other样式


·设置和获取HTML、文本和值
alert( $("#myDiv").html() ); //获取id为myDiv的元素的HTML代码(相当于innerHTML)
$("#myDiv").html("<span>hello</span>"); //设置id为myDiv的元素的HTML代码


alert( $("#myDiv").text() ); //获取id为myDiv的元素的HTML代码(相当于innerText)
$("#myDiv").text("hello"); //设置id为myDiv的元素的HTML代码


alert( $("#myInput").val() ); //获取id为myDiv的元素的value值(支持文本框、下拉框、单选框、复选框等)
$("#myInput").val("hello"); //设置id为myDiv的元素的value值(下拉框、单选框、复选框带有选中效果)


·遍历节点
var $cList = $("#myDiv").children(); //获取id为myDiv的元素的子元素(只考虑子元素,不考虑后代元素)
var $sNext = $("#myDiv").next(); //获取id为myDiv的元素的下一个同辈元素
var $sPrev = $("#myDiv").prev(); //获取id为myDiv的元素的上一个同辈元素
var $sSibl = $("#myDiv").siblings(); //获取id为myDiv的元素的所有同辈元素
var $pClos = $("#myDiv").closest("span"); //获取id为myDiv的元素本身开始,最接近的span元素(向上查找)


·CSS-DOM操作
$("#myDiv").css("color"); //获取id为myDiv的元素的color样式的值
$("#myDiv").css("color", "blue"); //设置id为myDiv的元素的color样式的值
$("#myDiv").css({"color":"blue", "fontSize":"12px"}); //设置id为myDiv的元素的color样式的值(多个)


$("#myDiv").css("opacity", "0.5"); //设置id为myDiv的元素的透明度(兼容浏览器)


$("#myDiv").css("height"); //获取id为myDiv的元素的高度(单位:px,兼容浏览器)
$("#myDiv").height(); //同上(实际高度)


$("#myDiv").css("width"); //获取id为myDiv的元素的宽度(单位:px,兼容浏览器)
$("#myDiv").width(); //同上(实际宽度)


var offset = $("#myDiv").offset(); //获取id为myDiv的元素在当前窗口的相对偏移量
alert( offset.top + "|" + offset.left );


var offset = $("#myDiv").position(); //获取id为myDiv的元素相对于最近一个position设置为relative或absolute的父元素的相对偏移量
alert( offset.top + "|" + offset.left );


$("#txtArea").scrollTop(); //获取id为txtArea的元素滚动条距离顶端的距离
$("#txtArea").scrollLeft(); //获取id为txtArea的元素滚动条距离左侧的距离
$("#txtArea").scrollTop(100); //设置id为txtArea的元素滚动条距离顶端的距离
$("#txtArea").scrollLeft(100); //设置id为txtArea的元素滚动条距离左侧的距离
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值