《锋利的jQuery》读书笔记 —— 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的元素滚动条距离左侧的距离