一、什么是jQuery

jQuery是一个优秀的JavaScript库，是一个凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。其理念：write less,do more.

二、jQuery的特点

(1).一款轻量级的js框架。
JQuery核心js文件才几十kb，不会影响页面加载速度。与Extjs相比要轻便的多。
(2).丰富的DOM选择器(CSS1-3 + XPath)
JQuery的选择器用起来很方便，好比要找到某个dom对象的相邻元素js可能要写好几行代码，而JQuery一行代码就搞定了，再比如要将一个表格的隔行变色，JQuery也是一行代码搞定。
(3).链式表达式。
JQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
(4).事件、样式、动画支持。
JQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
(5).Ajax操作支持。
JQuery简化了AJAX操作，后台只需返回一个JSON格式的字符串就能完成与前台的通信。
(6).跨浏览器兼容。
JQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
(7).插件扩展开发。
JQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前台页面上的组件都有对应插件，并且用JQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
(8).可扩展性强。
JQuery提供了扩展接口：JQuery.extend(object),可以在JQuery的命名空间上增加新函数。JQuery的所有插件都是基于这个扩展接口开发的。

三、jQuery的引入

可从网上直接下载jquery库并引入html

 

 四、jQuery特性

   1   HTML元素选取
   2   HTML元素操作
   3   CSS操作
   4   HTML事件函数
   5   JavaScript特效和动画
   6   HTML DOM遍历和修改
   7   AJAX
   8   Utilities

 五、jQuery选择器

 

 1.基本选择器

1   所有选择器  *
2   标签选择器  标签名
3   ID选择器    #id
4   类选择器    .className
5   群组选择器  .one,.two   多个选择器使用都好分隔，取并集
6   复合选择器  .one.two   多个选择器组合使用，取交集

2.层次选择器

后代选择器   .one .two   
      两个选择器使用空格隔开，表示可以获取当前元素的子代以及孙子代等等后代元素。
   子代选择器   .one>.two
      两个选择器使用>隔开，表示只能获取当前选中元素的子代元素。

3.兄弟选择器

下一个兄弟选择器   .one+.two
      两个选择器使用+隔开，表示可以获取当前元素的下一个兄弟元素，下一个兄弟元素要能符合.two。
   之后所有子代选择器  .one~.two
      两个选择器使用~隔开，表示可以获取当前元素之后的所有兄弟元素，只有所有兄弟元素要能符合.two。

六、jQuery过滤器

1.基本过滤器

   selector:first  获取所有已选择到的元素中的第一个元素
   selector:last   获取所有已选择到的元素中的最后一个元素
   selector:even    获取所有已选择到的元素中的索引为偶数的元素
   selector:odd     获取所有已选择到的元素中的索引为奇数的元素
   selector:eq(index) 获取所有已选择到的元素中的索引为index的元素
   selector:lt(num)   获取所有已选择到的元素中的索引值小于num的元素
   selector:gt(num)   获取所有已选择到的元素中的索引值大于num的元素
   selector1:not(selector2)  获取所有已选择到的元素中的除了selector2的元素
   selector:header   获取所有已选择到的元素中的标题元素(h1~h6)    

2.内容过滤器

  selector:contains(text) 
            获取所有已选择到的元素中文本包含text的元素
  selector:empty   
            获取所有已选择到的元素中的空元素(没有子节点)
  selector:parent  
            获取所有已选择到的元素中的非空元素(有子节点)，如$("div:parent");
  selector1:has(selector2)  
            获取所有已选择到的元素中包含selector2的元素，如$("div:has('span')");

3.可见性过滤器

  （1）不占据屏幕空间
        display:none;
        <input type="hidden">    

  （2）占据屏幕空间
        visibility:hidden;
        opacity:0;//透明度为0
   使用：
      :visible   选择所有占据屏幕空间的元素
      :hidden    选择所有不占据屏幕空间的元素   

4.属性过滤器

   selector[attrKey]  
           获取所有已选择到的元素中具有属性attrKey的元素
   selector[attrKey=attrVal]    
           获取所有已选择到的元素中具有属性attrKey，并且属性值为attrVal的元素
   selector[attrKey^=attrVal]  
           获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal开头的元素
   selector[attrKey$=attrVal]  
           获取所有已选择到的元素中具有属性attrKey，并且属性值为以attrVal结尾的元素
   selector[attrKey*=attrVal]  
           获取所有已选择到的元素中具有属性attrKey，并且属性值为包含attrVal的元素
   selector[attrKey!=attrVal]  
           获取所有已选择到的元素中具有属性attrKey，并且属性值不为以attrVal的元素或者没有属性attrVal的元素

5.后代选择器

   selector:nth-child(index)
       获取每个selector元素中索引为index的子元素。【注意】index从1开始
   selector:first-child
       获取每一个selector元素中的第一个子元素（每个父元素的第一个子元素）
   selector:last-child
       获取每一个selector元素中的最后一个子元素（每个父元素的最后一个子元素）
   selector:only-child
       获取每一个selector元素中的独生子子元素（每个父元素如果只有一个孩子元素，获取该元素）
   selector:first-of-type
       获取每个selector元素中每种类型子元素中的第一个
   selector:last-of-type
       获取每个selector元素中每种类型子元素中的最后一个

6.表单过滤器

   :checked    选取所有被选中的元素，用于复选框、单选框、下拉框
   :selected   选取所有被选中的元素，该选择器只适用于<option>
   :focus   选取当前获取焦点的元素
   :text    选取所有的单行文本框(<input type="text">)
   :password  选取所有的密码框
   :input     选取所有的<input>,<textarea>,<select>,<button>元素。
       *注意，$(":input")是选中可以让用户输入的标签元素；而$("input")是选择名字为input的标签元素。*
   :enable   选取所有可用元素，该选择器仅可用于支持disable属性的html元素。(<button>,<input>,<optgruop>,<option>,<select>,<textarea>)
   :disable   选取所有不可用元素，该选择器也仅可用于支持disable属性的html元素。
   :radio      选取所有的单选框
   :checkbox   选取所有的多选框
   :submit     选取所有的提交按钮
   :image      选取所有的input类型为image的表单元素
   :reset   选取所有的input类型为reset的表单元素
   :button  选取所有的input类型为button的表单元素
   :file    选取所有的input类型为file的表单元素