JQueryDOM

查找节点

    <!--
        查找元素节点
        通过jQuery选择器，直接可以获取到节点元素。
        例1：查找元素节点p返回p内的文本内容$("p").text();

        查找节点属性
        获取到需要的元素节点后，可以使用attr()方法来获取它的各种属性值。
        attr()方法的参数可以是一个，也可以是两个，当参数为一个时，是要查询的属性名字。
        例2：查找元素节点p的属性返回属性名称对应的属性值$("p").attr("title"),返回p的属性title的值。
        -->

    <script src="../js/jquery-3.1.1.js"></script>
    <script>
        $(function(){
        	$("#btn1").click(function(){
        		//获取p标签的文本内容
        		alert($("p").text());
        		//把橘子改成西瓜
        		$("li:eq(1)").text("西瓜");
        		//把苹果改成梨子
        		$("li:first").html("<h1>梨子</h1>");
        		//html()和text()：可以读取文本节点，也可以修改文本节点
        		//html():支持标签  text():只是支持文本
        	});
        	
        	//attr():如果是一个参数就是查询属性节点值，两个参数就是修改属性节点值
        	$("#btn2").click(function(){
        		//查找p元素节点的title属性值
        	    alert($("p").attr("title"));
        	    //把第一个li的title属性值修改成苹果
        	    $("li:first").attr("title","苹果");
        	    
        	    //修改name属性为name的input元素节点的value值为"我是一个好人"
        	    // $("input[name='name']").attr("value","我是一个好人");
        	    
        	    //注意：如果是直接操作value属性我们可以使用更便捷的方法val()
        	    //val()只是针对于value属性，别的属性还是需要使用attr()
        	    //val():可以获取value属性值，也可以修改value属性值
        	    $("input[name='name']").val("我是一个好人");       	    
        	})       	
        })
    </script>

 

创建节点

     <!--
         1.创建元素节点
         创建元素节点并且把节点作为<ul>元素的子节点添加到DOM节点树上。
         先创建元素点，创建元素节点使用Jquery的工厂函数$()来完成，
         格式如下：$(html),该方法会根据传入的html字符串返回一个DOM对象，
         并将DOM对象包装成一个JQuery对象后返回。创建一个元素节点JQuery代码如下：
         $li1=$("<li></li>")
         代码返回$li1就是一个由DOM对象包装成的JQuery对象。把新建节点添加到DOM树中JQuery代码如下：
         $("ul").append($li1); 
         添加后页面中只能看到<li>元素默认的"·",由于没有为节点添加文本所以只显示默认符号，下面创建文本节点。
         
         2.创建文本节点
         使用JQuery的$()同样能够创建文本节点，创建文本节点的JQuery代码如下：
　　　　  $li2=$("<li>菠萝</li>");
         代码返回$li2就是一个由DOM对象包装成JQuery对象，把新建的文本节点添加到DOM树中JQuery代码如下：
         $("ul").append($li2);

         3.创建属性节点
         $li3=$("<li title='榴莲'>榴莲</li>");　
         代码返回$li3也是一个由DOM对象包装成JQuery对象，把新建的属性节点添加到DOM树中JQuery代码如下：
         $("ul").append($li3);
         -->

插入节点

    <!--
        在jQuery 中还提供了其他几种插入节点的方法：
        1.append() 向每个匹配的元素内部追加内容

        2.appendTo()将所有匹配的元素追加到指定的元素中。
          实际上，使用该方法是颠倒了常规的$(A).append(B）的操作，
          即不是将B 追加到A 中，而是将A 追加到B 中。

        3.prepend() 向每个匹配的元素内部前置内容

        4.prependTo() 将所有匹配的元素前置到指定的元素中。
          实际上，使用该方法是颠倒了常规的 $(A).prepend(B）的操作，
          即不是将B 前置到 A 中，而是将A 前置到B 中

        5.after() 在每个匹配的元素之后插入内容

        6.insertAfter() 将所有匹配的元素插入到指定元素的后面。
          实际上，使用该方法是颠倒了常规的$(A).after(B）的操作，
          即不是将B 插入到A后面，而是将A 插入到B 后面

        7.before() 在每个匹配元素之前插入内容

        8.insertBefore()将所有匹配的元素插入到指定的元素的前面，
          实际上，使用该方法是颠倒了常规的$(A).before(B）的操作，
          即不是将B 插入到A前面，而是将A 插入到B 前面

        -->

删除节点

    <!--
        如果文档中某一个元素多余，那么应将其删除。
        jQuery 提供了三种删除节点的方法，即remove(), detach()和empty()。
        1.remove()方法从DOM 中删除所有匹配的元素，传入的参数用于根据jQuery 表达式来筛选元素。
          当某个节点用remove（）方法删除后，该节点所包含的所有后代节点将同时被删除。
          这个方法的返回值是一个指向己被删除的节点的引用，因此可以在以后再使用这些元素。
        $("ul").remove();

        2.empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。
        -->

修改节点

    <!--
        修改文档中的元素节点可以使用多种方法:复制节点、替换节点、包裹节点。
        1、复制节点$(element).clone()
        复制节点方法能够复制节点元素，并且能够根据参数决定是否复制节点元素的行为。
        例:$("ul li:eq(0)").clone(true);

        2、替换节点$(被替换的元素).repalcewith(创建的节点)、$(创建的节点).repalceAll(被替换的元素)
        replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM 元素。
        replaceAll()方法与replaceWith（）方法的作用相同，只是颠倒了replaceWith（）操作
        3、包裹节点$(element).wrap()、$(element).wrapAll()、$(element).wrapInner()
        包裹节点方法使用其他标记包裹目标元素从而改变元素的显示形式等，并且该操作不会破坏原始文档的词义。
        包裹节点有三种实现形式：wrap();wrapAll();wrapInner();
         (1)wrap()方法如下：$(dstelement).wrap(tag);例：
            $("p").wrap("<b></b>");该示例方法使用b标签包裹所有的p元素每个元素都使用b标签包裹。
         (2)wrapAll()方法如下：$(dstelement).wrapAll(tag);例：
            $("p").wrapAll("<b></b>");访示例方法使用b标签包裹所有的p元素，所有的p元素标签用一个b标签包裹。
         (3)wrapInner()方法如下：$(dstelement).wrapInner(tag);例：
            $("strong").wrapInner("<b></b>");该示例使用b标签包裹每个一strong元素的子元素。
        -->

属性操作

    <!--
        Dom元素的其他操作:属性操作、样式操作、设置和获取HTML,文本和值、遍历节点操作、Css-Dom操作。
        1、属性操作attr()和removeAttr()
         (1)attr()方法能够获取元素属性，也能能够设置元素属性。
           方法如下，当attr(para1)方法有个参数时候用于获得当前元素的para1的属性值，
           当attr(para1,attrValue)有两个参数时候设置当前元素的属性名为para1的属性值为attrValue;例：
           $("p").attr("title");该示例用于获得p元素的title属性值
           $("p").attr("title","你最喜欢的水果");该示例设置p元素的title属性值为"你最喜欢的水果";
           如果一次设置多个属性值可以使用“名/值”对形式，例：
           $("p").attr({"title":"你最喜欢的水果","name":"水果"})。该示例一次设置两个属性值。

         (2) removeAttr()方法用于删除特定的属性，方法是在参数中指定属性名。例：
             $("p").removeAttr("name");该方法就是移除p元素的name属性。
        -->

CSS操作

    <!--
        Dom元素的其他操作:属性操作、样式操作、设置和获取HTML,文本和值、遍历节点操作、Css-Dom操作。
        1、属性操作attr()和removeAttr()
         (1)attr()方法能够获取元素属性，也能能够设置元素属性。
           方法如下，当attr(para1)方法有个参数时候用于获得当前元素的para1的属性值，
           当attr(para1,attrValue)有两个参数时候设置当前元素的属性名为para1的属性值为attrValue;例：
           $("p").attr("title");该示例用于获得p元素的title属性值
           $("p").attr("title","你最喜欢的水果");该示例设置p元素的title属性值为"你最喜欢的水果";
           如果一次设置多个属性值可以使用“名/值”对形式，例：
           $("p").attr({"title":"你最喜欢的水果","name":"水果"})。该示例一次设置两个属性值。

         (2) removeAttr()方法用于删除特定的属性，方法是在参数中指定属性名。例：
             $("p").removeAttr("name");该方法就是移除p元素的name属性。
        -->

设置和获取HTMl、文本和值

    <!--
        1.html()方法获得或设置某个元素的html元素。方法如下:$(selector).html();
          $("p").html();该示例获得元素p的html内容。
      $("p").html("<strong>添加html内容</strong>");
            该示例设置p的html内容为”<strong>添加html内容</strong>“;

         2.text()方法获得或设置某个元素的文本值。方法如下:$(selecotr).text();例：
          $("p").text();该示例获得元素p的text文本内容。
      $("p").text("重新设置的文本内容");该示例设置元素p的text文本为"重新设置的文本内容";
        3.val()方法获得或设置某个元素的值，如果元素值是多选则以数组形式返回，方法如下：$(selector).val();
          例:文本元素 <input type="text" id="userName" value="请输入用户名" />
             $("#userName").val();获得input元素的值。
             $("#userName").val('zhangsan');设置input元素的值为'zhangsan'。
          val()方法的不仅能操作input，最重要的一个用途用于select、checkbox、radio。
          例：在下拉框下的多选赋值应用
            <select id="fruits" multiple="multiple">
             <option>苹果</option>
             <option>香蕉</option>
             <option>西瓜</option>
            </select>
          $("#fruits").val(['苹果','香蕉']);该示例使select中苹果和香蕉两项被选中。
        -->

样式操作

    <!--
        1.设置样式和获取样式
        class 也是节点元素的属性，因此获取class 和设置class 都可以使用attr()方法来完成。

        2.追加样式
        直接使用attr()方法设置class属性，会将原来的class属性替换掉。
        如果在添加新的样式时，还需要保留原有样式，可以使用addClass()方法。
        注意：当一个节点元素包含了多个class样式时，将按照以下方式进行处理：
        (1) 如果给一个元素添加了多个 class 值， 那么就相当于合并了它们的样式。
        (2) 如果有不同的 class 设定了同一样式属性， 则后者覆盖前者。

        3.移除样式
        如果要删除class某个值，可以使用removeClass()方法完成，
        它的作用是从匹配的元素中删除全部或者指定的class。
        不传递参数时，删除所有；给定参数时只删除指定的class。

        4.判断是否含有某个样式
        hasClass()方法可以用来判断元素中是否包含某个class，如果有则返回true，否则返回false。

        -->