[置顶]       JQuery基础知识

优点：

可跨浏览器编程。还有Prototype、Dojo、ExtJS(功能更强的JS库，常用与企业级程序)。

宗旨：Write Less, Do More

 

本质：

JavaScript库。

 

JQuery能做什么？

与DOM功能相同。

 

导入

<script src="xxx.js" type="text/javascript"></script>

 

1：“$”符号

方法名(jQuery方法的别名)

window.jQuery = window.$ = jQuery

作用：筛选对象

$通常使用选择器来获得相应的对象集合（id选择器#id，类选择器tagName）

 

2：$(docuemnt).ready方法：

会在当前浏览器加载生成完整个DOM树完成之后调用（相当于window.onload），并可以多次调用相当于C#中的“+=”;

与onload的区别

onload是所用DOM元素创建完毕、图片、CSS等都加载完毕后才被触发，而ready则是DOM元素创建完毕后就被出发，这样可以提高网页的响应速度，在JQuery中也可以用$(window).load()来实现onload事件的调用机制。

简写：$(function() {});

 

3：JQuery对象转换为DOM对象

1）[index]

2）get(inde)

 

 

4：选择器

id选择器-->#id

类选择器-->tagName

class选择器-->.className

*选择器-->*   选择所有的元素

组合选择器-->使用“,”作为分隔符  $("#msgDiv, msg2Div")

层次选择器

-->后代选择器：ancestor decendant使用空格作为分隔符  $("form input")

-->子代选择器：$("parent> child")

--> 匹配所有紧接在prev后的next元素  $("prev + next")

-->匹配prev元素之后的所有siblings兄弟元素  $("prev ~ siblings")

 

5：浏览器解析JS代码时，会先解析声明式代码。eg:function()[]

之后在加载运行式代码

 

6：JQuery中注册事件监听click()、leave()、focus()、blur()....

JQuery中注册事件监听本质：调用IE中attchEvent、FireFox中addEventListener

 

7：JQuery提供的函数

JQuery其实就是一个方法，方法的本质就是对象，对象是可以有方法属性，所以JQuery方法也有它自己的方法。

 

7.1

$.map(array, fn(){})：用来将一个数组，转换成另一个数组。

如果传入的匿名方法的参数是一个，那么这个参数就是当前被循环出的数组元素。function(item){}

如果传入的匿名方法的参数是两个，则第一个是被循环出来的数组元素，第二个为当前被循环到的小角标。function(item, index){}

 

如果map时的匿名函数中包含return语句，那么map方法就会有一个返回值，返回的是由return语句返回单个元素组成的新数组。

 

$.map不能处理json格式对象的数组

 

注意：JS中的任何方法都有返回值，如果用户不手动返回的话，就会返回undefined

 

7.2

$.each(array, fn(){})：对数组array每个元素调用fn函数进行处理，没有返回值。$.each(arr, function(key, value){ alert(key + '=' + value ); });

如果each循环数组的话，那么key就是下标，value就是元素

在each循环时，只要回调函数返回了false，那么循环终结

 

$.map与$.each区别：是否有返回值

 

7.3

$.trim(str)

str.replace(/^[\sxA0]+/, "").replace(/[\sxA0]+$/, ""); xA0 也是空格

 

7.4

.text()获得元素内部的文本

.text(val)向元素内部添加文本

.html()和html(val)获取或设置标签内的html标签

 

 

8：Json

Json其实就是js中对象的一种表示方法(字面量表示法)

注意：值类型的变量，不能动态添加属性。

 

9：JQuery对象就是通过JQuery包装DOM对象后产生的对象

$('#div1').html()等价于document.getElementById('div').innerHTML

$(".class,#id,div").css() == document.getElementById().style

css("border", "3px solid #000"0:

$().val() == .value()

 

10：Array是JS的对象，所以JQuery和DOM都能使用

 

11：JQuery绑定事件支持多播

 

12：过滤器

:first

:last

:eq(index)索引

:gt(index) 大于

:lt(index)小于

:not()

:even   :odd

:header

$("div[id]")属性过滤选择器

$("div[name^='x']")：name属性以x开头的div元素

$("div[name$='x']")：结尾

$("div[][]");

$("div[name*='x']")：包含

$("*:disabled");

$("*:enabled");

 

$("input:checked");Radio  CheckBox

$("input:selected");  下拉列表<select .../>

 

12:<a .../>不跳转，设置href="javascript:void(0)";

 

13：合成事件$(selector).hover(funcIn, funcOut);

 

14：对JQuery顶层对象进行扩展$.extend({});

 

15：对JQuery元素进行扩展$.fn.extend({});

 

16：常用的JS插件

JQueryUI

JQueryEasyUI

JQueryCookie