jQuery基础浅析（含基本方法和选择器）

1.jQuery与DOM互相转换

jQuery入库函数：$(document).ready(function(){})

$(function(){})

$(“#btn”):jQuery存储的是DOM对象，相当于数组可以通过[ ]取出具有相同标记的DOM对象

jQuery对象转换为DOM对象：$(“#btn”)[0] 或者 $(“#btn”).get(0)，0表示索引号

var btn=document.getElementById(“btn”);
DOM对象转换为jQuery对象：$(btn)

2.jQuery选择器

① 基本选择器

（1）标签选择器

$(“li”).css(“background”,”pink”);

（2） Id选择器

$(“#id”).css(“fontSize”,”30px”);

（3） 类选择器

$(“.class”).css(“background”,”pink”);

（4）交集选择器

$(“li.class”).css(“background”,”pink”);给具有class类的li标签设置背景色

（5） 并集选择器

$(“li,div”).css(“background”,”pink”);同时给li和div标签设置背景色

② 层级选择器

（1）子代选择器

$(“#ulitem>li”). css(“background”,”pink”);选择指定父元素下面的指定子元素
$(“#ulitem>.class”). css(“background”,”pink”);

$(“.wrap>ul>li”). css(“background”,”pink”);

（2） 后代选择器

find(“li”)

$(“#Id(空格)li”). css(“background”,”pink”);选择指定祖先元素下面的后代元素包括子元素的子元素，都会被选上。可以跳级选择#Id>ul>li,可以选择到li

（3）过滤选择器

$(“li:odd”). css(“background”,”pink”);所有选择到的元素，索引号奇数选择器

$(“li:even”). css(“background”,”pink”);
所有选择到的元素，索引号偶数选择器

$(“li:eq(4)”). css(“fontSize”,”30px”);
所有选择到的元素，索引号相等选择器

$(“.class > li”).eq(4).
css(“fontSize”,”30px”); 索引号相等选择器，第二种方法

$("#Id>li:eq(“+ index
+”)”).show();index为动态改变索引号

3.jQuery操作演示

① 样式属性设置

（1） 同时设置多个样式

$(“li”).css(

{“background”:”pink” , ”fontSize”:”30px”
, “color”:”green”}

); 传入一个对象

或者

var cssStys = {“background”:”pink”
, ”fontSize”:”30px” , “color”:”green”}

$(“li”).(cssStys);

（2） 类名操作

a ) $(“div”).addClass(“box”)

添加两个类名xxx.className =
xxx.className + “box”;

$(“div”).addClass(“xxx.className”)

b ) $(“li”).removeClass(“box”)
, 如果不传入参数，会移除所有类名

② 动态创建元素

var aLink = $(‘<a href=”http://web.baidu.com”>百度</a>’)；

$(“div”).append(aLink);

或者 $(“div”).append(‘<a href=”http://web.baidu.com”>百度</a>’);

append(#Id);如果追加的是已经有的元素，会从元素原来的位置移除元素追加到当前需要追加元素的位置

$(“div”).html(‘<a href=”http://web.baidu.com”>百度</a>’);清空原有元素，创建当前元素/内容

③ 获取宽高

var height = $(#Id).css(“height”);
height为string类型，值为如：200px

计算宽高：parseInt(height);

或者$(#Id).height();直接获取数值类型高度

4
jQuery的事件对象

$(“div”).on(“click” , “input”
, function( event
){

event.delegateTarget 表示：代理绑定事件的元素 ----->div

event.currentTarget 表示：绑定事件的元素 ----->input

event.target 表示：触发事件的元素，点击谁---->谁

})

event.data 传递给事件处理程序的额外数据

event.currentTarget 等同于this

event.pageX 鼠标相对于页面左边的位置

event.target 触发事件源，不一定===this

event.stopPropagation()；阻止事件冒泡

event.preventDefault(); 　　　阻止默认行为

event.type 事件类型：click，dbclick…

event.which 鼠标的按键类型：左1 中2 右3

event.keyCode 键盘按键代码

return false; // 同时具有阻止冒泡和阻止默认行为的功能

this：哪个元素触发的事件，this就指向这个元素。

5
隐式迭代

设置操作

$(“div”).css(“color” , “red”);

给所有的div设置背景色为红色，自动进行循环遍历设置，不用再添加循环。

$(“div”).css(“color”);

获取属性时，只返回第一个div元素的背景色，相当于索引为[0]，如果第一个元素没有这个属性，返回undefined

6链式编程

$(#Id).children(“ul”).children(“li”).css(“opacity”,0.5);

$(#Id).parent(“li”).siblings(“li”).children(“div”).css(“opacity”,0.5);

实现原理：通过构造函数创建对象，同时return this;

构造函数：function person (){

　　　　　　　　this.name = “Tom”;

　　　　　　　　this.age = 18;

　　　　　　　　this.sayHello = function(){

　　　　　　　　console.log(this.name);

　　　　　　　　return
this;}

　　　　　　　　this.addAge = function(){

　　　　　　　　this.age++;

　　　　　　　　console.log(this.age)

　　　　　　　　return
this;}

　　　　　　}

创建对象： var person = new person(
);

调用person.sayHello().addAge();实现链式编程

end():结束当前链最近的一次过滤操作，恢复链式编程被修改之前的一个状态

$(“div > ul”).text().prevAll(“li”).text().end() 此时返回的this为”ul”

7.jQuery 基本方法

parent():父元素选择	children():子元素选择	mouseenter():鼠标进入	parents():祖先元素选择
next():获取紧挨下一个元素	mouseleave():鼠标离开	css(“fontSize”):获取样式	siblings():获取兄弟元素
css(“attr”,value):改变style	find(“li”):选择指定后代元素注释:find()括号中必须传入元素		focus():获取焦点
blur():失去焦点	dbclick():双击事件	change():改变事件	keydown():键盘按下事件
click():单击事件	addClass(“class”):添加类名	removeClass():移除类名	hasClass():判断是否有类名
toggleClass()^[1]:判断是否有类名，有就移除没有就添加		fadeIn():淡入动画	index():获取元素索引号
show(num): 展示动画	slideDown():划入动画效果	fadeout():淡出动画	hide(num):隐藏动画
slideUp():划出动画效果	fadeTo(200,0.5):淡到动画	fadeToggle():似toggleClass()	slideToggle():似toggleClass()
animate():自定义动画	stop():停止动画	append():在后面追加元素	empty():清空元素
html(“”):清空元素	element.appendTo(node): element元素往node元素中添加		prepend():向前添加元素
remove():移除元素	clone():复制元素，返回一个jQuery对象	after():在当前元素后面添加	before():在当前元素前添加
attr():获取、设置属性	html():获取html	text():获取纯文本内容	val():获取文本值
stopPropagation()：阻止冒泡	preventDefault():阻止默认行为	height():获取高度，数值型	width():获取宽度，数值型
scrollTop():被卷去头部	scrollLeft():被卷去左部
prop():设置属性，主要应用设置checked,selected,disabled,等动态改变的属性，用法与attr()相同
offset({top:100,left:100}):获取、设置相对页面左上角位置，获取设置结果为对象如{top:100,left:100} 如果元素有定位，不设置定位，如果没有定位，会被设置position：relative
bind({“click mouseenter”,function(){}})^[2]:可同时绑定多个事件，不能给动态创建元素绑定事件
$(“ul”).delegate(“li” , ”click” , function() {alert(“事件绑定”)}): 给动态创建元素绑定事件，机理：给父元素绑定事件，子元素可以触发事件，事件冒泡机制。
on()^[3]:即可给原本存在元素绑定事件，也可给动态创建元素绑定事件,zepto手机端通用
unbind():解除bind()绑定事件，不常用		undelegate():解除delegate()绑定事件，不常用
off(“click”):解除绑定事件，全部都解除		off(“click” , “**”):解除动态绑定事件，自身绑定事件还存在
trigger(“focus”):触发事件，即触发已经绑定的事件,会触发浏览器的默认行为
triggerHander(“focus”):触发事件，即触发已经绑定的事件，不会触发浏览器的默认行为
prevAll():获取指定元素之前的所有元素		nextAll():获取指定元素之后的所有元素
end():结束当前链最近的一次过滤操作，恢复链式编程被修改之前的一个状态
each(function(index,ele){})^[4]:循环设置每个元素，包含index,ele两个参数

8.jQuery属性

① length属性解析

.length :获取匹配元素的个数，不是方法是jQuery属性

$(#Id).find(“:checkbox”).length，表示所有type = checkbox的input的个数

② jQuery多库共存

$.noConflict(): 让jQuery释放对$的控制，$.noConflict():需要放到最上部

释放$后调用jQuery------

jQuery(function(){

　　jQuery(“btn”).click(function(){

　　　　alert(123)

　　})

或者var j = $.noConflict(); 之后使用j j(function(){ })

③ jQuery插件制作

$.fn.changeBg = function(){ }

changeBg为函数名，$.fn.changeBg 为固定写法

9.jQuery方法可行特性分析

① 鼠标触碰排他事件：

$(“.class > li”).mouseenter(function(){

$(this).addClass(“className”).siblings(“li”).removeClass(“className”)

})

② show()动画效果

Show(400) = show(“normal”)
Show(200) = show(“fast”)

Show(600) = show(“slow”)

Show (2000 , function () {

　　alert(“动画执行完后，立即执行的回调函数”);

})

③ animate()自定义动画实现只能改变单一数值属性 font,backgruond等效果无法实现

$(“btn”).click(function(){

$(“div”).animate(

　　{“width”:”200px”
, “height”:”200px” , “opacity”:0.4} , 2000 , function(){

　　　　alert(“执行自定义动画”)

　　})

④ 通过选择器获取对象

$(#Id).find(“:checkbox”).length $(#Id).find(“:checkbox: checked”).length

$(#Id).find(“:checked”).length

⑤ 键盘按下事件on(“keydown”)

$(document).on(“keydown” ,
function(event){

　　　　var
keyCode = event.keyCode;

　　　　$(“#Id”).text(keyCode);

　　　　switch(keyCode){

　　　　　　case
82:

　　　　 $(“#Id”).css(“background” , ”red”);

　　　　 Break;

　　　　　　case
71:

　　　　　　$(“#Id”).css(“background” , ”green”);

　　　　　　Break;

　　　　}

})

注释：

[1] toggleClass(“div”)实现原理：

if($(“div”).hasClass(“box”))
{

　　　　$(“div”).removeClass(“box”);

　　　} else {

　　　　$(“div”).addClass(“box”);

}

[2] bind({ })实现：

①$(#Id).bind ( {

　　　　“click” : function(){
alert(“被点击了”) },

　　　　“mouseenter” : function(){“鼠标进入了”}

　})

②$(#Id).bind (

　　　　“click mouseenter”,function(){

　　　　i++;

　　　　alert( i );

　　　}) alert(1) , alert(2)

[3]
给原本存在元素绑定事件:

$(#Id).on(

　　　　“click mouseenter”,function(){

　　　　i++;

　　　　alert( i );}))

给动态创建元素绑定事件：

$(“ul”).on( “click” , ”li” , function(){alert(“事件绑定”) } )

[4]
each()方法使用，例：给10给li设置透明度

$(“li”).each(function(index,ele){

　　　　index表示当前元素的索引号

　　　　ele表示当前元素

　　 var p = (index + 1)/10;

　　$(ele).css(“opacity” , p)

　　})