6.jQuery——节点增加删除和样式的改变

简介：本小节介绍jQuery中的DOM操作

---

1.简介

• 样式操作
• 内容及Value属性操作
• 节点操作
• 节点属性操作
• 节点遍历
• CSS-DOM操作

2.DOM对象和jQuery对象的转换

一、简介

DOM对象：使用JavaScript中的DOM API操作获得的元素对象

var div=document.getElementById("id");

jQuery对象：通过jQuery包装DOM对象后产生的对象

var $div=$("div")         //标签选择器

二、DOM对象和jQuery对象相互转换

1.jQuery转换成DOM对象的方法一

var $div=$("div");
var div=$div[0];
alert(div.innerHTML);

2.jQuery对象转成DOM对象的方法二

var $div=$("div");
var div=$div.get(0);
alert(div.innerHTML);

3.DOM对象转换成jQuery对象的方法

var div=document.getElementById("id");
var $div=$(div);

3.Dom样式操作

一、样式的设置

• 格式一：css("background","#bbffaa");      单个样式设置
• 格式二：.css({"border":"5px solid #fff","opacity":"1"}); 多个样式设置

程序代码如下

 <script type="text/javascript">
       $(function(){
       	//标签选择器
			$("dl").mouseover(function(){
				$(this).css({"border":"5px solid #e8dfc4","opacity":"0.5","cursor":"pointer"});
			});
			$("dl").mouseout(function(){
				$(this).css({"border":"5px solid #fff","opacity":"1"});
			})
	   });
    </script>

二、样式的移除和追加

简介：jQuery提供了addClass和removeClass实现了对样式的追加和删除

 <style type="text/css">
        .style1
        {
            font-size: 14px;
            color: #03F;
        }
        .style2
        {
            background-color: #FFFF00;
            padding: 10px;
        }
        .style3
        {
            border: 1px dashed #333;
        }
    </style>

addClass的使用方式

$("h2").click(function(){
                $(this).addClass("style2 style3");
          });

removeClass的使用方式

$("h2").mouseout(function(){
                $(this).removeClass("style3 style2");
            });

 

三、样式切换

定义：jQuery提供了toggleClass方法进行样式的切换（如果存在该样式则移除、不存在则追加）

$(this).toggleClass("current");

 

四、操作元素内容

定义：jQuery提供了html()用于获得元素的html内容、提供text用于获得元素的文本内容、两者的区别

html进行设置的时候能够识别标签、text进行设置的时候不能够识别标签。

html获取值和设置值使用如下：

 $(function(){
                //选取所有class=left的div元素
                var html_txt=$("div.left").html();             //获取元素的html内容
                alert(html_txt);
                $("input[type=button]").click(function(){
                    $("div.left").html("<div class='content'><h2>学习jQuery真好</h2></div>");  //设置元素的html内容
                });
            });

text获取值和设置值使用如下：

$(function(){
                //选取所有class=left的div元素
                var html_txt=$("div.left").text();         //获取元素的文本
                alert(html_txt);
                $("input[type=button]").click(function(){
                    $("div.left").text("<div class='content'><h2>学习jQuery真好</h2></div>");      //设置元素的文本
                });

---

五.Value值的操作

定义：jQuery提供了val()用于获得和设置元素的Value内容、一般应用于表单中的文本框、

使用如下输入栏获得焦点时自动清除值、失去焦点自动设置值

$(function(){
                $("#searchtxt").focus(function(){
                    var txt_valur=$(this).val();//得到当前文本框的值
                    if(txt_valur=="空调"){
                        $(this).val("");
                    }
                });
                $("#searchtxt").blur(function(){
                    var txt_valur=$(this).val();//得到当前文本框的值
                    if(txt_valur==""){
                        $(this).val("空调");
                    }});
            });

4.DOM节点的操作

一、创建节点的方式

首先介绍一种通过jQuery简单创建节点的方式

//创建节点
				var $newNode=$("<li>这个是创建的节点</li>");

二、追加子节点jQuery提供了两种方式

 

   $("ul").append($newNode);        //ul节点中追加$newNode节点   
   $newNode.appendTo("ul");       //ul节点中追加$newNode节点   加载ul的子节点的最后一个

效果如下

                                                  
   $("ul").preappend($newNode);       //在ul节点中追加$newNode节点（追加在第一个）

   $newNode.preappendTo("ul")         //在ul节点中追加$newNode节点（追加在第一个）

                                                  

三、追加同级节点

 $("ul").after($newNode)                //在ul节点之后添加$newNode节点

$newNode.insertAfter("ul")             //在ul节点之后添加$newNode节点

效果如下

                                                     

$("ul").before($newNode)            //在ul节点之前添加$newNode节点

$newNode.insertBefore("ul")        //在ul节点之前添加$newNode节点

效果如下

                                                        

四、替换节点

  $("ul li:eq(1)").replaceWith($newNode);
  $($newNode).replaceAll("ul li:eq(1)");                          //两个效果一样

                                                         

五、复制节点

$("ul li:eq(1)").clone(true).appendTo("ul");  //复制节点:clone(true)里面的true表示复制元素的同事复制元素所绑定的事件

效果如下

                                                             

六、清除节点

$("ul li:eq(1)").remove();

$("ul li:eq(1)").detach();

$("ul li:eq(1)").empty();

 

效果如下

                                                              

七、节点的遍历

1.遍历子节点

var $body=$("body").children();  //获取页面中body的子节点集合、不包括孙节点
 alert($body.length);                     //弹出子节点个数

2.获取同级节点的前一个

$("ul li:eq(1)").next().css("background-color","#F06");

3.获取同级节点的后一个

$("ul li:eq(1)").pre().css("background-color","#F06");

4.获取除了自己所有的同级节点

$("ul li:eq(1)").siblings().css("background-color","#F06");

5获取父辈元素

$("ul li:eq(1)").parent.css("background-color","#F06");

6.获取祖辈元素

$("ul li:eq(1)").parents.css("background-color","#F06");