锋利的jQuery读书笔记---jQuery中操作DOM
一般来说，DOM的操作分为3个方面，即DOM Core、HTML-DOM和CSS-DOM
jQuery中的DOM操作主要包括以下种类：
- 查找节点
- 查找元素节点
- 查找属性节点
- 创建节点
- 创建元素节点
- 创建文本节点
- 创建属性节点
- 插入节点
- 插入节点的方法
| 方法 | 描述 | 示例 |
| append() | 向每个匹配的元素内部追加内容 | HTML代码：<p>我想说：</p> jQuery代码：$("p").append("<b>你好</b>"); 结果：<p>我想说：<b>你好</b></p> |
| appendTo() | 将所有匹配的元素追加到指定的元素中。 实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是将B追加到A中 而是将A追加到B中 |
HTML代码：<p>我想说：</p> jQuery代码：$("<b>你好</b>").append("p"); 结果：<p>我想说：<b>你好</b></p> |
| prepend() | 向每个匹配的元素内部前置内容 | HTML代码：<p>我想说：</p> jQuery代码：$("p").prepend("<b>你好</b>"); 结果：<p><b>你好</b>我想说：</p> |
| prependTo() | 将所有匹配的元素前置到指定的元素中。 实际上，使用该方法是颠倒了常规的$(A).prepend(B)的操作，即不是将B前置到A中 而是将A前置到B中 |
HTML代码：<p>我想说：</p> jQuery代码：$("<b>你好</b>").prependTo("p"); 结果：<p><b>你好</b>我想说：</p> |
| after() | 在每个匹配的元素之后插入内容 | HTML代码：<p>我想说：</p> jQuery代码：$("p").after("<b>你好</b>"); 结果：<p>我想说：</p><b>你好</b> |
| insertAfter() | 将所有匹配的元素插入到指定的元素后面。 实际上，使用该方法是颠倒了常规的$(A).after(B)的操作，即不是将B插入到A后面， 而是将A插入到B后面 |
HTML代码：<p>我想说：</p> jQuery代码：$("<b>你好</b>").insertAfter("p"); 结果：<p>我想说：</p><b>你好</b> |
| before() | 在每个匹配的元素之前插入内容 | HTML代码：<p>我想说：</p> jQuery代码：$("p").before("<b>你好</b>"); 结果：<b>你好</b><p>我想说：</p> |
| insertBefore() | 将所有匹配的元素插入到指定的元素的前面。 实际上，使用该方法是颠倒了常规的$(A).before(B)的操作，即不是将B插入到A前面 而是将A插入到B的前面 |
HTML代码：<p>我想说：</p> jQuery代码：$("<b>你好</b>").insertBefore("p"); 结果：<b>你好</b><p>我想说：</p> |
以上插入节点的方法不仅能够将新创建的DOM元素插入到文档中，也能对原有的DOM元素进行移动。
- 删除节点
- 复制节点
- 替换节点
- 包裹节点
- 属性操作
- 样式操作
- 设置和获取HTML、文本和值
- 便利节点
- CSS-DOM操作
---------------------------------代码示例-------------------------------
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script type="text/javascript" src="../../js/jquery-2.1.3.js"></script> <title></title> <style> .myClass{ } /*获取样式和设置样式 所需的*/ .high{ font-weight: bold; color: red; } /*追加样式 所需的*/ .another{ font-style: italic; color: blue; } </style> </head> <body> <input type="button" value="重复切换class类"/> <p class="myClass" title="选择你最喜欢的水果">你最喜欢的水果是?</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </ul> <br/> <input type="text" id="address" value="请输入邮箱地址"/> <br/><br/> <input type="text" id="password" value="请输入邮箱密码"/> <br/><br/> <input type="button" value="登录"/> <br/><br/> <input type="button" value="设置单选下拉框选中"/> <input type="button" value="设置多选下拉框选中"/> <input type="button" value="设置单选框和多选框选中"/> <br/><br/> <select id="single"> <option>选择1号</option> <option>选择2号</option> <option>选择3号</option> </select> <select id="multiple" multiple="multiple" style="height:120px;"> <option selected="selected">选择1号</option> <option>选择2号</option> <option>选择3号</option> <option>选择4号</option> <option selected="selected">选择5号</option> </select> <br/><br/> <input type="checkbox" value="check1"/> 多选1 <input type="checkbox" value="check2"/> 多选2 <input type="checkbox" value="check3"/> 多选3 <input type="checkbox" value="check4"/> 多选4 <br/> <input type="radio" value="radio1"/> 单选1 <input type="radio" value="radio2"/> 单选2 <input type="radio" value="radio3"/> 单选3 </body> <script type="text/javascript"> /** * jQuery中的DOM操作 * */ /*** * 1.查找节点 */ //1.1查找元素节点 // var $li = $("ul li:eq(1)");//获取<ul>里第2个<li>节点 // var li_txt = $li.text(); // alert(li_txt); //1.2查找属性节点 // var $para = $("p"); // var p_txt = $para.attr("title"); // alert(p_txt); /** * 2.创建节点 * */ //2.1创建元素节点 // var $li_1 = $("<li></li>"); // var $li_2 = $("<li></li>"); // $("ul").append($li_1).append($li_2); //2.2创建文本节点 // var $li_1 = $("<li>香蕉</li>"); // var $li_2 = $("<li>雪梨</li>"); // $("ul").append($li_1).append($li_2); //2.3创建属性节点 // var $li_1 = $("<li title='香蕉'>香蕉</li>"); // var $li_2 = $("<li title='雪梨'>雪梨</li>"); // $("ul").append($li_1).append($li_2); /** * 3.插入节点 * */ // var $li_1 = $("<li title='香蕉'>香蕉</li>"); // var $li_2 = $("<li title='雪梨'>雪梨</li>"); // var $li_3 = $("<li title='其它'>其它</li>"); // // var $parent = $("ul"); // var $two_li = $("ul li:eq(1)"); // $parent.append($li_1); // $parent.prepend($li_2); // $li_3.insertAfter($two_li); /** * 4.删除节点 * */ /** * 4.1.remove()方法 * */ //$("ul li:eq(1)").remove(); //当某个节点用remove方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素 // var $li = $("ul li:eq(1)").remove(); // $li.appendTo("ul"); //or //$("ul li:eq(1)").appendTo("ul"); //remove方法还可以通过传递参数来选择性地删除元素 //$("ul li").remove("li[title!=菠萝]"); /** * 4.2.detach()方法 * detach()方法和remove()方法一样，也是从DOM中去掉所有匹配的元素。 * 但需要注意的是：这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。 * 与remove()不同的是，所有的绑定事件、附加的数据等都会保留下来 * */ // $("ul li").click(function(){ // alert($(this).html); // }) // var $li = $("ul li:eq(1)").detach(); // $li.appendTo("ul");//重新追加此元素，发现它之前绑定的事件还在，如果使用remove方法删除元素的话，那么它之前绑定的事件将失效 /** * 4.3.empty()方法 * 严格来讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点 * */ //$("ul li:eq(1)").empty(); /** * 5.复制节点 * */ // $("ul li").click(function() { // $(this).clone().appendTo("ul");//复制当前单击的节点，并将它追加到<ul>元素中 // }) //上述被复制的元素并不具备任何行为，如果新元素也需要复制的功能，则代码如下: // $("ul li").click(function() { // $(this).clone(true).appendTo("ul");//复制当前单击的节点，并将它追加到<ul>元素中 // }) //在clone()方法中传递了一个参数true，它的含义是复制元素的同时复制元素中所绑定的事件 /** * 6.替换节点 * 如果要替换某个节点，jQuery提供了相应的方法，即replaceWith和replaceAll * */ /** * 6.1.replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或DOM元素 * */ //$("p").replaceWith("<strong>你最不喜欢的水果是？</strong>"); /** * 6.2.replaceAll()方法与replaceWith()方法的作用相同，只是颠倒了replaceWith()操作 * */ //$("<strong>你最不喜欢的水果是？</strong>").replaceAll("p"); /** * 7.包裹节点 * **/ /** * 7.1.wrap()方法：将某个节点用其他标记包裹起来 * */ //$("p").wrap("<b></b>");//得到的结果是:<b><p title="选择你最喜欢的水果">你最喜欢的水果是?</p></b> /** * 7.2.wrapAll()方法会将所有匹配的元素用同一个元素来包裹。 * 它不同于wrap()方法，wrap()方法是将所有匹配的元素进行单独的包裹 * */ //$("ul li").wrapAll("<b></b>");//在<ul>和<li>之间增加<b>,将所有的<li>包裹在<b></b>中 /** * 7.3.wrapInner()方法将每一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来 * */ //$("p").wrapInner("<b></b>");//得到的结果是:<p title="选择你最喜欢的水果"><b>你最喜欢的水果是?</b></p> /** * 8.属性操作 * 在jQuery中，用attr()方法来获取和设置元素属性 * removeAttr()方法来删除元素属性 * */ /** * 8.1.获取属性和设置属性 * */ //获取<p>元素的属性title，只需要给attr()方法传递一个参数，即属性名称 // var p_title = $("p").attr("title"); // alert(p_title); //如果要设置<p>元素的属性title的值，也可以使用同一个方法，不同的是，需要传递两个参数，即属性名和对应的值 // $("p").attr("title", "new title"); // var p_newTitle = $("p").attr("title"); // alert(p_newTitle); //如果需要一次为同一个元素设置多个属性 //$("p").attr({"title": "new title", "name": "new name"}); /** * 8.2.删除属性 * */ //删除<p>元素的title属性 //$("p").removeAttr("title"); /** * 9.样式操作 * */ /** * 9.1.获取样式和设置样式 * */ //$("p").attr("class", "high"); /** * 9.2.追加样式--addClass * * 关于追加样式，CSS中有以下两条规定 * 1.如果给一个元素添加了多个class值，那么就相当于合并了它们的样式 * 2.如果有不同的class设定了同一个样式属性。则后者覆盖前者 * */ //$("p").addClass("another"); /** * attr()和addClass()的区别 * 方法 addClass() attr() * 用途 追加样式 设置样式 * 对同一个网页元素操作 <p>test</p> <p>test</p> * 第1次使用方法 $("p").addClass("high"); $("p").attr("high"); * 第1次结果 <p class="high">test</p> <p class="high">test</p> * 再次使用方法 $("p").addClass("another"); $("p").attr("another"); * 最终结果 <p class="high another">test</p> <p class="another">test</p> * * */ /** * 9.3.移除样式 * removeClass()的作用是从匹配的元素中删除全部或者指定的class * */ //$("p").addClass("high another").removeClass("high");//移除单个class //$("p").addClass("high another").removeClass("high another");//移除多个class /** * 9.4.切换样式 * */ // $("input").click(function() { // $("p").toggleClass("high"); // }); /** * 9.5.判断是否含有某个样式 * hasClass()可以用来判断元素中是否含有某个class,如果有，则返回true，否则返回false. * 这个方法是为了增强代码可读性而产生的。在jQuery内部实际上是调用了is()方法来完成这个功能的。 * */ //alert($("p").hasClass("high"));//该代码等同于alert($("p").is("high")); /** * 10.设置和获取HTML、文本和值 * */ /** * 10.1.html()方法 * 此方法类似于JavaScript中的innerHTML属性，可以用来读取或者设置某个元素中的内容 * */ //为了清楚的展示效果，先给<p>元素增加元素 // $("p").wrapInner("<b></b>"); // alert($("p").html()); //如果要设置某元素的HTML代码，也可以使用该方法，不过需要为它传递一个参数 //$("p").html("<stong>你最喜欢的水果是？</stong>") /** * 10.2.text()方法 * 此方法类似于JavaScript中的innerText属性，可以用来读取或者设置某个元素中的文本属性 * */ // $("p").wrapInner("<b></b>"); // alert($("p").text()); //和html()方法一样，如果需要对某元素设置文本内容，那么也需要设置一个参数 //$("p").text("你最不喜欢的水果是？"); /** * 10.3.val()方法 * 此方法类似JavaScript中的value属性,可以用来设置和获取元素的值。 * 无论元素是文本框，下拉列表还是单选框，它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值得数组 * */ // //获得焦点 // $("#address").focus(function() { // var txt_value = $(this).val();//获取地址文本框的值 // if(txt_value == "请输入邮箱地址") {//此句还可以是：if(txt_value == this.defaultValue) // $(this).val("");//清空地址文本框的值 // } // }); // //失去焦点 // $("#address").blur(function() { // var txt_value = $(this).val(); // if(txt_value == "") { // $(this).val("请输入邮箱地址");//此句还可以是：$(this).val(this.defaultValue); // } // }); // //获得焦点 // $("#password").focus(function() { // var txt_value = $(this).val();//获取地址文本框的值 // if(txt_value == "请输入邮箱密码") {//此句还可以是：if(txt_value == this.defaultValue) // $(this).val("");//清空地址文本框的值 // } // }); // //失去焦点 // $("#password").blur(function() { // var txt_value = $(this).val(); // if(txt_value == "") { // $(this).val("请输入邮箱密码");//此句还可以是：$(this).val(this.defaultValue); // } // }); //val()方法的另外一个用处是：它能使select(下拉选择框)、checkbox(多选框)和radio(单选框)相应的选项被选中，在表单操作中经常会用到 //设置单选下拉框选中 //$("#single").val("选择2号"); //设置下拉多选框选中 //$("#multiple").val(["选择2号", "选择3号"]); //设置多选框选中 //$(":checkbox").val(["check2", "check3"]); //设置单选框选中 //$(":radio").val(["radio2"]); /** * 11.遍历节点 * **/ /** * 11.1.children()方法 * 该方法用于取得匹配元素的子元素集合。 * 注意：children()方法只考虑子元素而不考虑其他后代元素 * */ // var $body = $("body").children(); // var $p = $("p").children(); // var $ul = $("ul").children(); // alert("<p>包括" + $p.length + "个子元素, " + "<ul>包括" + $ul.length + "个子元素"); /** * 11.2.next()方法 * 该方法用于取得匹配元素后面紧邻的同辈元素 * */ // var $p_next = $("p").next(); // alert($p_next.html()); /** * 11.3.prev()方法 * 该方法用于取得匹配元素前面紧邻的同辈元素 * */ // var $ul_prev = $("ul").prev(); // alert($ul_prev.html()); /** * 11.4.siblings()方法 * 该方法用于取得匹配元素前后所有的同辈元素 * */ //var $li = $("ul li:first").siblings();//$li包括<li title="橘子">橘子</li><li title="菠萝">菠萝</li> /** * 11.5.closest()方法 * 该方法用于取得最近的匹配元素。 * 首先检查当前元素是否匹配，如果匹配则直接返回元素本身。 * 如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素。如果什么都没找到，则返回一个空的jQuery对象 * */ //给点击的目标最近的li元素添加颜色 // $(document).bind("click", function(e) { // $(e.target).closest("li").css("color", "red"); // }) /** * 11.6.parent(), parents()与closest()的区别 * * parent() 获得集合中每个匹配元素的父级元素 * parents() 获得集合中每个匹配元素的祖先元素 * closest() 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素 * */ /** * 12.CSS-DOM操作 * */ //直接利用css()方法获取元素的样式属性 //alert($("p").css("color")); //直接利用css()方法设置某个元素的单个样式 //$("p").css("color", "red"); //直接利用css()方法同时设置多个样式属性 //$("p").css({"font-size":"30px", "backgroundColor":"#888888"}); /** * 注意： * 1.如果值是数字，将会自动转化为像素值 * 2.在css()方法中，如果属性中带有"-"符号，例如font-size和background-color属性，如果在设置这些属性的值时候不带引号，那么就要采用驼峰式写法。 * 如果带上了引号，既可以写成"font-size"，也可以写成"fontSize". * 建议写法：加上引号 * */ //设置透明度 //$("p").css("opacity", "0.5"); //获取height //alert($("p").css("height"));//或alert($("p").height()); //height()方法也能用来设置元素的高度，如果传递的值是一个数字，则默认单位为px，如果需要其他单位(如em)，则必须传递一个字符串 //$("p").height(30); //$("p").height("20em"); /** * 注意： * 1.在jQuery1.2版本以后的height()方法可以用来获取window和document的高度 * 2.两者的区别是：css()方法获取的高度值与样式的设置有关，可能会得到"auto"。也可能得到"10px"之类的字符串； * 而height()方法获取的高度值则是元素在页面中实际的高度，与样式设置无关，并且不带单位 * */ //取得宽度 //alert($("p").width()); //设置元素的宽度 //$("p").width("400px"); /** * 在CSS-DOM中，关于元素定位有以下几个经常使用的方法 * * */ /** * 1.offset()方法 * 它的作用是获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效 * */ // var offset = $("p").offset(); // alert("左偏移：" + offset.left + ", 上偏移：" + offset.top); /** * 2.position()方法 * 它的作用是获取元素相对于最近的一个position样式属性设置为relative或absolute的祖父节点的相对偏移。 * 与offset()一样，它返回的对象也包括两个属性，即top和left * */ // var position = $("p").position(); // alert("左偏移：" + position.left + ", 上偏移：" + position.top); /** * 3.scrollTop()方法和scrollLeft()方法 * 这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。 * */ //alert("距顶端的距离" + $("p").scrollTop() + ", 距左侧的距离" + $("p").scrollLeft()); //另外，可以为这两个方法指定一个参数，控制元素的滚动条滚动到指定的位置。 //如：控制元素内的滚动条滚动到距顶端300和距左侧300的位置 //$("textarea").scrollTop(300).scrollLeft(300); </script> </html>