jQuery操作DOM

Posted 爽走不解释

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery操作DOM相关的知识，希望对你有一定的参考价值。

我们先来看一下javascript怎么操作DOM元素

    1.根据元素的id
        document.getElementById("id值");
    2.根据元素的类名className
        document.getElementsByClassName(className);
    3.标签名 tagName
        document.getElementsByTagName(tagName);
    4.获取dom元素属性、样式...
        dom元素.attr(属性名，[属性值]);
        dom元素.style.样式名=样式值

这里学习的jQuery框架就是对javascript的封装来操作DOM（document object Model ）
简单来说就是操作DOM的简单化

DOM操作分为三类

  • DOM Core：任何一种支持DOM的编程语言都可以使用getElementById()
  • html-DOM：用于处理HTML文档，如document.forms
  • CSS-DOM：用于操作CSS，如element.style.color=“green”

注意一下：JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持

一、样式操作

1、设置样式

语法：
css(name,value) ; 【设置单个属性】
css(name:value, name:value,name:value…) ; 【同时设置多个属性】

代码示例：

$(this).css("border","5px solid #f5f5f5");
$(this).css("border":"5px solid #f5f5f5","opacity":"0.5");

2、追加样式

语法：
$(selector).addClass(class);【追加单个】
$(selector).addClass(class1 class2 … classN);【追加多个】

代码示例：

//单个
.text padding:10px;
//多个
.content background-color:#FFFF00; 
.border border:1px dashed #333; 
$("h2").mouseover(function()  $("p").addClass("content border"); );

3、移除样式

语法：
$(selector).removeClass(“class”) ;【移除单个】
$(selector).removeClass("class1 class2 … classN ") ;【移除多个】

代码示例：

多个
.text padding:10px;
.content background-color:#FFFF00; 
$("h2").mouseout(function() $("p").removeClass("text content"););

4、切换样式

语法：
toggleClass()：
模拟了addClass()与removeClass()实现样式切换的过程

代码示例：

$("h2").click(function()    $("p").toggleClass("content  border");   );

5、判断是否含指定的样式

hasClass( )方法来判断是否包含指定的样式

语法：$(selector). hasClass(class);

代码示例：

$("h2").mouseover(function() 
      if(!$("p").hasClass("content ")) $("p").addClass("content ");  );
        【鼠标移入，判断p元素是否含有content，不含有就添加content】
$("h2").mouseout(function() 
      if($("p").hasClass("content "))  $("p").removeClass("content ");  );
        【鼠标移出，判断p元素是否含有content，含有就移除content】

二、节点操作

1、创建节点元素

$(selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点
$(html)：使用HTML字符串创建jQuery节点

代码示例：

var $newNode=$("<li></li>");

var $newNode1=$("<li>你是不是一个帅哥？</li>");

var $newNode2=$("<li title='last'>是的！</li>");

2、元素内部插入子节点

语法功能
append(content) ( A ) . a p p e n d ( B ) 表 示 将 B 追 加 到 A 中 − 如 ： (A).append(B) 表示将B追加到A中 -如： (A).append(B)表示将B追加到A中−如：(“ul”).append($newNode1);
appendTo(content) ( A ) . a p p e n d T o ( B ) 表 示 把 A 追 加 到 B 中 − 如 ： (A).appendTo(B) 表示把A追加到B中-如： (A).appendTo(B)表示把A追加到B中−如：newNode1.appendTo(“ul”);
prepend(content) ( A ) . p r e p e n d ( B ) 表 示 将 B 前 置 插 入 到 A 中 − 如 ： (A). prepend (B) 表示将B前置插入到A中-如： (A).prepend(B)表示将B前置插入到A中−如：(“ul”). prepend ($newNode1);
prependTo(content) ( A ) . p r e p e n d T o ( B ) 表 示 将 A 前 置 插 入 到 B 中 − 如 ： (A). prependTo (B) 表示将A前置插入到B中-如： (A).prependTo(B)表示将A前置插入到B中−如：newNode1. prependTo (“ul”);

3、元素外部插入同辈节点

语法功能
after(content) ( A ) . a f t e r ( B ) 表 示 将 B 插 入 到 A 之 后 − 如 ： (A).after (B) 表示将B插入到A之后-如： (A).after(B)表示将B插入到A之后−如：(“ul”).after($newNode1);
insertAfter(content) ( A ) . i n s e r t A f t e r ( B ) 表 示 将 A 插 入 到 B 之 后 − 如 ： (A). insertAfter (B) 表示将A插入到B之后-如： (A).insertAfter(B)表示将A插入到B之后−如：newNode1.insertAfter(“ul”);
before(content) ( A ) . b e f o r e ( B ) 表 示 将 B 插 入 至 A 之 前 − 如 ： (A). before (B) 表示将B插入至A之前-如： (A).before(B)表示将B插入至A之前−如：(“ul”).before($newNode1);
insertBefore(content) ( A ) . i n s e r t B e f o r e ( B ) 表 示 将 A 插 入 到 B 之 前 − 如 ： (A). insertBefore (B) 表示将A插入到B之前-如： (A).insertBefore(B)表示将A插入到B之前−如：newNode1.insertBefore(“ul”);

4、删除节点

  • remove( )：删除整个节点：$(selector).remove([expr]);
    注意：删除之后不保留原有位置
  • empty( )：清空节点内容：$(selector).empty( );
    注意：只删除内容，但是保留原有位置
  • cdetach()：删除整个节点，保留元素的绑定事件、附加的数据节点属性操作

代码示例：

<body>
    <h2>通过empty移除元素</h2>
    <div id="test">
        <p>p元素1</p>
        <p>p元素2</p>
    </div>
    <button>点击通过jQuery的empty移除元素</button>
    <script type="text/javascript">
    $("button").on('click', function() 
        //通过empty移除了当前div元素下的所有p元素
        //但是本身id=test的div元素没有被删除
        $("#test").empty()
    )
    </script>
</body>
========================================================================
<script type="text/javascript">
    $("button:first").on('click', function() 
        //删除整个 class=test1的div节点
        $(".test1").remove()
    )
 
    $("button:last").on('click', function() 
        //找到所有p元素中，包含了3的元素
        //这个也是一个过滤器的处理
        $("p").remove(":contains('3')")
    )
    </script>

5、替换节点

replaceWith( )和replaceAll( )
用于替换某个节点：

代码示例：

<script type="text/javascript">
 
    $(".bt1").on('click', function() 
        //找到内容为第二段的p元素
        //通过replaceWith删除并替换这个节点
        $(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>')
    )
    </script>
    <script type="text/javascript">
    //找到内容为第六段的p元素
    //通过replaceAll删除并替换这个节点
    $(".bt2").on('click', function() 
        $('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last');
    )
    </script>
注意:replaceWith( )和replaceAll( )两者的关系类似于append( )和appendTo( )

6、复制节点（克隆）

clone()方法比较简单就是克隆节点，但是需要注意，如果节点有事件或者数据之类的其他处理，我们需要通过clone(ture)传递一个布尔值ture用来指定，这样不仅仅只是克隆单纯的节点结构，还要把附带的事件与数据给一并克隆了

代码示例：

<script type="text/javascript">
        //只克隆节点
    	//不克隆事件
	    $(".aaron1").on('click', function() 
	        $(".left").append( $(this).clone().css('color','red') )
	    )
    </script>
 
    <script type="text/javascript">
    	//克隆节点
    	//克隆事件
	    $(".aaron2").on('click', function() 
            console.log(1)
	        $(".left").append( $(this).clone(true).css('color','blue') )
	    )
    </script>

三、内容操作

语法格式参数说明功能描述
html( )无参数用于获取第一个匹配元素的HTML内容或文本内容
html(content)content为元素的HTML内容用于设置所有匹配元素的HTML内容或文本内容
text( )无参数用于获取所有匹配元素的文本内容
text (content)content为元素的文本内容用于设置所有匹配元素的文本内容

1、HTML代码操作

html()可以对HTML代码进行操作，类似于JS中的innerHTML

语法：
$("div.left").html();   【获取元素中的html代码】
$("div.left").html("<div class='content'>…</div>");   【设置元素中的html代码】

代码示例：

$("div.left").html("");
【清空需要添加引号，如果html方法括号中不添加任何内容，是获取html代码】

2、标签内容操作

text()可以获取或设置元素的文本内容

语法：
$("div.left").text();  【获取元素中的文本内容】
$("div.left").text("<div class='content'>…</div>");   【设置元素中的文本内容】

代码示例：

$("div.left"). text ("");
【清空需要添加引号，如果text方法括号中不添加任何内容，是获取文本内容】

四、属性操作

1、
attr()和用来获取与设置元素属性
val()可以获取或设置元素的value属性值

语法：

$(selector).attr([name]) ;【获取属性值】
$(selector).attr([name1:value1]…[nameN:valueN]) ;【设置多个属性的值】
$(this).val();【获取元素的value属性值】
$(this).val(value);【设置元素的value属性值】

attr 和 val 都可以取值和赋值， 但俩者使用起来的差别还是很大的；

这里个人总结了一些区别，区别如下：

  • val 可以获取手动输入的值，attr 不可以
  • 用 val 赋值, val 可以获取值 , attr 不可以
  • 用 attr 赋值, val 和 attr 都可以获取值, 如果手动改变输入的值，val 可以获取最新的值，attr 读到的还是 attr一开始赋的值

除此之外，使用过程中attr有一点Bug，让我不能用js给输入框赋值，具体原因不知道，全部都改用val就没问题了。

2、删除元素属性

emoveAttr()用来删除元素的属性

语法：
$(selector).removeAttr(name) ;

代码示例：

$(".contain img").removeAttr(“alt”); 【删除元素的alt属性】

五、节点遍历

1、遍历子元素

children( )方法可以用来获取元素的所有子元素

语法：
$(selector).children([expr]);

代码示例：

<script type="text/javascript">
    //找到所有class=div的元素节点，然后找到其对应的子元素，并且加上一个红色边框
    $("#bt1").click(function() 
        $(".div").children().css('border','3px solid red')
    )
    </script>
 
    <script type="text/javascript">
    $("#bt2").click(function() 
        //找到所有class=div的元素
        //找到其对应的子元素ul，然后筛选出第一个，给边宽加上颜色
        $('.div').children(':eq(0)').css('border', '3px solid blue')
    )
    </script>

2、遍历同辈元素

jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素

语法功能
next([expr])用于获取紧邻匹配元素之后的元素
prev([expr])用于获取紧邻匹配元素之前的元素
slibings([expr])用于获取位于匹配元素前面和后面的所有同辈元素

代码示例：

$("li:eq(1)"). next ().addClass("orange");  【遍历获得同辈节点】

$("li:eq(1)"). prev ().addClass("orange");

$("li:eq(1)"). slibings ().addClass("orange");

3、遍历前辈元素

语法:
parent()：获取元素的父级元素
parents()：元素元素的祖先元素

代码示例：

$("li:eq(1)").parent().addClass("orange");   【获取前辈节点】

$("li:eq(1)").parents().addClass("orange");

六. CSS-DOM操作

除css()外，还有获取和设置元素高度、宽度等的样式操作方法

具体如下:

语法功能
css()设置或返回匹配元素的样式属性
height([value])设置或返回匹配元素的高度
width([value])设置或返回匹配元素的宽度
offset([value])返回以像素为单位的top和left坐标。仅对可见元素有效
offsetParent( )返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素
position( )返回第一个匹配元素相对于父元素的位置
scrollLeft([position])参数可选。设置或返回匹配元素相对滚动条左侧的偏移
scrollTop([position])参数可选。设置或返回匹配元素相对滚动条顶

更多可以参考w3c，菜鸟等文档

以上是关于jQuery操作DOM的主要内容，如果未能解决你的问题，请参考以下文章

jQuery 遍历 – 祖先

遍历祖先同胞后代

jquery遍历节点 children（），next（），prev（），siblings（）closest()

使用jQuery对象：DOM属性CSS尺寸遍历DOM操作事件特效

求教：jquery如何操作隐藏的DOM元素

jQuery获取所有父级元素及同级元素及子元素的方法