优点:
可跨浏览器编程。还有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