jquery的基础
1.jquery选择器
1.id选择器：$(’#id’).css({“border”:“3px solid blue”,“font-size”:“20px”});
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲id').css({"bord…(’.class’)
3.元素选择器：(′element′)4.全选择器：('element')
4.全选择器：(′element′)4.全选择器：(’*’)
5.层级选择器：（子元素，后代元素，兄弟元素，相邻元素）
6.基本筛选选择器
其他
$("input:not(:checked)+p")7.内容筛选选择器
:has
$(".div:has(span)").css("color","blue");8.可见性筛选选择器
9.属性筛选选择器
10.子元素筛选选择器
<div class="first-div"> <div class="div"> <a>:first-child</a> <a>第二个元素</a> <a>:last-child</a> </div> <div class="div"> <a>:first-child</a> </div> <div class="div"> <a>:first-child</a> <a>第二个元素</a> <a>:last-child</a> </div> </div>
$(".div a:first-child").css(“font-size”,“10px”)
:nth-child的index是从1开始的
11.表单元素选择器
2.jquery的属性与样式
1.jquery的属性与样式之.attr()与.removeAttr()
attr()有4个表达式
1.attr(传入属性名)：获取属性的值
2.attr(属性名，属性值)：设置属性的值
3.attr(属性名，函数值)：设置属性的函数值
4.attr(attributes):给指定元素设置多个属性值，即：{属性名一：“属性值一”，属性名二：“属性值二”，…}
$("input:eq(2)").attr('value',function(i, val){
return '通过funct' + val
})
removeAttr()删除方法
.removeAttr(attributeName):为匹配的元素集合中的每个元素中移除一个属性（attribute）
2.jquery的属性与样式.val()
.val()方法
1…val()无参数，获取匹配的元素集合中第一个元素的当前值
2…val(value),设置匹配的元素集合中每个元素的值
3…val(function),一个用来返回设置值的函数
("p").text(("p").text(("p").text(("#single").val())
("p").text(("p").text(("p").text(("#multiple"),val())
如果select元素有multiple（多选）属性，并且至少一个选择项被选中， .val()方法返回一个数组，这个数组包含每个选中选择项的值
$(“input[type=‘text’]”).val(‘sdsd’)
3.jQuery的属性与样式之增加样式.addClass()
.addClass(className): 为每个匹配元素所要增加的一个或多个样式名
4.jQuery的属性与样式之删除样式.removeClass()
removeClass([className]):每个匹配元素移除的一个或多个用空格隔开的样式名
5.jquery的属性与样式之切换样式.toggleClass()
6.jquery的属性与样式之html()及.text()
.html()方法
.html() 不传入值，就是获取集合中第一个匹配元素的HTML内容
.html( htmlString ) 设置每一个匹配元素的html内容
.html( function(index, oldhtml) ) 用来返回设置HTML内容的一个函数
text()方法
.text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代
.text( textString ) 用于设置匹配元素内容的文本
.text( function(index, text) ) 用来返回设置文本内容的一个函数
$(".first-div:first").text(function(index,text){
return '增加新的文本内容' + text
})
**
JQuery的DOM篇
**
1.DOM内部插入append(）与appendTo()
这里就涉及到一个位置关系，常见的就是把这个新创建的元素，当作页面某一个元素的子元素放到其内部
<body>
<h2>通过append与appendTo添加元素</h2>
<button id="bt1">点击通过jQuery的append添加元素</button>
<button id="bt2">点击通过jQuery的appendTo添加元素</button>
<div class="content"></div>
<script type="text/javascript">
$("#bt1").on('click', function() {
//.append(), 内容在方法的后面，
//参数是将要插入的内容。
$(".content").append('<div class="append">通过append方法添加的元素</div>')
})
</script>
<script type="text/javascript">
$("#bt2").on('click', function() {
//.appendTo()刚好相反，内容在方法前面，
//无论是一个选择器表达式 或创建作为标记上的标记
//它都将被插入到目标容器的末尾。
$('<div class="appendTo">通过appendTo方法添加的元素</div>').appendTo($(".content"))
})
</script>
</body>
2.DOM外部插入after()与before()
节点与节点之前有各种关系，除了父子，祖辈关系，还可以是兄弟关系。之前我们在处理节点插入的时候，接触到了内部插入的几个方法，这节我们开始讲外部插入的处理，也就是兄弟之间的关系处理
<body>
<h2>通过before与after添加元素</h2>
<button id="bt1">点击通过jQuery的before添加元素</button>
<button id="bt2">点击通过jQuery的after添加元素</button>
<div class="aaron">
<p class="test1">测试before</p>
</div>
<div class="aaron">
<p class="test2">测试after</p>
</div>
<script type="text/javascript">
$("#bt1").on('click', function() {
//在匹配test1元素集合中的每个元素前面插入p元素
$(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>')
})
</script>
<script type="text/javascript">
$("#bt2").on('click', function() {
//在匹配test1元素集合中的每个元素后面插入p元素
$(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>')
})
</script>
</body>
3.DOM内部插入prepend()与prependTo()
在元素内部进行操作的方法，除了在被选元素的结尾（仍然在内部）通过append与appendTo插入指定内容外，相应的还可以在被选元素之前插入，jQuery提供的方法是prepend与prependTo
<body>
<h2>通过prepend与prependTo添加元素</h2>
<button id="bt1">点击通过jQuery的prepend添加元素</button>
<button id="bt2">点击通过jQuery的prependTo添加元素</button>
<div class="aaron1">
<p>测试prepend</p>
</div>
<div class="aaron2">
<p>测试prependTo</p>
</div>
<script type="text/javascript">
$("#bt1").on('click', function() {
//找到class="aaron1"的div节点
//然后通过prepend在内部的首位置添加一个新的p节点
$('.aaron1')
.prepend('<p>prepend增加的p元素</p>')
})
</script>
<script type="text/javascript">
$("#bt2").on('click', function() {
//找到class="aaron2"的div节点
//然后通过prependTo内部的首位置添加一个新的p节点
$('<p>prependTo增加的p元素</p>')
.prependTo($('.aaron2'))
})
</script>
</body>
4.DOM节点删除之empty()的基本用法
empty 顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了 指定元素中的所有子节点。
<div class="hello"><p>慕课网</p></div>
$('.hello').empty()
//结果就是把<p>慕课网</p>移除
5.DOM节点删除之remove()的有参用法和无参用法
remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。
<body>
<h2>通过jQuery remove方法移除元素</h2>
<div class="test1">
<p>p元素1</p>
<p>p元素2</p>
</div>
<div class="test2">
<p>p元素3</p>
<p>p元素4</p>
</div>
<button>通过点击jQuery的remove移除元素</button>
<button>通过点击jQuery的remove移除指定元素</button>
<script type="text/javascript">
$("button:first").on('click', function() {
//删除整个 class=test1的div节点
$(".test1").remove()
})
$("button:last").on('click', function() {
//找到所有p元素中，包含了3的元素
//这个也是一个过滤器的处理
$("p").remove(":contains('3')")
})
</script>
</body>
6.DOM替换replaceWith()和replaceAll()
replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
.replaceAll( target ) ：用集合的匹配元素替换每个目标元素
.replaceAll()和.replaceWith()功能类似，但是目标和源相反，用上述的HTML结构，我们用replaceAll处理
<body>
<h2>replaceWith()和replaceAll()</h2>
<div class="left">
<button class="bt1">点击,通过replaceWith替换内容</button>
<button class="bt2">点击,通过rreplaceAll替换内容</button>
</div>
<div class="right">
<div>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</div>
<div>
<p>第四段</p>
<p>第五段</p>
<p>第六段</p>
</div>
</div>
<script type="text/javascript">
//只克隆节点
//不克隆事件
$(".bt1").on('click', function() {
//找到内容为第二段的p元素
//通过replaceWith删除并替换这个节点
$(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>')
})
</script>
<script type="text/javascript">
//找到内容为第六段的p元素
//通过replaceAll删除并替换这个节点
$(".bt2").on('click', function() {
$('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last');
})
</script>
</body>
7.DOM包裹wrap()方法
如果要将元素用其他元素包裹起来，也就是给它增加一个父元素，针对这样的处理，JQuery提供了一个wrap方法
<p>p元素</p>
$('p').wrap('<div></div>')
8.DOM包裹unwrap()方法
<div>
<p>p元素</p>
</div>
$('p').unwrap()
9.DOM包裹wrapAll()方法
wrap是针对单个dom元素处理，如果要将集合中的元素用其他元素包裹起来，也就是给他们增加一个父元素，针对这样的处理，JQuery提供了一个wrapAll方法
<p>p元素</p>
<p>p元素</p>
$('p').wrapAll('<div></div>')
//最后的结果：
<div>
<p>p元素</p>
<p>p元素</p>
</div>
10.DOM包裹wrapInner()方法
如果要将合集中的元素内部所有的子元素用其他元素包裹起来，并当作指定元素的子元素，针对这样的处理，JQuery提供了一个wrapInner方法
<div>p元素</div>
<div>p元素</div>
$('div').wrapInner('<p></p>')
//最后的结果：
<div>
<p>p元素</p>
</div>
<div>
<p>p元素</p>
</div>
11.jQuery遍历之children()方法
jQuery是一个合集对象，如果想快速查找合集里面的第一级子元素，此时可以用children()方法。这里需要注意：.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）
<body>
<h2>children方法()</h2>
<div class="left first-div">
<div class="div">
<ul class="level-1">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-2">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
</div>
<button id="bt1">点击：children无参数</button>
<button id="bt2">点击：children传递表达式</button>
<script type="text/javascript">
$("#bt1").click(function() {
//?
})
</script>
<script type="text/javascript">
$("#bt2").click(function() {
//找到所有class=div的元素
//找到其对应的子元素ul，然后筛选出最后一个，给边宽加上颜色
$('.div').children(':last').css('border', '3px solid blue')
})
</script>
</body>
12.jQuery遍历之find()方法
jQuery是一个合集对象，如果想快速查找DOM树中的这些元素的后代元素，此时可以用find()方法，这也是开发使用频率很高的方法。这里要注意 children与find方法的区别，children是父子关系查找，find是后代关系（包含父子关系）
<body>
<h2>find方法()</h2>
<div class="left first-div">
<div class="div">
<ul class="level-1">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-2">
<li class="item-1">1</li>
<li class="item-2 test">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
</div>
<button>点击：find传递表达式</button>
<br/>
<br/>
<h3>find表达式</h3>
<div style="border:1px solid red;">
<p>
<span>测试1</span>
<a>测试2</a>
</p>
<p>
<span>慕课网1</span>
<a>慕课网2</a>
</p>
<div>
<span>Aaron1</span>
<a>Aaron2</a>
</div>
</div>
<br/>
<br/>
<button>点击：find传递$对象</button>
<script type="text/javascript">
$("button:first").click(function() {
$("p").find($("a")).css('color','blue')
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
//找到所有p元素，然后筛选出子元素是span标签的节点
//改变其字体颜色
var $spans = $('span');
$("p").find($spans).css('color', 'red');
})
</script>
</body>
13.jQuery遍历之parent()方法
jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的父元素（这里可以理解为就是父亲-儿子的关系），此时可以用parent()方法
<body>
<h2>parent方法()</h2>
<div class="left first-div">
<div class="div">
<ul class="level-2">
<!-- A -->
<li class="item-a">A</li>
<!-- B -->
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<!-- C -->
<li class="item-c">C</li>
</ul>
</div>
<div class="div">
<ul class="level-2">
<!-- A -->
<li class="item-a">A</li>
<!-- B -->
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<!-- C -->
<li class="item-c">C</li>
</ul>
</div>
</div>
<button>点击：parent无参数</button>
<button>点击：paren传递选择器</button>
<script type="text/javascript">
$("button:first").click(function() {
//?
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
//找到所有class=item-a的父元素
//然后给每个ul,然后筛选出最后一个，加上蓝色的边
$('.item-a').parent(':last').css('border', '1px solid blue')
})
</script>
</body>
14.jQuery遍历之parents()方法
jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的所有祖辈元素，此时可以用parents()方法
<body>
<h2>parents方法()</h2>
<div class="left first-div">
<div class="div">
<ul class="level-2">
<!-- A -->
<li class="item-a">A</li>
<!-- B -->
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<!-- C -->
<li class="item-c">C</li>
</ul>
</div>
<div class="div">
<ul class="level-2">
<!-- A -->
<li class="item-a">A</li>
<!-- B -->
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<!-- C -->
<li class="item-c">C</li>
</ul>
</div>
</div>
<button>点击：parents无参数</button>
<button>点击：parents传递选择器</button>
<script type="text/javascript">
$("button:first").click(function() {
//?
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
//找到当前元素的所有祖辈元素,筛选出class="first-div"的元素
//并且附上一个边
$('.item-b').parents('.first-div').css('border', '2px solid blue')
})
</script>
</body>
15.jQuery遍历之closest()方法
以选定的元素为中心，往内查找可以通过find、children方法。如果往上查找，也就是查找当前元素的父辈祖辈元素，jQuery提供了closest()方法，这个方法类似parents但是又有一些细微的区别，属于使用频率很高的方法
<body>
<h2>closest方法()</h2>
<div class="left first-div">
<div class="div">
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</div>
</div>
<br/>
<button>点击：closest传递选择器 </button>
<button>点击：closest传递一个元素对象</button>
<script type="text/javascript">
$("button:first").click(function() {
//?
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
var itemB = $('.item-b')
$('li.item-1')
.closest(itemB)
.css('border', '1px solid blue');
})
</script>
</body>
16.jQuery遍历之next()方法
jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合，此时可以用next()方法
<body>
<h2>next方法()</h2>
<div class="left first-div">
<div class="div">
<ul class="level-1">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-2">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
</div>
<button>点击：next无参数</button>
<button>点击：next传递表达式</button>
<script type="text/javascript">
$("button:first").click(function() {
//?
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
//找到所有class=item-3的li
//然后筛选出第一个li，加上蓝色的边
$('.item-2').next(':first').css('border', '1px solid blue')
})
</script>
</body>
17.jQuery遍历之prev()方法
jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合，此时可以用prev()方法
<body>
<h2>prev方法()</h2>
<div class="left first-div">
<div class="div">
<ul class="level-1">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-2">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
</div>
<button>点击：prev无参数</button>
<button>点击：prev传递选择器</button>
<script type="text/javascript">
$("button:first").click(function() {
//?
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
//找到所有class=item-2的li
//然后筛选出最后一个，加上蓝色的边
$('.item-3').prev(':last').css('border', '1px solid blue')
})
</script>
</body>
18.jQuery遍历之siblings()方法
jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素的同辈元素，此时可以用siblings()方法
<body>
<h2>siblings方法()</h2>
<div class="left first-div">
<div class="div">
<ul class="level-1">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-2">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
<div class="div">
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</div>
</div>
<button>点击：siblingsv无参数</button>
<button>点击：siblings传递选择器</button>
<script type="text/javascript">
$("button:first").click(function() {
//?
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
//找到class=item-2的所有兄弟节点
//然后筛选出最后一个，加上蓝色的边
$('.item-2').siblings(':last').css('border', '2px solid blue')
})
</script>
</body>
19.jQuery遍历之add()方法
jQuery是一个合集对象，通过()方法找到指定的元素合集后可以进行一系列的操作。()方法找到指定的元素合集后可以进行一系列的操作。()方法找到指定的元素合集后可以进行一系列的操作。()之后就意味着这个合集对象已经是确定的，如果后期需要再往这个合集中添加一新的元素要如何处理？jQuery为此提供add方法，用来创建一个新的jQuery对象 ，元素添加到匹配的元素集合中
<body>
<h2>add方法()</h2>
<div class="left first-div">
<div class="div">
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
<p>新的p元素</p>
</div>
</div>
<div class="right" style=" border:2px solid red"></div>
<br/>
<button>点击：add传递元素标签</button>
<button>点击：add传递html结构</button>
<script type="text/javascript">
$("button:first").click(function() {
//把p元素添加到li的合集中
$('li').add('p').css('background', 'red')
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
//把html结构'<p>新的p元素</p>'
//加入到li的合集中，为了能够在页面上显示
//需要再重新appendTo到指定的节点处
//值得注意：整个结构位置都改变了
$('li').add('<p>新的p元素</p>').appendTo($('.right'))
})
</script>
</body>
20.jQuery遍历之each()方法
jQuery是一个合集对象，通过()方法找到指定的元素合<
4000
mi mathvariant="normal">集后可以进行一系列的操作。比如我们操作()方法找到指定的元素合集后可以进行一系列的操作。比如我们操作()方法找到指定的元素合集后可以进行一系列的操作。比如我们操作(“li”).css(’’) 给所有的li设置style值，因为jQuery是一个合集对象，所以css方法内部就必须封装一个遍历的方法，被称为隐式迭代的过程。要一个一个给合集中每一个li设置颜色，这里方法就是each
.each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数
<body>
<h2>each方法</h2>
<div class="left first-div">
<div class="div">
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
</div>
<div class="div">
<ul>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</div>
<br/>
<button>点击：each方法遍历元素</button>
<button>点击：each方法回调判断</button>
<script type="text/javascript">
$("button:first").click(function() {
//遍历所有的li
//修改每个li内的字体颜色
$("li").each(function(index, element) {
$(this).css('color','red')
})
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
//遍历所有的li
//修改偶数li内的字体颜色
$("li").each(function(index, element) {
if (index % 2) {
$(this).css('color','blue')
}
})
})
</script>
</body>
jQuery事件
1.jQuery鼠标事件之click与dbclick事件
用交互操作中，最简单直接的操作就是点击操作。jQuery提供了两个方法一个是click方法用于监听用户单击操作，另一个方法是dbclick方法用于监听用户双击操作。这两个方法的用法是类似的，下面以click()事件为例
<div id="test">点击触发<div>
$("ele").click(function(){
alert('触发指定事件')
})
$("#test").click(function(){
$("ele").click() //手动指定触发事件
});
2.jQuery鼠标事件之mousedown与mouseup事件
用户交互操作中，最简单直接的操作就是点击操作，因此jQuery提供了一个mousedown的快捷方法可以监听用户鼠标按下的操作，与其对应的还有一个方法mouseup快捷方法可以监听用户鼠标弹起的操作。两种方法用法类似，下面以mousedown()为例
3.jQuery鼠标事件之mousemove事件
用交互操作中，经常需要知道用户是否有移动的操作。基于移动的机制可以做出拖动、拖拽一系列的效果出来。针对移动事件，jQuery提供了一个mousemove的快捷方法可以监听用户移动的的操作
4.jQuery鼠标事件之mouseover事件与mouseout事件
在学JS的时候，大家还记得有两个方法叫移入移出事件吗？onmouseover()与onmouseout()事件~
jQuery当中同样提供了这样的事件来监听用户的移入移出操作，mouseover()与mouseout()事件
5.jQuery鼠标事件之hover事件
只需要在hover方法中传递2个回调函数就可以了，不需要显示的绑定2个事件
$(selector).hover(handlerIn, handlerOut)
handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数
$(selector).hover(handlerIn, handlerOut)
$(“#first”).hover(function(){},function(){})
6.jQuery鼠标事件之focusin事件
当一个元素，或者其内部任何一个元素获得焦点的时候，例如：input元素，用户在点击聚焦的时候，如果开发者需要捕获这个动作的时候，jQuery提供了一个focusin事件
<div id="test">点击触发<div>
$("ele").focusin(function(){
alert('触发指定事件')
})
$("#test").mouseup(function(){
$("ele").focusin() //指定触发事件
});
7.jQuery鼠标事件之focusout事件
当一个元素，或者其内部任何一个元素失去焦点的时候，比如input元素，用户在点击失去焦的时候，如果开发者需要捕获这个动作，jQuery提供了一个focusout事件
<div id="test">点击触发<div>
$("ele").focusout(function(){
alert('触发指定事件')
})
$("#test").mouseup(function(){
$("ele").focusout() //指定触发事件
});
8.jQuery鼠标事件之change事件
元素，和元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作
input元素：
监听value值的变化，当有改变时，失去焦点后触发change事件。对于单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。
select元素：
对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发
textarea元素：
多行文本输入框，当有改变时，失去焦点后触发change事件
9.jQuery鼠标事件之select事件
当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
select事件只能用于元素与元素
10.jQuery表单事件之submit事件
提交表单是一个最常见的业务需求，比如用户注册，一些信息的输入都是需要表单的提交。同样的有时候开发者需要在表单提交的时候过滤一些的数据、做一些必要的操作（例如：验证表单输入的正确性，如果错误就阻止提交，从新输入）此时可以通过submit事件，监听下提交表单的这个动作
使用上非常简单，与基本事件参数处理保持一致
<div id="test">点击触发<div>
$("ele").submit(function(){
alert('触发指定事件')
})
$("#text").click(function(){
$("ele").submit() //指定触发事件
});
11.jQuery表单事件之keydown()事件和keyup()事件
鼠标有mousedown,mouseup之类的事件，这是根据人的手势动作分解的2个触发行为。相对应的键盘也有这类事件，将用户行为分解成2个动作，键盘按下与松手，针对这样的2种动作，jQuery分别提供了对应keydown与keyup方法来监听
keydown事件：
当用户在一个元素上第一次按下键盘上字母键的时候，就会触发它。使用上非常简单，与基本事件参数处理保持一致，这里使用不在重复了，列出使用的方法
//直接绑定事件 $elem.keydown( handler(eventObject) ) //传递参数 $elem.keydown( [eventData ], handler(eventObject) ) //手动触发已绑定的事件 $elem.keydown()
keyup事件：
当用户在一个元素上第一次松手键盘上的键的时候，就会触发它。使用方法与keydown是一致的只是触发的条件是方法的
通过映射的方式绑定多个事件
$("first").bind({focus:function(){}
,change:function(){}
})
toggle()方法
在toggle()方法中，可以依次调用N个指定的函数，直到最后一个函数，然后重复对这些函数轮番调用
toggle(方法的功能是每次单击后依次调用函数。
$(function(){
$("#txt").toggle(function(){
$(".second").html("第一次")
},function(){
$(".second").html("第二次")
},function(){
$(".second").html("第三次")
}
)
})
12.on()的多事件绑定
之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。翻开源码其实可以看到，所有的快捷事件在底层的处理都是通过一个"on"方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法。
$("#elem").click(function(){}) //快捷方式
$("#elem").on('click',function(){}) //on方式
多个事件绑定同一个函数
$("#elem").on("mouseover mouseout",function(){ });
多个事件绑定不同函数
$("#elem").on({
mouseover:function(){},
mouseout:function(){}
});
<body>
<h2>on绑定多事件</h2>
<h4>测试一</h4>
<div class="left">
点击触发：on('click',fn)
<div id="test1"></div>
</div>
<script type="text/javascript">
//事件绑定一
$("#test1").？('click', function(e) {
$(this).text('触发事件：' + e.type)
})
</script>
<h4>测试二</h4>
<div class="left">
点击触发：on('mousedown mouseup')
<div id="test2"></div>
</div>
<script type="text/javascript">
//多事件绑定一
$("#test2").on('mousedown mouseup', function(e) {
$(this).text('触发事件：' + e.type)
})
</script>
<h4>测试三</h4>
<div class="right">
点击触发：on(mousedown:fn1,mouseup:fn2)
<div id="test3"></div>
</div>
<script type="text/javascript">
//多事件绑定二
$("#test3").on({
mousedown: function(e) {
$(this).text('触发事件：' + e.type)
},
mouseup: function(e) {
$(this).text('触发事件：' + e.type)
}
})
</script>
</body>
13.on()的高级用法
针对自己处理机制中，不仅有on方法，还有根据on演变出来的live方法(1.7后去掉了)，delegate方法等等。这些方法的底层实现部分 还是on方法，这是利用了on的另一个事件机制委托的机制衍变而来的
委托机制
.on( events ,[ selector ] ,[ data ], handler(eventObject) )
<div class="left"> <p class="aaron"> <a>目标节点</a> //点击在这个元素上 </p> </div>
给出如下代码：
$("div").on("click","p",fn)
事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数
14.off()的方法
通过.on()绑定的事件处理程序
通过off() 方法移除该绑定
根据on绑定事件的一些特性，off方法也可以通过相应的传递组合的事件名，名字空间，选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除
绑定2个事件
$("elem").on("mousedown mouseup",fn)
删除一个事件
$("elem").off("mousedown")
删除所有事件
$("elem").off("mousedown mouseup")
快捷方式删除所有事件，这里不需要传递事件名了，节点上绑定的所有事件讲全部销毁
$("elem").off()
删除捆绑的事件
<!DOCTYPE html>
<html>
<head>
<title>删除事件</title>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript">
/**********unbind()**************/
/*$(function(){
$("input").bind("click",function(){
$(this).unbind();
alert("取消事件成功");
})
})*/
/****************删除指定的事件**************/
$(function(){
function things()
{
alert("点击第二个事件")
}
$("input:eq(1)").bind("click",things);
$("input:eq(0)").bind("click",function(){
alert("不删自己");
$("input:eq(1)").unbind("click",things);
})
})
</script>
</head>
<body>
<div>
<input type="button" value="保留事件"/>
<input type="button" value="删除该事件"/>
</div>
</body>
</html>
只触发一次事件
$("#first").one("click",function(){})
JQuery动画事件
1.jQuery中下拉动画slideDown
对于隐藏的元素，在将其显示出来的过程中，可以对其进行一些变化的动画效果。之前学过了show方法，show方法在显示的过程中也可以有动画，但是.show()方法将会匹配元素的宽度，高度，以及不透明度，同时进行动画操作。。
.slideDown( [duration ] [, complete ] )
$("ele").slideDown(1000, function() {
//等待动画执行1秒后,执行别的动作....
});//其后面的时间单位是ms
2.jQuery中下拉动画slideUp
对于显示的元素，在将其隐藏的过程中，可以对其进行一些变化的动画效果。之前学过了hide方法，hide方法在显示的过
4000
程中也可以有动画，但 是.hide()方法将为匹配元素的宽度，高度，以及不透明度，同时进行动画操作。这里将要学习一个新的显示方法slideUp方法
.slideUp( [duration ] [, easing ] [, complete ] )
3.jQuery中下拉动画slideToggle
slideDown与slideUp是一对相反的方法。需要对元素进行上下拉卷效果的切换，jQuery提供了一个便捷方法slideToggle用滑动动画显示或隐藏一个匹配元素
.slideToggle( [duration ] ,[ complete ] )
同时也提供了时间的快速定义，字符串 ‘fast’ 和 ‘slow’ 分别代表200和600毫秒的延时
slideToggle("fast")
slideToggle("slow")
4.jQuery中淡出动画fadeOut
让元素在页面不可见，常用的办法就是通过设置样式的display:none。除此之外还可以一些类似的办法可以达到这个目的。这里要提一个透明度的方法，设置元素透明度为0，可以让元素不可见，透明度的参数是0~1之间的值，通过改变这个值可以让元素有一个透明度的效果。常见的淡入淡出动画正是这样的原理。
.fadeOut( [duration ], [ complete ] )
5.jQuery中淡出动画fadeIn
fadeOut是淡出效果，相反的还有淡入效果fadeIn,方法使用上两者都是一致的，只是结果相反
.fadeIn( [duration ], [ complete ] )
6.jQuery中淡出动画fadeToggle
fadeToggle()函数用于切换所有匹配的元素，并带有淡入/淡出的过渡动画效果。之前也学过toggle、slideToggle 也是类似的处理方式
7.jQuery中动画animate(上)
有些复杂的动画通过之前学到的几个动画函数是不能够实现，这时候就需要强大的animate方法了
$(elem).fadeOut(3000)
$(elem).animate({
opacity:0
},3000)
.animate({
left: 50,
width: '50px'
opacity: 'show',
fontSize: "10em",
}, 500,function(){回调函数});//这是一个执行时间500ms
如果要在原有的基础上往左移动25px,可以写成left:"-=25px",往右移25px可以写成left:"+=25px"
8.jQuery中动画animate(下)
animate在执行动画中，如果需要观察动画的一些执行情况，或者在动画进行中的某一时刻进行一些其他处理，我们可以通过animate提供的第二种设置语法，传递一个对象参数，可以拿到动画执行状态一些通知
.animate( properties, options )
options参数
duration - 设置动画执行的时间
easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数
step：规定每个动画的每一步完成之后要执行的函数
progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念
complete：动画完成回调
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
p {
color: red;
}
div {
width: 200px;
height: 100px;
background-color: yellow;
color: red;
}
a{
display: block
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>animate(下)</h2>
<p>慕课网,专注分享</p>
<div id="aaron">内部动画</div>
点击观察动画效果：
<select id="animation">
<option value="1">动画step动画</option>
<option value="2">动画progress回调</option>
</select>
<a></a>
<input id="exec" type="button" value="执行动画">
<script type="text/javascript">
$("#exec").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron");
if (v == "1") {
//观察每一次动画的改变
$aaron.animate({
height: '50'
}, {
duration :2000,
//每一个动画都会调用
step: function(now, fx) {
$aaron.text('高度的改变值:'+now)
}
})
} else if (v == "2") {
//观察每一次进度的变化
$aaron.animate({
height: '50'
}, {
duration :2000,
//每一步动画完成后调用的一个函数，
//无论动画属性有多少，每个动画元素都执行单独的函数
progress: function(now, fx) {
$aaron.text('进度:'+arguments[1])
// var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
// alert(data)
}
})
}
});
</script>
</body>
</html>
队列动画
$(function(){
$("div").click(function(){
$(this)
.animate({height:100},"slow")
.animate({width:100},"slow")
.animate({height:50},"slow")
.animate({width:50},"slow");
})
})
9.jQuery中停止动画stop
动画在执行过程中是允许被暂停的，当一个元素调用.stop()方法，当前正在运行的动画（如果有的话）立即停止
.stop( [clearQueue ], [ jumpToEnd ] ) .stop( [queue ], [ clearQueue ] ,[ jumpToEnd ] )
stop()：只会停止第一个动画，第二个第三个继续
stop(true)：停止第一个、第二个和第三个动画
delay(时间):该方法的功能是设置一个延时值来推迟后续队列中动画的执行，其中参数duration为延时的时间值，单位是毫秒。
$("a:eq(1)").click(function(){
$("img").delay(2000)
.slideToggle(3000);
})
10.jQuery的each方法的应用
jQuery中有个很重要的核心方法each，大部分jQuery方法在内部都会调用each，其主要的原因的就是jQuery的实例是一个元素合集
.each只是处理jQuery对象的方法，jQuery还提供了一个通用的jQuery.each方法，用来处理对象和数组的遍历
jQuery.each(array, callback ) jQuery.each( object, callback )
第一个参数传递的就是一个对象或者数组，第二个是回调函数
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
p {
color: red;
}
div{
width:200px;
height: 100px;
background-color: yellow;
color:red;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>each方法</h2>
<p>慕课网,专注分享</p>
<div id="aaron"></div>
点击观察结果：
<select id="animation">
<option value="1">each数组</option>
<option value="2">each对象</option>
</select>
<input id="exec" type="button" value="执行动画">
<script type="text/javascript">
$("#exec").click(function() {
var v = $("#animation").val();
var $aaron = $("#aaron");
$aaron.empty();
if (v == "1") {
// 遍历数组元素
$.each(['Aaron', '慕课网'], function(i, item) {
$aaron.append("索引=" + i + "; 元素=" + item);
});
} else if (v == "2") {
// 遍历对象属性
$.each({
name: "张三",
age: 18
}, function(property, value) {
$aaron.append("属性名=" + property + "; 属性值=" + value);
});
}
});
</script>
</body>
</html>
- jquery基础使用！
- jQuery基础知识
- HTML5开发之jQuery事件基础用法
- Jquery 基础四（DOM操作）
- 15个基础的jQuery面试问题
- JQuery 常用方法基础教程
- JQuery基础学习（一）
- jquery 一些基础
- H5基础知识第十三课时(JQuery)
- Jquery基础之DOM操作
- jquery学习随笔(基础事件)
- jQuery基础（1）
- JQuery基础理论
- jQuery基础
- jQuery插件开发基础简单介绍
- 20150801 jQuery基础学习笔记（下）
- 关于jQuery基础有感
- Jquery编程基础
- Jquery基础学习笔记(2)-文档处理
- Jquery 基础学习笔记