JQ优势

• JQ选择器，方便、灵活
• JQ链式表达式，代码简洁
• JQ支持AJAX，后端返回一个json格式的字符串就和前端通信
• JQ支持事件、样式、动画，JQ操作css比js可读性强得多
• JQ插件多

JQ基本语法

• $(selector).action()

JS和JQ对象互转

• JS对象只能调用JS方法，JQ对象只能调用JQ方法。JS和JQ经常互转，方便使用对方的方法和属性。具体如下：
  • js对象 = jq对象[0]
  • jq对象 = $(js对象)

JQ-基本选择器

• ID选择器 $('#id值')
• 元素选择器 $('标签名')
• 类选择器 $('.类名')
• 混合选择器 $("div.c1") 类名c1的div标签
• 组合选择器 $("#id,.className,tagName")
• 所有选择器 $(*)
• 层级选择器 x y是任意选择器
  • $("x y") x的所有后代（子子孙孙）里，找y
  • $("x > y") x的所有儿子里，找y
  • $("x + y") x的后面，紧紧挨着x的，找y
  • $("x ~ y") x的后面，所有的兄弟，找y

JQ-基本筛选器：选择器后面使用，当选出多个元素时再筛选

• :first 第一个
• :last 最后一个
• :eq(index) 索引=index的元素
• :gt(index) 索引>index的元素
• :lt(index) 索引<index的元素
• :even 索引值=偶数，从0开始
• :odd 索引值=奇数，从0开始
• :not(元素选择器e) 剔除后代元素包含e的标签
• :has(元素选择器e) 选取后代元素包含e的标签，举例如下：
  • $("div:has(h1)") 后代元素包含h1的div
  • $("div:has(.c1)") 后代元素包含类名c1的div
  • $("li:not(.c1)") 后代元素不包含类名c1的li
  • $("li:not(:has(a))") 后代元素的后代不包含a标签的li

JQ-属性选择器：选择器后面使用，根据属性值再筛选

• [attribute]
• [attribute='属性值'] $("input[type='checkbox']") 找到类型为checkbox的input标签
• [attribute!='属性值'] $("input[type='text']") 找到类型不是text的input标签