JQuery学习笔记

  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);