一、JQuery的基本概念
1.JQuery是什么？
jquery是一款javaScript库，能更方便地处理HTML、事件、动画等，可以兼容多浏览器
2.如何选择版本？
JQuery有三个大版本：
v1.X：兼容IE6-8，以及低版本的chrome和火狐浏览器，推荐使用
v2.X：不兼容IE6-8
v3.X：同上，分为精简版和普通版，与V2普通版差不多，更新相应的API，加了相应的性能优化
3.使用CDN
Content Delivery Network 内容分发网络，速度快，节省本地服务器的带宽，下载速度快
推荐：BootCDN
<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.js"></script> //例子4.$
window.jQuery === window.
符号是缩写
JQuery的所有属性、方法都被定义在jQuery这个qu全局变量内
(1)调用属性和方法
$.each() //调用方法 也可以写成：jQuery.each()
$.noop //调用属性
$.toArray() //调用方法
(2)选择器
$('#myDiv') //返回jQuery对象
$('.myClass')
....jQuery对象转换为DOM对象
$(domObject) //返回jQuery Object
$(xxx).get(0) //返回DOM Object
$(xxx)[0] //返回DOM Object
(3)什么是jQuery对象
是原生DOM对象 封装
jQuery对象和原生DOM对象不同
jQuery对象包含了很多操作DOM元素的方法
(4)链式语法chaining
正常的写法
$('#divTest').text('Hello,World!')
$('#divTest').removeClass('blue')
$('#divTest').addClass('bold')
$('#divTest').css('color','red')
a.链式写法（推荐）
$('#divTest').text('Hello,World!').removeClass('blue').addClass('bold').css('color','red')
这样写不用每次都进行dom搜索
建议换行写
$('#divTest')
.text('Hello,World!')
.removeClass('blue')
.addClass('bold')
.css('color','red')
原理就是没执行完一次方法后会把 该原jQuery对象（或者选择过后的jQuery对象）返回回来。
b.链式语法使用需要注意破坏性的语法
例如
$('#divTest2')
.find('p.child') //find方法就是有破坏性的，会返回一个重新选择后的jQuery对象，目前对象是id为divTest2元素下class为child的<p>元素
.css('color','red')
.addClass('bold')
c.我们可以使用end()方法来还原上一次查询的jQuery对象
$('#divTest2')
.find('p.child')
.end() //将jQUery还原成 id为divTest2的元素
.css('color','red')
.addClass('bold')
d.有些方法不返回jQuery对象，也就无法使用链式语法
$('#divTest').get(0) //这是把jQuery对象转化为DOM对象
(5)$(document).ready(function(){…})
等页面的DOM树加载完毕
window.onload事件是等待页面所有的东西（dom树、图片、第三方网站等）都加载完毕才触发
jQuery中的ready只会在dom树加载完毕就执行，不会去等图片或第三方网站iframe框架，也就是说ready执行会比window.onload早执行
建议window.onload和ready不要一起使用，可能会发生ready无效
可以使用$(window).load(function(){...});
来代替window.onload=function(){...}效果是一样的，
都是等的页面中的dom树，图片，和第三方网站iframe框架都加载完成后才执行方法中的内容
总结
$(document).ready(function(){…}); //dom树加载完毕后就执行方法中的内容
$(window).load(function(){…}); //效果等同于window.onload
$(function(){…})和ready是等价的，也就是简写
二、jQuery选择器 —— 选择的艺术
（一）js中选择元素常用的方法
document.getElementById() //按照ID选择
document.getElementsByName() //按照name来选择
document.getElementsByTagName() //按照标签的name来选择
document.getElementsByClassName() //按照类名来选择
最新的方法
document.querySelector('.box') //使用的是CSS的选择器的语法，返回第一个匹配的，class为box的节点元素
document.querySelectorAll('.box') //返回多个（二）CSS选择器
—基本选择器
—属性选择器
—伪类选择器
—伪元素选择器
PS：jQuery选择器兼容CSS选择器语法及扩展返回0个、1个或多个jQuery元素集合（类数组对象），集合内元素顺序和在页面上顺序一致
（三）jQuery选择器
1.基本选择器
和css是一样的：
- ID选择器
- 类选择器
- 元素选择器
- 后代选择器
- 属性选择器
建议都是使用单引号，单引号中再使用双引号
2.筛选器 / 过滤器
以：开头
将元素进行筛选得出结果
- 位置筛选器 jquery独有
- 子元素筛选器
- 表单筛选器
- 内容筛选器
- 其他筛选器
- 自定义筛选器
(1)位置筛选器
ps:这里的位置都是从0开始
:first //第一个位置
:last //最后一个位置
:even //偶数位置
:odd //奇数位置
:eq(n) //等于 n是从0开始
:gt(n) //大于
:lt(n) //小于例子
<!DOCTYPE html>
<html>
<head>
<title>jQuery的位置选择器</title>
<meta charset="utf-8">
<style>
.hightlight{
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li>li-01</li>
<li>li-02</li>
<li>li-03</li>
<li>li-04</li>
<li>li-05</li>
<li>li-06</li>
<li>li-07</li>
<li>li-08</li>
</ul>
<script type="text/javascript" src="./js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
//$('li:first').addClass('hightlight'); //<li>li-01</li>高亮
//$('li:last').addClass('hightlight'); //<li>li-08</li>高亮
//$('li:even').addClass('hightlight'); //<li>li-01</li><li>li-03</li><li>li-05</li><li>li-07</li>高亮
//$('li:odd').addClass('hightlight');
//$('li:eq(1)').addClass('hightlight'); //<li>li-02</li>高亮
//$('li:gt(1)').addClass('hightlight'); //<li>li-03</li> ~ <li>li-08</li>高亮
//$('li:lt(3)').addClass('hightlight'); //<li>li-01</li> ~ <li>li-03</li>高亮
})
</script>
</body>
</html>(2)表单筛选器
| 表单选择 | 实例 | 说明 |
|---|---|---|
| :input | $(‘:input’) | 选择所有 form 元素,包含input、包含select元素、textarea元素、button元素 |
| :text | $(‘:text’) | 所有 type=”text” 的 input 元素 |
| :password | $(‘:password’) | 所有 type=”password” 的 input 元素 |
| :radio | $(‘:radio’) | 所有 type=”radio” 的 input 元素 |
| :checkbox | $(‘:checkbox’) | 所有 type=”checkbox” 的 input 元素 |
| :submit | $(‘:submit’) | 所有 type=”submit” 的 input 元素 |
| :reset | $(‘:reset’) | 所有 type=”reset” 的 input 元素 |
| :button | $(‘:button’) | 所有 type=”button” 的 input 元素 以及 button元素 |
| :image | $(‘:image’) | 所有 type=”image” 的 input 元素 |
| :file | $(‘:file’) | 所有 type=”file” 的 input 元素 |
| 。 | 。 | 。 |
| :enabled | $(‘:enabled’) | 所有激活的 input 元素 和 disabled相反 |
| :disabled | $(‘:disabled’) | 所有禁用的 input 元素 |
| :selected | $(“:selected’) | 所有被选取的 input 元素 |
| :checked | $(‘:checked’) | 所有处于选择状态的任何input 元素 |
| :focus | $(‘:focus’) | 选中状态的input元素，不直接使用,一般延时执行才能看出效果 |
(3)内容筛选器
| 表单选择 | 实例 | 说明 |
|---|---|---|
| :empty | $(“:empty”) | 无子（元素）节点的所有元素 |
| :contains(text) | $(‘p:contains(“W3School”)’) | 包含指定字符串的所有元素 |
| :has(selector) | $(‘p:has(span)’) | 包含 指定元素的元素 |
| :parent | $(‘p:parent’) | 有子节点的所有指定元素 |
(4)其他选择器
| 表单选择 | 实例 | 说明 |
|---|---|---|
| :lang(language) | (‘:lang(en)’) | lang=en的元素 |
| :not(selector) | $(‘p:not(#foo)’) | 选择所有id不是指定的元素(所有id不是foo的p段落 ) |
| :root | $(‘:root’) | |
| :target | $(‘p:target’) | |
| :hidden | $(‘:hidden’) | 所有不可见的元素：display为none和type=”hidden”的元素 |
| :visible | (‘table:visible’) | 所有可见的元素、所有可见的表格 |
| :header | $(‘:header’) | 所有标题元素 h1 - h6 |
| :animated | $(‘:animated’) | 选择所有正在执行动画效果的元素 |
3.jQuery选择器的性能优化
jquery选择器的性能优化，也可以说是书写规范，同样适用于CSS选择器
- 尽量适用CSS中有的选择器
- 避免过度约束
- 尽量以ID开头
- 让选择器的右边有更多特征
- 避免使用全局选择器
- 缓存选择器结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>positionFilter</title>
</head>
<body>
<div>
<ul id="list" class="list">
<li>list-01</li>
<li class="item2">list-02</li>
<li>list-03</li>
<li class="item4">list-04</li>
<li>list-05</li>
<li>list-06</li>
<li>list-07</li>
<li>list-08</li>
<li>list-09</li>
<li>list-10</li>
</ul>
</div>
<script src="//jquery-1.12.4.js"></script>
<script>
function logTime(cb) {
console.time('logTime');
if (typeof cb === 'function') {
for (var i = 0; i < 10000; i++) {
cb();
}
}
console.timeEnd('logTime');
}
$(function() {
//1.尽量适用CSS中有的选择器
// logTime(function () {
// $("ul li:even");// 慢
// })
// logTime(function () {
// $("ul li:nth-child(odd)");// 快
// })
// logTime(function () {
// document.querySelectorAll("ul li:nth-child(odd)"); // best
// })
// logTime(function () {
// $(document.querySelectorAll("ul li:nth-child(odd)")); // 快
// })
//------------------
//2.避免过度约束
// logTime(function () {
// $('div ul li.item2');// 慢
// })
// logTime(function () {
// $('li.item2');// 快
// })
//------------------
//3. 尽量以ID开头
// logTime(function () {
// $('.list li.item2'); // 慢
// })
//
// logTime(function () {
// $('#list li.item2'); // 快
// })
//------------------
//4.让选择器的右边有更多特征
// logTime(function () {
// $('ul.list .item2'); // 慢
// })
//
// logTime(function () {
// $('.list li.item2'); // 快
// })
//------------------
//5.避免使用全局选择器
// logTime(function () {
// $('ul'); // 慢
// })
//
// logTime(function () {
// $('.list'); // 快
// })
//------------------
//6.缓存选择器结果
logTime(function() { // 慢
$('#list .item2');
$('#list .item4');
});
logTime(function() { // 快
var ul = $('#list');
ul.find('.item2');
ul.find('.item4');
});
});
</script>
</body>
</html>