一、介绍

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是："Write less, do more."


1、优势

（1）一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。

（2）丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了。

（3）链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。

（4）事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。

（5）Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。

（6）跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。

（7）插件扩展开发。jQuery有着丰富的第三方的插件，基本前端页面上的组件都有对应插件，可以根据自己需要去改写和封装插件，简单实用。

2、地址

官网下载地址： https://jquery.com/download/

中文阅读：http://jquery.cuishifeng.cn/


3、jQuery引入

在body标签里面最后面引入：

使用本地的jQuery

或者使用网络的jQuery：

二、jQuery基础语法

1、查找标签

id选择器：       $("#id")
标签选择器：     $("tagName")
class选择器：    $(".className")
配合使用：       $("div.c1")  // 找到有c1 class类的div标签
所有元素选择器： $("*")
组合选择器：     $("#id, .className, tagName")

$("x y");      // x的所有后代y（子子孙孙）
$("x > y");    // x的所有儿子y（儿子）
$("x + y")     // 找到所有紧挨在x后面的y
$("x ~ y")     // x之后所有的兄弟y

:first          // 第一个
:last           // 最后一个
:eq(index)      // 索引等于index的那个元素
:even           // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd            // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)      // 匹配所有大于给定索引值的元素
:lt(index)      // 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)


$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签





$("input[type='checkbox']");  // 取到checkbox类型的input标签
$("input[type!='text']");         // 取到类型不是text的input标签

:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

$(":checkbox")       // 找到所有的checkbox


表单对象属性:

:enabled
:disabled
:checked
:selected



  
  

$("input:enabled")  // 找到可用的input标签



  北京市
  上海市
  广州市
  深圳市

$(":selected")  // 找到所有被选中的option


2、筛选器方法

下一个元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

上一个元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

父亲元素：
$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

儿子和兄弟元素：
$("#id").children();  // 儿子们
$("#id").siblings();  // 兄弟们

查找
搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p")      //等价于$("div p")

筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的
等价于 $("div.c1")

补充：
.first()  // 获取匹配的第一个元素
.last()  // 获取匹配的最后一个元素
.not()   // 从匹配元素的集合中删除与指定表达式匹配的元素
.has()   // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq()   // 索引值等于指定值的元素


左侧菜单示例：




  
  
  
  左侧菜单示例
  



  
    菜单一
           
111
      
222
      
333