jQuery 的功能笔记

一，jQuery 如何获取元素

Jquery 获取元素的方法分为两种：jQuery选择器、jQuery遍历函数。

    1.获取本身
      只需要一种jQuery选择器
      #Id	$('#myId')	ID选择器： 可以获取到ID为“myId”的元素，区分大小写
 
      多种jQuery选择器组合
      .class $('.myClass')	类选择器：可以获取到class为‘myClass’的所有元素
      element	$('p')	获取所有的<p>元素
      :header	$(':header')	获取所有的标题元素：<h1> ~ <h6>
      :animated	$(':animated')	获取所有的动画元素
      :contains(text)	$('p:contains(Hello)')	
      等等
      获取所有包含文本为Hello的<p>元素，中间的文本区分大小写
      
    2.选择同级元素

      jQuery选择器

         $('div + p') 每个div相邻的下一个<p>元素
         $('div ~ p') 获取跟div同级的所有的<p>元素

     jQuery遍历函数

        next() 返回被选元素的后一个同级元素
        nextAll() 返回被选元素之后的所有同级元素
        prev() 返回被选元素的前一个同级元素
        prevAll() 返回被选元素之前的所有同级元素
    
    3.获取父级元素

         jQuery选择器
         $("p:parent")获取所有p元素的父级元素

         jQuery遍历函数
         parent() 获取被选元素的父级元素
         parents()获取被选元素的所有祖先元素

   4.获取子级元素

    jQuery选择器

    $('div>p') 获取div直接子元素的所有<p>元素
    $('div p') 获取div所有后代的<p>元素

    jQuery遍历函数

    children() 返回被选元素的所有直接子元素
    contents() 返回被选元素的所有直接子元素(包含文本和注释节点)
    find() 返回被选元素的后代元素

二，jQuery 的链式操作是怎样的

jQuery设计思想就是最终选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来，比如：

    $('div').find('h3').eq(2).html('Hello');

分解开来，就是下面这样：

    $('div') //找到div元素

    .find('h3') //选择其中的h3元素

    .eq(2) //选择第3个h3元素

    .html('Hello'); //将它的内容改为Hello

这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。

jQuery还提供了.end()方法，使得结果集可以后退一步：

    $('div')

    .find('h3')

    .eq(2)

    .html('Hello')

    .end() //退回到选中所有的h3元素的那一步

    .eq(0) //选中第一个h3元素
    
    .html('World'); //将它的内容改为World

三，jQuery 如何创建元素

创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了：

    $('<p>Hello</p>');

    $('<li class="new">new list item</li>');

    $('ul').append('<li>list item</li>');

**四，jQuery 如何移动元素

jQuery提供两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。

假定我们选中了一个div元素，需要把它移动到p元素后面。

第一种方法是使用.insertAfter()，把div元素移动p元素后面：

    $('div').insertAfter($('p'));

第二种方法是使用.after()，把p元素加到div元素前面：

    $('p').after($('div'));

表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。你可以根据需要，选择到底使用哪一种方法。

使用这种模式的操作方法，一共有四对：

    .insertAfter()和.after()：在现存元素的外部，从后面插入元素

    .insertBefore()和.before()：在现存元素的外部，从前面插入元素

    .appendTo()和.append()：在现存元素的内部，从后面插入元素

    .prependTo()和.prepend()：在现存元素的内部，从前面插入元素

**五，jQuery 如何修改元素的属性

jquery中用attr()方法来获取和设置元素属性，attr是attribute（属性）的缩写，

是js中setAttribute()和getAttribute()的简化

最基本常用的用法:

    $("img").attr("src","img/a.jpg");
    $("img").attr("width","100px");

attr()有四种用法,先列举表达式:

语法:

    $(selector).attr(attribute)       //返回被选元素的属性值。
    $(selector).attr(attribute,value)    //设置被选元素的属性和值。
    $(selector).attr(attribute,function(index,oldvalue))   //用函数返回值设置被选元素的属性和值。
    $(selector).attr({attribute:value, attribute:value ...})    //为被选一个以上的元素设置属性和值。

第一个$(selector).attr(attribute)是用来得到属性值的，只有一个参数就是属性名

    var srcImg = $('#img_1').attr("src");

第二个是最基本常用的方式:

    $(selector).attr(attribute,value)

第一个参数是属性名, 第二个参数是想为该属性赋的值

    $('#img_1').attr('src','img/1.jpg');

第三种是用函数的返回值给属性赋属性值，该函数可接收并使用选择器的 index 值和当前属性值。

    $(selector).attr(attribute,function(index,oldvalue))

第四种其实就是上边第二种方式的拓展, 可以一次修改很多属性的属性值。

    $(selector).attr({attribute:value, attribute:value ...})

    $('#img_1').attr({"width":80px, "height":50px});

还有可以用removeAttr删除属性:

    $("img_1").removeAttr ("style")；