11.21-11.24 jQuery基础

jQuery 中的Dom操作

查找节点和创建节点

1.查找节点

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

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

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

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

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

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

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

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

插入节点和删除节点

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>");

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

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

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

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

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');//绑定事件还在

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

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

复制节点和替换节点

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

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

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

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

包裹节点和属性操作

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

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

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

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

2.wrapInner()方法

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

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

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

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

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

如果要设置

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

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

2.删除属性

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

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

样式操作

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

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

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

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

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

//删除所有样式
$("p").removeClass();
//删除指定样式
$("p").removeClass("high");

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

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

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

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

本节所有代码：

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") )
      });  
  });

设置和获取HTML、文本和值

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

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

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

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

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

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.children方法
用于去的匹配的子元素集合。

children()方法只考虑子元素而不考虑后代元素。

            $lis = $('ul').children();
            lg($lis);
            var len = $lis.length;
            for(var i=0;i<len;i++){
                lg($lis[i].innerHTML);
            }

2.next()方法
用于取得匹配元素后面紧邻的同辈元素。

        var $p1 = $('p').next();
        lg($p1);

3.prev()方法
用于取得匹配元素前面紧邻的元素。

        var $li = $('li').prev();
         lg($li);

4.siblings()方法
用于取得所有同辈元素。

            var $ul = $('p').siblings();
            lg($ul);

5.closet()方法
该方法用于取得最近的匹配元素。首先检查当前元素是否匹配，匹配直接返回元素本身。否则逐级向上查找。

            var $ul = $('li').closest('ul');
            lg($ul);

parent()和parents()
parent()方法获得集合中每个元素的父级元素。
parents()方法集合中每个匹配元素的祖先元素。

            var $ul = $('a').parents();
            lg($ul);

CSS操作
可以直接利用css()方法获取和设置元素的样式属性。

            $('p').css('color');
            $('p').css('color','red');

如果值是数字，将会被自动转化为像素值。
在css()方法中，如果属性带有‘-’符号，如font-size，如果设置这些属性的时候不带引号，那么需要使用驼峰命名法。

事件绑定

1.bind()方法
结构：bind(事件类型，回调函数)；

<input type="button" value="点我">
$('input[type=button]').bind('click',function(){
            lg('hello world');
        });

2.on()方法
on()方法结构和使用与bind()没有任何区别。

新版本的jQuery里面都是使用on()方法，bind()方法已经不再使用了。

<input type="button" value="点我">
$('input[type=button]').bind('click',function(){
            lg('hello world');
        });

3.阻止冒泡
使用事件对象 event 的方法stopPropagation();

$('input[type=button],div,body,html').on('click',function(event){
            lg('click');
            event.stopPropagation();
        });

4.绑定多个事件
on()方法中可以使用类似JSON结构进行处理。

$('input[type=button]').on({
            hover:function(){
                $(this).css('color','red');
            },
            mouseout:function(){
                $(this).css('color','#fff');
            },
            click:function(){
                alert('aaa');
            }
        });

5.事件解绑
使用unbind()方法解绑事件

    $('input[type=button]').on('click',function(){
            lg('click');
            $(this).unbind('click');
        });

jQuery动画

1. show() 方法和 hide() 方法
调用hide()方法会将元素的display样式改为’ none ‘。
show()方法将元素的display样式设置为先前的显示状态。
show()方法和hide()方法的参数可以指定毫秒值，缓慢的隐藏和展示。

        $('p').toggle(function(){
            $(this).hide(2000);
        },function(){
            $(this).show(2000);
        }) 

2.fadeIn()和fadeOut()方法
fadeIn()和fadeOut()方法只改变元素的不透明度。

fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失（display:none）。

        $('p').toggle(function(){
            $(this).fadeOut();
        },function(){
            $(this).fadeIn();
        }) 

3.slideUp()方法和slideDown()方法
slideUp()方法和slideDown()方法只会改变元素的高度。

如果一个元素的 display 属性值为’none’,调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法正好相反，元素将由下到上缩短隐藏。

        $('p').toggle(function(){
            $(this).slideUp();
        },function(){
            $(this).slideDown();
        }) 

jQuery中任何动画效果，都可以指定3种速度参数。slow,normal和fast，使用时记得加上引号。
4.animate()方法
可以使用animate()方法来自定义动画。
结构：animate(params,speed,callback)

        $('#panel').click(function(){
            lg('click');
            $(this).animate({left:'+=500px'}, 3000);
        });

        //多重动画
        $('#panel').click(function(){
            lg('click');
            $(this).animate({left:'+=500px',top:'+=500px'}, 30000);
        });