我是新创建元素
').appendTo($('div')); 269 | ~~~ 270 | - prepend() 将创建元素追加到指定元素的内部的最前，选择元素为已存在的元素 271 | ~~~ 272 | $('ul').prepend('我是新创建元素
'); 281 | ~~~ 282 | - insertBefore() 将新创建元素添加到选中元素同级紧挨着的前面，选择元素为新创建的 283 | ~~~ 284 | $('我是新创建元素
').insertBefore($('#CloseUncle')); 285 | ~~~ 286 | - after() 将新创建元素添加到选中元素同级紧挨着的后面，选择元素为已存在的元素 287 | ~~~ 288 | $('#CloseUncle').after('我是新创建元素
'); 289 | ~~~ 290 | - insertAfter() 将新创建元素添加到选中元素同级紧挨着的后面，选择元素为新创建的 291 | ~~~ 292 | $('我是新创建元素
').insertAfter($('#CloseUncle')); 293 | ~~~ 294 | - wrap() 用新创建的元素分别包裹选中的元素，选择元素为已存在的元素 295 | ~~~ 296 | // 给p,img和div标签分别包裹section 297 | $('button:eq(0)').click(function(){ 298 | $('p,img,div').wrap(''); 299 | }); 300 | ~~~ 301 | - wrapAll() 用新创建的元素整个包裹选中的元素，选择元素为已存在的元素 302 | ~~~ 303 | // 用section包裹p,img和div 304 | $('button:eq(1)').click(function(){ 305 | $('p,img,div').wrapAll(''); 306 | }); 307 | ~~~ 308 | - wrapInner() 用新创建元素包裹选中元素的内部，选择元素为已存在的元素 309 | ~~~ 310 | //用span分别包裹p和div的内部 311 | $('button:eq(2)').click(function(){ 312 | $('p,div').wrapInner(''); 313 | }); 314 | ~~~ 315 | > $.trim(字符串) 修剪掉字符串前后的空格 316 | 317 | #### 删除元素 318 | - remove() 删除选中元素，彻底删除连根拔起 319 | ~~~ 320 | $('ol').remove(); //ol包括li都删除 321 | ~~~ 322 | - empty() 清空选中元素，留空壳子 323 | ~~~ 324 | $('ul').empty(); //最后ul标签还存在 325 | ~~~ 326 | - detach() 删除选中的元素，但是不删除元素附带的资源(例如：其身上绑定的事件) 327 | ~~~ 328 | //创建图片 329 | var $img = $('
');
330 | $img.mouseover(function(){
331 | $img.attr('src', 'images/36/dalongnv.jpg');
332 | }).mouseout(function(){
333 | $img.attr('src', 'images/36/xiaolongnv.jpg');
334 | });
335 | // 删除图片
336 | $('button:eq(3)').click(function(){
337 | $img.detach();
338 | });
339 | //当再次添加图片时事件都还在
340 | ~~~
341 |
342 | #### 修改元素
343 | - replaceWith() 用新创建元素替换选中元素，选择元素为已存在元素
344 | ~~~
345 | $('.box').replaceWith('
');
346 | ~~~
347 | - replaceAll() 用新创建元素替换选中元素，选择元素为新创建元素
348 | ~~~
349 | $('').replaceAll($('.box'));
350 | ~~~
351 |
352 | #### 复制元素
353 | 使用clone()来复制元素
354 | ~~~
355 | $('ol').append($('ul>li').clone());
356 | ~~~
357 |
358 | ### 属性操作
359 | - attr(属性名,属性值) 修改或访问标签属性，一个参数表示访问，两个参数表示修改
360 | - removeAttr(属性名) 删除标签属性
361 | ~~~
362 | $('img').attr('title', ''); //删除后title属性还在只不过没有值
363 | $('img').removeAttr('title'); //删除后title属性也删除
364 | ~~~
365 | - addClass(类名) 给选中元素添加某个类
366 | ~~~
367 | $('img').addClass('lanbian');
368 | ~~~
369 | - removeClass(类名) 给选中元素删除某个类
370 | ~~~
371 | $('img').removeClass('lanbian');
372 | ~~~
373 | - toggleClass(类名) 给选中元素切换某个类
374 | ~~~
375 | $('img').toggleClass('lanbian');
376 | ~~~
377 | - hasClass(类名) 判断选中元素是否有某个类
378 | ~~~
379 | alert($('img').hasClass('lanbian'));
380 | ~~~
381 | - prop(属性名,属性值) 修改或访问表单元素的标签属性
382 | ~~~
383 | // 访问表单元素的类型
384 | // alert($('input').attr('type'));
385 | // 访问或修改表单元素属性的时候,.attr()有bug，需要使用.prop
386 | alert($('input').prop('type'));
387 | // 修改表单元素的类型
388 | $('input').prop('type', 'range');
389 | ~~~
390 | - val() 修改或访问表单元素的value值
391 | ~~~
392 | // 修改表单元素的值
393 | // $('input').prop('value', 80);
394 | $('input').val(80);
395 |
396 | // 访问表单元素的值
397 | // alert($('input').prop('value'));
398 | alert($('input').val());
399 | ~~~
400 |
401 | ### 文本操作
402 | - html() 修改或访问选中元素的html
403 | - text() 修改或访问选中元素的纯文本
404 |
405 | ### 样式操作
406 | - css() css()单属性修改 多属性修改 单属性访问
407 | ~~~
408 | // 设置box的CSS
409 | /*
410 | $('.box').css('background-color', '#ccc')
411 | .css('line-height', '200px')
412 | .css('text-align', 'center');
413 | */
414 | $('.box').css({'background-color':'#ccc', lineHeight:'200px', textAlign:'center'});
415 |
416 | // 获取box的字体大小
417 | alert($('.box').css('font-size'));
418 | ~~~
419 | - width() 修改或访问选中元素的宽度
420 | ~~~
421 | // $('.box').css('width', 300);
422 | $('.box').width(300);
423 | ~~~
424 | - height() 修改或访问选中元素的高度
425 | ~~~
426 | // $('.box').css('height', 300);
427 | $('.box').height(300);
428 | ~~~
429 | - innerWidth() 获取盒子的内容宽度+左右padding的宽度
430 | - innerHeight() 获取盒子的内容高度+左右padding的高度
431 | ~~~
432 | $('.box').innerWidth(); //盒子的内容宽度+左右padding的宽度
433 | $('.box').innerHeight(); //盒子的内容高度+上下padding的高度
434 | ~~~
435 | - outerWidth() 获取盒子的内容宽度+左右padding的宽度+左右border
436 | - outerHeight() 获取盒子的内容高度+左右padding的高度+上下border
437 | ~~~
438 | $('.box').outerWidth(); //盒子的内容宽度+左右padding的宽度+左右border
439 | $('.box').outerHeight();//盒子的内容高度+上下padding的高度+上下border
440 | ~~~
441 | - outerWidth(true) 获取盒子的内容宽度+左右padding的宽度+左右border+左右margin
442 | - outerHeight(true) 获取盒子的内容高度+左右padding的高度+上下border+上下margin
443 | ~~~
444 | // 盒子的内容宽度+左右padding的宽度+左右border+左右margin
445 | $('.box').outerWidth(true);
446 | // 盒子的内容高度+上下padding的高度+上下border+上下margin
447 | $('.box').outerHeight(true);
448 | ~~~
449 | - 获取浏览器窗口的宽高
450 | ~~~
451 | $(window).width(); //浏览器窗口的宽度
452 | $(window).height(); ////浏览器窗口的高度
453 | ~~~
454 | > 获取到的浏览器可视范围的宽高
455 |
456 | ### 其他操作
457 |
458 | #### 元素的滚动坐标值
459 | 隐藏在左侧内容的宽度，就叫做该元素滚动坐标值的横坐标，通过$el.scrollLeft()获取；
460 | 隐藏在上侧内容的高度，就叫做该元素滚动坐标值的纵坐标，通过$el.scrollTop()获取；
461 | 元素的滚动坐标值，常用于求窗口的滚动坐标值。
462 |
463 | #### 滚动到页面指定位置
464 | 对象应该选$('html,body')，如果只选择$('html')，那么firefox和IE可行，但是chrome不可以；如果只选择$('body')，chrome可以，但是firefox和IE不可行，所以为了兼容所有的浏览器，应该选择$('html,body')作为对象。
465 | 在.animate()自定义动画中，提供了一个属性scrollTop属性，我们只要把需要滚动的纵坐标值付给scrollTop属性即可滚动对应的位置。
466 | ~~~
467 | $('html,body').animate({scrollTop:0}, 500);
468 | ~~~
469 |
470 | #### 元素的文档坐标值
471 | 相对左上角的偏移量
472 | 横向的偏移量，就是该元素的文档坐标值的横坐标，用$el.offset().left来获取;
473 | 纵向的偏移量，就是该元素的文档坐标值的纵坐标，用$el.offset().top来获取;
474 | ~~~
475 | $('.box').offset().left; //选中元素文档坐标值的横坐标
476 | $('.box').offset().top; //选中元素文档坐标值的纵坐标
477 | ~~~
478 | #### 定位元素相对于定位点的坐标值
479 | 定位元素相对于定位点的坐标值：
480 | $el.position().left; 选中元素相对于定位点的横坐标；
481 | $el.position().top; 选中元素相对于定位点的纵坐标。
482 | ~~~
483 | $('img').position().left; // 选中元素相对于定位点的横坐标
484 | $('img').position().top; // 选中元素相对于定位点的纵坐标
485 | ~~~
486 |
487 | ## jQuery事件
488 |
489 | ### 标准DOM事件
490 |
491 | #### UI事件
492 | - unload 页面元素卸载时触发
493 | - scroll 可滚动元素或者宽口滚动时触发，如果连续滚动就会连续触发
494 | - resize 当窗口改变大小时触发
495 | - select 当文本框或者文本域中的内容被选中时触发
496 |
497 | #### 焦点事件
498 | - click 点击选中元素时触发
499 | - dblclick 双击选中元素时触发
500 | - mousedown 鼠标在选中元素上按下时触发
501 | - mouseup 在选中元素上松开鼠标按键时触发
502 | - mouseover 鼠标移上选中元素时触发
503 | - mouseout 鼠标离开选中元素时触发
504 | - mousemove 鼠标在选中元素上移动时触发，移动多=多次，触发多次
505 |
506 | #### 键盘事件
507 | - keydown 键盘的按键被按下时触发，事件源可以使文本框、文本域、window和document等
508 | - keyup 键盘的按键松开时触发，事件源可以使文本框、文本域、window和document等
509 | - keypress 鼠标按键被按下时触发
510 | > keydown和keypress区别：如果按下的是字符键两者都会触发，如果按下的功能键(ctrl、shift、alt等)只有keydown会被触发，keypress不会触发
511 |
512 | #### 表单事件
513 | - submit 表单提交时触发，事件源需要时form
514 | - change 表单元素的值发生改变时触发
515 | > change和input的区别：input是只要值一发生改变就会触发，change当值发生改变并失去焦点的时候触发；input的事件源需要时文本框或者文本域，change的事件源可以是文本框、文本域 、单选、复选、下拉；input兼容性没有input好
516 |
517 | ### jQuery自定义事件
518 |
519 | #### 页面载入事件
520 | ~~~
521 | $(function(){
522 |
523 | })
524 | ~~~
525 | #### 鼠标事件
526 | - mouseover(事件处理函数) 鼠标移上选中元素
527 | - mouseout(事件处理函数) 鼠标离开选中元素
528 | > 当事件源里面有子元素时，鼠标移到改子元素上时以上两个事件时有bug的，原因是：移上事件源里面的子元素上时会触发mouseout事件，然后以判断该子元素属于事件源的所以又触发mouseover。IE首先发现这个bug并提出了解决办法就是新增两个事件替换移上两个，其他浏览器厂商觉得也不错就采纳了。
529 | ~~~
530 | /* 此处使用这两个有bug
531 | $('.menu>li').mouseover(function(){
532 | $(this).children().slideDown();
533 | }).mouseout(function(){
534 | $(this).children().slideUp();
535 | });
536 | */
537 | ~~~
538 | - mouseenter(事件处理函数) 鼠标移上选中元素
539 | - mouseleave(事件处理函数) 鼠标离开选中元素
540 | ~~~
541 | $('.menu>li').mouseenter(function(){
542 | $(this).children().stop(true).slideDown();
543 | }).mouseleave(function(){
544 | $(this).children().stop(true).slideUp();
545 | });
546 | ~~~
547 | - hover(mouseenter事件处理函数,mouseleave事件处理函数) jQuery提供了mouseenter和mouseleave的合体形式，当事件处理函数相同时允许只写一个事件处理函数表示鼠标移上和离开都执行相同事件处理函数
548 | ~~~
549 | $('.menu>li').hover(function(){
550 | // $(this).children().stop(true).slideDown();
551 | $(this).children().stop(true).slideToggle();
552 | }).hover(function(){
553 | // $(this).children().stop(true).slideUp();
554 | $(this).children().stop(true).slideToggle();
555 | });
556 |
557 | $('.menu>li').hover(function(){
558 | $(this).children().stop(true).slideToggle();
559 | });
560 | ~~~
561 | > toggle事件类型在1.9后就废除了
562 |
563 | #### 焦点事件
564 | - focusin 表单元素获取焦点时
565 | - focusout 表单元素失去焦点时
566 | > focusin、focusout和focus、blur的区别：前者可以用于表单元素，也可以用于表单元素的父盒子；后者只能用于表单元素
567 |
568 | #### 事件绑定
569 | - 事件类型(fun) 快捷方式的事件绑定，不是所有事件类型都支持快捷方式
570 | - bind('事件类型',fun) 事件绑定的原型方式，所有快捷方式都可以用原型绑定
571 | - unbind() 解除bind绑定的事件，如果不写参数表示解绑选择元素的所有事件，如果写一个参数为事件类型表示解绑指定事件类型的所有事件，如果写两个参数事件类型和事件处理函数表示解绑执行事件类型和事件处理函数的事件
572 | - one('事件类型',fun) 只给选中的元素绑定一次事件
573 | - on() 凡是用bind绑定的事件都可以用on绑定
574 | - off() 解除on绑定的事件，如果不写参数表示解绑选择元素的所有事件，如果写一个参数为事件类型表示解绑指定事件类型的所有事件，如果写两个参数事件类型和事件处理函数表示解绑执行事件类型和事件处理函数的事件
575 | - error() 当选中元素出错时触发
576 | ~~~
577 | //错误处理事件，可以将出错的图片替换
578 | $('img').error(function(){
579 | //$(this).replaceWith('
');
580 | $(this).attr('src','images/logo.png');
581 | });
582 | ~~~
583 |
584 | #### 事件委托
585 | - delegate('子代的选择器','事件类'.fun) 添加事件委托
586 | - undelegate() 取消事件委托
587 | > 凡是可以用delegate做委托的事件一律可以用on做事件委托，取消委托用off()
588 | ~~~
589 | $('input:button').bind('click',function(){
590 | $('ul').prepend('
48 | 我是文字，我是来占位置的。
49 | 我是文字，我是来占位置的。
50 | 我是文字，我是来占位置的。
51 | 我是文字，我是来占位置的。
52 | 我是文字，我是来占位置的。
53 | 我是文字，我是来占位置的。
54 | 我是文字，我是来占位置的。
55 | 我是文字，我是来占位置的。
56 | 我是文字，我是来占位置的。
57 | 我是文字，我是来占位置的。
58 | 我是文字，我是来占位置的。
59 | 我是文字，我是来占位置的。
60 | 我是文字，我是来占位置的。
61 | 我是文字，我是来占位置的。
62 | 我是文字，我是来占位置的。
63 | 我是文字，我是来占位置的。
64 | 我是文字，我是来占位置的。
65 | 我是文字，我是来占位置的。
66 | 我是文字，我是来占位置的。
67 | 我是文字，我是来占位置的。
68 | 我是文字，我是来占位置的。
69 | 我是文字，我是来占位置的。
70 | 我是文字，我是来占位置的。
71 | 我是文字，我是来占位置的。
72 | 我是文字，我是来占位置的。
73 | 我是文字，我是来占位置的。
74 | 我是文字，我是来占位置的。
75 | 我是文字，我是来占位置的。
76 | 我是文字，我是来占位置的。
77 | 我是文字，我是来占位置的。
78 | 我是文字，我是来占位置的。
79 | 我是文字，我是来占位置的。
80 | 我是文字，我是来占位置的。
81 | 我是文字，我是来占位置的。
82 | 我是文字，我是来占位置的。
83 | 我是文字，我是来占位置的。
84 | 我是文字，我是来占位置的。
85 | 我是文字，我是来占位置的。
86 | 我是文字，我是来占位置的。
87 | 我是文字，我是来占位置的。
88 | 我是文字，我是来占位置的。
89 | 我是文字，我是来占位置的。
90 | 我是文字，我是来占位置的。
91 | 我是文字，我是来占位置的。
92 | 我是文字，我是来占位置的。
93 | 我是文字，我是来占位置的。
94 | 我是文字，我是来占位置的。
95 | 我是文字，我是来占位置的。
96 | 我是文字，我是来占位置的。
97 | 我是文字，我是来占位置的。
98 | 我是文字，我是来占位置的。
99 | 我是文字，我是来占位置的。
100 | 我是文字，我是来占位置的。
101 | 我是文字，我是来占位置的。
102 | 我是文字，我是来占位置的。
103 | 我是文字，我是来占位置的。
104 | 我是文字，我是来占位置的。
105 | 我是文字，我是来占位置的。
106 | 我是文字，我是来占位置的。
107 | 我是文字，我是来占位置的。
108 | 我是文字，我是来占位置的。
109 | 我是文字，我是来占位置的。
110 | 我是文字，我是来占位置的。
111 | 我是文字，我是来占位置的。
112 | 我是文字，我是来占位置的。
113 | 我是文字，我是来占位置的。
114 | 我是文字，我是来占位置的。
115 | 我是文字，我是来占位置的。
116 | 我是文字，我是来占位置的。
117 | 我是文字，我是来占位置的。
118 | 我是文字，我是来占位置的。
119 | 我是文字，我是来占位置的。
120 | 我是文字，我是来占位置的。
121 | 我是文字，我是来占位置的。
122 | 我是文字，我是来占位置的。
123 | 我是文字，我是来占位置的。
124 | 我是文字，我是来占位置的。
125 | 我是文字，我是来占位置的。
126 | 我是文字，我是来占位置的。
127 |
19 | 全选 20 |
45 | ×
46 | 
51 |
52 | 
72 |
73 | 百度一下，你就知道
74 | 
77 |
78 | 淘！我喜欢
79 | 
82 |
83 | 百度一下，你就知道了！
84 | 
87 |
88 | 百度一下，你就知道了！
89 | 
92 |
93 | 百度一下，你就知道了！
94 | 
97 |
98 | 百度一下，你就知道了！
99 | 
102 |
103 | 中国领先视频网站
104 | 
107 |
108 | 综合网购首选
109 | 
59 | 
33 | 
34 | 
35 | 
36 | 
37 | 显示所有内容
70 |
95 |
96 |
97 | 
您的评分为：1
59 |请往下滑
39 | 40 | 41 | -------------------------------------------------------------------------------- /错误事件处理.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
19 |
20 |
--------------------------------------------------------------------------------
/键盘事件.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |