常见的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：查找第二行
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery代码：$("tr:eq(1)")
2.:gt(index) 匹配所有大于给定索引值的元素
eg： 查找第二第三行，即索引值是1和2，也就是比0大
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:$("tr:gt(0)")
3.:lt(index) 匹配所有小于给定索引值的元素
eg：查找第一第二行，即索引值是0和1，也就是比2小
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:$("tr:lt(2)")
- 内容过滤
1.:contains(text) 匹配包含给定文本的元素
text：一个用以查找的字符串
eg：查找所有包含 "John" 的 div 元素
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>
jQuery 代码:$("div:contains('John')")
2.:empty 匹配所有不包含子元素或者文本的空元素
eg:查找所有不包含子元素或者文本的空元素
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
jQuery 代码:$("td:empty")
3.:has(selector) 匹配含有选择器所匹配的元素的元素
selector 一个用于筛选的选择器
eg:给所有包含 p 元素的 div 元素添加一个 text 类
<div><p>Hello</p></div>
<div>Hello again!</div>
jQuery 代码:$("div:has(p)").addClass("test");
4.:parent 匹配含有子元素或者文本的元素
eg:查找所有含有子元素或者文本的 td 元素
<table>
<tr><td>Value 1</td><td></td></tr>
<tr><td>Value 2</td><td></td></tr>
</table>
jQuery 代码:$("td:parent")
-
属性过滤
-
子元素过滤
-
可见性过滤
