【JQuery】学习

 

JavaScript参考 

JQuery 学习总结及实例

1、JQuery概念

A、Jquery是一个优秀的Javascript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器，jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

B、JavaScript的缺点:控件的操作方式不统一，不同浏览器容易出观兼容问题。为了简化操作，出现了许多JavaScript封装的函数库比如Prototype、JQuery等。

C、JQuery的优点:小巧、方便、功能强大。插件丰富、开源、免费。

D、VS在VS2010中已经实现自动完成功能，VS2008需要安装VSSP1补丁和VS90SP1-KB958502-X86补丁才能更好的支持，然后引用jquery-1.4.1.js，jquery-1.4.1-vsdoc.js放在同目录下，VS2008中才会有自动提示和自动完成功能。

E、JQuery文件说明:

       jquery-1.4.2.js是JQuery主文件。

       jquery-1.4.2.min.js是压缩板JQuery主文件。

       jquery-1.4.2-vsdoc.js是JQuery在VS中的自动提示功能。

2、JQuery之Ready

A、JQuery的ready和Dom onload的区别:onload是所有Dom元素创建完毕触发，而ready则是Dom元素创建完就触发，这样可以提高网页的响应速度。这两个看似一样的功能，但实际有很大的区别：

onload不仅在创建DOM树之后，而且在所有外部资源全部加载完毕，并且整个页面在浏览器窗口中显示完毕之后，才会执行。这些资源不仅包括图片资源，而且包括嵌入在页面上的flash视频，如果图片或者flash过多，那么会一段很长加载时间，也就意味这延迟执行代码块的时间会更多。

jQuery中的ready()方法只需要等待文档结构被完全解析并且浏览器已经把HTML转化为DOM树后就会执行代码块，这里注意的是仅仅是DOM，网页中的图片，flash等外部资源都毫无关联。

由此可见jQuery中的ready()方法将缩短等待时间。在jQuery中也可以用$(window).load()来实现onload那种事件调用的时机。

3、JQuery内置函数

$就是函数，Jquery语法放在<script>标签内，

A、$.map(array, function)函数:对数组array中每个元素调用function函数逐个处理，function函数处理返回一个新的数组。也可以：array.map(function) 如:

       var array = [3, 6, 9];

var arrary2 = $.map(array, function(item) { return item * 2 });

for (var i = 0; i < arrary2.length; i++) {

alert(arrary2[i]);

};

       或: alert(arrary2);

       注: $.map函数不能处理dictionary风格的数组。

B、$.each(array, function)对array每个元素进行处理，但没有返回值。可以省略function的参数，这时候用this可以得

到遍历的当前元素

var array = ["TOM", "汤姆", "Jerry", "杰瑞"];

$.each(array, function() { alert(this); });   //结果一个个显示

或:

var dict = { "TOM": 20, "Jerry": 50 };

$.each(dict, function(key, value) { alert(key + "=" + value); });

如果是普通风格的数组，则key的值是序号。普通数组推荐用无参，用dict风格的就用key、value。

4、JQuery选择器

A、JQuery选择器用于查找满足条件的元素，比如可以使用$(“#控件id”)来根据控件id获得控件的JQuery对象。相当于

getElementByid。

B、$(“TagName”)来获取所有指定签名的JQuery对象，相当于getElementsByTagName。例如：$("p").html("我们

都是P");

C、CSS选择器，同时选择拥有某个样式的多个元素:  class="text"

       $(“.text”).click(function(){alert($(this).text();)});

D、多条件选择器:$(“p,div,span.menuitem”),同时选择p标签、div标签和拥有menuitem样式的span标签。

E、层次选择器:

       1、$(“div li”)获取div下的所有li标签(后代，子、子的子标签…)。

       2、$(“div > li”)获取div下的直接li子标签。

       3、$(“.menuitem + div”)获取样式名为menuitem之后的第一个div标签。（不常用）

       4、$(“.menuitem ~ div”)获取样式名为menuitem之后的所有div标签。（不常用）

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

4.1 基本过滤选择器

A、:first选择第一个标签。$(“div:first”)   选取第一个<div>。$(".warn:first")  第一个class=warn的标签。

      注意：无 :second  。用下面的索引序号。

B、:last选取最后一个标签。$(“div:last”)选取最后一个<div>。

C、:not选取不满足选择器条件的标签。$(“input:not(.myclass)”)选取样式名(class)不是myclass的<input>标签。

D、:even、:odd，选取索引是偶数、奇数的标签:$(“input:event”)选取索引是偶数的<input>。

E、:eq、:gt、:lt选取索引等于、大于、小于索引序号（从0开始）的标签，比如$(“input:lt(1)”)选取索引小于1的<input>。

F、$(“:header”)选取所有的h1…h6标签。

G、$(“div:animated”)选取正在执行动画的<div>标签。

4.2 属性过滤选择器

A、$(“div[id]”)选取有id属性的<div>。

B、$(“div[title=test]”)选取title属性为“text”的<div>。

C、$(“div[title!=test]”)选取title属性不为“text”的<div>。

4.3 表单对象过滤选择器

A、$(“#form1:enabled”)选取id为form1的表单内所有启用的标签。

B、$(“#form1:disabled”)选取id为form1的表单内所有禁用的标签。

C、$(“#form1:checked”)选取所有选中的标签。(checkBox)。

D、$(“#form1:selected”)选取所有选中的选项标签。(下拉列表)。

E、$(":input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样， $("input")只获得     

      <input>

F、$(":text")选取所有单行文本框，等价于$("input[type=text]")

G、$(":password")选取所有密码框。同理还有:radio、:checkbox、:submit、:image、:reset、:button、

    :file、:hidden。

5、JQuery对象与Dom对象

A、JQuery对象是通过JQuery包装Dom对象后产生的对象。$('#div1').html()

B、Dom对象要想通过JQuery进行操作，需要先转换成JQuery对象。

       $(‘#div1’).html() 等价于:document.getElementByid(‘div1’).innerHTML;

       $(‘#div1’)得到的是JQuery对象，JQuery对象可以调用JQuery对象封装的方法，不能调用Dom对象的方法，

　　Dom对象也不能调用JQuery对象的方法。所以alert($('#div1').innerHTML是错的，因为innerHTML是DOM对象的属性。

C、将Dom对象转换成JQuery对象的方法，$(Dom对象)。

　　JQuery对象转化为Dom对象，转换方法 :var docobj = jqobj[0] 或var domobj=jqobj.get(0)。

D、jQuery修改样式、读写元素的值：

1、JQuery修改样式方法:$(“#div1”).css(“background”, “red”);

     JQuery获得样式的方法:$(“#div1”).css(“background”);

 2、修改value值方法:

       JQuery修改value方法: $(“#div1”).val(“Dragon”);

       JQuery获得value方法: $(“#div1”).val();

3、类似的获得、设置innerText、innerHTML用text()和html()。

　　val、html、text等是方法，不是属性，jQuery中很少有属性的用法，因为属性写法很难“链式编程”。

4、使用attr()方法读取或者设置元素的属性，对于JQuery没有封装的属性（所有浏览器没有差异的属性）用attr进

      行操作。不要用attr设置背景颜色，（分清属性与样式）

$("#btn1").attr("href", "http://www.rupeng.com"); 

alert($(“#btn1").attr("href"));

5、使用removeAttr删除属性。删除的属性在源代码中看不到，这是和清空属性的区别。

“查看源文件”只能看服务器上下载下来的那份。

更多查看：jquery中的$("#id")与document.getElementById("id")的区别

 

6、样式操作

A、获取样式attr(“class”)，设置样式attr(“class”, “myclass”)。  注：样式名就行，不用加# 或 .

B、追加样式addClass(“myclass”)。（不影响其他样式）

C、移除样式removeClass(“myclass”)。

D、切换样式togleClass(“myclass”)。（如果存在样式则去掉样式，如果不存在则添加。）

E、判断样式是否存在:hasClass(“myclass”)。

7、JQuery隐式迭代

A、jQuery选择器返回的是一个对象数组(数组中的每个对象还是Dom对象)，调用text()、html()、click()之类方法

的时候其实是对数组中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错，

注:如果用隐式迭代就很难发现错误。

       $(function(){

              var elements = $(“#btn1”);

              If (elements.length <= 0){     //判断对象是否存在

                     alert(“没有找到提定对象”);

                     return;

       }

       elements.mouseover(function(){ alert(“找到了”)});

8、节点遍历

A、同胞：next()方法用于获取节点之后的挨着的第一个同辈标签，$(“.menuitem”).next(“div”)

nextAll()方法用于获取节点之后的所有同辈标签。$(“.menuitem”).nextAll(“div”)

siblings()方法用于获取所有其他同胞标签。

prev、prevAll兄弟中之前的元素。

9、链式编程

例子：

高亮选中项：给所有有menuitem这个样式的元素添加click监听事件，当click的时候，向被点击的元素添加

highlight这个样式，然后从其兄弟节点（siblings）中移除highlight风格。

<span style="font-size:18px;"><style type="text/css">
 .menuitem{background-color:Yellow; }
 .highlight { background-color: Red;}
 </style>
 $(function() {
 $(".menuitem").click(function() {
 $(this).addClass("highlight").siblings().removeClass("highlight");
 });
 });
 <p class="menuitem">111111</p><br />
 <p class="menuitem">111111</p><br />
 <p class="menuitem">111111</p><br />
</span>

“.”的时候是针对的上一步的返回值的节点集合的操作。链式编程就是对象一棒棒向下传，能不能正确传下来要看返回

值，html()不能传，prevAll().nextAll()也传错。

10、动态创建Dom节点

A、使用$(html字符串)来创建Dom节点，返回一个JQuery对象，然后调用append方法将新创建的节点添加到Dom中

       var link = $(“<a href=’http://www.baidu.com’>百度</a>”);

       $(“div:first”).append(link);

       Append方法用来在当前标签 内容的末尾追加标签。（本标签内部）

       prepend在标签的内容的开始处 添加标签。

       after在标签之后添加标签。（添加兄弟）

       before在标签之前添加标签。（添加兄弟）

11、删除节点

A、remove()删除选择的节点。

       如:清空ul中的项。$(“ul li.testitem”).remove();删除ul下的li id=testitem的标答。

B、remove()方法返回值是被删除的节点对象，还可以继续使用删除的节点。

       var lis = $(“#ulsite li”).remove();

       $(“#ulsite2”).append(lis);

C、empty()是将节点清空，清除节点的innerHTML，节点还在。

 

12、RadioButton操作

A、取RadioButton选中值:

$(“input[name=gender]:checked”).val()

       <input id= “radio1” checked= “checked” name= “gender” type= “radio” value= “男” />男

       <input id= “radio2” checked= “checked” name= “gender” type= “radio” value= “女” />女

       <input id= “radio3” checked= “checked” name= “gender” type= “radio” value= “未知” />未知

B、设置第三个input(RadioButton)被选中

       $(“input:eq(2)").attr("checked", "true"));

 

13、事件

A、JQuery中事件的绑定:$(“#btn”).bind(“click”,function(){})。

     JQuery用$(“#btn”).click(function(){})来简化。

B、事件冒泡（从里到外，直至事件它被处理，对象层次的最顶层，即document对象）：

    JQuery中也像JavaScript一样是事件冒泡

    调用事件对象的stopPropagation()方法终止事件冒泡。如果想获得事件相关的信息，只要给响应的匿名函数增加一

   个参数：e，e就是事件对象。例如：

    $("tr").click(function(e) { alert("tr被点击"); e.stopPropagation(); });  //注意函数的参数是e

C、阻止默认行为: 比如超链接点击后会转向新的链接。如果想阻止默认行为只要调用事件对象的preventDefault()方

      法。和Dom中的window.event.returnValue=false效果一样。

D、属性:pageX、pageY、target获得触发事件的元素（冒泡的起始,和this不一样）。

   which如果是鼠标事件获得按键(1左键，2中键，3右键)。

   altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下，为bool值。

   keyCole、charCode属性发生事件时的keyCode(键盘码，小键盘的1和主键盘的keyCode不一样)、charCode(ASCII

   码)。

E、移除事件绑定: unbind()方法即可移除元素上绑定的事件，如果unbind(“click”)则移除click事件的绑定。

F、一次性事件: 如果绑定的事件只想执行一次随后立即unbind可以使用one()方法进行绑定。

 

14、鼠标

A、获得发生事件时鼠标的位置

 $(document).mousemove(function(e) {
document.title = e.pageX + "," + e.pageY;
});

B、在mousemove、click等事件的匿名响应函数中如果指定一个参数e，那么就可以从e读取发生事件时的一些信息，

比如对mousemove等鼠标事件来说，就可以读取e.pageX、e.pageY来获得发生事件时鼠标在页面的坐标。

例如：跟着鼠标走的图片

<script>
        $(function () {
            $(document).mousemove(function (e) { $("#div1").css("left", e.pageX).css("top", e.pageY); });
        })
    </script>

<div id="div1" style="position :absolute">
        <img src="image/飞.jpg" />
    </div>

注意：$(“document”)与$(document)。为什么$(“document”)不可以，因为没有document这个标签。为什么$(“body”)

可以？因为有body标签。

15、动画

A、show()、hide()方法用于显示、隐藏标签。用toggle()方法在显示、隐藏之间切换。

       $(“:button[value=show]”).click(function(){$(“div”).show();});

       $(“:button[value=hide]”).click(function(){$(“div”).hide();});

B、show、hide可以带参数使用，以指定时间进行动态显示、隐藏，单位为毫秒，。fast(200毫秒)、normal(400毫

      秒)、slow(600毫秒)。

 C、animate：anmite内部设置的多个值是同步变化的，链式的animate是依次动画的。

例子：animate({ left: 0, top: 0, 300, height: 300 })、

.animate({ opacity: 0 }).animate({ opacity: 1 })。

还可以指定增量，$(“#div1”).animate({ height: “+=100” }); 

//如果是+=、-=等增量形式要写成字符串，因为JavaScript不认识这种语法

 

16、JQuery插件：JQuery cookie

A、什么是cookie：Cookie就是保存在浏览器上的内容，用户在这次浏览页面的时候向Cookie中保存文本内容，下次

再访问页面的时候就可以取出来上次保存的内容，这样就可以得到上次“记忆”的内容。Cookie不是JQuery特有概念，

只不过JQueryCookie把它简化的更好用而已。Cookie就是存储在浏览器里的一些数据。（不能在IE中存，FF中取）

B、Cookie需要浏览器的支持，浏览器的Cookie是可以禁用的（一般不要）。

Cookie的几个特征：

Cookie是与域名相关的，所以163.com不能读取baidu.com记录的Cookie，正因为如此读取、设置Cookie的时候不用担

心不同域名cookie的冲突；

一个域名能写入的Cookie总尺寸是有限制的，一般是是几千字节，能写入的Cookie总条数一般是几十条，超过以后浏

览器自己会根据自己的策略移除一些Cookie；

Cookie不是写入以后一定下次能读出来，浏览器可能会定期清除、用户也可能会手动清除。

写到Cookie中的数据一定是可有可无的数据，像防止投票作弊就不能用Cookie。

C、使用方法:

       1、添加对jquery.cookie.js引用。

       2、设置,$.cookie(‘名字’, ‘值’)。cookie中保存的值是文本。

       3、读取,var v = $.cookie(‘名字’)

D、设置值的时候还可以指定第三个参数，

$.cookie(‘名字’, ‘值’,{expires:7,path:’/’,domain:’baidu.com’,secure:true});

expires 保存的天数。如果不设定expires在浏览器关闭以后就清除，

path 设置网站哪些目录下的文件可以读取。

domain 保存的是哪个域名的。

 

17、设定按钮的启用时间

<script type=“text/javescript”>

       var leftseconds = 10

       var intervalid;

       $(function(){

              $(“#btnReg”).attr(“disabled”,true);

              Intervalid = setInterval(“countDown()”,1000);

       }

       Function CountDown(){

              if(leftseconds <= 0){

                     $(“#btnReg”).val(“同意”);

                     $(“#btnReg”).attr(“disabled”,false);

                     clearIntervalid(Intervalid);

                     return;

              }

              Leftseconds--;

              $(“#btnReg”).val(“请仔细阅读”+ Leftseconds + “”);

       }

</script>