jQuery设计思想:
(1)选择页面元素
css选择器:
$(document) 选择整个文档对象, $("#myId") 选择id为myId的页面元素, $("div.myClass")选择class为myClass的div元素
jQuery特有的选择器:
$("a:first")选择页面中第一个a元素,$("tr:odd")选择表格的奇数行,$("div:visible")选择可见的div元素。
(2)方法函数化
原生的:window.onload,innerHTML,onclick。
jQuery的:$(),html(),click()。
在jQuery代码中很少看到有等号出现的情况。因为它都函数化了,意思就是用函数的形式改写了原生的操作。比如:div.innerHTML = "chaojidan",$("div").html("chaojidan");div.onclick = function(){},$("div").click(function(){});
(3)原生与jQuery的关系
原生和jQuery可以共存,比如:$("div").click(function(){ this.innerHTML = "chaojidan";})
原生和jQuery不能混用,比如:$("div").innerHTML = "chaojidan"; div.html("chaojidan"),这两个都是错误的写法。
(4)改变结果集
强大的过滤器:$("div").has("p")选择包含p元素的div元素,$("div").not(".myClass")选择class不等于myClass的div元素,$("div").filter(".myClass")选择class等于myClass的div元素。
相邻元素查找:$("div").next("p")选择div元素后面的(必须紧挨着)第一个p元素,$("div").parent()选择div元素的父元素,$("div").children()选择div元素的所有子元素。
(5)链式操作
$("div"). //找到页面上的所有div元素
find("h3"). //在div元素下找h3元素
eq(2). //取第三个h3元素
html("chaojidan"); //设置它的内容为chaojidan
jQuery还提供了.end方法,此方法可以使结果集后退一步。比如:
$("div"). //找到页面上的所有div元素
find("h3"). //在div元素下找h3元素
eq(2). //取第三个h3元素
html("chaojidan"). //设置它(第三个h3元素)的内容为chaojidan
end(). //此时的this指向就是在div元素下找h3元素的那个集合
.eq(0). //取第一个h3元素
.html("chaojidan2"); //设置它的内容为chaojidan2
(6)取值与赋值合体
$("h1").html(),没有参数,表示取出h1的值;$("h1").html("hello"),有参数,表示对h1进行赋值。
取值是对一组元素的第一个元素做操作,赋值是对一组中的所有元素做操作。
.css(),.attr(),这些函数,当传入一个参数时,是取值,当传入两个参数时,是赋值。
(7)元素的移形换位
直接移动该元素:$("div").insertAfter($("p"));把div元素移动到p元素的后面;$("p").appendTo($("div"));把p元素移动到div元素的里面。比如:$("div").insertAfter($("p")).css("background","red");这里会把div元素的背景颜色设置成红色。
移动其他元素:$("p").after($("div"))把div元素移到p元素的后面;$("div").append($("p"));把p元素移动到div元素的里面。比如:$("p").after($("div")).css("background","red");这里会把p元素的背景颜色设置成红色。
(8)强大的创建
$("#ul").append("<li>aaa</li>");创建一个li元素,把它添加到ul中。
$("<li>");创建一个li元素
$("div").clone().appendTo($("p"));克隆一个div元素,并把这个克隆的div添加到p元素里面,原来的那个div不变。
(9)工具方法
构造函数上的方法(静态方法):$.each([],function(){}),$.trim()。原生的js可以调用这些方法。比如:var liList = document.getElementsByTagName("li");$.each(liList,function(index,element){});
原型上的方法(实例方法):$("div").each(function(index,element){})
(10)事件操作
独立事件:click()针对click事件,mouseover()针对mouseover事件,比如:$("div").click(function(){}),点击div元素会触发回调函数。
通用事件:bind(),one(),unbind(),比如:$("div").bind("click mouseover",function(){}),这里给div元素绑定了click和mouseover两个事件。
jquery中,如果在回调函数中,返回false,表示阻止事件冒泡以及阻止默认操作。
在js原生方法中,div.onclick = function(){},在回调函数返回false,也有一样的效果。
attachEvent也有一样的效果,但是addEventListener就不行。
(11)运动效果
常见效果:.fadeIn()淡入,.fadeOut()淡出,.slideDown()向下展开,.slideUp()向上卷起。
比如:$("#input1").toggle(function(){$("#div1").fadeOut()}, function(){$("#div1").fadeIn()}),点击按钮input1,就会把div隐藏,再次点击input1,就会把div显示。
复杂效果:.animate()动画操作,stop()。比如:
$("#div1").hover(
function(){
$(this).animate({
300,
height:300
})
},
function(){
$(this).animate({
200,
height:200
})
}
)
鼠标移入div元素,元素div就会变成大到300*300,鼠标移出div元素,元素div就会缩小到200*200.
stop方法是用来停止动画的。
(12)插件机制
在jQuery的源码上进行扩展。是其他人写的,不是jQuery官方写的,比如你自己也可以写一个基于jQuery的list列表插件list.js。在使用此插件时,你需要先引入jQuery,然后再引入你的list.js。如果想详细了解jQuery插件请看:http://www.cnblogs.com/chaojidan/p/4213942.html
(13)UI组件
jQuery官方提供的功能效果和UI样式。比如:选项卡Tab,拖拽Draggable。你使用这些功能效果时,除了需要引入jQeury外,还需要引入jQuery.ui.js(这个js文件里面实现了这些功能效果)。如果想深入了解jQuery UI,请看:http://www.cnblogs.com/chaojidan/p/4220941.html
加油!