- 它封装了JavaScript常用的功能代码，提供一种便捷的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
- jQuery主要包括jQuery Core(核心库)、jQuery UI(界面库)、Sizzle(CSS选择器)、jQueryMobile(jQuery移动版)和QUnit(测试套件)5个部分
32、jQuery特性
- 优雅的语法规则：发生在同一个jQuery对象上的一组动作，可直接连写，无需重复获取对象
- 框架封闭：jquery只建立一个名为jQuery的对象，其所有的方法都建立在这个对象之下
- 封装繁琐的底层技术：jQuery定义了大量的方法，还封装了大量的事件处理函数，是的jQuery处理事件绑定非常稳定；将所有的Ajax操作封装到一个函数$.ajax()中
- 自成体系：完全摆脱JavaScript的设计模式，允许用户在jQuery环境下跳动jQuery函数选择相关匹配元素，然后直接在jQuery对象上完成操作而无需在jQuery和JavaScript两种设计模式中来回切换
33、jQuery构造器
jQuery构造器即jQuery()函数，简写为$()，可以接收4个类型的参数
1 $(function(){
2 var red = $("p span"); //选择元素中包含的span元素，并返回该元素的jQuery对象引用指针
3 red.css("color","red"); //调用jQuery对象的css()函数，定义选取对象的CSS样式，其中第1个参数表示CSS属性名，第2个参数表示CSS属性值。
4 })
5 </script>
6 <script>
7 $(function(){
8 $("<div><span>文本块3</span></div>").appendTo("body");//HTML代码段
9 })
10 </script>
11 <script src="jquery/jquery-1.11.1.js" type="text/javascript"></script>
12 <script>
13 $(function(){
14 $("span").css("font-size","12px");//把元素转化为jQuery对象，在调用jQuery方法
15 })
16 </script>
17 <script>
18 $(function(){
19 alert("Hello World!");//jQuery绑定函数
20 });
21 </script>
22 <script>
23 $(function(){
24 var span = document.getElementsByTagName("span")[0]; //获取节点对象，此时返回DOM元素对象
25 var span = $(span); //把DOM对象转换为jQuery对象
26 span.css("color","red"); //调用jQuery对象的css()方法定义字体颜色为红色
27 });
28 </script>
29 <script>
30 $(function(){
31 var span = $("span")[0]; //把jQuery对象转换为DOM对象
32 span.style.color = "blue"; //调用DOM对象的style属性，设置字体颜色为蓝色
33 });
34 </script>
34、jQuery基本用法
1 <script>
2 $(function(){
3 var li = $("li");
4 li.each(function(n){
5 this.style.fontSize = 30- n*2 +"px";//$(this).css("font-size",30- n*2 +"px");
6 if(n==2) return false;
7 });
8 })
9 </script>
10 <script>
11 $(function(){
12 var li = $("li");
13 alert(li.size()); //返回值为10
14 alert(li.length); //返回值为10
15 })
16 </script>
17 <script>
18 $(function(){
19 var li = $("li").get().reverse(); //把当前jQuery对象转换为为颠倒的DOM集合
20 var ol = $("ol").html(li);
21 })
22 </script>
23 <script src="jquery/jquery-1.11.1.js" type="text/javascript"></script>
24 <script>
25 $(function(){
26 var li = $("li");
27 var temp = $("li:contains('陆 游')");
28 alert(li.index(temp));
29 })
30 </script>
31 </head>
32 <body>
33 <h1>宋词排行榜 </h1>
34 <ol>
35 <li>苏 轼《念奴娇·赤壁怀古》</li>
36 <li>岳 飞《满江红·怒发冲冠》 </li>
37 <li>李清照《声声慢·寻寻觅觅》 </li>
38 <li>苏 轼《水调歌头·明月几时有》 </li>
39 <li>柳 永《雨霖铃·寒蝉凄切》 </li>
40 <li>辛弃疾《永遇乐·千古江山》 </li>
41 <li>姜 夔《扬州慢·淮左名都》 </li>
42 <li>陆 游《钗头凤·红酥手》 </li>
43 <li>辛弃疾《摸鱼儿·更能消》 </li>
44 <li>姜 夔《暗香·旧时月色》 </li>
45 </ol>
46 <script>
47 $(function(){
48 var href = $("a").attr("href");//只显示第一个值
49 alert(href);
50 })
51 </script>
52 </head>
53 <body>
54 <ul>
55 <li><a href="http://www.baidu.com/" target="_blank">百度</a></li>
56 <li><a href="http://www.sohu.com/" target="_self">搜狐</a></li>
57 <li><a href="http://www.sina.com.cn/" target="_top">新浪</a></li>
58 <li><a href="http://www.qq.com/" target="new">腾讯</a></li>
59 </ul>
60 <script>
61 $(function(){
62 var href = $("a:contains('搜狐')").attr("href");
63 alert(href);
64 })
65 </script>
66 <script>
67 $(function(){
68 $("a").each(function(){
69 $(this).attr("title",this.innerHTML + "（" + $(this).attr("href") + "）" );
70 });
71 })
72 </script>
73 <script>
74 $(function(){
75 $("a").attr("title", function(){//增加属性
76 return this.innerHTML + "（" + $(this).attr("href") + "）" ;
77 });
78 })
79 </script>
80 <script>
81 $(function(){ //增加多个属性
82 $("img").attr({"100",height:"100",title:"这是一个示例",alt:"示例图像"});
83 })
84 </script>
85 <script>
86 $(function(){
87 $("img").removeAttr("width");//删除指定属性
88 })
89 </script>
90
91 <script>
92 $(function(){ //定义类样式
93 $("p").addClass("red");//$("p").attr("class","red");
94 })
95 </script>
96 <script>
97 $(function(){
98 $("li").each(function(){ //遍历jQuery对象内所有对象
99 this.onmouseover = function(){ //为当前元素注册鼠标经过时的事件
100 $(this).toggleClass("bg"); //开关背景样式类（bg）
101 }
102 this.onmouseout = function(){ //为当前元素注册鼠标移开时的事件
103 $(this).toggleClass("bg"); //开关背景样式类（bg）
104 }
105 this.onclick = function(){ //为当前元素注册鼠标单击时的事件
106 $(this).toggleClass("bg1"); //开关背景样式类（bg1）
107 }
108 });
109 })
110 </script>
111
112 <body>
113 <p>段落文本<span>1</span></p>
114 <script>
115 alert($("p").text());//输出段落文本1，忽略span标签
116 </script>
117 </body>
118 <body>
119 <p>段落文本<span>1</span></p>
120 <script>
121 $("p").text("<img src='images/1.jpg' width='100' />");//替换文本 输出<img……>
122 </script>
123 </body>
124 <body>
125 <p>段落文本<span>1</span></p>
126 <script>
127 alert($("p").html());//输出 段落文本<span>1</span>
128 </script>
129 </body>
130 <body>
131 <p>段落文本<span>1</span></p>
132 <script>
133 $("p").html("<img src='images/1.jpg' width='100' />");//输出 图片
134 </script>
135 </body>
136 <body>
137 <input type="text" value="文本框" />
138 <input type="radio" value="单选按钮" />
139 <input type="checkbox" value="复选框" />
140 <input type="hidden" value="隐藏域" />
141 <input type="submit" value="提交按钮"/>
142 <script>
143 alert($("input").val());
144 alert($($("input")[1]).val()); //显示单选按钮的值
145 alert($($("input")[2]).val()); //显示复选框的值
146 alert($($("input")[3]).val()); //显示隐藏域的值
147 alert($($("input")[4]).val()); //显示提交按钮的值
148 </script>
149 </body>
150 <body>
151 <select multiple="multiple">
152 <option value="1">选项1</option>
153 <option value="2" selected="selected">选项2</option>
154 <option value="3" selected="selected">选项3</option>
155 </select>
156 <script>
157 alert($("select").val());//输出 2,3
158 </script>
159 </body>
160 <body>
161 <input type="text" />
162 <script>
163 $("input").val("文本框的值");//为文本框赋值 文本框的值
164 </script>
165 </body>
166 <body>
167 <input type="radio" value="radio1" />单选按钮1
168 <input type="radio" value="radio2" />单选按钮2<br>
169 <input type="checkbox" value="check1" />复选框1
170 <input type="checkbox" value="check2" />复选框2<br>
171 <select multiple="multiple">
172 <option value="1">选项1</option>
173 <option value="2">选项2</option>
174 <option value="3">选项3</option>
175 </select>
176 <script>
177 $("input").val(["radio2","check2"]);//单选按钮和复选框必须要使用数组来传递值
178 $("select").val(["1","3"]);//下拉菜单可以不用数组传递值
179 </script>
180 </body>
35、选择器和过滤器
1 <script src="jquery/jquery-1.11.1.js" type="text/javascript"></script>
2 <script>
3 $(function(){
4 $("#p1"); //ID选择器
5 $("#box1 p"); //包含选择器
6 $("#box1>#p1"); //子选择器
7 $("p#p1"); //指定标签选择器
8 $("p[id='p1']"); //匹配属性等于特定属性值
9 $("[id$='1']"); //匹配属性值结尾的值
10 $("#box1 [id^='p']"); //包含选择器，配合匹配属性值开始的值
11 $("[id*='1']"); //匹配属性值包含某个字符串
12 })
13 </script>
14 <script>
15 $(function(){
16 var $temp = $("li");
17 $temp.css("color","red");//类选择器
18 })
19 </script>
20 <style type="text/css">
21 </style>
22 </head>
23 <body>
24 <ul id="list">
25 <li>列表项1</li>
26 <li>列表项2</li>
27 <li class="l3">列表项3</li>
28 <li></li>
29 </ul>
30 </body>
31 <script>
32 $(function(){
33 $("div:hidden").css("display","block");//使隐藏元素显示出来
34 })
35 </script>
36 <style type="text/css">
37 </style>
38 </head>
39 <body>
40 <div>盒子1</div>
41 <div style="display:none">盒子2</div>
42 <div><p>盒子3</p></div>
43 </body>
44 <script>
45 $(function(){//表单选择器，:input匹配input、select、button、textarea元素
46 $("input:text").css("border","solid 1px red");
47 $("input:checkbox").css("border","solid 1px red");
48 $("input:radio").css("border","solid 1px red");
49 $(":image").css("border","solid 1px red");
50 $(":file").css("border","solid 1px red");
51 $(":submit").css("border","solid 1px red");
52 $(":reset").css("border","solid 1px red");
53 $(":password").css("border","solid 1px red");
54 $(":button").css("border","solid 1px red");
55 })
56 </script>
57 <style type="text/css">
58 </style>
59 </head>
60 <body>
61 <form>
62 <input type="text" value="文本框" />
63 <input type="checkbox" value="复选框" />复选框
64 <input type="radio" value="单选按钮" />单选按钮
65 <input type="image" src="images/1.jpg" value="图像按钮" />
66 <input type="file" value="文件域" />
67 <input type="submit" value="提交按钮" />
68 <input type="reset" value="重置按钮" />
69 <input type="password" value="密码域" />
70 <input type="button" value="普通按钮" />
71 <select>
72 <option value="下拉菜单">下拉菜单</option>
73 </select>
74 <textarea>文本域</textarea>
75 <button>按钮</button>
76 </form>
77 </body>
78 <script>
79 $(function(){//过滤器是函数
80 var divs = $("div");
81 divs.eq(0).css("color","red");//索引值为0 即第一个div元素
82 divs.filter(".red,#box1").css("color","red");//过滤出满足匹配条件的div元素
83 divs.slice(0,2).css("color","red");//使用slice函数进行过滤
84 })
85 </script>
86 <style type="text/css">
87 </style>
88 </head>
89 <body>
90 <div>盒子1</div>
91 <div id="box1">盒子2</div>
92 <div class="red">盒子3</div>
93 </body>
36、文档处理、css处理
1 <script>
2 $(function(){
3 $("div").append("<span style='color:red'>套子</span>");//span标签放在div标签里，盒子后
4 })
5 </script>
6 <style type="text/css">
7 </style>
8 </head>
9 <body>
10 <div>盒子</div>
11
12 </body>
13 <script>
14 $(function(){
15 $("p").appendTo("#box");//p放在div里，div内容后
16 $("p").prepend($("#box")[0]);//div放在p里，p内容前
17 $("p").prependTo($("#box")[0]);//p放在div里，div内容前
18 })
19 </script>
20 <script>
21 $(function(){
22 $("div").after($("p"));
23 $("div").before($("p"));
24 $("div").insertAfter($("p"));
25 $("div").insertBefore($("p"));
26
27 })
28 </script>
29 <style type="text/css">
30 </style>
31 </head>
32 <body>
33 <p>段落</p>
34 <div id="box">盒子</div>
35 </body>
36 <script src="jquery/jquery-1.11.1.js" type="text/javascript"></script>
37 <script>
38 $(function(){
39 $("a").wrap(document.getElementsByTagName("li")[0]);// $("a").wrap("<div></div>");//为每个a元素包裹一层li元素
40 $("li").wrapAll(document.getElementsByTagName("ul")[0]);//为所有的li元素包裹一个ul元素
41 $("li").wrapInner("<span></span>");//为每个li元素内嵌一层span元素
42 })
43 </script>
44 <style type="text/css">
45 </style>
46 </head>
47 <body>
48 <a href="#">超链接1</a><a href="#">超链接2</a><a href="#">超链接3</a>
49 </body>
50 <script>
51 $(function(){
52 $("span").replaceWith("<div>盒子</div>");//输出 <div>盒子</div><div>盒子</div><div>盒子</div>
53 $("span").replaceAll("div");//与上相反
54 })
55 </script>
56 <style type="text/css">
57 </style>
58 </head>
59 <body>
60 <span>包子</span><span>包子</span><span>包子</span>
61 </body>
62 <script>
63 $(function(){
64 $("div").click(function(){
65 $(this).css("color","red");
66 }).clone(true).appendTo("p");//克隆事件添加到p标签里 段落文本之后
67 $("span").click(function(){
68 $(this).css("color","red");
69 })
70 var span=$("span").remove();// remove()删除元素不保留事件 单击不变色
71 $("p").prepend(span);//span元素剪切到span元素里 段落文本之前
72
73 /*
74 var span=$("span").detach();
75 $("p").prepend(span);//detach()删除元素保留事件 单击span变红
76 */
77 })
78 </script>
79 <style type="text/css">
80 </style>
81 </head>
82 <body>
83 <div>盒子1</div>
84 <p>段落文本3</p>
85 <span>span</span>
86 </body>
87 <script>
88 $(function(){
89 $("p").css({//CSS属性名可以不加引号，但是对于复合属性名，则必须增加引号
90 color:"blue",
91 "font-size":"14px",
92 "background-color":"red"
93 });
94 $("p").css("border","solid 1px blue");
95 alert($("p").css("border"));
96
97 })
98 </script>
99 <style type="text/css">
100 </style>
101 </head>
102 <body>
103 <p>段落1</p><p>段落2</p>
104 </body>
105 <script>
106 $(function(){
107 $("p:last").offset({
108 left:50,
109 top:50
110 });
111 var offset = $("p:last").offset();
112 alert( "左侧距离: " + offset.left + ", 顶部距离: " + offset.top );
113 })
114 </script>
115 <script>
116 $(function(){
117 var div = $("div");
118 $("p").html("innerHeight=" + div.innerHeight() + "<br> outerHeight=" + div.outerHeight());//输出innerHeight=199.8
119 outerHeight=299
120
121 })
122 </script>
123 <style type="text/css">
124 div{
125 100px;
126 height:100px;
127 padding:50px;
128 border:solid 50px red;
129 }
130 </style>
131 </head>
132 <body>
133 <div></div>
134 <p></p>
135 </body>
37、事件处理、动画处理
1 <script src="jquery-1.11.1.js" type="text/javascript"></script>
2 <script>
3 window.onload=function(){
4 alert("页面加载完毕4！");
5 }
6 window.onload=function(){
7 alert("页面加载完毕3！");
8 }
9 $(document).ready(function(){
10 alert("页面加载完毕2！");
11 })
12 $(document).ready(function(){
13 alert("页面加载完毕1！");
14 })
15
16 $(function(){
17 alert("页面加载完毕0！");
18
19 })
20 $(function(){
21 alert("页面加载完毕-1！");
22
23 });
24 function f(){
25 alert("页面加载完毕-2！");
26 }
27 </script>
28 <style type="text/css">
29 </style>
30 </head>
31 <body onload="f()">//2 1 0 -1 -2
32 </body>
33 <script>
34 $(function(){
35 $("div").bind("me",function(){//$('#myol li').bind('click',getHtml);$('#myol li').live('click',getHtml);$('#myol').delegate('li','click',getHtml);$('#myol li').on('click',getHtml);$('#myol').on('click', 'li',getHtml);
36 alert($(this).text());//live()方法已废除，bind()方法、delegate()方法都调用内部on()方法，建议使用on()方法，更快更灵活;
37 });
38 $("div").trigger("me");//默认时间和自定义事件必须由此方法来触发
39 /*
40 $("div").bind("mouseover",function(){//或者把trigger方法封装在其他事件中，借由鼠标滑入时自动触发
41 $("div").trigger("me");
42 })
43 */
44 $("div").bind("click",function(){//绑定鼠标单击事件
45 alert($(this).text());
46 })
47 $("p").bind("mouseover",function(){//借由鼠标滑入触发单击事件或者直接单击也可以触发该事件
48 $("div").trigger("click");
49 })
50 $("input").focus(function(){
51 $("<span>单击一次！</span>").appendTo("body");
52 })
53 $("#ok").click(function(){
54 $("input").triggerHandler("focus");//triggerHander方法阻止默认事件触发，本例聚焦事件只可以由单击事件触发，不再由聚焦事件触发
55 })
56 })
57 </script>
58 <script>
59 $(function(){
60 $("p").hover(//jQuery中自定义的两个事件hover(over,out)、toggle(fn,fn)
61 function(){
62 $(this).css("color","red");
63 },
64 function(){
65 $(this).css("color","transparent");//恢复默认颜色
66 }
67 );
68 $("footer").toggle(function(){//jQuery在1.9版本中删除toggle()方法
69 $(this).css("color","pink");
70 },
71 function(){
72 $(this).css("color","transparent");
73 }
74 );
75 $("div").one("click",{who:"zhu"},function(event){//one()事件仅能执行一次即自动撤销
76 alert(event.data.who);
77 });
78
79 });
80 </script>
81 <script>
82 $(function(){
83 $("p").show(1000,function(){//只有隐藏元素才可以执行show()方法
84 alert($(this).text()+"显示完毕");
85 })
86 $("div").slideDown("slow");//分大小写 隐藏元素以滑动效果显示
87 $("h2").show(1000,function(){//只有显示元素才可以执行hide()方法
88 alert($(this).text()+"隐藏完毕");
89 })
90 $("h2").slideUp("slow");//显示元素以滑动效果隐藏
91 $("h3").slideToggle("slow");//隐藏元素已经显示的元素 或者显示已经隐藏的
92 })
93 </script>
94 <style type="text/css">
95 </style>
96 </head>
97 <body>
98 <p style="display:none">段落文本</p>
99 <div style="display:none">示例div元素</div>
100 <h2>h2示例元素</h2><br/><br/>
101 <h3>h3元素示例</h3>
102
103 </body>
104 <script>
105 $(function(){
106 $("p").fadeIn("2000");//只能作用于隐藏元素
107 $("p").bind("mouseover",function(){//淡出淡入
108 $("p").fadeOut(100);
109 $("p").fadeIn(100);
110 $("p").fadeOut(100);
111 $("p").fadeIn(100);
112 })
113 $("div").fadeTo("slow",0.1,function(){
114 $(this).fadeTo("slow",1);
115 })
116 })
117 </script>
118 <style type="text/css">
119 </style>
120 </head>
121 <body>
122 <p style="display:none">段落文本段落文本段落文本段落文本段落文本</p>
123 <div>雨夜，湖边风雨发作，直教人瑟瑟发抖！</div>
124 </body>