笔记14

查找节点和创建节点 
1.查找节点 
1.查找元素节点 
查找元素节点非常简单，用 jQuery 择器即可完成。

  var $li = $('ul li:eq(1)');
  var li_txt = $li.text();
  alert(li_txt);
 
 
1
2
3

2.查找属性节点 
利用选择器查找到需要的元素之后，就可以使用attr()方法来获取它的各种属性值。

var $para = $('p');
    var p_text = $para.attr('title');
    alert(p_text);
 
 
1
2
3

2.创建节点 
1.创建元素节点 
使用 jQuery 的工厂函数$()来完成创建，然后使用append()方法插入文档中。

 var $li_1 = $('<li>1</li>');
    var $li_2 = $('<li>2</li>');
    $('ul').append($li_1);
    $('ul').append($li_2);
 
 
1
2
3
4

2.创建属性节点 
创建属性节点也是直接在创建元素时一起创建。

var $li_1 = $('<li title="香蕉">香蕉</li>');
    var $li_2 = $('<li title="雪梨">雪梨</li>');
    $('ul').append($li_1);
    $('ul').append($li_2);
 
 
1
2
3
4

“插入节点和删除节点 
1.插入节点的方法 
方法 描述 示例 
append() 向每个元素内部追加内容 
appendTo() 将所有匹配的元素追加指定的元素中 
prepend() 向每个匹配的元素内部前置内容 
prependTo() 将所有匹配的元素前置到指定元素中 
after() 在每个匹配的元素之后插入内容 
insertAfter() 将所有匹配的元素插入到指定元素的后面 
before() 在每个匹配的元素之前插入内容 
insertBefore() 将所有匹配的元素插入到指定元素的前面

var $li_1 = $("<li title='香蕉'>香蕉</li>");
    var $li_2 = $("<li title='雪梨'>雪梨</li>");
    var $li_3 = $("<li title='其他'>其他</li>");
 
 
1
2
3

var $parent = $('ul');
    $parent.append($li_1);
    $parent.prepend($li_2);
    var $two_li = $('ul li:eq(1)');
    $li_3.insertAfter($two_li);
 
 
1
2
3
4
5

2.删除节点 
jQuery提供了三种方法删除节点：remove(),detach(),empty()。

1.remove()方法

remove()方法的返回值是被删除节点的引用。

var $li = $('ul li:eq(1)').remove();//删掉第二个
     $li.append('ul');
 
 
1
2

remove()方法还可以通过传递参数来选择性的删除元素。 
$(‘ul li’).remove(‘li[title!=菠萝]’); 
2.detach()方法 
同样是从DOM中去掉所有匹配的元素，但不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。

 $('ul li').click(function(){
        alert($(this).html());
     });
     var $li = $('ul li:eq(1)').detach();
     $li.appendTo('ul');//绑定事件还在
 
 
1
2
3
4
5

3.empty()方法 
严格来讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中所有后代节点。

var $li = $('ul').empty();`
 
 
1

复制节点和替换节点 
1.复制节点 
可以使用clone()方法完成，赋值节点后，被复制得新元素并不具备任何行为。 
在clone()方法中传递一个参数true，复制元素的同时复制元素中所有绑定事件。

$('ul li').click(function(){
        $(this).clone(true).appendTo('ul');
    });
 
 
1
2
3

2.替换节点 
替换节点可以使用replaceWith()和replaceAll()。 
relpaceWith()是将所有匹配的元素都替换成指定的HTML或者DOM元素。

  $('p').replaceWith('<strong>你最不喜欢的水果是？</strong>');
    $('<strong>你最不喜欢的水果是？</strong>').replaceAll('p');
 
 
1
2

包裹节点和属性操作 
1.包裹节点 
可以用wrap()方法将某个节点用其他标记包裹起来。

$('strong').wrap('<b></b>');

 
 
1
2

1.wrapAll()方法 
该方法会将所有匹配的元素用一个元素来包裹。

$('strong').wrapAll('<b></b>');
 
 
1

2.wrapInner()方法

该方法将每一个匹配的子元素（包括文本节点）用其他结构化的标记包裹起来。

$('strong').wrapInner('<b></b>');
 
 
1

2.属性操作 
1.获取属性和设置属性 
在jQuery中，用attr()方法获取和设置元素属性，removeAttr()方法来删除元素属性。 
如果要获取

元素的属性title，那么只需要在attr()方法中传入属性名。

var $para = $("p");
        var p_txt = $para.attr('title');
        console.log(p_txt);
 
 
1
2
3

如果要设置

元素的属性值，也使用同一个方法。

$('p').attr('title','your title');
    //设置多个属性
    $('p').attr({'title':'your title','name':'aaa'});
 
 
1
2
3

2.删除属性

删除属性可以用removeAttr()方法来完成。

$('p').removeAttr('name');
 
 
1

样式操作 
1.获取和设置样式 
我们一般在用 class 属性添加样式，因此可以用attr()方法来完成。

$("p").attr("class")
$("p").attr("class","high");
 
 
1
2

2.追加样式 
jQuery 提供了addClass()方法来追加样式。

$("p").addClass("another");
 
 
1

3.移除样式 
相对应的，使用removeClass()方法来删除 class 的某个值，他的作用是从匹配的的元素中删除全部或指定的 class 。 
//删除所有样式

$("p").removeClass();
 
 
1

//删除指定样式

$("p").removeClass("high");
 
 
1

4.切换样式 
jQuery 提供了toggleClass()方法控制样式上的重复切换。如果类名存在则删除它，如果类名不存在则添加它。

$("p").toggleClass("another");
 
 
1

5.判断是否含有某个样式 
hasClass()可以用来判断元素中是否含有某个 class 。

$("p").hasClass("another")；
 
 
1

本节所有代码：

jqueryDomStyle.html
$(function(){
      //获取样式
      $("input:eq(0)").click(function(){
            alert( $("p").attr("class") );
      });
      //设置样式
      $("input:eq(1)").click(function(){
            $("p").attr("class","high");
      });
      //追加样式
      $("input:eq(2)").click(function(){
            $("p").addClass("another");
      });    
      //删除全部样式
      $("input:eq(3)").click(function(){
            $("p").removeClass();
      });  
       //删除指定样式
      $("input:eq(4)").click(function(){
            $("p").removeClass("high");
      });   
      //重复切换样式
      $("input:eq(5)").click(function(){
            $("p").toggleClass("another");
      });  
      //判断元素是否含有某样式
      $("input:eq(6)").click(function(){
            alert( $("p").hasClass("another") )
            alert( $("p").is(".another") )
      });  
  });
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

设置和获取HTML、文本和值 
1.html()方法 
此方法类似于javascript中的innerHTML属性，可以用来读取和设置元素中的HTML内容。

<p title="请选择你最喜欢的水果"><strong>你喜欢的水果是？</strong></p>
    $p_html = $('p').html();
    lg($p_html);
    $('p').html('<strong>你最喜欢的水果是？？？</strong>');
 
 
1
2
3
4

2.text()方法 
text()方法类似于javascript中的innerText属性，可以用来读取或设置元素中的文本内容。

<p title="请选择你最喜欢的水果"><strong>你喜欢的水果是？</strong></p>

    var p_text = $('p').text();
    lg(p_text);
    $('p').text('你最不喜欢的水果是？');
 
 
1
2
3
4
5

3.val()方法 
此方法类似于javascript中的value属性，可以用来设置和获取元素的值。

无论元素是文本框，下拉列表还是单选框，都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。 
jqueryVal.html

<input type="text" id="address" value="请输入邮箱地址"/>

$("#address").focus(function(){         // 地址框获得鼠标焦点
            var txt_value =  $(this).val();   // 得到当前文本框的值
            if(txt_value==this.defaultValue){  
                $(this).val("");              // 如果符合条件，则清空文本框内容
            } 
      });
 
 
1
2
3
4
5
6
7
8

作业:dom比较2.html中的功能
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            attract();
            var $seldel=undefined;
            var seldel=undefined;
            function attract(){

                $('ol li').click(function(){
                    $('li').css('background','green');
                    //$(this).css('background','pink').siblings().css('background','green');
                     $(this).css('background','pink')
                     $seldel=$(this)
                     seldel=this
                })
            }
            $('#btnAdd1').click(function(){
                var input=window.prompt('请输入数据')
                var $newli=$('<li>'+input+'</li>')
                //$('ol').append($newli)
                $newli.appendTo('ol')
                attract();
            })
            document.getElementById('btnAdd2').onclick=function(){
                var input=window.prompt('请输入数据')
                var newli=document.createElement('li')
                newli.innerHTML=input
                document.getElementById('ol').appendChild(newli)
                attract();
            }      

            $('#btnDel1').click(function(){
                $seldel.remove()


            })

            document.getElementById('btnDel2').onclick=function(){
                seldel.parentNode.removeChild(seldel)
                //document.getElementById('ol').removeChild(seldel)
            }

            $('#btnInsert1').click(function(){
                var input=window.prompt('请输入数据')
                var $newli=$('<li>'+input+'</li>')

                $newli.insertBefore($seldel)
                attract();
            })

            document.getElementById('btnInsert2').onclick=function(){
                var input=window.prompt('请输入数据')
                var newli=document.createElement('li')
                newli.innerHTML=input
                seldel.parentNode.insertBefore(newli,seldel)
                attract();
            }
            $('#btnEdit1').click(function(){
                var oldText=$seldel.html()
                var $edit=$('<input id="btnE" value="'+oldText+'">')
                $seldel.html($edit)
                $edit.focus();
                $edit.blur(function() {
                    var newText=$edit.val();

                    $seldel.html(newText);

                });
            })



        })







    </script>
</head>
<body>
    <ol id="ol">
        <li id="haha">1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
    </ol>
    <input id="btnAdd1"   type="button" value="jquery添加数据" />
     <input id="btnAdd2" type="button"  value="dom添加数据" />
     <input id="btnDel1" type="button" value="jquery删除数据" />
    <input id="btnDel2" type="button" value="dom删除数据" />
     <input id="btnInsert1" type="button" value="jquery插入数据" />
     <input id="btnInsert2" type="button" value="dom插入数据" />
    <input id="btnEdit1" type="button" value="jquery编辑数据" />
     <input id="btnEdit2" type="button" value="dom编辑数据" />


</body>
</html>