码迷，mamicode.com
首页 > Web开发 > 详细

jQuery三天复习.md

时间：2016-09-09 12:05:41      阅读：293      评论：0      收藏：0      [点我收藏+]

标签：

jQuery 复习--by 传智前端与移动开发学院

1. jQuery是什么？(了解)

##2. jQuery的重点

  • 2.1 jQuery入口函数(全球都会)

  • 2.2 jQuery的选择器(其实就是CSS的选择器)

  • 2.3 jQuery的Dom操作

  • 2.4 jQuery的样式操作

  • 2.5 jQuery的动画

  • 2.6 jQuery的事件处理

3.jQuery的入口函数

  • 3.1 语法

    • jQuery(document).read(function(){ });

    • $(function(){ });// **

    • window.onlaod = function()

    • $ === jQuery // $是jQuery全局函数的别名。

  • 3.2注意事项： （重点）

    • document ready: 是html文档准备就绪，也就是dom树创建完成了。可以进行dom操作了。
      重要的是：html页面下载完成，并准备就绪

    • window.onload: 是整个页面所有的资源都加载完成，图片、js、css等...

  • 3.3 文档加载顺序： （重点）

    • 下载html页面，解析html标签，遇到link标签加载css，遇到script加载js..

4. jQuery 选择选取元素

4.1 jQuery选择器

  • 4.1.1 ID选择器（js一般尽量用ID选择器，效率最高） （重点）

    • $("#id").html();

  • 4.1.2 类选择器 （重点）

    • $(".className").text();

  • 4.1.3 标签选择器 （重点）

    • $(‘p‘).click();

  • 4.1.4 属性选择器

    • $("li[id]")、 $("li[id=‘link‘]").fadeIn();

  • 4.1.5 层级选择器 （重点）

    • $("li .link").show();

  • 4.1.6 父子选择器

    • $("ul > li")

  • 4.1.7 伪类选择器

    • $("p:first")

    • $("ul li:eq(3)")

  • 4.1.8 表单选择器

    • $(":text")

    • $(":checkbox")

    • $(":checked")

4.2 选择器汇总

  1. * $("*") 所有元素 
  2. #id $("#lastname") id="lastname" 的元素 
  3. .class $(".intro") 所有 class="intro" 的元素 
  4. element $("p") 所有 <p> 元素 
  5. .class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素 
  1. :first $("p:first") 第一个 <p> 元素 
  2. :last $("p:last") 最后一个 <p> 元素 
  3. :even $("tr:even") 所有偶数 <tr> 元素 
  4. :odd $("tr:odd") 所有奇数 <tr> 元素 
  1. :eq(index) $("ul li:eq(3)") 列表中的第四个元素（index 从 0 开始） 
  2. :gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素 greater than 
  3. :lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素 less than 
  4. :not(selector) $("input:not(:empty)") 所有不为空的 input 元素 
  5.  
  6. :header $(":header") 所有标题元素 <h1> - <h6> 
  7. :animated 所有动画元素 
  1. :contains(text) $(":contains(‘W3School‘)") 包含指定字符串的所有元素 
  2. :empty $(":empty") 无子（元素）节点的所有元素 
  3. :hidden $("p:hidden") 所有隐藏的 <p> 元素 
  4. :visible $("table:visible") 所有可见的表格 
  5.  
  6. s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素 
  1. [attribute] $("[href]") 所有带有 href 属性的元素 
  2. [attribute=value] $("[href=‘#‘]") 所有 href 属性的值等于 "#" 的元素 
  3. [attribute!=value] $("[href!=‘#‘]") 所有 href 属性的值不等于 "#" 的元素 
  4. [attribute$=value] $("[href$=‘.jpg‘]") 所有 href 属性的值包含以 ".jpg" 结尾的元素 
  1. :input $(":input") 所有 <input> 元素 
  2. :text $(":text") 所有 type="text" 的 <input> 元素 
  3. :password $(":password") 所有 type="password" 的 <input> 元素 
  4. :radio $(":radio") 所有 type="radio" 的 <input> 元素 
  5. :checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素 
  6. :submit $(":submit") 所有 type="submit" 的 <input> 元素 
  7. :reset $(":reset") 所有 type="reset" 的 <input> 元素 
  8. :button $(":button") 所有 type="button" 的 <input> 元素 
  9. :image $(":image") 所有 type="image" 的 <input> 元素 
  10. :file $(":file") 所有 type="file" 的 <input> 元素 
  1. :enabled $(":enabled") 所有激活的 input 元素 
  2. :disabled $(":disabled") 所有禁用的 input 元素 
  3. :selected $(":selected") 所有被选取的 input 元素 
  4. :checked $(":checked") 所有被选中的 input 元素 

4.3 jQuery选择方法

  • 4.3.1 获取父级元素

  1. * $(selector).parent(); //获取直接父级 
  2. * $(selector).parents(‘p‘); //获取所有父级元素直到html  

  • 4.3.2 获取子代和后代的元素

  1. * $(selector).children(); //获取直接子元素 
  2. * $(selector).find("span"); //获取所有的后代元素 
  3. * find方法 可能用的多。 

  • 4.3.3 获取同级的元素

  1. * $(selector).siblings() //所有的兄弟节点 
  2. * $(selector).next() //下一个节点 
  3. * $(selector).nextAll() //后面的所有节点 
  4. * $(selector).prev() //前面一个的兄弟节点 
  5. * $(selector).prevAll() //前面的所有的兄弟节点 

  • 4.3.4 过滤方法

  1. * $("div p").last(); //取最后一个元素 
  2. * $("div p").first(); //取第一个元素 
  3. * $("p").eq(1); //去第n个元素 
  4. * $("p").filter(".intro"); //过滤，选择所有p标签带有 .intro类 
  5. $(‘p.intro‘) 
  6. * $("p").not(".intro"); //去除，跟上面的filetr正好相反 

5.jQuery的Dom操作

5.1 获取html的内容

  1. $(selector).text() - 设置或返回所选元素的文本内容 
  2. $(selector).html() - 设置或返回所选元素的内容（包括 HTML 标记） 
  3. $(selector).val() - 设置或返回表单字段的值 

  • 获取和设置相同方法名,通过不同参数来确定是获取还是设置值

  1. $("#blin").text("传智播客"); 
  2. var txt = $("#blin").text(); 

  • 使用html来创建dom的方式效率比较高。 远大于： document.createElement();

  • 案例：02动态创建表格.html

5.2 样式操作

  • 5.2.1 基本样式操作

  1. $(selector).css("color","red") |css({}) 设置或返回匹配元素的样式属性。 
  2. $(selector).height() 设置或返回匹配元素的高度。 
  3. $(selector).offset().left => { left:99, top: 22} 返回第一个匹配元素相对于文档的位置。left,top 
  4. $(selector).offsetParent() 返回最近的定位祖先元素。 
  5. $(selector).position() 返回第一个匹配元素相对于父元素的位置。 
  6. $(window).scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移。 
  7. $(window).scrollTop(0) 设置或返回匹配元素相对滚动条顶部的偏移。 
  8. <!-- onscroll --> 
  9. $(selector).on("scroll",function(){}); 
  10.  
  11. $(selector).width() 设置或返回匹配元素的宽度。 

  • 5.2.2 样式类操作尽量操作样式类，少直接操作css属性

  1. $(selector).addClass(‘class‘); 向匹配的元素添加指定的类名。 
  2. $(selector).removeClass(‘class‘); 从所有匹配的元素中删除全部或者指定的类。 
  3. $(selector).toggleClass(‘class‘) 从匹配的元素中添加或删除一个类。 
  4. $(selector).hasClass(‘class‘) 检查匹配的元素是否拥有指定的类。 

5.3 属性操作

  1. $(selector).attr("id") 设置或返回匹配元素的属性和值 
  2. $(selector).removeAttr()从所有匹配的元素中移除指定的属性。 

5.4 动态创建

  1. $(selector).append() - 在被选元素的结尾插入内容 
  2. $(selector).append(node)  
  3. $(selector).append(‘<div></div>‘)  
  4. $(selector).appendTo(); - 追加到.. 
  5.  
  6.  
  7.  
  8. $(selector).prepend() - 在被选元素的开头插入内容 
  9. $(selector).after() - 在被选元素之后插入内容 
  10. $(selector).before() - 在被选元素之前插入内容 

案例04城市选择案例.html

6. 事件处理

6.1 简单事件绑定方法

  • .click(hander) .click() //绑定事件 或者触发 click事件

  • .blur() //失去焦点事件，同上

  • .hover(mousein, mouseleave) //鼠标移入，移出

  • mouseout： 当鼠标离开元素及它的子元素的时都会触发。

  • mouseleave: 当鼠标离开自己时才会触发，子元素不触发。

  • .dbclick() 双击

  • change 改变,比如：文本框发送改变，下来列表发生改变等...

  • focus 获得焦点

  • keyup, keydown, keypress : 键盘 键被按下。

  • mousedown, mouseover

6.2 绑定事件的方式 bind方式（不推荐，1.7以后的jQuery版本被on取代）

  • 语法格式：.bind( eventType [, eventData ], handler )

  • 参数说明

    • 第一个参数：事件类型

    • 第二个参数：传递给事件响应方法的数据对象，可以省略。

    • 事件响应方法中获取数据方式： e.data

    • 第三个参数：事件响应方法
      第二个参数可以省略。

  1. 例如：  
  2. $("p").bind("click", function(e){ 
  3. //事件响应方法 
  4. }); 
  5.  
  6. $("p").on(‘click‘,function(e){ 
  7. //事件响应方法 
  8. }) 

6.3 delegate方式（推荐，性能高，支持动态创建的元素）

  1. * 语法格式：$(selector).delegate( selector, eventType, handler ) 
  2. * 语法说明： 
  3. - 第一个参数:selector， 子选择器 
  4. - 第二个参数：事件类型 
  5. - 第三个参数：事件响应方法 
  6.  
  7. ``` 
  8. 例如：  
  9. $(".parentBox").delegate("p", "click", function(){ 
  10. //为 .parentBox下面的所有的p标签绑定事件 
  11. }); 
  12.  
  13. $(".parentBox").on("click","p", function(){ 
  14. //为 .parentBox下面的所有的p标签绑定事件 
  15. }); 
  16. ``` 
  17. *优势：效率较高* 

6.4 one绑定一次事件的方式

  1. * .one( events [, data ], handler ) 
  1. 例如： 
  2. $( "p" ).one( "click", function() { 
  3. alert( $( this ).text() ); 
  4. }); 
  5.  
  6. $("p").on("click",function(){ 
  7. $(this).off(‘click‘);//事件方法执行了一次后，就立即解绑事件 
  8. }) 

6.5 on绑定的方式（整合了bind、delegate 烈建议使用的方式））

  • jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法

  • 语法格式：$(selector).on( events [, selector ] [, data ], handler )

  • 参数介绍：

    • 第一个参数：events，事件名

    • 第二个参数：selector,类似delegate

    • 第三个参数: 传递给事件响应方法的参数

    • 第四个参数：handler，事件处理方法

  1. 例如： 
  2. //绑定一个方法 
  3. $( "#dataTable tbody tr" ).on( "click", function() { 
  4. console.log( $( this ).text() ); 
  5. }); 
  6.  
  7. //给子元素绑定事件 
  8. $( "#dataTable tbody" ).on( "click", "tr", function() { 
  9. console.log( $( this ).text() ); 
  10. }); 
  11.  
  12. //绑定多个事件的方式 
  13. $( "div.test" ).on({ 
  14. click: function() { 
  15. $( this ).toggleClass( "active" ); 
  16. }, mouseenter: function() { 
  17. $( this ).addClass( "inside" ); 
  18. }, mouseleave: function() { 
  19. $( this ).removeClass( "inside" ); 
  20. } 
  21. }); 

6.6 解绑

6.7 触发事件

  • 6.7.1 简单事件触发

    • $(selector).click(); //触发 click事件

  • 6.7.2 trigger方法触发事件

    • $( "#foo" ).trigger( "click" );

  • 6.7.3 triggerHandler触发 事件响应方法，不触发浏览器行为

    • $( "input" ).triggerHandler( "focus" );

6.8 event对象的简介

7. jQuery动画系统

7.1隐藏显示

  1. * $(selector).show(speed,callback); 
  2. * $(selector).hide(1000); 
  3. * $(selector).toggle("slow"); 
  4.  
  5. * 三个方法的语法都一致，参数可以有两个，第一个是动画的速度，第二个是动画执行完成后的回调函数。 
  6. * 第一个参数是：可以是单词或者毫秒数 

7.2淡入淡出

  1. $(selector).fadeIn(speed, callback) 
  2. $(selector).fadeOut(1000) 
  3. $(selector).fadeToggle(‘fast‘,function(){}) 
  4. 参数等同于 7.1 
  5.  
  6. * $(selector).fadeTo(.5); //淡入到 0透明，1不透明 

7.3滑动

  1. * $(selector).slideDown(speed,callback); 
  2. * $(selector).slideUp(speed,callback); 
  3. * $(selector).slideToggle(speed,callback); 

7.4动画

  1. * $(selector).animate({params},speed,callback); 
  1. $("button").click(function(){ 
  2. $("div").animate({ 
  3. left:‘250px‘, 
  4. opacity:‘0.5‘, 
  5. height:‘150px‘, 
  6. width:‘150px‘ 
  7. },2000); 
  8. }).animate({},1000);  

7.5结束动画

  1. * $(selector).stop() 
  2. * $(selector).stop(stopAll,goToEnd); 

  • 案例：

8. jQuery补充

  • 8.1 each函数

    • 全局的

      • $.each(array, function(index, object){})

    • 普通jQuery对象的each方法

      • $("li").each(function(index, element){} )

      • 参数的顺序是一致的。

jQuery三天复习.md

标签：

原文地址：http://www.cnblogs.com/shuiyaodongwu310988929/p/5855696.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！