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)
})
