jQuery基础语法

一.jQuery概念

    jQuery实际上就是.javaScript库，其中封装了很多预定义的对象和实用函数，jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE。

I.jQuery的优势：

    1.它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。

    2.Query是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX(重点)交互。

    3.它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

    4.jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了。

II.当前流行的javaScript库有：

    jQuery, Prototype, Dojo, YUI, bootstrap EXT_JS DWR

III.jQuery的使用

    <!--要使用Jquery，必需在页面中引用.js文件（.js文件自行下载，并载入web项目中）-->

    <script type="text/javascript" src="script/jquery-1.4.2.js"></script>

    <script language="JavaScript">

        $(document).ready(function(){

         //其中书写内容

         });

    </script>

IV.jQuery 对象:$(DOM对象)

 

   jQuery 对象就是通过jQuery $()包装DOM对象后产生的对象。

   只有jQuery 对象才能使用jQuery里面的方法。

   注意：虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错

 

   约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.

            var $variable = jQuery 对象

            var variable = DOM 对象

    XX.jQuery对象转成DOM对象:[index]和.get(index)

         jQuery对象是一个数组对象，可以通过[index]和.get(index)的方法，来得到相应的DOM对象

               $nameArray=$("#name");

               //转成DOM对象方式1

 

               name=$nameArray.[0];

               //转成DOM对象方式2

               name=$nameArray.get(0);

V.jQuery 选择器

    选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器,eg:${“#id”}、${“tagName”}

    优点：

         1.简洁的写法

         2.完善的事件处理机制

    注意：document.getElementById("username").value;

             若网页中没有id=username的元素,浏览器会报错 

             使用JQUERY处理即使id不存在也不会报错 var $username=$("#username");

             注意:在javaScript中函数返回值为空,表示false

1.基本选择器：

     1、#id     用法: $(”#myDiv”); 

     2、Element       用法: $(”div”)

     3、class   用法: $(”.className”)

     4、*          用法: $(”*”)

          说明: 匹配所有元素,多用于结合上下文来搜索

     5、selector1, selector2, selectorN      用法: $(”div,span,p.myClass”)

          其中p.myClass是表示匹配元素 p class=”myClass”

2.层次选择器

     1 、ancestor descendant   用法: $(”form input”) ;

     2、parent > child   用法: $(”form > input”) ; 

     3、prev + next   用法: $(”label + input”) ; 返回值 集合元素

          说明: 匹配所有紧接在 prev 元素后的( prev 元素的兄弟元素) next 元素

      4、prev ~ siblings    用法: $(”form ~ input”) ;

          说明: 匹配 prev 元素之后的( prev 元素的兄弟元素)所有 siblings 元素

3.过滤选择器：都以 “:” 开头

     按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.

     I.基础过滤选择器

         1、:first  用法: $(”tr:first”) ;

         2、:last用法: $(”tr:last”)

         3、:not(selector)  用法: $(”input:not(:checked)”)

         4、:even   用法: $(”tr:even”)

             说明: 匹配所有索引值为偶数的元素，从 0 开始计数.js的数组都是从0开始计数的.

         5、: odd   用法: $(”tr:odd”)

             说明: 匹配所有索引值为奇数的元素,和:even对应,从 0 开始计数.

         6、:eq(index)   用法: $(”tr:eq(0)”)

             说明: 匹配一个给定索引值的元素.

         7、:gt(index)    用法: $(”tr:gt(0)”)  

             说明: 匹配所有大于给定索引值的元素.

         8、:lt(index)    用法: $(”tr:lt(2)”)  

             说明: 匹配所有小于给定索引值的元素.

         9、:header(固定写法)    用法: $(”:header”).css(”background”, “#EEE”)

             说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.

         10、:animated(固定写法)

             说明: 匹配所有正在执行动画效果的元素

             eg:$("div:not(:animated)").animate({ left: "+=20" }, 1000);//对不在执行动画效果的元素执行一个动画特效

4. 内容过滤选择器

        1、:contains(text)   用法: $(”div:contains(’John’)”)  

            说明: 匹配包含给定文本的元素.

            作用:查找被标签”围”起来的文本内容是否符合指定的内容的.

        2、:empty     用法: $(”td:empty”)

            说明: 匹配所有不包含子元素或者文本的空元素

        3、:has(selector)     用法: $(”div:has(p)”).addClass(”test”)

            说明: 匹配含有选择器所匹配的元素的元素.

        4、:parent   用法: $(”td:parent”)

            说明: 匹配含有子元素或者文本的元素.

            注意:这里是”:parent”,可不是”.parent”哦!感觉与上面讲的”:empty”形成反义词.

5.可见度过滤选择器

        1、:hidden     用法: $(”tr:hidden”)

            说明: 匹配所有的不可见元素

            注意：input 元素的 type 属性为 “hidden” 的话也会被匹配到.意思是css中display:none和input type=”hidden”的都会被匹配到.

        2、:visible   用法: $(”tr:visible”)

            说明: 匹配所有的可见元素.

6.属性过滤选择器

       1、[attribute]     用法: $(”div[id]“) ;

            说明: 匹配包含给定属性的元素.

       2、[attribute=value]   用法: $(”input[name='newsletter']“).attr(”checked”, true);

            说明: 匹配给定的属性是某个特定值的元素.

       3、[attribute!=value]   用法: $(”input[name!='newsletter']“).attr(”checked”, true);

            说明: 匹配所有不含有指定的属性，或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用                       [attr]:not([attr=value]).之前看到的 :not 派上了用场.

       4、[attribute^=value]   用法: $(”input[name^=‘news’]“)

            说明: 匹配给定的属性是以某些值开始的元素。

        5、[attribute$=value]   用法: $(”input[name$=‘letter’]“)

            说明: 匹配给定的属性是以某些值结尾的元素.

        6、[attribute*=value]   用法: $(”input[name*=‘man’]“)

            说明: 匹配给定的属性是以包含某些值的元素.

        7、[attributeFilter1][attributeFilter2][attributeFilterN]   用法: $(”input[id][name$=‘man’]“)

            说明: 复合属性选择器,需要同时满足多个条件时使用.

7.子元素过滤选择器

       1、:nth-child  匹配其父元素下的第N个子或奇偶元素（从1开始的）

           用法：$("ul li:nth-child(2)")   在每个 ul 查找第 2 个li

                    还可以：<br>nth-child(even)<br>:nth-child(odd)<br>:nth-child(3n)<br>:nth-child(2)<br>:nth-child(3n+1)<br>:nth-child(3n+2)

       2、:first-child  匹配第一个子元素

           用法：$("ul li:first-child")    在每个 ul 中查找第一个 li  

       3、:last-child   

       4、:only-child    如果某个元素是父元素中唯一的子元素，那将会被匹配

8.表单对象属性过滤选择器   

      1、:enabled     用法: $(”input:enabled”)

          说明: 匹配所有可用元素.意思是查找所有input中不带有disabled=”disabled”的input.不为disabled,当然就为enabled啦.

      2、:disabled    用法: $(”input:disabled”)   与上面的那个是相对应的.

      3、:checked    用法: $(”input:checked”)

           说明: 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option).

      4、:selected    用法: $(”select option:selected”)

           说明: 匹配所有选中的option元素.

 

9.表单选择器 

      1、:input    用法: $(”:input”) ;

           说明:匹配所有 input, textarea, select 和 button 元素 2、:text用法: $(”:text”) ; 返回值 集合元素 说明: 匹配所有的单行文本框. 3、:password用法: $(”:password”) ; 返回值 集合元素 说明: 匹配所有密码框. 4、:radio用法: $(”:radio”) ; 返回值 集合元素 说明: 匹配所有单选按钮. 5、:checkbox用法: $(”:checkbox”) ; 返回值 集合元素 说明: 匹配所有复选框 6、:submit用法: $(”:submit”) ; 返回值 集合元素 说明: 匹配所有提交按钮.