jQuery
1、初识 jQuery
什么是 jQuery ?
答：是 javascript 和查询（Query），它是辅助JavaScript 开发的 js 库。可以用来制作动画效果、事件处理、使用 Ajax 及其他功能。
核心思想：write less,do more，实现了很多浏览器的兼容问题。
示例：绑定单击事件
jQuery 的 $ 是什么？
答：$ 是一个核心函数，window.jQuery=window.$=jQuery;。
核心函数的四个作用：
1、传入参数为 函数 时，在文档加载完成后执行这个函数。
2、传入参数为 HTML字符串 时，根据这个字符串创建元素节点对象。
3、传入参数为 选择器字符串 时，根据这个字符串查找元素节点对象。
\$("#id属性值");：id 选择器，根据 id 查询标签对象。
\$("标签名");：标签名选择器，根据指定的标签名查询标签对象。
\$(".class属性值");：类选择器，根据 class 属性查询标签对象。
4、传入参数为 DOM对象 时，将 DOM 对象包装为 jQuery 对象返回。
jQuery 对象的本质是什么？
答：jQuery 对象是 DOM 对象的数组加上jQuery 提供的一系列功能函数。
2、选择器
2.1 基础选择器
1、#id：根据 id 查找标签对象。
$("#id");
2 、.class：根据 class 查找标签对象。
$(".类名");
3、 element：根据标签名查找标签对象。
$("div");
4、 *：表示任意的所有元素。
$("*");
4、selector1,selector2,selectorN：将每一个选择器匹配到的元素合并后一起返回。
div
p class="myClass"
span
p class="notMyClass"
$(function(){
$("div,span,p.myClass")
});
[div
p class="myClass"
span]
结果的顺序和在页面上从上到下的顺序一样。
注意：选择器要在代码全部加载后才能起作用，所以要写入代码$(document).ready(function(){ }); 和它的简写形式 $(function(){ });中。
2.2 层级选择器
1、ancestor descendant：在给定的祖先元素下匹配所有的后代元素
$("form input");
[ , ]
2、parent > child：在给定的父元素下匹配所有的子元素
$("form > input");
[ ]
为什么只匹配了一个 input 标签？
答：是孙子元素，不是 form 的子元素。
3 、prev + next：匹配所有紧接在 prev 元素后的 next 元素
匹配所有跟在 label 后面的 input 元素：
$("label + input");
[ , ]
4 、prev ~ siblings：匹配 prev 元素之后的所有 siblings 元素
找到所有与表单同辈的 input 元素：
$("form ~ input");
[ ]
2.3 过滤选择器
1、基本过滤器
:first：获取第一个元素
- list item 1
- list item 2
- list item 3
$("li:first");
[ list item 1 ]
:last：获取最后一个元素
:not(selector)：去除所有与给定选择器匹配的元素
在jQuery 1.3 中，已支持复杂选择器 如：:not(div a) 和 :not(div,a)
$("div:not(.on)")：表示选择 class 不为 on 的所有 div 元素。
$("input:not(:checked)");
[ ]
:even：匹配所有索引值为偶数的元素，从0开始计数
Header 1 Value 1 Value 2
$("tr:even");
[ Header 1 Value 2 :odd：匹配所有索引值为奇数的元素，从0开始计数
:eq(index)：匹配一个给定索引值的元素
Header 1 Value 1 Value 2
$("tr:eq(1)");
[ Value 1 :gt(index)：匹配所有大于给定索引值的元素
Header 1 Value 1 Value 2
$("tr:gt(0)");
[ Value 1 Value 2 :lt(index)：匹配所有小于给定索引值的元素
Header 1 Value 1 Value 2
$("tr:lt(2)");
[ Header 1 Value 1 :header：选择标题
Header 1
Contents 1
Header 2
$(":header").css("background","#eee");
[ Header 1
,Header 2
]
:animated：匹配所有正在执行动画效果的元素
$("#run").click(function(){
$("div:not(:animated)").animate({left:"+20"},1000);
});
2、内容过滤选择器
:contains(text)：匹配包含给定文本的元素。
John Resig
J.ohn
George Martin
$("div:contains('John')");
[
John Resig
]
:empty：匹配所有不包含子元素或者文本的空元素。
Value 1 Value 2
$("td:empty");
[ :parent：匹配含有子元素或者文本的元素。
Value 1 Value 2
$("td:parent");
[ Value 1 ，Value 2 ]
:has(selector)：匹配含有选择器所匹配的元素的元素。
Hello
Hello again!
$("div:has(p)").addClss("test");
[
Hello
]
3、属性过滤选择器
[ attribute ]：匹配包含给定属性的元素。
Hello
$("div[id]");
[
]
4、表单过滤选择器
:enable：匹配所有可用元素。（可以输入内容或者勾选）
$("input:enable");
[
]
:disabled：匹配所有不可用元素。
$("input:disabled");
[
]
:checked：匹配所有选中的被选中元素（复选框、单选框等，不包括select中的option）
$("input:checked");
[
]
:selected：匹配所有选中的option元素。
$("select option:selected");
[
]
练习：
下拉框选中的多选实现：
5、元素的筛选
nextAll()：查找当前元素之后所有的同辈元素。
nextUntil()：
add()：把 add 匹配的选择器的元素添加到当前 jQuery 对象中。
3、 jQuery 属性操作
html()：设置和获取起始标签和结束标签中的内容。相当于 dom 属性的 innerHTML 。
text()：设置和获取起始标签和结束标签中的文本。相当于 dom 属性的 innerText 。
val()：设置和获取表单项（单选、复选、单行输入框、多行输入框等）的 value 属性值。相当于 dom 属性 value 。
对于以上三个操作：不传参数是获取对应值，传递参数是赋值
我是div标签div中的span
多选：
checkbox1
checkbox2
checkbox3
attr()：设置或获取属性的值，不推荐使用该方法操作checked\readOnly\selected\disabled等等，此外该方法还可以设置自定义的属性。
prop()：设置或获取属性的值，只推荐使用该方法操作checked\readOnly\selected\disabled等等。
多选：
checkbox1
checkbox2
attr()与prop()的区别：
当多选框没有写checked="checked"属性时，使用alert($(":checkbox").attr("checked"));会返回undefined是一个错误，而实际上我们希望返回 true 或者 false 来判断该选框是否选中，所以要使用alert($(":checkbox").prop("checked"));。
4、 全选、全不选、反选
反选的操作对象只是四个球类， 所以使用 name 属性进行标识。
5、 DOM 的增、删、改
内部插入：
appendTo()：a.appendTo(b) 把 a 插入到 b 子元素末尾，成为最后一个子元素。
prependTo()：a.prependTo(b) 把 a 插入到 b 子元素前面，成为第一个子元素。
外部插入：
insertAfter()：a.insertAfter(b) 得到 ba
insertBefore()：a.insertBefore(b) 得到 ab
替换：
replaceWith()：a.replaceWith(b) 用一个 b 替换掉所有的 a
replaceAll()：a.replaceAll(b) 用多个 a 替换对应的多个 b
删除：
remove()：a.remove() 删除 a 标签
empty()：a.empty() 清空 a 标签里的内容，标签还在
多选：
checkbox1
checkbox2
wqe
6、 下拉列表中从左表到右表
7、 动态添加和删除表格内容
Name
Email
Salary
Tom
[email protected]
5000
Delete
Jerry
[email protected]
8000
Delete
Bob
[email protected]
10000
Delete
添加新员工
name:
email:
salary:
添加显示数据的优化过程：
1、点击 Delete 时如何确定该行对象？
答：通过标签 a 确定其父元素 td ，然后再确定元素 tr 来获得行对象，从而实现删除该行。
2、在添加和删除代码都写在$(function(){});中，即页面加载完成时绑定事件，但是当删除新添加的数据时页面会跳转到404 not found的页面中，也就是新添加的数据没有绑定 Delete 的单击事件，如何解决？
答：在每一次添加完数据之后，为后添加的数据补充绑定 Delete 的单击事件。
3、为后添加的数据补充绑定 Delete 的单击事件的问题
答：在页面加载完成时为 Submit 和 Delete 绑定单击事件，然后再在 Submit 的单击事件中再添加一个补充的 Delete 的单击事件$trObj.find("a").click(delA);；第二种做法使用$("a").live("click" , delA);此时当添加新数据时会自动补充绑定删除事件。
8、CSS 样式操作
addClass()：添加样式。
//添加一个或多个div的类属性
$("div:first").addClass('redDiv blueBorder');
removeClass()：删除样式。
//删除一个或多个div的类属性
$("div:first").removeClass('redDiv blueBorder');
/*写法二：删除div的全部的类属性
$("div:first").removeClass();*/
toggleClass()：有就删除，没有就添加样式。
//没有redDiv这个类属性时就添加一个；有这个类属性时就删除
$("div:first").toggleClass('redDiv');
offset()：获取和设置元素的坐标。
//获取div在页面中的位置（该位置信息会随窗口大小改变而改变）
var pos = $("div:first").offset();
console.log(pos);//打印位置信息
9、动画
show()：将隐藏的元素显示出来。
hide()：将可见的元素隐藏。
toggle()：可见的元素就隐藏，隐藏的元素就显示出来。
动画的方法可以添加参数：
- 第一个参数：动画执行的时间，单位是毫秒。
- 第二个参数：动画的回调函数（动画完成之后自动调用的函数）。
$("#btn").click(function(){
$("#divid").toggle(1000,function(){
alert("toggle动画 完成");
});
});
fadeIn()、fadeOut()、fadeToggle()：淡入、淡出、显示时淡出，不显示时淡入。用法和上面的一样。
fadeTo()：淡化到指定的透明度（透明度：0~1）。
//动画执行时间为2秒，透明度为0.5（半透明）
$("#divid").fadeTo(2000,0.5,function(){
alert("fadeTo 完成");
});
练习：品牌展示
问题：
1、如何实现点击“显示全部品牌”后标签变成“显示精简品牌”且三角标方向的改变。
答：标签为“显示全部品牌”时其他品牌处于隐藏状态，三角标朝下；标签为“显示精简品牌”时其他品牌处于显示状态，三角标朝上。
品牌展示练习
关于上述代码中超链接按钮的单击事件最后为什么要return false;？
答：因为超链接的href="more.html"如果不写return false;页面会跳转；当超链接的href="#"时，不写return false;页面也不会跳转。
上述代码中，为什么两种方式的if( $("li:gt(5):not(:last)").is(":hidden") ){后面的代码不一样？
答：写法一中，当点击按钮时会先执行代码$("li:gt(5):not(:last)").toggle();将初始时的隐藏状态变成可见状态即if( $("li:gt(5):not(:last)").is(":hidden") )返回 false 执行 else 中的代码；写法二中，当点击按钮时为初始的隐藏状态，即if( $("li:gt(5):not(:last)").is(":hidden") )返回 true 。
10、js 原生的页面加载和 jQuery 的页面加载
1、$( function(){} );和window.onload = function(){}的区别？
答：
触发顺序： jQuery 的页面加载完成之后先执行，原生 js 的页面加载完成之后最后执行。
触发时间：$( function(){} ); == $(document).ready(function(){});表示 DOM 对象是否准备好，浏览器的内核解析完页面的标签并创建好 DOM 对象之后就会马上执行$( function(){} );（表示 jQuery 的页面加载完成之后执行）；
window.onload = function(){}（表示原生 js 的页面加载完成之后执行）除了要等浏览器内核解析完标签并创建 DOM 对象，还要等标签显示时需要的内容（比如：加载图片，创建图片标签对象后还要从网络上抓取图片并加载显示出来）加载完成。
执行次数：
$( function(){} );从上往下按照写的顺序执行；window.onload = function(){}是赋值操作，最后一次赋值会覆盖之前的内容，所以总是执行最后的那一次赋值。
11、jQuery 中其他的事件处理方法
click()：可以绑定单击事件，还有触发单击事件。
$("h1").click(function(){//传function是绑定事件
alert("click绑定的 h1的单击事件")
});
//点击按钮触发click事件
$("button").click(function(){
$("h1").click(); //不传function是触发事件
});
mouseover()：鼠标移入事件。
mouseout()：鼠标移出事件。
//鼠标移入
$("h1").mouseover(function(){
console.log("鼠标移入")
});
//鼠标移出
$("h1").mouseout(function(){
console.log("鼠标移出")
});
bind()：可以给元素一次性绑定一个或多个事件 (每个事件响应多次)。
unbind()：接触事件的绑定。
$("h1").bind("mouseover mouseout",function(){
console.log("这是bind绑定的事件");
});
//移除鼠标移入事件
$("h1").unbind("mouseover");
/*
将bind绑定的事件全部移除
$("h1").unbind();
*/
one()：使用方法和 bind 一样，但是 one 绑定的相应事件只会响应一次（每个事件响应一次）。
$("h1").one("mouseover mouseout",function(){
console.log("这是one绑定的事件");
});
live()：用来绑定选择器匹配的所有元素的事件，对后来动态创建出来的元素也有效。
12、事件的冒泡
1、什么是事件的冒泡？
答：指父、子元素同时监听同一个事件，当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。
div
div里的span
div
当点击标签内容时，即响应了 span 的事件，又响应了 div 事件。
2、如何阻止事件冒泡？
答：在函数体内，return false;可以阻止事件的冒泡传递。
13、JavaScript 事件对象
1、事件对象：是封装有触发的事件信息的一个 JavaScript 对象。
2、如何让获取JavaScript 事件对象呢？
答：在给元素绑定事件的时候，在事件的function( event )添加一个 event (事件) 参数，这个参数就是JavaScript 传递事件处理函数的事件对象。
练习：图片跟随移动（鼠标移除图片就不跟随了）
为什么只有当鼠标从小图片的右下角往左上角移动，大图片才流畅显示，而当鼠标从左上角往右下角移动大图片会一闪一闪？
答：如上图，蓝色代表小图片，红色代表大图片，当鼠标从左上角往右下角移动时，鼠标可能会移到大图片上，此时判断为移出小图片从而隐藏大图片，大图片隐藏了鼠标又落在了小图片上此时判断为移入从而显示大图片。
解决办法：将大图片和鼠标间隔一点位置left:event.pageX + 20, top:event.pageY + 20。