1 //jquery中文在线文档www.css88.com
2 94.jQuery简介
3 $(document).ready和window.load的区别：
4 window.onload需要等所有资源加载完毕后才能执行（包括图片，音频，视频等）
5 $(document).ready()等dom树加载完毕后就可以执行
6 window.onload只能写一个，$(document).ready()可以写N个
7 $(document).ready()可以简写为$();如：$(function(){alert('ok');});
8 jQuery 2.x只支持IE9及以上
9
10
11 95.jquery对象和dom对象
12 //dom对象转换为jquery对象，只要用$()把dom对象包起来就可以了
13 var a = document.getElementById('a');
14 console.log($(a).val());
15 //让jquery和prototype共存
16 jQuery.noConflict()
17 console.log(jQuery('#a').val());
18 console.log($F('a'));
19
20
21 96.jquery基本选择器和层次选择器
22 E F//选择E元素所有的后代元素
23 E>F//选择E元素所有的子元素
24 E~F//选择E元素后面的所有F标签，等价于nextAll();
25 E+F//选择E元素后面的Fyuansu，等效于next()
26 $('div+p')等效于$('div').next()
27
28
29 97.过滤选择器及表单选择器（上）
30 $('p:not(".a")').css('background','red');
31 $('p:eq(3)').css('background','red')//第四个变成红色
32 $('p:gt(2)').css('background','red')
33 $('p:contains("javascript")').css('background','red')
34 $('p:contains("javascript")').show.siblings().hide();//可以做页面搜索用
35 $('p:has("strong")')css('background','red');//has()内可以传递标签，属性等
36
37
38 98.过滤选择器及表单选择器（下）
39 $('p[title=test').css('background','red');
40 $('p[title]')//只要有title属性的都能被选择到
41 $(':input')//选择所有input,textarea,select,button
42
43
44 99.DOM筛选
45 $('p').eq(0).css('background','red');
46 $('p:eq(0)').css('background','red');
47
48 $('p').filter(':even').css('background','red');//even,odd,last,first
49 $('p').first().css('background','red');
50 $('p').click(function(){
51 if($(this).is('.first')){
52 $(this).css('background','red');
53 }
54 });
55 //map:将一组元素转换层数组
56 var arr = $('input').map(function(){
57 return $(this).val();
58 }).get().join(',');
59 $('#res').html(arr);
60 //slice(m,n)，从下标为m开始取，直到下标为n，但不包括n
61 $('p').slice(1,3).css('background','red');
62
63
64 100.DOM遍历查找
65 $('#test').children().css('background','red');//包含所有子孙元素
66 $('#test').children('p').css('background','red');/
67 $('#test').parent();//选取父元素
68 $('#test').parents();//选取祖父元素
69 $('#test').parentsUntil('#father');//直到。。。为止
70 $('#test').offsetParent();//返回父元素中第一个position为relative或者absolute的
71 $('#test').next();//选择后面紧邻的兄弟元素
72 $('#test').nextAll();
73 $('#test').nextUntil();
74 $('#test').prev();//选择前面紧邻的一个兄弟元素
75 $('#test').siblings();//所有兄弟元素
76 $('#test').contents('test');
77 $('#test').parent().end();//终止在当前链的最新过滤操作
78 $('p').each(function(){
79 console.log($(this).val());
80 });
81
82
83 101.表格隔行变色
84 $('#table tr:even').css('background','#abcdef');
85 $('#table tr:odd').css('background','yellow');
86
87 $('#table tr').filter(':even').css('background','#abcdef').end.filter(':odd').css('background','yellow');
88
89
90 102.tab标签页
91
92
93 103.query选择器的优化
94 1.优先使用id选择器
95 2.在class选择器前添加标签名
96
97
98 109.滚动公告
99 setInterval(function(){
100 var list = $('ul>:first').clone(true);
101 $('ul').append(list);
102 $('ul>:first').remove();
103 },1000);
104
105
106 110.jQuery普通事件
107 $.holdReady(bool)//暂停或恢复ready事件
108 //获取鼠标焦点，可作用于父元素
109 $('div').focusin(function(){
110 console.log('focusin');
111 })；
112 mouseenter()/mouseleave()可以阻止冒泡事件的发生
113
114
115 111.jQuery表单事件
116 event.preventDefault();//阻止浏览器提交成功后的默认跳转行为
117 event.stopPropagation();//阻止冒泡
118
119
120 112.jquery事件绑定和移除
121 $('#test').bind('click',function(){
122 console.log('bind');
123 },true);//true表示阻止冒泡事件
124 $('#test').unbind('click');
125 $('#test').one(function(){
126 console.log('这个事件只执行一次，之后即被销毁');
127 });
128 $('#test').delegate('div','click',function(){
129 $('body').append('<p>')
130 });//官方推荐用on()/off()
131
132 //给事件添加命名空间
133 $('#test').bind('click.color',function(){
134 $(this).css('color','blue');
135 });
136 $('#test').unbind('click.color');
137
138 113.jQuery事件补遗
139 //hover(fun1,fun2)可以同时处理鼠标进入和离开事件
140 $('#test').hover(function(){
141 console.log('moveenter');
142 },function(){
143 console.log('moveleave');
144 });
145 //trigger()模拟事件的发生
146 $('#test').trigger('click');
147 //triggerHandler能阻止冒泡
148 $('#test').triggerHandler('click');
149
150
151 114.jQuery基础动画与渐变及滑动动画
152 $('#test').hide(500);
153 $('#test').hide('fast')//fast/slow/normal
154 $('#test').click(function(){
155 $('div').toggle(500);//自动切换show和hide
156 })；
157 //手动实现toggle()
158 $('#test').click(function(){
159 if($('div').is(':visible')){
160 $('div').hide(500);
161 }else{
162 $('div').show(500);
163 }
164 })；
165 //渐变动画
166 $('#test').click(function(){
167 $('div').fadeIn(500);//fadeIn透明度从0变成1,fadeOut反之,fadeToggle
168 });
169 $('#test').click(function(){
170 $('div').fadeTo(500,0.3,function(){
171 console.log('这里是透明度变到0.3后执行的回调函数');
172 });
173 });
174 //滑动动画
175 $('#test').click(function(){
176 $('div').slideDown(500);//slideDown,slideUp,slideToggle
177 });
178
179
180 115.jQuery自定义动画
181 $('#test').click(function(){
182 $('div').animate({
183 'left':800,//div的css属性一定要有position才会有效果
184 'top':400,
185 'opacity':'0.3'
186 },3000,function(){
187 console.log('这里是回调函数')
188 });
189 });
190
191
192 116.jQuery动画队列
193 $('#test').hover(function(){
194 $('div').stop(true,false).slideDown(500);
195 },function(){
196 $('div').stop(true,false).slideUp(500);
197 });//stop()第一个参数表示是否清除动画队列，第二个表示是否立即执行到最终结果
198
199 $('#run').click(function(){
200 $('div').animate({
201 'top':'500px'
202 },2000).animate({
203 'left':'800px'
204 },2000).animate({
205 'top':'40px'
206 },2000).animate({
207 'left':'10px'
208 },2000);
209 });
210 $('#stop').click(function(){
211 $('div').stop(true,true);
212 });
213 ('#dequeue').click(function(){
214 $('div').dequeue();//跳过下一个动画，然后同时执行后面的动画
215 });
216 $('#finish').click(function(){
217 $('div').finish();//清除动画队列，并立即执行到最终结果
218 })
219
220
221 117.jQuery动画算法插件
222 //easing
223 $('#test').click(function(){
224 $('div').animate({
225 'left':'800px'
226 },2000,'easeOutBounce');
227 });
228 //动画累加，每次点击运动100px
229 $('#test').click(function(){
230 $('div').animate({
231 'left':'+=100px'
232 },2000);
233 });
234
235
236 118.jQuery表单选择框实例
237 $('#chkAll').click(function(){
238 $('#form>:checkbox').attr('checked',true);
239 });
240 $('#chkNone').click(function(){
241 $('#form>:checkbox').Attr('checked',false);
242 });
243 $('#chkReverse').click(function(){
244 $('#form>:checkbox').Attr('checked',!$(this).attr('checked'));
245 });
246
247
248 119.jquery页面搜索实例
249 $('#search').click(function(){
250 var str = $('#str').val();
251 $('tr:not("#thead")').hide().filter(':contains("'+str+'")').show();
252 });
253
254
255 120.jquery仿微博发布框
256 var maxLength = 140;
257 $('textarea').keyup(function(){
258 var realLength = $(this).val().length;
259 $('#left').text(maxLength-realLength);
260 if(parseIni($('#left').text())<0){
261 $('#left').text('0');
262 $(this).val($(this).val().substring(0,140));
263 //这里不推荐使用substr
264 }
265 });
266
267
268 121.jquey中的ajax(上)
269 $('#submit').click(function(){
270 $('#load').load('test.html?data='+Math.random()+'#div2');
271 });
272
273
274 122.jquery中的ajax(下)
275 $('#submit').click(function(){
276 $.ajax({
277 url:'process.php',
278 type:'post',
279 data:{'username':$('#username').val()},
280 success:function(data){
281 if(data=='true'){
282 $('#load').html('ok');
283 }else{
284 $('#load').html('error');
285 }
286 }
287 });
288 });
289
290
291 123.jquery中ajax的实例及json格式
292 $('#submit').click(function(){
293 $.ajax({
294 url:'process.php',
295 type:'post',
296 success:function(data){
297 //data=[{"title":"this is title"}]
298 var res = eval(data);
299 $('#info').html(res[0].title);
300 }
301 });
302 });
303
304
305 125.jquey中ajax执行提示
306 $(document).ajaxStart(function(){
307 $('#loading').show();
308 }).ajaxStop(function(){
309 $('#loading').hide();
310 });
311
312 $('#submit').click(function(){
313 var data = $('#form').serialize();
314 $.ajax({
315 url:'process.php',
316 type:'post',
317 data:data,
318 success:function(){
319 $('#res').html('ok');
320 }
321 });
322 });
323
324
325 127.ajax请求错误处理
326 $('#submit').click(function(){
327 var data = $('#form').serialize();
328 $.ajax({
329 url:'process.php',
330 type:'post',
331 timeout:5000,
332 data:data,
333 success:function(){
334 $('#res').html('ok');
335 }
336 error:function(jqXHR,textStatus,errorThrown){
337 if(errorThrown=='NOT FOUND'){
338 $('#error').html('您请求的地址不存在！');
339 }
340 if(textStatus=='timeout'){
341 $('#error').html('请求超时');
342 }
343 }
344 });
345 });
346 //全局错误，会优先执行
347 $(document).ajaxError(function(){
348 $('#error').html('error');
349 });
350
351
352 128.jQuery类级别插件开发（不常用）
353 1.直接给jQuery添加全局函数
354 jQuery.myAllert(str){
355 alert(str);
356 }
357 $.myAllert('Hello World!');
358
359 2.用extend()方法
360 jQuery.extend(){
361 myAllert:function(str){
362 alert(str);
363 }
364 }
365
366 3.使用命名空间
367 jQuery.jql = {
368 centerObj:function(obj){
369 obj.css({
370 'top':($(window).height()-obj.height())/2,
371 'left':($(window).width()-obj.width())/2,
372 'position':'absolute'
373 });
374 return obj;//便于jquery进行链式操作
375 }
376 }
377 $.jql.centerObj($('#obj'));
378
379
380 129.jQuery对象级插件开发
381 ;(function($){
382 $.fn.plugin = function(options){
383 var defaults = {
384 //各种参数，各种属性
385 }
386 var option = $.extend(defaults,options);
387 this.each(function(){
388 //实现功能的代码
389 });
390 return this;
391 }
392 })(jQuery);
393
394 //开发一个插件，要求奇数行颜色为#38a38a，偶数行颜色为#09f，
395 //当鼠标放上去时变成yellow，鼠标移开时显示原来的颜色
396 ;(function($){
397 $.fn.table = function(options){
398 var defaults = {
399 //各种参数，各种属性
400 evenRowClass:'evenRow',
401 oddRowClass:'oddRow',
402 currentRowClass:'currentRow',
403 eventType1:'mouseover',
404 eventType2:'mouseout'
405 }
406 var option = $.extend(defaults,options);
407 this.each(function(){
408 //实现功能的代码
409 $(this).find('tr:even').addClass(options.evenRowClass);
410 $(this).find('tr:odd').addClass(options.oddRowClass);
411
412 $(this).find('tr').mouseover(function(){
413 $(this).addClass(options.currentRowClass);
414 }).mouseout(function(){
415 $(this).removeClass(options.currentRowClass);
416 });
417 //bind()方法，更灵活
418 $(this).find('tr').bind(options.eventType1,function(){
419 $(this).addClass(options.currentRowClass);
420 });
421 $(this).find('tr').bind(options.eventType2,function(){
422 $(this).removeClass(options.currentRowClass);
423 });
424 });
425 return this;
426 }
427 })(jQuery);
428
429 //调用
430 $('#table').table({
431 evenRowClass:'evenRow',
432 oddRowClass:'oddRow',
433 currentRowClass:'currentRow',
434 eventType:'click'
435 });
436
437 //tab标签页
438 ;(function($){
439 $.fn.tab = function(options){
440 var defaults = {
441 //各种参数，各种属性
442 currentClass:'current'
443 tabNav:'tabNav>li',
444 tabContent:'tabContent>div',
445 eventType:'click'
446 }
447 var option = $.extend(defaults,options);
448 this.each(function(){
449 //实现功能的代码
450 var _this = $(this);
451 _this.find(options.tabNav).bind(options.eventType,function(){
452 $(this).addClass(options.currentClass).siblings().removeClass(options.currentClass);
453 var index = $(this).index();
454 _this.find(options.tabContent).eq(index).show().siblings().hide();
455 })
456 });
457 return this;
458 }
459 })(jQuery);
浙公网安备 33010602011771号