使用jQuery操作DOM

DOM操作分为三类
1.DOM Core
DOM Core不是Javascript的专属品,任何一种支持DOM的编程语言都可以使用它，它的用途不仅限于处理一种使用标记语言编写出来的文档。
2.HTML-DOM
比DOM Core出现的更早,它提供了一些更加简明的标记来描述各种HTML-DOM的元素属性。
3.CSS-DOM
CSS-DOM 是针对CSS的操作,在JavaScript中,主要作用是获取和设置style对象各种属性。
样式操作
1.直接设置样式值
css(name,value)  //设置单个属性

css({name:value,name:value,name:value....})  //同事设置多个属性

css的参数说明：

2.追加样式和移除样式

addClass(class) //追加样式

示例：

<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("p").addClass("color");
        $("h2").click(function () {
            $("p").toggleClass("get");
        })
    })
</script>

removeClass(class)  //移除样式

3.切换样式

taggleClass()    //可以切换不同元素的类样式

4.判断是否念指定的样式

$(selector).hasClass(class);

示例：

<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
   $(document).ready(function () {
       $("h2").mouseover(function () {
           if(!$("p").hasClass("color")){
               $("p").addClass("color");
           }
       });
       $("h2").mouseout(function () {
           if($("p").hasClass("color")){
               $("p").removeClass("color");
           }
       });
   })
</script>

内容操作

1.html代码操作

html([content])  //可选,规定备选元素的新类容,该参数可以包含HTML标签,无参数时,表示被选元素的文本内容

示例：

<script src="js/jquery-1.12.4.js" ></script>
<script>
     $(document).ready(function(){
         $("h1").click(function () {
             var w = "<ul><li>买了商品后，查不到物流信息怎么办？</li><li>申请退款后，交易退款成功，钱到哪里？</li><li>卖家拒绝退款，怎么办？</li><li>投诉发生的时间和条件是什么？</li><li>如何申请淘宝客服介入？</li></ul>";
             $(".proList").html(w);
         });
         $("span").click(function () {
             $(".proList").html("");
         })       
    });
</script>

2.标签内容操作

text([content])  //可选,规定被选元素的新文本内容。 注释,特殊字符会被编码。无参数时,表示获取元素的被选内容

html()方法和text()方法的区别：

3.属性值操作val([value])   //value,可选。规定被选参数的新内容。无参数时，返回值为第一个被选参数的value属性的值。

示例：

<script  src="js/jquery-1.8.3.min.js" ></script>
<script>
 $(document).ready(function(){
     $("#searchtxt").focus(function () {
            var txt_value=$(this).val();
            if(txt_value=="电风扇"){
                $(this).val("");
            }
        });
        $("#searchtxt").blur(function () {
            var txt_value=$(this).val();
            if(txt_value==""){
                $(this).val("电风扇");
            }
        });
 });
</script>

节点属性操作

1.查找节点

想要对节点进行操作，即增、删、改和复制，首先必须找到要操作的元素。所以，查找的语法示例：$("h1").hide(); 查找h1的元素，并将其隐藏。其实，查找元素，就是通过选择器获取元素。

2.创建节点
$(selector) //选择器
$(element) //Dom元素

$(html)    //html代码

HTML代码创建jQuery对象示例：
    var $newNode1 = $("<li></li>")  //创建空的li元素节点
    var $newNode2 = $("<li>HTML</li>") //创建包含文本的li元素节点
    var $newNode3 = $("<li title="标题">HTML</li>") //创建包含文本与属性的li元素节点

3.插入节点

4.删除节点

$(selector).remove([expr])

5.替换节点
$("ul li:eq(1)").replaceWith($xxx)
6.复制节点

$(selector).clone([includeEvents])

属性操作：

节点遍历：

1.遍历子元素
children()方法。

语法：$(childred).children([expr])

2.遍历同辈元素

3.遍历前辈元素

4.其他遍历方法

each()方法

语法：

$(selector).each(function(index,element));

其中，参数index表示选择器的index位置，element表示当前的元素，当返回值为false时可用于及早停止循环。

end()方法

语法：

.end();

结束当前链条中最近的筛选操作，并将匹配元素集还原为之前的状态。

CSS-DOM操作