jquery笔记

链式队列
$(“xx”).slideDown().fadeOut().fadeIn()……

释放对$的控制
$.noConflict()   $被jquery代替
var jq=$.noConflict()   $被jq替代
 
阻止事件冒泡事件
    1.$(“div”).click(function(){
　　　　alert(“div”)
　　　　return false  //阻止父元素弹出或阻止链接跳转
　　})
    2.$(“div”).click(function(event){
　　　　alert(“div”)
　　　　event.stopPropagation() //阻止父元素弹出
　　})
    3.$(“a”).click(function(event){
　　　　alert(“a”)
　　　　event.stopPropagation() //阻止a标签内链接跳转
　　})

事件
.outerWidth()  返回元素宽度(包括padding和border)
.outerHeight()  返回元素高度(同上)



jQuery函数前要用“$”，用以与其他语言区分
<script>
$(function()        $(function(){})  使用jquery时注意写在其中，相当于写在body最后，因为jquery要操作dom树，写在其中是为了让dom树渲染完毕在执行
{
　　$(“p”).hide()；     使p标签内容隐藏
})
</script>
<p>123</p>



遍历数组    
map数组和对象(伪数组)都可以遍历，会返回新数组
forEach()会改变原数组
each只能遍历(可以遍历真数组，伪数组，对象)
a={……}
b={}
$.each(a,function(index,value1){
   //b[value3.name]=value1.value2
console.log(index,value1)  
})
map可以修改数组等操作
$.map(a,function(value,index){
console.log(index,value)
return a+1  
})
数组.forEach(function(value,index){
  var a
  a[index]=value
})


<div>
<p>123</p>
<p>123</p>
第一种写法只能写一个样式
$(“:text”).css(“background”,“red”)
第二种对象方法可以写多个样式
$(“:text”).css({“background”:“red”,“font-size”:“20px”})
第三种
var  x={“background”:(或,)“red”}  “:”一种样式  “,”多个
$(“:text”).css(x)

DOM选择器
$(“input[type='submit']”)  选择type为submit的input标签
$(“img[src='img/01']”)  选择src为img/01的img标签
:text  选择type=text的input标签
div div 选择div下所有包含在内的div
ul>li   选择ul下的子元素li
div+div  后相邻   中间如果有其他类型标签不能用
div~div    后兄弟   中间有其他标签也可以用
div:last
div:first
div:even    选择奇数相邻
div:odd  选择偶数相邻
div:lt(2)   选择截止到第二个
div:eq(2)   选择第2+1个
div:gt(2)   选择n-(2+1)个
div:not(#t)   选择除#t以为的其他标签

子元素选择器
p:first-child   选择div下的第一个p标签
p:last-child    选择div下的最后一个p标签
p:nth-child(x)    选择div下第x个p标签
p:nth-child(3n+1)  选择第1个及其后面间隔3的每个元素
p:nth-last-child(2)   选择倒数第二个
p:only-child   选择仅有一个p标签的div项

p:contains('1')   选择内容有1的p标签
div:empty    选择无内容或子元素的div标签
div:parent    选择非空或有子元素的div标签
div:has('p')    选择有p标签的div标签
input:visible   选择可见input
input:hidden   选择不可见input
[属性(type……)]    属性选择器

.get(数)   从0开始，返回DOM对象组成的数组，不带参数就是把jquery对象转换为dom数组集合
.eq(0)  第一个
.index()   获取dom元素的索引
.parent()  获取父元素
.parents()  从下往上遍历，找到被选元素的所有祖先元素
.closest()  从下往上遍历，找到被选元素第一个祖先元素
.children()  获取子元素
.find()   找到所有元素   .find(“.xxx”)
.text()返回文本内容  .text(xxx)
$(“p”).filter(“.a”)  找到所有类名为a的p标签
.siblings()  获取除自己以外的(非当前元素)兄弟元素，子元素找不到
$(“textarea”).select()选择文本框内的文本

事件绑定鼠标单击事件
    1.$(“p”).click(function(){
$(“p”).text(“123”)     单击后将文本内容转换为123
})
    2.$(“p”).on(“click”,function(){
……
})

自定义事件通过on绑定(命名空间)
为了区分可以写成myClick.zs,
利用trigger触发子元素带命名空间的事件，那么父元素带相同命名空间的事件也会被触发。
利用trigger触发子元素不带命名空间的事件，那么所有相同类型的事件和父元素所有相同类型的事件都会被触发
$(“p”).on(“myClick”,function(){
alert(“p”)
})
$(“p”).trigger(“myClick”)

on()方法事件委托(动态创建的标签需要用事件委托添加事件)
//需要委托给存在的父元素
$(“body”).on(“click”,“p”,function(){

})

on()方法实时监听内容变化
$(“input”).on(“input propertychangr”,function(){

})
change()方法监听内容是否发生变化

one(“click”,function(){})只处理一次


事件委托  delegate(3.0版本之后被删除用on()代替)
$(“button”).click(function(){
$(“ul”).append(“<li>新增li</li>”)
})
//把li的click事件委托给ul执行
//使用delegate()函数，点击后添加的li也会执行click事件
$(“ul”).delegate(“li”,“click”,function(){
console.log($(this).html())
})

$(“button”).click(function(){
var s=$(“p”).text() 
alert(s)          把123在窗体上显示
})
<p>123</p>

.html(“123”)     把内容替换为123(包括html标签如<p>123</p>)
$(“p”).html()    在控制台返回p标签的内容

var s=$(“input”).val()   把input里输入的文本提取出来
alert(s)  在窗体上显示
$(“textarea”).append(s)  在文本域里显示
<input type=“text” />
<textarea></textarea>

接触绑定的事件
$(“button”).off()  移除button上所有事件，写在on事件前可解除多次绑定
.off(“click”)   移除元素上所有单击事件
.off(“click”,test1)   移除test1()函数的单击事件
  

动画特效
hide(时间) 隐藏
show(时间)   显示
toggle(时间)   隐藏/显示
fadeIn(时间)    淡入
fadeOut(时间)   淡出
fadeToggle(时间)   淡入/淡出
fadeTo(时间,透明度(0~1))     闪烁(写在一个function内)
slideUp(时间)   收起
slideDown(时间)    展开
slideToggle()   展开或收起
delay(时间)  延时执行
jQuery.fx.off=true  立即执行所有动画
jQuery.fx.off=false   重新开启动画(默认false)
jQuery.fx.interval=100(默认30，值越大动画越卡，值越小动画越流畅，消耗游览器性能)帧数
.audio.pause()  音频播放器暂停
.audio.play()  音频播放器暂停

自定义动画animate({参数},[时间],[节奏],[回调函数])
.animate({参数,参数……},[时间],[“linear(匀速)”(默认swing(中间快两头慢))],[回调函数])   
opacity:0-1淡出 
 top:“+=200px”动态向下移200px(在原基础上增加)  
 width:“200px”宽变成200px(直接修改参数)，
width:“hide”收起   
width:“toggle”  收起或展开
marginTop……参数使用驼峰命名法
animate({参数},时间).animate({参数},时间)

stop(是否停止后续的,是否完成当前的)
.stop()   写在后面停止当前动画后面的动画继续(写在动画的前面可终止前面的动画继续如xx.stop().slideDown())
.stop(true)    停止所有动画
.stop(false,true)  立即完成当前的，继续执行后续的
.stop(true,true)   立即做完当前动画后停止




.attr(属性节点,属性节点的值)
如果只写第一个参数，代表获取属性节点的值(只会返回找到的第一个)
如果写两个参数，代表设置属性节点的值(找到多少个元素就会设置多少个元素)，如果设置的属性节点不存在，会自动新增一个属性节点
//当返回值为true和false时用prop()(checked,selected,disabled)用prop()，其他时候用attr()
.attr(“name”)  获取属性节点name的值
$(“img”).attr(“src”,“img/1.jpg”)   更改img标签的图片
$(“a”).attr(“href”,“www.baidu.com”)   更改a标签的链接
.prop(“abc”,“123”)   用法和attr一样
$(“div”).addClass(“div1 div2”)  添加class属性的类div1和div2
.removeClass(“div1 div2”)  删除class属性的类
.toggleClass(“div1 div2”)  有就删没有就添加
.removeAttr(“id name ……”)    删除找到的所有标签id和name的属性节点
.removeProp用法与removeAttr一样


$(window).scroll(function(){//监听网页滚动

})
$(“html,body”).scrollTop(300)   跳到滚动条某位置，不设参数则是读取当前位置，ie不兼容html需要用body

$(“p”).children()  选择p标签的子元素
children(“p”)   选择p的子元素
$(“p”).find(“*/(span)/……”)   找到p标签内的所有元素


var b=$.trim(a)     去除字符串a左右两边的空格，中间有空格不会清除
var b=$.isWindow(a)   判断a是不是window对象
var b=$.isArray(a)   判断a是不是真数组
var b=$.isFunction(a)  判断a是不是函数

$.holdReady(true)  暂停入口函数执行//写在入口函数之前    3.2版本之后以被移除
$(“button”).click(function(){
$.holdReady(false) 点击按钮后执行入口函数
})



触发器
$(“div”).trigger(“click”)   自动触发div的点击事件，会触发事件冒泡，会触发默认行为(如链接跳转)(如果要触发a的链接跳转，需要在a标签内加一个其他标签如<span></span>选择器内选择span)
.triggerHandler(“click”)  自动触发点击事件，不会触发事件冒泡，不会触发默认行为


鼠标事件
.mouseover(function(){})  鼠标移入事件
.mouseout(function(){})  鼠标移出事件  //如果移入子元素也会触发mouseover和mouseout事件
$(“div ul li”).mouseenter(function(){
$(this).addClass(“li_0”)  //鼠标移入哪个li就为那个li添加class li_0
})  鼠标移入事件
.mouseleave(function(){})   鼠标移出事件  //移入子元素不会触发移入移出事件

键盘事件
.keydown(function(){})  键盘按下事件
.keyup(function(){})   键盘松开事件

console.log(event.keyCode)

hover
两个function
.hover(function(){
//鼠标移入         //与mouseenter事件一样
},function(){
//鼠标移出       //与mouseleave事件一样
})
一个function
.hover(function(){
//既监听鼠标移入又监听鼠标移出
})


新增节点
内部添加
var $li=$(“<li>123</li>)
$(“ul”).append(“<li>123</li>”)   在ul内部的最后添加一个li元素
$li.appendTo(“ul”)  与append()用法一样
.prepend($li)    将元素添加到内部最前面
$li.prependTo(“ul”)  与prepend()用法一样

外部添加
$(“ul”).after($li)  把元素添加到ul外部的后面
$li.insertAfter(“ul”)  与after()用法一样
xx.before($li)  把元素添加到ul外部的前面
$li.insertBefore(“ul”)  与before()用法一样


删除节点
$(“li”).remove(“#id”)    删除所有标签li内有属性节点为名为id的标签(兄弟元素有效)
$(“li”).remove()  删除li标签(内容以及li标签)
.detach()  与remove用法一样
$(“li”).empty(“background”)   删除li的css背景样式
$(“li”).empty()   删除li标签内的内容及子元素(li标签不会删除)

替换节点
var $h6=$(“<h6>123</h6>)
$(“h1”).replaceWith($h6)   将h1标签替换为$h6的内容
$h6.replaceAll(“h1”)   与replaceWith()用法一样

复制节点clone
浅复制(会复制元素内容但不会复制事件)
var $li=$(“li:first”).clone(false)   把第一个li复制给$li
$(“ul”).append($li)  把$li添加到ul内部最后

深复制(会负责元素内容以及添加的事件)解决了事件委托问题
var $li=$(“li:first”).clone(true)   把第一个li复制给$li
$(“ul”).append($li)  把$li添加到ul内部最后


其他方法
$(sevent).resize(fun(可选，resize执行时，执行的函数))   监听窗口大小

$(window).resize(function(){....})　　　　//当窗口大小改变时执行


$(“dom元素”).serialize()   获取该元素name和value的值，如果是该元素下有多个子元素，则用&分隔

$(“dom元素”).focus()  设置焦点
.focus(function(){
    当点击该dom元素时执行的回调
})