jQuery笔记

↑↑↑↑善用目录↑↑↑↑
汇总一下之前学习的jQuery内容，方便复习查看。

选择器

基本选择器

/*基本选择器*/
//id选择器
$( "#id" )
//类选择器
$( ".class" )
//元素选择器
$( "element" )
//全选择器
$( "*" )

层级选择器

/*层级选择器*/
//子元素选择器
 $('div > p')
//后代选择器
$('div p')
//兄弟选择器
//prev紧邻的div
$(".prev + div")
//prev的兄弟元素
$(".prev ~ div")

基本筛选选择器

/*筛选选择器*/
//选择一组中的第一个元素
$(".div:first")
//选取第一个 <ul> 元素的第一个 <li> 元素 
$("ul li:first")
//选取每个 <ul> 元素的第一个 <li> 元素 
$("ul li:first-child")
//选择索引为偶数的元素
$(".div:even")
//选择索引为奇数的元素
$(".div:odd")
//选择索引值为n的元素
$(".aaron:eq(n)")
//选择索引值大于n的元素
$(".aaron:gt(3)")
//选择索引值小于n的元素
$(".aaron:lt(3)")
//选择一组中的最后一个元素
$(".div:last")
//选择没有什么的元素
$("input:not(:checked) + p")
//某个元素是其父元素的唯一子元素，那么它就会被选中
$(":only-child")
//所有父级下第n个子元素
$('.last-div a:nth-child(2)')
//所有父级下倒数第n个子元素
$('.last-div a:nth-last-child(2)')
//选择文档的根元素
$(":root")

内容选择器

/*内容选择器*/
//包含text的元素
$(".div:contains('text')")
//选择所有含有子元素或者文本的元素。
$(":parent:")
//选择元素中至少包含指定选择器的元素。
$(":has(selector)")
//选择所有没有子元素或者文本的元素
$(":empty")

隐藏显示

/*隐藏显示*/
//选择显示的元素
$(":visible")
//选择隐藏的元素
$(":hidden")

属性选择器

/*属性选择器*/
//选择div元素中name属性是p1的元素
$("div[name=p1]")
//选择div元素中所有具有name属性的元素
$("div[name]")
//选择div元素中name属性的值只包含一个连字符a或以a为前缀且以"-"为分隔的元素（如：name="a-bcd"）
$("div[name|=a]")
//选择div元素中name属性的值包含字符串a且以空格分隔    元素（如：name="a  b"）
$("div[name~=a]")
//选择div元素中name属性的值是以字符串ab开头的元素
$("div[name^=ab]")
//选择div元素中name属性的值是以字符串ab结尾的元素
$("div[name$=ab]")
//选择div元素中name属性的值包含字符串ab的元素
$("div[name*=ab]")
//选择div元素中name属性的值不等于字符串ab或者没有name属性的元素
$("div[name!=ab]")

表单元素选择器

/*表单元素选择器*/
$(':input')
$(':text')
$(':password')
$(':radio')
$(':checkbox')
$(':submit')
$(':image')
$(':button')
$(':file')
//选取可用的表单元素
$(':enabled')
//选取不可用的表单元素
$(':disabled')
//选取被选中的input元素
$(':checked')
//选取被选中的option元素
$(':selected')

this

/*选择当前元素*/
$(this)

---

样式

属性

/*属性*/
//设置属性
$('#test').attr('属性名', '属性值')

//移除属性
$('#test').removeAttr('属性名', '属性值')

//  

---

文本内容

.html(),.text(),.val()

.html()是用来读取元素的HTML内容（包括其Html标签），
.text()用来读取元素的纯文本内容，包括其后代元素，
.val()是用来读取表单元素的”value”值。

    <q class='test' value='4'>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </q>

$('#test').html()
//<span>1</span><span>2</span><span>3</span>
$('#test').text()
//123
$('#test').val()
//4

---

class

//添加样式名
$('#test').addClass("newClass")
//素移除的一个或多个用空格隔开的样式名
$('#test').removeClass("newClass")
//切换样式名
$('#test').toggleClass( className[, switch ])

css

//设置css样式
$('#test').css(propertyName, value )
//获取css样式
$('#test').css( propertyName ) 

去空格

jQuery.trim()

$.trim($("#results2").val())

---

遍历

children()

$("div").children()
$("div").children(".abc")

返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）

find()

children是父子关系查找，find是后代关系（包含父子关系）

//全查找
$("p").find('*')
//按信息查找
$("p").find('必要参数')

1.ind是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。
2.与其他的树遍历方法不同，选择器表达式对于.find()是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 ‘*’。
3.find只在后代中遍历，不包括自己。
4.选择器 context 是由 .find() 方法实现的；因此，$('.item-ii').find('li') 等价于$(‘li’, ‘.item-ii’)(找到类名为item-ii的标签下的li标签)。

---

parent()

寻找指定元素的父元素

$(ul).parent()

parents()

寻找指定元素的祖先元素,parents()无参数

$( "div" ).parents()

closest()

//在div元素中，往上查找所有的li元素
$("div").closet("li')

parents()与closet()的区别
起始位置不同：.closest开始于当前元素 .parents开始于父元素
遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

---

next()

查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合

$('.item').next(':first')

prev()

查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合

$('.item-2').prev()

siblings()

查找指定元素集合中每一个元素的同辈元素

---

add()

找到指定元素集合之后就意味着这个合集对象已经是确定的，如果后期需要再往这个合集中添加一新的元素

$('li').add('p')

---

each()

.each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。

<ul>
    <li>AAA</li>
    <li>BBB</li>
</ul>

//开始迭代li，循环2次
$("li").each(function(index, element) {
     index 索引 0,1
     element是对应的li节点 li,li
     this 指向的是li
})

查找数组中的索引

$.inArray( value, array ,[ fromIndex ] )

在数组中搜索指定的值，并返回其索引值。如果数组中不存在该值，则返回 -1.

---

JQ事件

常用事件笔记。

事件对象

$(elem).on("click",function(event){
   event //事件对象
})

属性	意义
event.type	获取事件类型
event.target	获取触发事件的元素
event.relatedTarget	返回当鼠标移动时哪个元素进入或退出
event.currentTarget	事件冒泡阶段内的当前 DOM 元素，通常等于 this
event.data	包含当前执行的处理程序被绑定时传递到事件方法的可选数据
event.namespace	返回自定义命名空间
event.result	包含由被指定事件触发的事件处理程序返回的最后一个值
event.pageX	返回鼠标指针的位置，相对于文档的左边缘
event.pageY	返回鼠标指针的位置，相对于文档的上边缘。
event.timeStamp	返回从1970年1月1日到事件被触发时的毫秒数
event.which	返回指定事件上哪个键盘键或鼠标按钮被按下

方法	意义
event.isDefaultPrevented()	检查指定的事件上是否调用了preventDefault()方法
event.isImmediatePropagationStopped()	检查指定的事件上是否调用了event.stopImmediatePropagation()方法
event.isPropagationStopped()	检查指定的事件上是否调用了 event.stopPropagation()
event.preventDefault()	阻止元素发生默认的行为
event.stopImmediatePropagation()	阻止剩下的事件处理程序被执行
event.stopPropagation()	阻止事件冒泡到父元素，阻止任何父事件处理程序被执行

文档事件

.ready()

$(document).ready()方法允许我们在文档完全加载完后执行函数。

//简写为：
$(function(){
    ...code...
})

.load()

$(document).load(function(){
    ...code...
})

ready先执行，load后执行

运行顺序：

(1) 解析HTML结构。
(2) 加载外部脚本和样式表文件。
(3) 解析并执行脚本代码。
(4) 构造HTML DOM模型。//ready
(5) 加载图片等外部文件。
(6) 页面加载完毕。//load

ready事件：
ready事件在DOM结构绘制完成之后就绘执行。这样能确保就算有大量的媒体文件没加载出来，JS代码一样可以执行。

load事件：
load事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话，则就会出现这种情况：网页文档已经呈现出来，但由于网页数据还没有完全加载完毕，导致load事件不能够即时被触发。

.resize()

当调整浏览器窗口的大小时，发生 resize 事件。

resize() 方法触发 resize 事件，或规定当发生 resize 事件时运行的函数。

//对浏览器窗口调整大小进行计数
$(window).resize(function() {
  $('span').text(x+=1);
});

.scroll()

scroll事件会在元素的滚动条位置发生改变时触发。

鼠标点击相关事件

.click()

鼠标点击

.dblclick()

鼠标双击

.mousedown()

鼠标按下

.mouseup()

鼠标按键松开

---

鼠标移动相关事件

.mousemove()

鼠标移动

.mouseover()

鼠标移入

.mouseenter()

mouseenter 事件只有在鼠标指针进入被选元素时被触发，mouseover 事件在鼠标指针进入任意子元素时也会被触发

.mouseout()

鼠标移出

.mouseleave()

与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发mouseout事件。如果鼠标指针离开任何子元素，同样会触发

.hover(handlerIn(), handlerOut())

鼠标移入移出事件

handlerIn() ->鼠标移入事件
handlerOut() ->鼠标移出事件

---

键盘事件

.keydown()

键盘按下时触发

.keyup()

按键抬起时触发

.keypress()

keydown事件触发在文字还没敲进文本框，这时如果在keydown事件中输出文本框中的文本，得到的是触发键盘事件前的文本，而keyup事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本。

keypress事件与keydown和keyup的主要区别
只能捕获单个字符，不能捕获组合键
无法响应系统功能键（如delete，backspace）
不区分小键盘和主键盘的数字字符

---

焦点事件

.focusin()

获得焦点，支持冒泡。

.blur()

获得焦点

.focusout()

失去焦点，支持冒泡。

.focus()

失去焦点

---

表单事件

.change()

input元素:
监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。

select元素:
对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发

textarea元素:
多行文本输入框，当有改变时，失去焦点后触发change事件

.select()

select事件只能用于<input>元素与<textarea>元素

当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。

.submit()

$("#form").submit()

用于验证from表单提交事件，返回false则不提交

---

on()事件

.on()

on()事件是所有鼠标事件，表单事件与键盘事件事件的实现的根本。

//click事件的on方式
$("#elem").on('click',function(){});
//多个事件绑定同一个函数
$("#elem").on("mouseover mouseout",function(){ });
//多个事件绑定不同函数
$("#elem").on({
    mouseover:function(){},  
    mouseout:function(){},
});

.off()

通过.on()绑定的事件处理程序
通过off() 方法移除该绑定

//绑定事件
$("elem").on("mousedown mouseup",fn)
//删除一个事件
$("elem").off("mousedown")
//删除所有事件
$("elem").off("mousedown mouseup")
//快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁
$("elem").off()

---

DOM

/*创建节点*/
var $body = $('body');
$body.on('click', function() {
    //通过jQuery生成div元素节点
    var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")
    $body.append(div)
})

DOM内部插入

append()与appendTo()作为最后一个子元素插入
prepend()与prependTo()作为第一个子元素插入

/*把A插入B中*/
$(B).append(A)
$(B).prepend(A)
$(A).appendTo(B)
$(A).prependTo(B)

/*例子*/
//append
$("#bt1").on('click', function() {
    //.append(), 内容在方法的后面，
    //参数是将要插入的内容。
    $(".content").append('<div class="append">通过append方法添加的元素</div>')
})
//appendTo
$("#bt2").on('click', function() {
    //.appendTo()刚好相反，内容在方法前面，
    //无论是一个选择器表达式 或创建作为标记上的标记
    //它都将被插入到目标容器的末尾。
    $('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))
})
//prepend
$("#bt1").on('click', function() {
    //找到class="aaron1"的div节点
    //然后通过prepend在内部的首位置添加一个新的p节点
    $('.aaron1')
        .prepend('<p>prepend增加的p元素</p>')
})
//prependTo
$("#bt2").on('click', function() {
        //找到class="aaron2"的div节点
        //然后通过prependTo内部的首位置添加一个新的p节点
        $('<p>prependTo增加的p元素</p>')
            .prependTo($('.aaron2'))
    })

DOM外部插入

after()在指定元素之后插入insertAfter()
before()在指定元素之前插入insertBefore()

//before
$("#bt1").on('click', function() {
    //在匹配test1元素集合中的每个元素前面插入p元素
    $(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')
})
//insertBefore
$("#bt1").on('click', function() {
    //在test1元素前后插入集合中每个匹配的元素
    //不支持多参数
    $('<p style="color:red">测试insertBefore方法增加</p>', '<p style="color:red">多参数</p>').insertBefore($(".test1"))
})

//after
$("#bt2").on('click', function() {
    //在匹配test1元素集合中的每个元素后面插入p元素
    $(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')
})
//insertAfter
$("#bt2").on('click', function() {
        //在test2元素前后插入集合中每个匹配的元素
        //不支持多参数
        $('<p style="color:red">测试insertAfter方法增加</p>', '<p style="color:red">多参数</p>').insertAfter($(".test2"))
    })

---

DOM获取

.get( [index ] )

get方法是获取的dom对象，也就是通过document.getElementById获取的对象
get方法是从0开始索引

.index()

如果不传递任何参数给 .index() 方法，则返回值就是jQuery对象中第一个元素相对于它同辈元素的位置
如果在一组元素上调用 .index() ，并且参数是一个DOM元素或jQuery对象， .index() 返回值就是传入的元素相对于原先集合的位置
如果参数是一个选择器， .index() 返回值就是原先元素相对于选择器匹配元素的位置。如果找不到匹配的元素，则 .index() 返回 -1

---

DOM删除

empty()删除里面所有元素，但保留自身,数据不能恢复
remove()删除里面所有元素，不保留自身,数据不能恢复
detach()删除里面所有元素，不保留自身,数据可以恢复

empty方法
方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点
empty不能删除自己本身这个节点

remove方法
该节点与该节点所包含的所有后代节点将同时被删除
提供传递一个筛选的表达式，删除指定合集中的元素

detach方法
$(“p”).detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。当你append之后，又重新回到了文档流中。就又显示出来了。

//通过empty处理
<div class="hello"><p>测试</p></div>
//通过empty处理
$('.hello').empty()

//结果：<p>测试</p>被移除
<div class="hello"></div>

//通过remove处理
$('.hello').remove()
//结果：<div class="hello"><p>慕课网</p></div> 全部被移除
//节点不存在了,同事事件也会被销毁

//
$("button:last").click(function() {
    var p = $("p:first").detach();
    p.css('color','blue').text('p2通过detach处理后,点击该元素事件存在')
    $("body").append(p);
})

---

DOM拷贝

clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。

//clone处理一
$("div").clone()   //只克隆了结构，事件丢失

//clone处理二
$("div").clone(true) //结构、事件与数据都克隆

---

DOM替换

replaceWith(newContent)用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
replaceAll( target )用集合的匹配元素替换每个目标元素

replaceAll()和replaceWith()功能类似，但是目标和源相反，用上述的HTML结构，我们用replaceAll处理

replaceAll()和replaceWith()功能类似，主要是目标和源的位置区别
replaceWith()与replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序
replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用
replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点

//只克隆节点
//不克隆事件
$(".bt1").on('click', function() {
    //找到内容为第二段的p元素
    //通过replaceWith删除并替换这个节点
    $(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>')
})
//找到内容为第六段的p元素
//通过replaceAll删除并替换这个节点
$(".bt2").on('click', function() {
    $('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last');
})

---

DOM包裹

wrap()将元素用其他元素包裹起来，也就是给它增加一个父元素。

wrapAll()给集合中匹配的元素增加一个外面包裹HTML结构
将集合中的元素用其他元素包裹起来，也就是给他们增加一个父元素

wrapInner()将合集中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素

unwrap()将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。

wrap()

<p>p元素</p>

//给p元素增加一个div包裹

$('p').wrap('<div></div>')

//最后的结构，p元素增加了一个父div的结构
<div>
    <p>p元素</p>
</div>

$('div').unwarp();

//结果
<p>p元素</p>

wrapAll()

<p>p元素</p>
<p>p元素</p>

$('p').wrapAll('<div></div>')

<div>
    <p>p元素</p>
    <p>p元素</p>
</div>

wrapInner()

<p>p元素</p>
<p>p元素</p>

$('p').wrapInner('<div></div>')

<p>
    <div>p元素</div>
</p>
<p>
    <div>p元素</div>
</p>

---

动画

隐藏显示

隐藏

.hide("fast / slow/n")

‘fast’ 和 ‘slow’ 分别代表200和600毫秒的延时，就是元素会执行200/600毫秒的动画后再隐藏
‘n’表示时间

显示

.show(3000)

隐藏/显示

.toggle(3000)

显示则隐藏，隐藏则显示

$('elem').hide("slow").show(3000)
$('elem').toggle(3000)

---

上卷下拉

下拉动画

.slideDown( [duration ] [, complete ] )

上卷动画

.slideUp( [duration ] [, easing ] [, complete ] )

上卷下拉切换

slideToggle(fast/slow/n)

//下拉
$("ele").slideDown(1000, function() {
    //等待动画执行1秒后,执行别的动作....
});
//上卷
$("#a2").slideUp(3000,function(){
    //等待动画执行3秒后,执行别的动作....
})

---

淡入淡出

淡出

.fadeOut( [duration ], [ complete ] )

淡入

.fadeIn( [duration ], [ complete ] )

淡入淡出切换

.fadeToggle( [duration ] ,[ complete ] )

改变透明度

.fadeTo( duration, opacity ,callback)

opacity为透明度 0~1

---

animate

.animate( properties ,[ duration ], [ easing ], [ complete ] )
.animate( properties, options )

.animate()方法允许我们在任意的数值的CSS属性上创建动画。2种语法使用，几乎差不多了，唯一必要的属性就是一组CSS属性键值对。这组属性和用于设置.css()方法的属性键值对类似，除了属性范围做了更多限制。第二个参数开始可以单独传递多个实参也可以合并成一个对象传递了.

border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果.

options参数
duration - 设置动画执行的时间
easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数
step：规定每个动画的每一步完成之后要执行的函数
progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念
complete：动画完成回调

$('#elem').animate({
    left: 50,
    width: '50px'
    opacity: 'show',
    fontSize: "10em",
}, 500);


$('#elem').animate({
    width: 'toggle',  
    height: 'toggle'
  }, {
    duration: 5000,
    specialEasing: {
      width: 'linear',
      height: 'easeOutBounce'
    },
    complete: function() {
      $(this).after('<div>Animation complete.</div>');
    }
  });

---

停止动画

.stop( [clearQueue ], [ jumpToEnd ] )
.stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )

.stop(); 停止当前动画，点击在暂停处继续开始
.stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行
.stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值

stop()：只会停止第一个动画，第二个第三个继续
stop(true)：停止第一个、第二个和第三个动画
stop(true ture)：停止动画，直接跳到第一个动画的最终状态