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)

　　})