JQuery 学习总结及实例

Posted on feb. 2 2014

JQuery 学习总结及实例

1、JQuery简介普通JavaScript的缺点：每种控件的操作方式不统一，不同浏览器下有区别，要编写跨浏览器的程序非常麻烦。因此出现了很多对JavaScript的封装库，比如Prototype、Dojo、ExtJS、JQuery等，这些库对JavaScript进行了封装，简化了开发。这些库是对JavaScript的封装，也就是咱们调用JQuery的一句函数，JQuery内部这句函数帮我们调用JavaScript中的代码几十句，因为JQuery就是JavaScript语法写的一些函数类，内部仍然是调用JavaScript实现的，所以并不是代替JavaScript的。使用JQuery的代码、编写JQuery的扩展插件等仍然需要JavaScript的技术，Jquery本身就是一堆JavaScript函数。

       （1、Jquery是最火的JavaScript库，已集成到VS2010，MS的Ajax toolkit和JQuery结合也是最方便，JQuery的扩展插件也是非常多。

       （2、JQuery的优点：尺寸小、使用简单方便（Write Less, Do More，吃得少干得多。

                 链式编程（$("/#div1").draggble().show().hide().fly()）、
                 隐式迭代  （自动对于多个元素进行迭代方法调用））、

                屏蔽浏览器差异跨浏览器兼容性好（IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome）、插件丰富、 开源、免费。
       （3、VS中JavaScript、JQuery的自动完成功能：在VS2010中直接有，VS008需要安装VisualStudio 和VS90SP1-KB958502-x86补丁会更强更好用, 下

               载地址见备注。然后引用jquery-1.4.1.js，jquery-1.4.1-vsdoc.js放到同目录下，不需要在页面引用。
       （4、vsdoc是vs2008sp1以后增加的一个技术，将js文件对应的vsdoc（相当于js库提供的方法的说明库）放到和js一起，就有会第三方js的自动提示的功能

2、简单的JQuery之Ready

 （1、注册事件的函数，和普通的dom不一样，不需要在元素上标记on/*/*这样的事件。

$(document).ready(function(){

       alert("加载完毕！");
   });

（2、当页面Dom元素加载完毕时执行代码，可以简写为： $(function(){

       alert("加载完毕！");
  });

  （3、和onload类似，但是onload只能注册一次（没有C/#中的+=机制），后注册的取代先注册的，而ready则可以多次注册都会被执行。
                window.onload=function(){alert("1")};window.onload=function(){alert("2")};//结果只弹出2

  （4、JQuery的ready和Dom的onload的区别(/*)：onload是所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发，而ready则是Dom元素创建完毕后就被触发，这样可以提高网页的响应速度。在jQuery中也可以用$(window).load()来实现onload那种事件调用的时机。
       $(function(){alert("1111");});//简写方式

3、JQuery的函数

$.map(array,fu) 得到函数的返回值和$.each(array,fn)调用函数处理没有返回值

map函数和each函数

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4 5 6 18 19 20 21 22

4、JQuery对象和Dom对象（1、$('/#div1')得到的就是jQuery对象，jQuery对象只能调用jQuery对象封装的方法，不能调用Dom对象的方法，Dom对象也不能调用jQuery对象的方法，所

             以 alert($('/#div1').innerHTML是错的，因为innerHTML是DOM对象的属性。
     （2、Array是JS语言本身的对象，不是Dom对象，因此不需要转换为Jquery对象才能用

     （3、将Dom对象转换为JQuery对象的方法，$(dom对象)；当调用jQuery没有封装的方法的时候必须用Dom对象，转换方法：vardomobj = jqobj[0]或者
              vardomobj=jqobj.get(0)

     （4、在引用外部js的Script标签内不能再写js代码，引用外部js的Script标签也不能用简写方法闭合。

JQuery对象和Dom对象

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4 5 6 23 24 25

26 测试red27 28

29 30

5、JQuery 选择器

（1、$(“/#div1”).html();

（2、$("TagName")来获取所有指定标签名的jQuery对象，相当于getElementsByTagName：

           例如获得所有的P：$("p").html("我们都是P");

 （3、标签选择器，拥有样式的标签选择器
         ☆ 多条件选择器：$("p,div,span.menuitem")，同时选择p标签、div标签和拥有menuitem样式的span标签元素（类似于CSS选择器）

         ☆ 注意选择器表达式中的空格不能多不能少。易错！
         ☆ 层次选择器：

☆☆$("div li")获取div下的所有li元素（后代，子、子的子……） ☆☆$("div > li")获取div下的直接li子元素

☆☆$(".menuitem +div")获取样式名为menuitem之后的第一个div元素（不常用） ☆☆$(".menuitem ~div")获取样式名为menuitem之后所有的div元素（不常用）

案例1：

JQuery选择器1

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4 5 6 7 16 19 20 21

23 test1

25 test2

27 test3

29 30

6、JQuery的迭代如何判断对象是否存在，jQuery选择器返回的是一个对象数组(数组中的每个对象还是Dom对象)，调用text()、html()、click()之类方法的时候其实是对数组中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错，如果需要判断指定的id是否存在，应该写：

if($("/#btn1").length <= 0) {

            alert("id为btn1的元素不存在！");

} 7、节点遍历

    （1、  next() 方法用于获取节点之后的挨着的第一个同辈元素， 
    （2、$(".menuitem").next("div") 、 nextAll() 方法用于获取节点之后的所  有同辈元素， $(".menuitem").nextAll("div")  prev 、 prevAll 之前的元素   
    （3、siblings() 方法用于获取所有同辈元素，$(".menuitem").siblings("li")   siblings 、next 等所有能传递选择器的地方能够使用的语法都和 $() 语法一样。

节点遍历

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4 5 6 24 25 26

27 aa

29 bb

31 cc

33 p1

35 p2

37 dd

39 ee

40 41

8、链式编程

  链式编程就是对象一棒棒向下传，能不能正确传下来要看返回值，html()不能传，prevAll().nextAll()也传错。

           $("/#tableRating td").click(function() {$(this).prevAll().next().html("a"); });//经典！

案例1：样式的增删：addClass和removeClass 添加样式和移除样式

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4 5 9 10 14 15 16

111111

19 20

案例2：五角星评分

五角星评分

1 // 2 $(function() { 3 $("/#ratings td").html("") 4 .mouseover(function() { $("/#ratings td").html(""); $(this).nextAll().html(""); }); 5 6 }); 7 // 8 9 $(function() { 10 $("/#ratings td").html("") 11 .mouseover(function() { $("/#ratings td").html("") 12 .siblings().html(""); 13 $(this).nextAll().html(""); 14 }); 15 16 }); 17 18 19

20 21

9、基本过滤选择器（1、:first 选取第一个元素。 $("div:first") 选取第一个

（2、:last 选取最后一个元素。 $("div:last") 选取最后一个

（3、:not( 选择器 ) 选取不满足 " 选择器 " 条件的元素， $("input:not(.myClass)") 选取样式名不是 myClass 的（4、:even 、 :odd ，选取索引是奇数、偶数的元素： $("input:even") 选取索引是奇数的（5、:eq( 索引序号 ) 、 :gt( 索引序号 ) 、 :lt( 索引序号 ) 选取索引等于、大于、小于索引序号的元素，比如 $("input:lt(5)") 选取索引小于 5 的

       （6、$(":header") 选取所有的 h1 …… h6 元素（ /* ） 
              $("div:animated") 选取正在执行动画的 <div> 元素。   （ /* ）

案例1：

    $("/#table1 tr:last").css("color", "red");
    $("/#table1 tr:gt(0):lt(3)").css("color", "red");//lt(3)是从gt(0)后得到的新序列中的序号，不要写成lt(4);
    $("/#table1 tr:gt(0):even").css("background", "red"); //表头不参与"正文表格的奇数行是红色背景",所以gt(0)去掉表头

10、相对选择器

   不仅可以使用选择器进行进行绝对定位，还可以进行相对定位， （双重选择）

   只要在 $() 指定第二个参数，第二个参数为相对的元素 .  $("ul", $(this)).css("background", "red");  //ul下面的+包含本身=ul下面的本身

View Code

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4 5 6 7 14 15 16

17 18 19 20 21 22 23 24

姓名	成绩
tom	100
lucy	99
jim	95
david	85
candy	84
平均分	90

25 26

11、属性过滤选择器：（1、$("div[id]") 选取有 id 属性的

（2、 $("div[title=test]") 选取 title 属性为 " test " 的

， JQuery 中没有对getElementsByName 进行封装，用 $("input[name=abc]")
（3、$("div[title!=test]") 选取 title 属性不为 " test " 的

还可以选择开头、结束、包含等，条件还可以复合。（ /* ）

属性过滤

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4 5 6 19 20 21 北京
22 南京
23 东京
24 西安
25 开封
26
27 28

12、表单对象选择器

    $("/#form1:enabled") 选取 id 为 form1 的表单内所有启用的元素 
 $("/#form1:disabled") 选取 id 为 form1 的表单内所有禁用的元素 
 $("input:checked") 选取所有选中的元素（ Radio 、 CheckBox ） 
 $("select:selected") 选取所有选中的选项元素（下拉列表）

表单对象

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4 5 6 22 23 24 tom25 jim26 lily27

29 30

13、JQuery的Dom操作

（1 、使用 html() 方法读取或者设置元素的 innerHTML ： alert($("a:first").html()); $("a:first").html("hello"); （2 、使用 text() 方法读取或者设置元素的 innerText ： alert($("a:first").text()); $("a:first").text("hello"); （3 、使用 attr() 方法读取或者设置元素的属性，对于JQuery没有封装的属性（所有浏览器没有差异的属性）用 attr 进行操作。 alert($("a:first").attr("href")); $("a:first").attr("href", "http://www.rupeng.com");
（4 、使用 removeAttr 删除属性。删除的属性在源代码中看不到，这是和清空属性的区别

14、动态创建Dom节点

   （1、使用 $(html 字符串) 来创建 Dom 节点，并且返回一个 jQuery 对象，然后调用 append 等方法将新创建的节点添加到 Dom 中：
      例子：var link = $("<a href='http://www.baidu.com'> 百度 </a>");
           $("div:first").append(link);
（2、$() 创建的就是一个 jQuery 对象，可以完全进行操作
         var link = $("<a href='http://www.baidu.com'> 百度 </a>");
          link.text("百度");
          $("div:first").append(link);

动态添加Dom对象

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4 5 6 20 21 22

23 24 26 27

28 29

（3、append 方法用来在元素的末尾追加元素。

     //$("/#select1 option:selected").remove().appendTo($("/#select2")) ;
        $("/#select1 option:selected").appendTo($("/#select2")) ;
     prepend ，在元素的开始添加元素。
     after ，在元素之后添加元素（添加兄弟）
     before ：在元素之前添加元素（添加兄弟）

15、删除节点（1、remove() 删除选择的节点案例：清空 ul 中的项， $("ul li.testitem").remove(); 删除 ul 下 li 中有 testitem 样式的元素。
remove 方法的返回值是被删除的节点对象，还可以继续使用被删除的节点。比如重新添加到其他节点下 var lis = $("/#ulSite li").remove(); $("/#ulSite2").append(lis);
（2、remove掉后再重新移动： var items = $("/#select1 option:selected").remove(); $("/#select2").append(items); 更狠的： $("/#select1 option:selected").appendTo($("/#select2")) 权限管理

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4 5 6 29 30 31 38

39 40 41 42 43

44 46 47

 （3、empty() 是将节点清空，不像 remove 那样还可以添加到其他元素中。

16、Dom实例改编

案例1：加法计算器加法计算器

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4 5 6 16 17 18 + 19 20 21 22 23

案例2：全选全部选按钮

全选全不选按钮

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4 5 6 22 23 24

31 32 33 34 35 36

案例3：倒计时注册页面

倒计时注册页面

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4 5 6 25 26 27 28 29

案例4：球队选择

球队选择

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4 5 6 15 16 17

中国
美国
日本
新加坡
意大利
法国
德国

27 28 29

17、节点操作

    （1、替换节点： $("br").replaceWith("<hr/>");
         例子：将 <br/> 替换为 <hr/> ：$("br").replaceWith("<hr/>");
    （2、包裹节点 ：wrap() 方法用来将所有元素逐个用指定标签包裹：
            $("b").wrap("<font color='red'></font>")  将所有粗体字红色显示

18、样式操作

（1、获取样式   attr("class") ，设置样式 attr("class","myclass myclass2 myclass3") ，追加样式 addClass("myclass")( 不影响其他样式 ) ，
       移除样式 removeClass("myclass") ，切换样式（如果存在样式则去掉样式，如果没有样式则添加样式） toggleClass("myclass") ，
       判断是否存在样式： hasClass("myclass")

  例子：开关灯：$(document.body).toggleClass(”night“);

19、练习

练习1：黑白切换，设置body中的颜色切换Filter

黑白切换

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4 黑白切换 5 8 9 10 17 18 19
20 21 22

练习2：聚集控件高亮：$("body /") ，选择器 / 表示所有类型的控件聚集控件高亮

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4 7 8 聚集控件高亮 9 12 13 14 21 22 23 24

25 daomul 26

28 http://www.cnblogs.com/daomul/29

30 31 32

练习3：搜索框

搜索框效果

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4 7 8 搜索框效果 9 10 14 15 18 19 20 35 36 37 38 39 40

20、RadioButton的操作

  （1、取得 RadioButton 的选中值 ：$("input[name=gender]:checked").val()
      <input id="Radio2" checked="checked" name="gender"  type="radio" value=" 男 " /> 男
      <input  id="Radio1" checked="checked" name="gender"  type="radio" value=" 女 " /> 女 
      <input id="Radio3" checked="checked" name="gender" type="radio"  value=" 未知 " /> 未知 </p> 
 （2、设置 RadioButton 的选中值： $("input[name=gender]").val([" 女 "]);
                                          或者 $(":radio[name=gender]").val([" 女 "]); 
        注意 val 中参数的 [] 不能省略

RadioButton

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4 7 RadioButton 8 9 12 13 25 26 27 男
28 女
29 保密
30 篮球
31 足球
32 羽毛球
33 冰球
34 35 36 37

  （3、对 RadioButton 的选择技巧对于 CheckBox 和 Select 列表框也适用。除了可以使用 val 批量设置 RadioButton 、 CheckBox 等的选中以
         外，还可以设定 checked 属性来单独设置控件的选中状态  
                            $("/#btn1").attr("checked",true)

21、JQuery事件

   （1、事件绑定： $("/#btn").bind("click",function(){}) ，每次都这么调用太麻烦，所以 jQuery 可以用 $("/#btn").click(function(){}) 来进行简化 
   （2、合成事件 hover ， hover(enterfn,leavefn) ，当鼠标放在元素上时调用enterfn 方法，当鼠标离开元素的时候调用 leavefn 方法

合成事件hover

1 2 合成事件_hover 3 4 5 18 19 20

你好！

  （3、事件冒泡： JQuery 中也像 JavaScript 一样是事件冒泡。如果想获得事件相关的信息，只要给响应的匿名函数增加一个参数： e ，   
                         e 就是调用事件对象的 stopPropagation() 方法终止冒泡。 e. stopPropagation();
              $("tr").click(function(e) { alert("tr 被点击 "); e.stopPropagation(); });// 注意函数的参数是 e 
  （4、阻止默认行为：有的元素有默认行为，比如超链接点击后会转向新链接、提交按钮默认会提交表单，
                             如果想阻止默认行为只要调用事件对象的preventDefault() 方法和 window.event.returnValue=false 效果一样。
              $("a").click(function(e) { alert(" 所有超链接暂时全部禁止点击 "); 
                                                 e.preventDefault(); });

事件绑定

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4 7 RadioButton 8 9 12 13 23 24 25

26 27 30 31

nihao

32 33

22、事件其他（ /* ）（1、属性： pageX 、 pageY 、 target获得触发事件的元素 ( 冒泡的起始，和this不一样) which如果是鼠标事件获得按键（1左键，2中键，3右键）。 altKey 、 shiftKey 、 ctrlKey 获得 alt 、shift、ctrl 是否按下，为bool值。 keyCode 、 charCode 属性发生事件时的keyCode （键盘码，小盘的1和主键盘的 keyCode 不一样）、charCode （ ASC 码）。
（2、移除事件绑定： bind() 方法即可移除元素上所有绑定的事件，如果 unbind("click") 则只移除 click 事件的绑定。 bind:+= ； unbind:-=
（3、一次性事件：如果绑定的事件只想执行一次随后立即 unbind 可以使用 one() 方法进行事件绑定： $(":button").one("click", function() { alert("点了"); }); 23、鼠标

（1、获得发生事件时鼠标的位置
            $(document).mousemove(function(e) {
                   document.title = e.pageX + "," + e.pageY;
             });
（2、在 mousemove 、 click 等事件的匿名响应函数中如果指定一个参数 e ，那么就可以从 e 读取发生事件时的一些信息，比如对mousemove 等鼠标事件   来
       说，就可以读取 e.pageX 、 e.pageY 来获得发生事件时鼠标在页面的坐标。

案例1：跟着鼠标飞

跟着鼠标飞

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4 5 6 9 10 18 19 20

23 24

案例2：点击小图显示详情

点击小图显示详情

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4 5 8 9 35 36 37

45 46

24、动画及QQ风格控件（1、show() 、 hide() 方法会显示、隐藏元素。用 toggle() 方法在显示、隐藏之间切换 $(":button[value=show]").click(function() { $("div").show(); }); $(":button[value=hide]").click(function() { $("div").hide(); }); （2、如果 show 、 hide 方法不带参数则是立即显示、立即隐藏，如果指定速度参数则会用指定时间进行动态显示、隐藏，单位为毫秒，也可以使用三个内置的速

        度： fast （200 毫秒）、 normal （400 毫秒）、 slow （600 毫秒）， jQuery 动画函数中需要速度的地方一般也可以使用这个三个值。

模拟QQTab效果

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4 5 10 11 22 23 24

QQTab效果

我的好友
mm
baba
mama
我的女友
gemen
陌生人
meinv
shuaige

33 34 35

25、JQuery Cookie 使用（1、使用方法， Cookie 保存的是键值对 /1 、添加对 jquery.cookie.js /2 、设置值， $.cookie(' 名字 ', ' 值 ') 。 cookie 中保存的值都是文本。 /*3 、读取值， var v=$.cookie(' 名字 ') alert($.cookie(" 用户名 ")); $.cookie(" 用户名 ","tom"); 在同域名的另外一个页面中也能读取到。（2、设置值的时候还可以指定第三个参数， $.cookie(' 名字 ', ' 值 ', { expires: 7, path: '/',domain: 'itcast.cn', secure: true }) ，
expires 表示要求浏览器保留 Cookie 几天，这个值只是给浏览器的建议，可能没到时间就已经被清除了。可以实现 " 勾选【记录我的用户名 10 天】 " 的功能。如果不设定 expires 在浏览器关闭以后就清除， options 参数用哪个设置哪个
案例：记住背景色

记住背景色

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 4 5 7 8 9 30 31 32

33 34 37 40 43 44

35 红色36

38 绿色39

41 黄色42

45 46 47 48

26、JQueryUI

下载地址：http://jqueryui.com/下发包 View Code

1 2 JQueryUI的使用 3 4 5 6 7 13 14 15

你好，我是对话框

基本设置
高级设置

用户名：

刷新频率：

分类: jQuery

绿色通道：好文要顶关注我收藏该文与我联系 daomul 关注 - 1 粉丝 - 43

+加关注

0 (请您对文章做出评价)

«上一篇：Dom 学习总结及其实例 »下一篇：.NET运用AJAX 总结及其实例

It so life

love as life

JQuery 学习总结及实例

JQuery 学习总结及实例

JQuery 学习总结及实例

QQTab效果