JQuery 学习笔记

1 简介

JQuery，是辅助JS开发的库。是一套跨浏览器的JS库，简化HTML与JavaScript之间的操作。极大地简化了遍历HTML文档，操作DOM，处理事件、执行动画和开发Ajax。链式操作，隐式迭代。

2 HelloWorld

1 使用JQuery必须先引入JQuery的库文件，使用script标签引入。

<script type="text/javascript" src="../script/jquery-1.7.2js"></script>
<script type="text/javascript">
//编写js代码
//$():调用$方法  $():较直jquery的核心函数
/*为$()方法传入一个function{}作为参数    ：
    window.onload=function(){写代码} 就相当于$(function{写代码});*/
   $(function()){
    //使用$()查找元素，使用.click()来绑定点击响应函数，把单机响应函数作为click()的参数传入即可
      $("#btnId").click(function(){
                    alert("HelloWorld");
               });
          });
</script>

2 $的本质:$是一个函数 ，把$();称为JQuery的核心函数。 $==jQuery，故jQuery("#btn").click(function(){alert("你好");});是一样的。

(1)传入参数为函数时， $( function{} )

      文档加载完成后执行此方法

(2)传入参数为HTML字符串时， $( "<div>html</div>" )

      根据字符串创建元素节点对象

(3)传入参数为选择器字符串时， $( "#id" )

     根据选择器查找出元素节点对象

(4)传入参数为DOM对象时，  $( this )

     将DOM对象包装成jquery对象返回，如使用原生JS查找、创建出的对象就是dom对象，jquery查找出的就是jquery对象，dom对象调用不了jquery对象的方法，jquery对象也不能调用dom对象的方法。调用手段就是两种对象互转。

    1)dom对象----->jquery对象   :$(dom对象)

      $("p");//找到了所有的p节点 [p1,p2,p3] ,其中p1，p2，p3都是dom对象，

    2)jquery对象---->dom对象  : jquery对象[0] ,用下标取出来dom对象

    var p2Ele=$("#p2");// JQuery对象 ：其实是一个数组，里面元素都是dom对象

     var pe=p2Ele[0];

     alert(pe.id);

    注意:jquery查找出来的对象返回的都是原始dom对象的数组，即使只找到一个.

3 JQuery选择器

  3.1 基本选择器

       选择器是字符串，把选择器字符串传入核心函数中。

        1 id选择器

        #id ； 根据id选出元素 ，$("#id值")

        2 class选择器

        .class , 根据class名选出元素， $(".class值")

        3 标签选择器(元素选择器)

        element,根据元素名选出元素，$("div")

        4 *

         选出所有元素

        5

        selector1,selector2,...,selectorN,把各个选择器选出的元素合并起来并返回

        如$("span, #two")

3.2 层次选择器

        1 ancestor descendant

           在给定的祖先元素下匹配所有的后代元素。

         $("ancestor desccendant"),如$("form div"),选择form下的所有div（注意祖先和后代中间是空格，两个选择器用空格隔开)

        2 parent>child

            在给定的父元素下匹配所有的子元素。

            $(parent>child)

       3 prev+next

         匹配所有紧接在prev元素后的next元素，就是紧接着的匹配的兄弟元素

         $("label+input")

      4 prev ~ siblings

          匹配所有在prev元素之后的元素，选择所有的匹配的兄弟元素

3.3 基本过滤选择器

        1  : first      获取第一个元素 

                  $("div:first")     //选择第一个div

                  $("div :first")   //选择div后代里的第一个元素

        2  : last       获取最后一个元素

        3 :not(selector)    选择除了selector之外的元素

                 $(“div.one")  //选择class为one的div

                 $("div:not(.one)")   //选择class不为one的div

        4 :even     选择索引为偶数的元素

        5  :odd       选择索引为奇数的元素  （注意索引值从0开始数,顺序数)

                $(“div:odd")  //选择索引值为奇数的div

        6  :eq(index)       选择索引等于index的元素

               $(“div:equal(3)")  //选择索引值为3的div

        7  :gt(index)    选择索引大于index的元素

              $(“div:gt(3)")  //选择索引值大于3的div

       8    :lt(index)      选择索引小于index的元素

       9    :header       选中所有的标题标签  h1~h6

                $(“:header")  //选择所有的标题元素

      10   :animated      选中所有正在执行动画的元素

                $(":animated")