1、jQuery介绍
2、jQuery的基本语法
3、jQuery 对象和 dom 对象转换
4、选择器(9种之1--基本)
5、选择器(9种之2--层级选择器) [类似css复合选择器的概念]
6、选择器(9种之3--基本过滤)
7、选择器(9种之4--内容过滤)
8、选择器(9种之5--可见性过滤)
9、选择器(9种之6--属性)
10、选择器(9种之7--子元素过滤)
11、选择器(9种之8--表单过滤)
12、选择器(9种之9--表单对象属性过滤)
13、属性
14、CSS类:添加、移除、切换样式
15、获取或设置html代码/文本/value值
16、CSS---jQuery的css()方法
17、位置
18、文档处理
19、案例：下拉选择标签(选中添加)
20、案例：手动显示或隐藏
21、筛选
22、筛选案例--QQ用户分组
23、事件
24、页面加载
25、事件绑定
26、事件案例：文字提示
27、事件案例：图片提示(扩展)
28、效果(动画)
29、事件冒泡
30、浏览器默认动作
1、jQuery介绍 <--返回目录
* JS类库：JavaScript库封装了很多预定义的对象和实用函数；能帮助使用者建立有高难度交互客户端页面，并且兼容各大浏览器。
* 当前流行的JavaScript库
- jQuery，最流行
- 淘宝UI：http://docs.kissyui.com/
- Bootstrap，来自Twitter，是目前很受欢迎的前端框架。
Bootstrap是基于HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得Web开发更加快捷。基于jQuery一个UI工具
* jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
* 由美国人John Resig在2006年1月发布
* jQuery是免费、开源的
* jQuery版本介绍：jquery-1.8.3.js 源码js，开发中使用，可以方便查看源码
jquery-1.8.3.min.js 压缩版，回车换行删掉，变量简化，生产环境下使用，小
* 优点：
- 核心理念是write less,do more(写得更少,做得更多)
- 轻量级：源码1.11.js大小是286kb，压缩班1.11.min.js大小是94.1k。如果使用GZIP压缩更小。
- 兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）
- jQuery的语法设计可以使开发者更加便捷
- 例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能
- jQuery能够使用户的html页面保持代码和html内容分离
- 不用再在html里面插入一堆js来调用命令了，只需要定义id即可
- jQuery提供API让开发者编写插件，有许多成熟的插件可供选择
- 文档说明很全
2、jQuery的基本语法 <--返回目录
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <script src="../js/jquery-1.8.3.js"></script> <body> <input type="text" id="username" value="jack"/> <script type="text/javascript"> var ele = document.getElementById("username"); // js 获取 dom 元素 alert(ele.value); // js 对象属性 value var $ele = $(ele); // js 对象转为 jquery 对象 alert($ele.val()); // jquery 对象方法 val() // jQuery获取数据，语法：$("选择器") <==> jQuery("选择器") var a = $("#username"); // jquery 获取 dom 元素 alert(a.val()); </script> </body> </html>
js 执行时，有加载顺序，以前将js代码写在html代码后。但是，通常把<script>放到<head>下面。解决方法为：
js 代码
<input type="button" id="btn1" value="按钮1" name="abc"/>
<input type="text" id="username" value="jack">
<input type="text" id="password" value="123"/>
<script type="text/javascript">
window.onload = function(){ //页面加载后执行
var ele = document.getElementById("btn1"); //获取button元素
ele.onclick = function(){ //给button元素绑定鼠标点击事件
alert(ele.value); //输出button元素的value属性的值
alert(ele.id); //输出button元素的id属性的值
alert(ele.name); //输出button元素的name属性的值
};
};
</script>
jquery 代码
<input type="button" id="btn1" value="按钮1"/>
<input type="text" id="username" value="jack"/>
<input type="text" id="password" value="123"/>
<script type="text/javascript">
$(document).ready(function(){ //jQuery页面加载
$("#btn1").click(function(){ //给button元素绑定鼠标点击事件
$("#username,#password").css("background-color","pink"); //基本选择器(id选择器)的使用，设置背景色为pink
});
});
</script>
js 注意：不可以输出div元素的name属性的值
<div id="divid" name="divname">div的文本</div>
var ele = document.getElementById("divid");
alert(ele.id);//可以输出div元素的id属性的值
alert(ele.name);//undefined,不可以输出div元素的name属性的值
3、jQuery 对象和 dom 对象转换 <--返回目录
<script type="text/javascript">
//1 使用javascript获得DOM对象
var username = document.getElementById("username");
alert(username.value);
//2 将 dom对象 转换成 jQuery对象
// * 语法：$(dom对象)
// * 建议：jQuery对象变量名，建议为$开头
var $username = $(username);
alert($username.val()); //获取value属性
//3 将 jQuery对象 转换成 dom对象
//3.1 jQuery对象内部使用【数组】存放所有的数据，可以使用数组的下标（索引）
var username2 = $username[0];
alert(username2.value);
//3.2 jQuery提供函数 get() 转换成dom对象
var username3 = $username.get(0);
alert(username3.value);
</script>
4、选择器(9种之1--基本) <--返回目录
基本选择器
#id ， 【id选择器】，<xxx id=""> 通过id值获得元素 element，【标签选择器】，<xxx> 通过标签名获得元素 .class ，【类别选择器】，<xxx class=""> 通过class值获得元素。注意：使用点开头 s1,s2,... 多选择器，将多个选择器的结果添加一个数组中。[类似css的并联选择器] * 所有 [类似css的通配符选择器]
5、选择器(9种之2--层级选择器) [类似css复合选择器的概念] <--返回目录
层级选择器
A B ，获得A元素内部所有的B后代元素。（爷孙） [与css后代选择器类似] A > B ，获得A元素内部所有的B子元素。（父子,再往里面的不管） [与css子代选择器类似] A + B ，获得A元素后面的第一个兄弟B。（兄弟） A ~ B ，获得A元素后面的所有的兄弟B。（兄弟）
6、选择器(9种之3--基本过滤) <--返回目录
基本过滤选择器
:first , 第一个 :last ,最后一个 :eq(index) ，获得指定索引(注意索引从0开始) eq是equal的简写 :gt(index) 索引大于 :lt(index) 索引小于 :even 偶数，从 0 开始计数。例如：查找表格的1、3、5...行（即索引值0、2、4...） :odd 奇数 :not(selector) 去除与给定选择器匹配的元素，选择余下的所有元素 ------------------------------ :header 获得所有标题元素。例如：<h1>...<h6> :animated 获得所有动画 :focus 获得焦点
用法举例
$("div:first").css("background-color","red");//给第一个div，设置背景色
$("div:not(.one)") //选择class不为one的所有div（选择所有div，去除class="one"的div）
$("div:even") //选择索引为偶数的div元素
$("div:eq(3)") //选择索引为3的
$(":header") //选择所有标题元素
案例：案例2：文本框内有默认文本；获到焦点，若文本内容为默认值，文本内容清空；失去焦点，若文本内容为空，设置为默认值
<input type="text" value="请输入用户名" default="请输入用户名"/> <input type="text" value="请输入密码" default="请输入密码"/> <script type="text/javascript"> $(document).ready(function(){ //jQuery页面加载 $("input[type='text']").on("blur focus",function(){ //绑定(注册)blur focus事件 //1 获得默认值，即获取default属性的值 var ds = $(this).attr("default"); //$(this)表示表示当前对象 //2 判断是否获得焦点 if($(this).is(":focus")){ //":focus"表示是一个焦点对象 //2.1 获到焦点，若文本内容为默认值，文本内容清空 if($(this).val() == ds){ //$(this).val()表示获取value值 $(this).val(""); //$(this).val("")表示设置value值 } }else{ //2.2 失去焦点，若文本内容为空，设置为默认值 if($(this).val() == ""){ $(this).val(ds); } } }); }); </script>
绑定(注册)事件的两种方法：
$("input[type='text']").blur(function(){...});
或 $("input[type='text']").on("事件1 事件2",fn);//可以注册多个事件
7、选择器(9种之4--内容过滤) <--返回目录
内容过滤选择器
:empty 当前元素是否为空（是否有标签体--子元素、文本）
:has(...) 当前元素，是否含有指定的子元素
:parent 当前元素是否是父元素
:contains( text ) 标签体是否含有指定的文本
用法举例
$("div:empty") //选取没有文本，也没有子元素的div元素
$("div:parent") //选取含有子元素或文本的div元素
$("div.has('.mini')") //选取含有class="mini"子元素的div元素
$("div:contains('di')") //选取含有文本"di"的div元素
8、选择器(9种之5--可见性过滤) <--返回目录
可见性过滤选择器
:hidden 隐藏。特指 <xxx style="display:none;"> ，获得 <input type="hidden">
:visible 可见（默认）
案例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> </head> <body> <input type="button" id="btn1" value="按钮1"/></br></br> <div class="one" id="one" border="1" style="display:none;"> id为one,class为one的div </div> <input type="hidden" value="隐藏表单1"/> <input type="hidden" value="隐藏表单2"/> </body> <script src="../js/jquery-1.8.3.js"></script> <script type="text/javascript"> $("#btn1").click(function(){ //选取隐藏的div元素，并利用jQuery的show()方法显示 $("div:hidden").css("background-color","pink").show(1000); //打印<input type="hidden" value="">的value属性值，只打印第一个 alert($("input:hidden").val()); //遍历打印所有隐藏表单的value值 $("input:hidden").each(function(){ alert($(this).val()); }); //遍历打印所有隐藏表单的value值,index索引（从0开始），domEle就是this $.each($("input:hidden"),function(index, domEle){ alert(index + "@" + $(this).val()); }); }); </script> </html>
9、选择器(9种之6--属性) <--返回目录
属性选择器
[属性名] 获得指定的属性名的元素
[属性名=值] 获得属性名 等于 指定值的 的元素【1】
[属性名!=值] 获得属性名 不等于 指定值的 的元素
[as1][as2][as3].... 复合选择器，多个条件同时成立。类似 where ...and...and【2】
---------------------------------------
[属性名^=值] 获得以属性值 开头 的元素
[属性名$=值] 获得以属性值 结尾 的元素
[属性名*=值] 获得 含有属性值 的元素
用法举例
<input type="text" value="abc" title="标题名称"/> alert($("input[title]").val()); //选取含有属性title的input元素 $("input[title]").val("123"); //设置该元素的value属性的值为"123" alert($("input[title]").attr("title")); //获取该元素的title属性的值，并打印 $("input[title]").attr("title","这是标题吗") //给该元素的title属性赋值 alert($("input[title]").attr("title")); //再次打印该元素的title属性的值 $("input[title='test']") //选取属性title的值等于"text"的input元素 $("input[title !='text']")//选取属性title值不等于"test"的input元素，【没有属性title的也将被选中】 组合选择器 $("div[id][title]") //首先选取有属性id的div元素，然后在结果中选取有属性title的 $("input[title][title!='text']")//首先要有title属性，然后，title!="text"
10、选择器(9种之7--子元素过滤) <--返回目录
子元素过滤
:nth-child(index) ，获得第几个孩子，从1开始。 :first-child ， 获得第一个孩子 :last-child ， 获得最后孩子 :only-child ， 获得独生子
用法举例
//子元素使用前提，表达式前面必须是元素，比如$("div:nth-child(2)") //如果元素上添加了条件，必须使用空格，比如$(div[class='one'] :nth-child(2)) $(div[class='one'] :nth-child(2)).css("background-color","red");//选取每个class为one的div父元素下的第2个子元素 $(div.one :nth-child(2)).css("background-color","red");//效果同上 对比 $("div.one") 所有的div，自己的样式为one $("div .one") 所有的div中后代元素，样式为one(class="one")，参见层级选择器第一种
11、选择器(9种之8--表单过滤) <--返回目录
表单过滤选择器
:input 所有的表单元素。（<input> / <select> / <textarea> / <button>） :text 文本框<input type="text"> :password 密码框<input type=" password "> :radio 单选<input type="radio"> :checkbox 复选框<input type="checkbox"> :submit 提交按钮<input type="submit"> :image 图片按钮<input type="image" src=""> :reset 重置按钮<input type="reset"> :file 文件上传<input type="file"> :hidden 隐藏域<input type="hidden"> ,还可以获得<xxx style="display:none"> 其他值：<br> <option> ,存在浏览器兼容问题 :button 所有普通按钮。 <button > 或 <input type="button">
12、选择器(9种之9--表单对象属性过滤) <--返回目录
表单对象属性过滤
:enabled 可用 :disabled 不可用。<xxx disabled="disabled"> 或<xxx disabled=""> 或 <xxx disabled> :checked 选中（单选框radio、复选框 checkbox） :selected 选择（下拉列表 select option）
用法举例
$("input[name='s1']:checked").length;//获取name=s1的多选框选中的个数
$("input[name='s1']:checked").size();//获取name=s1的多选框选中的个数
$(select[name='s1']:selected).each(function(){
$("#divId").append($(this).val());//将select选中的<option>元素的value值添加到<div id="divId">中
});
注意：$(this).val()获取option时，如果没有value值，将获取text的值；如果有就获取value值
如果就想获取text的值，使用$(this).html()或$(this).text()
13、属性 <--返回目录
操作jquery对象属性：
attr(name) 获得指定属性名的值
attr(key ,val ) 给一个指定属性名设置值
attr(prop ) 给多个属性名设置值。参数：prop json数据
{k : v , k : v , .....}
removeAttr(name) 移除指定属性
用法举例
$("[name='username']").attr("disabled","disabled");//设置文本框不可用
$("[name='username']").attr("disabled","");//设置文本框不可用
$("[name='username']").removeAttr("disabled");//设置文本框为可用，必须移除属性disabled
14、CSS类:添加、移除、切换样式 <--返回目录
<xxx class="a b c d my ">
addClass("my") 追加一个类--就是:添加一个样式
removeClass("my") 将指定类移除--就是：移除一个样式
toggleClass("my") 如果有my将移除，如果没有将添加----就是：切换样式
案例：添加、移除、切换样式
<style type="text/css"> .textStyle{ background-color:red; } </style> <script type="text/javascript"> $(document).ready(function(){ $("#btn1").click(function(){ $("input[value='jack']").addClass("textStyle");//添加样式 }); $("#btn2").click(function(){ $("input[value='jack']").removeClass("textStyle");//移除样式 }); $("#btn3").click(function(){ $("input[value='jack']").toggleClass("textStyle");//切换样式 }); }); </script> <body> <input type="button" id="btn1" value="添加样式"/> <input type="button" id="btn2" value="移除样式"/> <input type="button" id="btn3" value="切换样式"/> </br></br> <input type="text" value="jack"/> </body>
15、获取或设置html代码/文本/value值 <--返回目录
val() 获得value的值
val(text) 设置value的值
html() 获得html代码，含有标签
html(...) 设置html代码，如果有标签，将进行解析。
text() 获得文本值，将标签进行过滤
text(...) 设置文本值，如果有标签，将被转义 --> < < & & > <
用法举例
获取标签div文本内容的值：$("div").text()或$(div).html()---------效果一样
<bb>div的文本内容：我爱你</bb>
var v = $("bb").html("<a href='#'>改了</a>"); //设置(或叫修改)div标签的文本内容
16、CSS---jQuery的css()方法 <--返回目录
<xxx style="key:value; key:value; ">
css(name) 获得指定名称的css值
css(name ,value) 设置一对值
css(prop) 设置一组值 json
用法举例
$("div").css("border","1px solid red");
$("div").css({
"width","200px",
"heigth","200px" //最后没逗号
});
17、位置 <--返回目录
offset() 获得左上角坐标 ， 返回JSON对象，{"top":200, "left" : 100}
offset(...) 设置坐标。例如：$(this).offset({"top":0 , "left" : 0})
scrollTop() 垂直滚动条 滚过的距离
scrollLeft() 水平滚动条 滚过的距离
height([...]) 获得 或 设置 高度
width([...])获得 或 设置 宽度
18、文档处理 <--返回目录
内部插入
A.append(B) 将B插入到A的内部后面（之后的串联操作，操作A） ----------操作A，在A的内部追加B <A> .... <B></B> <A> A.prepend(B) 将B插入到A的内部前面 -----操作A，在A的内部最前面添加B <A> <B></B> .... <A> -------------------------------------------- A.appendTo(B) 将A插入到B的内部后面 （之后的串联操作，操作A） A.prependTo(B)
外部插入
A.after(B) , 将B插入到A后面（同级）------操作A，在A的后面添加B <A></A> <B></B> A.before(B) ，将B插入到A前面 --------操作A，在A的前面添加B <B></B> <A></A> ----------------------------------- A.insertAfter(B) , 将A插入到B后面（同级） <B></B> <A></A> A.insertBefore(B) 将A插入到B前面 <A></A> <B></B>
删除
empty() 清空标签体(清空文本，会删除绑定事件) $ele.html("") 清空文本，但不会删除绑定事件，发生内存泄漏 remove() 删除当前对象。如果之后再使用，元素本身保留，绑定事件 或 绑定数据 都会被移除 detach() 删除当前对象。如果之后再使用，元素本身保留，绑定事件 或 绑定数据 都保留
绑定数据
data(name) 获得
data(name,value) 设置
绑定数据用法 举例
$(#city).data("","");//绑定数据
$(#city).data("");//获得数据
复制
clone(even) 克隆 even=true|false(默认) even ：指示事件处理函数是否会被复制。V1.5以上版本默认值是：false
替换
A.replaceWith(B) ，使用A将B替换掉
A.replaceAll(B) ，使用B将A替换掉
包裹
A.wrap(B) ，使用B将每一个A进行包裹（多个B） <B><A></A></B> <B><A></A></B> A.wrapAll(B) ，使用B将所有A进行包裹（一个B） <B> <A></A> <A></A> </B> A.wrapInner(B) ,使用B将每一个A的标签体包裹。 <A><B>。。。</B></A> <A><B>。。。</B></A> A.unwrap() ，将A的父元素删除，自己留着
19、案例：下拉选择标签(选中添加) <--返回目录
<html> <head> <title>标题</title> <!--样式--> <style type="text/css"> .text{ background-color:red; } </style> <!--导入jQuery--> <script type="text/javascript" src="./jquery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#selectToRight").click(function(){ $("#s2id").append($("#s1id option:selected")); //"#s1id option"表示<select id="s1id">标签内所有的<option> }); $("#selectAllToRight").click(function(){ $("#s2id").append($("#s1id option")); }); $("#selectToLeft").click(function(){ $("#s1id").append($("#s2id option:selected")); }); $("#selectAllToLeft").click(function(){ $("#s1id").append($("#s2id option")); }); }); </script> </head> <body> <div style="float:left;"> <select id="s1id" style="height:200px;100px;" multiple="multiple" > <option>景甜</option> <option>刘诗诗</option> <option>刘亦菲</option> <option>林志玲</option> <option>宋佳</option> </select> <div> <input type="button" value="选中添加到右边" id="selectToRight"/><br/> <input type="button" value="全部添加到右边" id="selectAllToRight"/> </div> </div> <div> <select id="s2id" multiple="multiple" style="height:200px;100px;"> <option>aaa</option> <option>bbb</option> <option>ccc</option> </select> <div> <input type="button" value="选中添加到左边" id="selectToLeft"/><br/> <input type="button" value="全部添加到左边" id="selectAllToLeft"/> </div> </div> </body> </html>
效果：
20、案例：手动显示或隐藏 <--返回目录
<html> <head> <title>动态列表效果.html</title> <style type="text/css"> *{ margin:0; padding:0;} body {font-size:12px;text-align:center;} a { color:#04D; text-decoration:none;} a:hover { color:#F50; text-decoration:underline;} .SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;} .SubCategoryBox ul { list-style:none;} .SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;} .showmore { clear:both; text-align:center;padding-top:10px;} .showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;} .showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;} .promoted a { color:#F50;} </style> <!--导入jQuery--> <script type="text/javascript" src="./jquery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ //从第5个开始，不要最后一个，控制显示或隐藏 var $allLi = $("li:gt(4):not(:last)"); $("span").click(function(){ //判断是否隐藏 if($allLi.is(":hidden")){ $allLi.show();//显示 $(this).html("隐藏部分"); }else{ $allLi.hide(); $(this).html("显示全部"); } }); }); </script> </head> <body> <div class="SubCategoryBox"> <ul> <li ><a href="#">佳能</a><i>(30440) </i></li> <li ><a href="#">索尼</a><i>(27220) </i></li> <li ><a href="#">三星</a><i>(20808) </i></li> <li ><a href="#">尼康</a><i>(17821) </i></li> <li ><a href="#">松下</a><i>(12289) </i></li> <li ><a href="#">卡西欧</a><i>(8242) </i></li> <li ><a href="#">富士</a><i>(14894) </i></li> <li ><a href="#">柯达</a><i>(9520) </i></li> <li ><a href="#">宾得</a><i>(2195) </i></li> <li ><a href="#">理光</a><i>(4114) </i></li> <li ><a href="#">奥林巴斯</a><i>(12205) </i></li> <li ><a href="#">明基</a><i>(1466) </i></li> <li ><a href="#">爱国者</a><i>(3091) </i></li> <li ><a href="#">其它品牌相机</a><i>(7275) </i></li> </ul> <div class="showmore"> <a href="#"><span>显示全部品牌</span></a> </div> </div> </body> </html>
效果：
21、筛选 <--返回目录
* 之前选择器能完成的功能，筛选也提供了相同的函数，例如
选择器:first 筛选 first()
* 对比
$("div:first") 直接获得第一个div （永远只能操作第一个）
$("div").first() 先获得所有的div，从所有的中筛选出第一个。 （可以操作第一个，也可以操作所有）
* 过滤
eq(index | -index) 类似 :eq()
index：正数，从头开始获得指定索引的元素。这个元素的位置是从0算起。0表示第一个
-index：负数，从尾开始获得指定索引的元素。1算起。 -1表示最后一个
first() 第一个 :first
last() 最后一个 :last
is() 判断
hasClass() 判断是否是指定class 。<xxx class="my">
这其实就是 is("." + class)。
filter() 筛选出与指定表达式匹配的元素集合
not() 将指定内容删除
--------------------------------
has() 子元素是否有
slice(start , end) 截取元素 ，[2,4) --> 2,3
map() jQuery对象 拆分成 jQuery对象数组
* 查找
<A>
<B>
<C></C>
<D></D>
<E></E>
<F></F>
</B>
</A>
B.children([...]) 获得所有的子元素。CDEF 类似子代选择器
A.find(D) 从指定的区域查询指定元素。D 类似后代选择器
D.next() 下一个兄弟。E
D.nextAll() 后面的所有兄弟。EF
E.prev() 上一个兄弟。D （previous）
E.prevAll() 前面的所有兄弟。CD
E.siblings() 所有兄弟。CDF
E.parent() 父元素。B
E.closest(A) 向上获得指定的父元素（含自己），如果获得返回一个对象，如果没有没有对象。
------------------------------
C.nextUntil(E) 获得后面所有兄弟，直到指定条件位置。DE
F.prevUntil(D) 获得前面所有兄弟，直到指定条件位置。DE
E.parents() 获得所有的父元素。AB
closest和parents的主要区别是：
1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；
2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；
3，前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。
* 串联
A.add(B) 将A和B组合一个对象 。类型 $("A,B")
andSelf() ： 将之前对象添加到操作集合中
A.children().andSelf()
A 孩子 孩子和A
end() ：回到最近的一个"破坏性"操作之前
A.children().children().end() .end()
A 孩子 孙子 孩子 A
--------------------
contents() 获得所有的子节点（子元素 和 文本）
22、筛选案例--QQ用户分组 <--返回目录
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="./jquery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ //1所有分组列表项默认都是隐藏的。 //2 分组（span）可以点击，控制下面的列表项显示或隐藏 //3 当前分组列表项显示，其他分页隐藏（同时只有一个显示） $("div").children("a").hide().prev("span").click(function(){ $(this).nextAll("a").toggle().parent().siblings("div").find("a").hide(); }); }); </script> <style type="text/css"> div *{ display:block; width:200px; } div span{ background-color : pink; } </style> </head> <body> <div> <span>追求中</span> <a>aa</a> <a>bb</a> <a>cc</a> </div> <div> <span>已交往</span> <a>aaa</a> <a>bbb</a> <a>ccc</a> </div> <div> <span>已分手</span> <a>a</a> <a>b</a> <a>c</a> <a>d</a> </div> </body> </html>
23、事件 <--返回目录
jQuery 提供额外的事件，用于完善javascript缺失的
- focusin 和 focusout
** focusin 获得焦点。类似js的focus。
focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
** focusout 失去焦点。类似js的blur。
focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
- mouseenter 和 mouseleave
** mouseenter 鼠标移入。类似js的mouseover
与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
** mouseleave 鼠标移出。类似js的mouseout
与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
案例：常见事件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> #e02{ border: 1px solid #000000; height: 200px; width: 200px; } </style> <script type="text/javascript" src="./jquery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#e01").blur(function(){ $("#textMsg").html("文本框失去焦点：blur"); }).focus(function(){ $("#textMsg").html("文本框获得焦点：focus"); }).keydown(function(){ $("#textMsg").append("键盘按下：keydown"); }).keypress(function(event){ $("#textMsg").append("键盘按：keypress"); }).keyup(function(){ $("#textMsg").append("键盘弹起：keyup"); }).select(function(event){ //支持谷歌 var sub = $(this).val().substring(event.target.selectionStart,event.target.selectionEnd); $("#textMsg").html("文本内容被选中：select ， " + sub); }); var i = 0; $("#e02").mouseover(function(){ $("#divMsg").html("鼠标移入：mouseover"); }).mousemove(function(){ $("#divMsg").html("鼠标移动：mousemove , " + i++ ); }).mouseout(function(){ $("#divMsg").html("鼠标移出：mouseout"); }).mousedown(function(){ $("#divMsg").html("鼠标按下：mousedown"); }).mouseup(function(){ $("#divMsg").html("鼠标弹起：mouseup"); }); $("#e03").click(function(){ $("#buttonMsg").html("单击：click"); }).dblclick(function(){ $("#buttonMsg").html("双击：dblclick"); }); }); </script> </head> <body> <input id="e01" type="text" /><span id="textMsg"></span> <br/> <hr/> <div id="e02" ></div><span id="divMsg"></span> <br/> <hr/> <input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/> </body> </html>
24、页面加载 <--返回目录
* 标准API
$(document).ready(function(){...});
等价于 jQuery(document).ready(fn);
* 简化版
$(function(){...}) 等价于 jQuery(function(){...})
25、事件绑定 <--返回目录
* 处理 (下面方法内的参数type 和 events都是指事件)
bind(type ,fn) 给当前对象绑定一个事件。例如：A.bind("click", fn ); 类似：A.click( fn );
unbind(type ) 解绑bind绑定事件
one(type ,fn ) 给当前对象绑定一次事件。
-----------------------------------------
on(events , fn) 提供绑定事件处理程序所需的所有功能。完成3个方法功能.bind(), .delegate(), 和 .live().
off(events) 解绑
trigger(type) 在每一个匹配的元素上触发某类事件。例如：A.trigger("submit") ,类似 A.submit();
triggerHandler(type) 在每一个匹配的元素上触发某类事件。但不会执行浏览器默认动作，也不会产生事件冒泡。
* 委派
live(type , fn) 绑定事件，之后动态添加同样的成员，也具有相同的事件。
die(type) 解绑事件
-例子
$(".myClass").live("click",function(){
$("body").append("<input type='button' value='新生的按钮' class='myClass'/>"); //动态添加同样的成员，也具有相同的事件
//live换成on后，新添加的成员，不再有click事件
});
<body>
<input id="btn1" type="button" value="按钮1" class="myClass"/>
</body>
* 切换
hover(over , out)
简化版，鼠标移入和移出 ，A.mouseover( fn ).mouseout( fn) 简化 A.hover( fn , fn )
toggle( fn , fn , fn ,...) 执行click事件，每点击一次执行一个fn，然后循环
* jQuery可以给事件加别名 click.a click.b
26、事件案例：文字提示 <--返回目录
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文字提示</title> <!-- 引入jQuery --> <script src="./jquery/jquery-1.8.3.js" type="text/javascript"></script> <style type="text/css"> body{ margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%; } p{ clear:both; margin:0; padding:.5em 0; } /* tooltip */ #tooltip{ position:absolute; border:1px solid #333; background:#f7f5d1; padding:1px; color:#333; width:300px; display:none; } </style> <script type="text/javascript"> $(function(){ //将自带的提示，替换成 自定义提示 $(".mytooltip").mouseover(function(event){ //1 获得绑定的数据 var title = $(this).data("mytitle"); if(! title){ //没有 //获得自带提示 title = $(this).attr("title"); //将自带提示删除 $(this).removeAttr("title"); //绑定数据 $(this).data("mytitle",title) } //2 创建div var $new = $("<div id='tooltip'></div>"); //3设置提示 $new.html(title); //4定位 $new.offset({"left":event.pageX + 5,"top":event.pageY - 20}); //5追加到body，并显示 $new.appendTo("body").show(); }).mouseout(function(){ //删除 $("#tooltip").remove(); }).mousemove(function(event){ // 重写定位 $("#tooltip").offset({"left":event.pageX + 5,"top":event.pageY - 20}); }); }); </script> </head> <body> <p><a href="#" class="mytooltip" title="这是我的超链接提示1.">提示1.</a></p> <p><a href="#" class="mytooltip" title="这是我的超链接提示2.">提示2.</a></p> <p><a href="#" title="这是自带提示1.">自带提示1.</a></p> <p><a href="#" title="这是自带提示2.">自带提示2.</a> </p> </body> </html>
27、事件案例：图片提示(扩展) <--返回目录
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片提示</title> <!-- 引入jQuery --> <script src="./jquery/jquery-1.8.3.js" type="text/javascript"></script> <style type="text/css"> body{ margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%; } img{border:none;} ul,li{ margin:0; padding:0; } li{ list-style:none; float:left; display:inline; margin-right:10px; border:1px solid #AAAAAA; } /* tooltip */ #tooltip{ position:absolute; border:1px solid #ccc; background:#333; padding:2px; display:none; color:#fff; } </style> <script type="text/javascript"> $(function(){ var x = 10; var y = 20; var href; $("a[class=tooltip]").mouseover(function(e){ //1 获取对应标签的自带提示 //var title = $("a[class=tooltip]").attr("title"); //this代表的是DOM对象(页面中的元素) href = this.href; //删除自带提示 this.href = ""; //2 创建标签用于自定义提示 var $div = $("<div id='tooltip'><img src='"+href+"'></img></div>"); //3 将自定义提示的标签，添加到body标签下 $("body").append($div); //4 如何调整显示位置(相对鼠标的坐标值:e.pageX和e.pageY) $("#tooltip").css({ "top" : e.pageY + y + "px", "left" : e.pageX + x + "px" }).show(1000); }).mouseout(function(){ this.href = href; $("#tooltip").remove(); }).mousemove(function(e){ $("#tooltip").css({ "top" : e.pageY + y + "px", "left" : e.pageX + x + "px" }); }); }); </script> </head> <body> <h3>有效果：</h3> <ul> <li><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> <li><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> <li><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> <li><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> </ul> <br/><br/><br/><br/> <br/><br/><br/><br/> <h3>无效果：</h3> <ul> <li><a href="images/apple_1_bigger.jpg" title="苹果 iPod"><img src="images/apple_1.jpg" alt="苹果 iPod" /></a></li> <li><a href="images/apple_2_bigger.jpg" title="苹果 iPod nano"><img src="images/apple_2.jpg" alt="苹果 iPod nano"/></a></li> <li><a href="images/apple_3_bigger.jpg" title="苹果 iPhone"><img src="images/apple_3.jpg" alt="苹果 iPhone"/></a></li> <li><a href="images/apple_4_bigger.jpg" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"/></a></li> </ul> </body> </html>
28、效果(动画) <--返回目录
* 基本：通过改变元素 高度和宽度 进行显示或隐藏
show(speed,fn) 显示
参数1：speed速度。显示的时间，单位：毫秒。固定字符串：("slow","normal", or "fast")
参数2：fn 回调函数。动画效果完成之后回调函数。
hide(speed,fn) 隐藏
toggle(speed,fn) 切换
* 滑动：通过改变元素 高度 进行显示或隐藏
slideDown(speed,fn) 显示
slideUp(speed,fn) 隐藏
slideToggle(speed,fn) 切换
* 淡入淡出：通过改变元素 透明度 进行显示或隐藏
fadeIn() 显示
fadeOut() 隐藏
fadeToggle() 切换
fadeTo(speed,opacity,fn) 指定透明度
参数2：opacity 透明度，一个0至1之间表示透明度的数字
29、事件冒泡 <--返回目录
* 解释:子元素事件执行时，一并触发父元素相同的事件
* 如何防止事件冒泡
- 方式1；return false；
- 方式2：使用event对象提供的函数
1)事件回调函数function(event)
2)event.stopPropagation();
30、浏览器默认动作 <--返回目录
* <a href="www.baidu.com">链接</a>
href就是<a>标签的默认动作
* 如何阻止
方式1：
return false;
方式2：
event.preventDefault();
---