jQuery基础

 JQuery官方网站

 http://jquery.com/

 

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的read和Dom onload的区别:onload是全部Dom元素建立完毕触发，而ready则是Dom元素建立完就触发，这样能够提升网页的响应速度。

 

3、JQuery内置函数

A、$.map(array, function)函数:对数组array中每一个元素调用function函数逐个处理，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每一个元素进行处理，但没有返回值。

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

$.each(array, function() { alert(this); });

或:

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

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

 

4、JQuery对象与Dom对象

A、JQuery对象是经过对Dom对象的封装产生的对象。

B、Dom对象要想经过JQuery进行操做，须要先转换成JQuery对象。

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

       $(‘#div1’)获得的是JQuery对象，JQuery对象能够调用JQuery对象封装的方法，不能调用Dom对象的方法，Dom对象也不能调用JQuery对象的方法。

C、将Dom对象转换成JQuery对象的方法，$(Dom对象)。当调用JQuery没有封装的方法时必须用Dom对象，转换方法:var docobj = jqobj[0]或var domobj=jqobj.get(0)。

D、样式的修改：

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

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

   修改value值方法:

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

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

 

5、JQuery选择器

A、JQuery选择器用于查找知足条件的元素，好比可使用$(“#控件id”)来根据控件id得到控件的JQuery对象。至关于getElementByid。

B、$(“TagName”)来获取全部指定签名的JQuery对象，至关于getElementsByTagName。

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

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

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

E、层次选择器:

       一、$(“div li”)获取div下的全部li标签(后代，子、子的子标签…)。

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

       三、$(“.menuitem + div”)获取样式名为menuitem以后的第一个div标签。

       四、$(“.menuitem ~ div”)获取样式名为menuitem以后的全部div标签。

 

6、JQuery隐式迭代

A、注:若是用隐式迭代就会不容易发现错误。

       $(function(){

              var elements = $(“#btn1”);

              If (elements.length <= 0){

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

                     return;

       }

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

 

7、节点遍历

A、next()方法用于获取节点以后的挨着的第一个同辈标签，$(“.menuitem”).next(“div”)、nextAll()方法用于获取节点以后的全部同辈标签。

B、siblings()方法用于获取全部同级标签。

 

8、链式编程

A、JQuery能够实现链式编程

9、JQuery过滤选择器

A、:first选择第一个标签。$(“div:first”)选取第一个<div>。

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

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

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

E、:eq、:gt、:lt选取索引等于、大于、小于索引序号的标签，好比$(“input:lt(1)”)选取索引小于1的<input>。

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

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

 

10、属性过滤选择器

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

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

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

 

11、表单对象选择器

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

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

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

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

 

12、JQuery的Dom操做

A、使用html()方法读取或设置标签的innerHTML:

       alert($“a:first”).html());

       $(“a:first”).html(“hello”);

B、使用text()方法读取或设置标签的innerText:

       alert($(“a:first”).text());

       $(“a:first”).text(“hello”);

C、使用att()方法读取或设置标签的属性:

       alert($(“a:first”).attr(href”));

       $(“a:first”).attr(“href”, http://www.rupeng.com);

D、使用removeAttr删除属性。

 

13、动态建立Dom节点

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

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

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

       Append方法用来在标签的末尾追加标签。

       prepend在标签的开始添加标签。

       after在标签以后添加标签。

       before在标签以前添加标签。

 

14、删除节点

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

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

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

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

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

C、empty()是将节点清空。

 

15、设定按钮的启用时间

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

 

16、样式操做

A、获取样式attr(“class”)，设置样式attr(“class”, “myclass”)。

B、追加样式addclass(“myclass”)。

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

D、切换样式togleclass(“myclass”)。若是存在则去掉样式，若是不存在则添加。

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

 

17、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、设置RadioButton选中值:

       $(“input[name=gender]”).val([“女”]);

 

18、事件

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

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

B、调用事件对象的stopPropagation()方法终止事件冒泡。

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

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

   which若是是鼠标事件得到按键(1左键，2中键，3右键)。

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

   keyCole、charCode属性发生事件时的keyCode、charCode。

E、移除事件绑定:unbind()方法便可移除元素上绑定的事件，若是bind(“click”)则移除click事件的绑定。

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

 

19、动画

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毫秒)。

 

20、JQuery cookie

A、使用方法:

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

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

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

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

expires 保存的天数。

path 设置网站那些目录下的文件能够读取。

domain 保存的是哪一个域名的。

 

21、JQueryUI

 

22、JQuery辅助工具

A、DebugBar

B、IE开发人员工具