jQuery基础二DOM操作

时间：2022-09-16 22:49:11

DOM：Document Object Model的缩写，中文是文档对象模型，根据W3C DOM规范(htttp://www.w3.org/DOM ),它是一种与浏览器、平台、语言无关的接口，该接口可以轻松的访问页面中所有的标准组件。DOM解决了Netscape的JavaScript和Microsoft 的JavaScript之间的冲突，给予了web设计师和开发者一套标准的方法，让他们能够轻松获取和操作网页中的数据，脚本和表现层对象。

DOM操作的分类

三大类：DOM Core；HTML-DOM；CSS-DOM；
DOM Core
DOM Core 并不专属于JavaScript，任何一种支持DOM的程序语言设计都可以使用它。它的作用并不仅仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档(XML)。
javaScript中的getElementById(),getElementByTagName(),getAttribute()和getAttribute(),等方法都是DOM Core的组成部分。
HTML-DOM
在使用JavaScript和DOM 为HTML文件编写脚本时，有许多专属于HTML-DOM的属性。HTML-DOM的出现甚至比DOM Core 还要早，他提供了一些更简明的记号来描述各种HTML元素的属性。
CSS-DOM
操作CSS样式的专属，在JavaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性。(element.style.arrt=”value”)

DOM操作的内容

1.查找节点(两类)
2.创建节点(三类)
3.插入节点or移动节点(两大类四小类八种方法)
4.删除节点(两类)
5.清空节点(一个方法)
6.复制节点(一个方法)
7.替换节点(两个方法)
8.包裹节点(三个方法)
9.属性操作(两类)
10.样式操作(四类)
11.设置/获取HTML文本和值(三个方法)
12.遍历节点(五个方法)
13.CSS-DOM操作(五个方法)

如果能够根据提示想出个大概到此就可以结束了，请耐性的记忆，加油！

tip1：JQuery1.6版本新增属性操作 prop() 和 removeprop();
tip2：JQuery中很多方法都是同一个函数实现获取getter和setter的，arrt(),html(),height(),width(),val(),css()等
tip3：遍历节点的其他方法：find(),filter(),nextAll(),prevAll()等。
tip4：遍历节点的方法都有一个共同点：都可以使用JQuery表达式作为参数来筛选元素
tip5：val()方法的使用：1获取，设置元素的值；2：使select，checkbox,radio相应的选项被选中，常用于表单操作。
tip6：css设置透明度方式:$(“p”).css(“opacity”,”0.5”);
tip7：css(“height”)与height()的区别：css方法获取的高度值与样式有关，可能为auto，或者带单位的数字，height()获取的是元素在页面中的实际高度，与样式无关，不带单位
tip8：parent()、parents()、closest() 之间的区别
parent()：获取集合中每个匹配元素的父级元素，返回一个元素节点
parents：获得集合中每个匹配元素的祖先元素，找到第一个父节点并没有停止，而是继续查找，返回多个父节点。
closest()：从元素本身开始，逐级向上级元素匹配，并返回最先匹配到的祖先元素，只返回匹配的第一个元素节点。

——————————————-华丽的分隔符————————————————–

DOM操作详解

代码通用此HTML
<!--HTML代码-->
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li title='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>

1.查找节点
查找元素节点：利用JQuery选择器进行查找元素
查找属性节点：利用attr()方法获取各个属性值

2.创建节点
创建元素节点 ，创建文本节点，创建属性节点

3.插入节点
两大类:内部追加和同辈追加
四小类: 内部追加，内部前置，同辈追加，同辈前置
八个方法:append() 和appendTo()；prepend()和prependTo()；after()和insertAfter()；before()和insertBefore() 

    var $li_1 = $("<li title='香蕉'>香蕉</li>");    //  创建第一个<li>元素
    var $li_2 = $("<li title='雪梨'>雪梨</li>");    //  创建第二个<li>元素
    var $li_3 = $("<li title='其它'>其它</li>");    //  创建第三个<li>元素

    var $parent = $("ul");                 // 获取<ul>节点，即<li>的父节点
    var $two_li = $("ul li:eq(1)");       //  获取<ul>节点中第二个<li>元素节点

$parent.append($li_1);      //  append方法将创建的第一个<li>元素添加到父元素的最后面

$parent.prepend($li_2);      //  prepend方法将创建的第二个<li>元素添加到父元素里的最前面

$li_3.insertAfter($two_li);   //  insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后

4.删除节点
remove()：可以传参，用于根据JQ表达式来筛选元素，后代同时删除，数据不被保存，有返回对象
detach()：”去掉”所有匹配元素，绑定的事件、数据会被保留，有返回对象

     $("ul li").remove("li[title!=菠萝]");  //把<li>元素中属性title不等于"菠萝"的<li>元素删除 

     var $li = $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。
$li.appendTo("ul");                     // 把刚才删除的又重新添加到<ul>元素里

    var $li = $("ul li:eq(1)").detach(); // 获取第二个<li>元素节点后，将它从网页中删除。
$li.appendTo("ul");

5.清空节点
empty()：清空匹配元素的所有后代节点，不清空本身

    $("ul li:eq(1)").empty(); // 找到第二个<li>元素节点后，清空此元素里的内容

6.复制节点
clone()：可以传参(true/false) true代表复制节点时，复制绑定的事件。

    $("ul li").click(function(){
             $(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素
              $(this).clone(true).appendTo("ul"); // 注意参数true 可以复制自己
         })

7.替换节点
replace()和replaceAll() 替换节点时，事件会消失，需要替换后进行重新绑定。

    $(function(){
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>"); 
// 同样的实现： $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p"); 
      });

8.包裹节点
warp() ：用于在文档中需要插入额外的结构化标记
warpAll()：将所有匹配到的元素用同一个元素包裹，含有其他元素时，会将此元素放置在包裹元素之后
warpInner()：匹配元素的子内容，用其他结构化标记包裹

      $("p").wrap("<b></b>");//用<b>元素把<p>元素包裹起来  换不同的方法，在浏览器F12看效果

9.属性操作
获取属性和设置属性：att() 传递参数进行获取和设置
删除属性：removeAttr() 传递属性名

        $("p").attr("title","选择你最喜欢的水果.");   //设置<p>元素的属性'title'
$("p").attr({"title":"test","name":"test"}); //多属性设置

        alert( $("p").attr("title") );         //获取<p>元素的属性'title'

$("p").removeAttr("title");           //删除<p>元素的属性'title'

10.样式操作
在html中，样式一般利用属性class引入。
获取样式和设置样式：addClass() 和att()     追加样式类和替换样式类
移除样式：removeClass()     带参数移除指定的类
切换样式：toggleClass()     带参数
判断某个样式是否存在：hasClass()     带参 有返回值，

$("p").attr("class")   //获取样式的名称
$("p").attr("class","high");       //替换样式为high的样式类
$("p").addClass("another");        //在原样式上追加新的样式类，
$("p").removeClass();          //移除全部样式类
$("p").removeClass("high");        //移除指定样式类
$("p").toggleClass("another"); //在原样式和此样式切换
$("p").hasClass("another");        //判断元素是否含有某样式
$("p").is(".another");         //判断元素是否含有某样式

11.设置/获取HTML文本和值
html()方法：innerHTML属性，读取设置元素HTML内容
text()方法：innerText属性，读取设置文本内容
val()方法：value属性，操作含有value属性的元素[文本框，下拉列表，单选框，元素多选] 返回数组类型

     $("p").html();     //不带参数为获取对应的值
$("p").text();
$("input").val();
$("p").html("<strong>你最喜欢的水果是?</strong>");   //带参数是设置对应的值
$("p").text("你最喜欢的水果是?");
$("input").val("我被改变了");

12.遍历节点
children()：匹配元素的子元素集合，不考虑其他后代
next()：匹配元素后面紧邻的同辈元素
prev()：匹配元素前面紧邻的同辈元素
siblings()：匹配元素前后所有的同辈元素
closest()：向上匹配最近的元素，包括自己，没有查询到时，返回JQuery空对象。

var $ul = $("ul").children();    // ul的子元素的集合

$p1 = $("p").next();     //  紧邻<p>元素后的同辈元素

$ul = $("ul").prev();                // 紧邻<ul>元素前的同辈元素

$p2 = $("p").siblings();         //  紧邻<p>元素的所有同辈元素

$(document).bind("click", function (e) {
$(e.target).closest("li").css("color","red"); //向上匹配最近的li元素

13.CSS-DOM操作
操作元素样式：css()方法
操作元素定位：offset()：获取元素在当前视窗的相对偏移量，返回值包括top和left，只对可见元素有效。
position()：获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，返回值同上。
scrollTop()：获取元素的滚动条距顶端的距离，可以指定参数，控制元素的滚动条滚动到指定的位置。
scrollLeft()：获取元素的滚动条距左侧的距离，可以指定参数，控制元素的滚动条滚动到指定的位置。

$("p").css("color")        //获取p元素的color属性值
$("p").css("color","red")    //设置<p>元素的color
 $("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"})   //多样式设置

var offset = $("p").offset();          //获取<p>元素的的左边距和上边距
var left = offset.left;
var top =  offset.top;
    alert("left:"+left+";top:"+top);
标签：

相关文章