jQuery

常见的js类库

• prototype：使用少，成型早，使用简单，结构松散
• Dojo：IBM公司推出、企业级应用、臃肿，文档不齐全，API不稳定
• Ext js :以创建组为主，侧重于前端界面

JavaScript三巨头：

• React
• Angular
• VUE

jQuery是一个兼容多浏览器的JavaScript库，核心理念死 write less do more（写的少更少，做的更多）

优势：

• 简单，代码少
• 兼容问题
• 用户体验
• 插件优势
• 前端必备

用在哪里：

• 处理HTML代码
• Events
• 实现动画效果
• Ajax交互

版本选择：

• 1.x 支持IE678
• 2.x 比之前的版本缩减了12%
• 3.x多了很多炫酷的效果
• 3.3是目前最新的版本

$用法：

1.$（'字符串'） 获取页面的HTML元素
2.$.ajax() 将$符号作为函数的对象，使用$符号上面的函数，本质上是使用jQuery对象上的函数
4.$(function(){})  注册页面加载完成事件，等价于window.onload
5.$(Dom) 将Dom对象转化为jQuery对象，6.$(document),$(window)
7.$('HTML代码')  创建HTML对应的元素

jQuery 选择器

• 基本选择器

1.id  根据id获取一个元素     eg : $('#id');
2.class  根据class获取一类元素 eg：$(".className");
3.element 根据标签获取一组元素 eg：$('div');
4.* 匹配所有元素   eg：$('*')
5.selector,selector 将每一个选择器匹配到的元素合并后一起返回 eg：$('span,div,p');

• 层次选择器

1.$('ancestor desendant')     eg：$('div sapn');
选取ancestor元素里的所有desendant元素
2.$('parent>child')    eg: $('div>span');
选取parent 元素下的子元素
3.$('prev+next')    eg:$('.one+.tt');
选取紧接在prev元素后的next元素
4.$('prev~next')    eg:$('div~span');
选取prev元素之后的所有next元素

• 过滤选择器

1.:frist   eg: $('div:frist');
选取第一个元素
2.:last   eg:$('div:last');
选取最后一个元素
3.:not(seector)   eg:$('input:not(.myclass)');
去除所有与给定选择器匹配的元素
4.:even   eg:$('input:even');
选取索引是偶数的所有元素，索引从0开始
5.:odd   eg:$('input:odd');
选取索引是奇数的所有元素，索引从0开始

• 索引过滤

1.:eq(index) 匹配一个给定索引值的元素
eg：查找第二行

  
Header 1
  
Value 1
  
Value 2

jQuery代码：$("tr:eq(1)")
2.:gt(index)  匹配所有大于给定索引值的元素
eg： 查找第二第三行，即索引值是1和2，也就是比0大

  
Header 1
  
Value 1
  
Value 2

jQuery 代码:$("tr:gt(0)")
3.:lt(index)  匹配所有小于给定索引值的元素
eg：查找第一第二行，即索引值是0和1，也就是比2小

  
Header 1
  
Value 1
  
Value 2

jQuery 代码:$("tr:lt(2)")

• 内容过滤

1.:contains(text) 匹配包含给定文本的元素
text：一个用以查找的字符串
eg：查找所有包含 "John" 的 div 元素
John Resig
George Martin
Malcom John Sinclair
J. Ohn
jQuery 代码:$("div:contains('John')")
2.:empty 匹配所有不包含子元素或者文本的空元素 
eg:查找所有不包含子元素或者文本的空元素

  
Value 1

  
Value 2


jQuery 代码:$("td:empty")
3.:has(selector) 匹配含有选择器所匹配的元素的元素
selector 一个用于筛选的选择器
eg:给所有包含 p 元素的 div 元素添加一个 text 类
Hello
Hello again!
jQuery 代码:$("div:has(p)").addClass("test");
4.:parent 匹配含有子元素或者文本的元素
eg:查找所有含有子元素或者文本的 td 元素

  
Value 1

  
Value 2


jQuery 代码:$("td:parent")

• 属性过滤

  
  

• 子元素过滤

  
  

• 可见性过滤