1. 环境搭建
引入jQuery库：
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
可以在 bootstrapCDN 找到各种开源库的网址。
- 压缩版：项目上线发布使用（体积小，效率快）；
- 开发版：开发过程中使用（便于修改调试）。
2. jQuery 对象
- 通过
$()获取的是jQuery对象，是一个类数组对象。 -
.get(索引值)方法:访问jQuery对象中相关的DOM节点
var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性
3. jQuery 选择器
- id 选择器（比较高效）:
$("#id"); - 类选择器（可以多选，隐式循环处理）:
$(".className"); - 元素选择器（可以多选，隐式循环处理）:
$("element"); - 全选择器:
$("*"); - 层级选择器（兄弟选择器不向前选择）
层级选择器
- 基本筛选选择器
基本筛选选择器
- 内容筛选选择器
内容筛选选择器
- 可见性筛选选择器
可见性筛选选择器
- 属性选择器
属性选择器
- 子元素选择器
子元素选择器
- 表单元素选择器
表单元素选择器
- 表单对象属性选择器
表单对象属性选择器
- 特殊选择器
this
this表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this)代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。
4. jQuery .attr() 和 .removeAttr()
.attr( 属性名 ).attr( 属性名，属性值 )-
.attr( 属性名，函数值 )
eg:
<input type="text" value="hiahia" />
<script type="text/javascript">
$("input").attr('value',function(i, val){
return ' 通过function设置 ' + val //val 是原来的旧 value，新值为“通过 function设置 hiahia ”
})
</script>
.attr({ 属性名一:"属性值一",属性名二:"属性值二",属性名三:"属性值三" });
.removeAttr( 属性名 )
5. jQuery .html()
-
.html()获取匹配集合中第一个元素的 HTML 内容 -
.html( html 内容 )设置每一个匹配元素的 HTML 内容； -
.html( function ( index,oldhtml ))用函数返回值设置 HTML 内容 -
.text()获取匹配集合中每一个元素的合并文本，包括它们的后代 -
.text(text 内容)设置每一个匹配元素内容的文本 -
.text(function(index,oldtext))用函数返回值设置文本内容
eg:
<script type="text/javascript">
//通过 .text() 的回调，获取原本的内容，修改，在重新赋值
$(".left a:first").text(function(index,text){
return ' 增加新的文本内容 ' + text //text 是旧的 text
})
</script>
6. jQuery .val()
-
.val()获取匹配的元素集合中第一个元素的当前值 -
.val(value)设置匹配的元素集合中每一个元素的值 -
.val(function)用函数的返回值设置值
7. jQuery .addClass()
-
.addClass("newClassName")添加而不是替换一个新的类 -
.addClass("newClassName1","newClassName2")添加多个新类 .addClass(function(index,currentClass))
8.jQuery .removeClass()
-
.removeClass(className)删除某个类 -
.removeClass()删除所有样式 -
.removeClass(function(index,class))//class是该元素的全部类名
eg:
<script type="text/javascript">
$('.right > div:first').removeClass(function(index,className){
//className = aa bb imoocClass
//把div的className赋给下一个兄弟元素div上作为它的class
$(this).next().addClass(className);
//删除自己本身的imoocClass
return 'imoocClass';
})
</script>
9. jQuery .toggleClass()
-
.toggleClass(className)在匹配的元素集合中的每一个元素上添加或者删除样式类名（存在则删除，不存在则添加）； -
.toggleClass(className,true/false)如果true，就添加该className，如果是false，就删除该className。
10. jQuery .css()
-
.css( "属性名" )获取匹配元素集合中的第一个元素的该属性的属性值 -
.css([ "属性一 ", "属性二" ])获取匹配元素的多个属性值，返回一个对象结果
eg：
<script type="text/javascript">
//获取尺寸，传入CSS属性组成的一个数组
//{width: "60px", height: "60px"}
var value = $('.first').css(['width','height']);
//因为获取的是一个对象，取到对应的值
$('p:eq(2)').text( 'widht:' + value.width + ' height:' +value.height )
</script>
-
.css ( "属性名", "属性值" )设置 css 属性值 -
.css ( "属性名" , function)
eg:
<script type="text/javascript">
//获取到指定元素的宽度，在回调返回宽度值
//通过处理这个value，重新设置新的宽度
$('.sixth').css("width",function(index,value){//value是原来的css属性值，即此处是width的值
value=value.split('px');//将width的值以px为界分割成一个数组，数组内的元素是字符串
return(Number(value[0])+50)+value[1];//value[0]是原来的width的值，是字符串，所以要转化为number ，value[1]是单位“px”
})
</script>
-
.css ( 对象 )同时设置多个样式
eg:
<script type="text/javascript">
//合并设置,通过对象传设置多个样式
$('.seventh').css({
'font-size':"15px",
"background-color":"#40E",
"border":"1px solid red"
})
</script>
-
.css()方法处理的样式是内联的，直接通过元素的style属性附加到元素上的； - 通过
.css()方法设置的样式属性优先级高于.addClass()方法
11. jQuery 创建、替换、删除节点
$("<div></div>");$("<div> 我是陈大虹 </div>");$("<div id='test' class='dahong'> 我是陈大虹 </div>");-
$(A).append($(B));把B添加为A的最后一个子节点（每一个匹配元素都添加） -
$(B).appendTo($(A));把B添加为A的最后一个子节点（每一个匹配元素都添加） -
$(A).before(B,C)在A前面按照顺序插入节点B,C -
$(A).after(B,C)在A后面按照顺序插入节点B,C -
$(A).prepend(B,C)把B,C插入为A的第一、第二个子节点（多个参数） -
$(B).prependTo(A)把B插入为A的第一个节点（一个参数） -
$(A).insertAfter(B)等于$(B).after(A)等于$(A).before(B) -
$(A).insertBefore(B)等于$(B).before(A)等于$(A).after(B) -
$(A).empty()移除A的子节点（A本身不被移除） -
$(A).remove()移除A及内部所有元素，包括事件 -
$(A).remove(B)删除A中的B（选择性） -
a = $(A).detach(); $(B).append(a)把A移除，让一个变量托管，可以通过.append()方法再次添加 -
$(A).clone()复制一个A（只克隆结构，不克隆事件） -
$(B).append($(A).clone())复制一个A，添加为B的最后一个子节点 -
$(A).clone().css('xx','cc')复制一个A，并设置它的某个css属性值 -
$(A).clone(true)复制一个A，包括结构、事件与数据 -
$(A).replaceWith(B)把A替换成B 等于$(B).replaceAll(A) -
$(A).wrap(B)给A包裹一层B（添加父元素）
$(A).wrap(function() {
return '<div></div>'; //给A包裹一层div（添加父元素）
})
-
$(A).unwrap()删除A的父元素 -
$(A).wrapAll(B)给所有的A包裹一层B
eg:
<p>A</p>
<p>B</p>
......
$('p').wrapAll('<div></div>');
......
result:
<div>
<p>A</p>
<p>B</p>
</div>
<p>A</p>
<p>B</p>
......
$('p').wrapAll(function() {
return '<div></div>';
});
......
<div>
<p>A</p>
</div>
<div>
<p>B</p>
</div>
-
$(A).wrapInner(B)给A的子元素包裹一层B（B是正确的HTML格式） -
$(A).children()A的直接子元素，不包括孙级元素 -
$(A).children(selector)A的直接子元素中满足selector选择器的 -
$(A).find(B)遍历A中满足B选择器的所有后代元素（包括子元素） -
$(A).parent()查找A的直接父元素 -
$(A).parent(selector)查找A中的满足selector的父元素 -
$(A).parents()查找A的所有祖辈元素（包括父元素） -
$(A).parents(selector)查找A中满足selector的所有祖辈元素 -
$(A).closest(selector)查找A的上级元素中满足selector的，查找到一个就停止 -
$(A).next(selector)查找A的紧邻的下一个满足selector的兄弟节点 -
$(A).prev(selector)查找A的紧邻的上一个满足selector的兄弟节点 -
$(A).siblings(selector)查找A的所有满足selector的兄弟节点 -
$(A).add(selector/DOM元素/HTML格式标签)在A合集中添加元素一起进行操作 -
$(A).each()for循环迭代器
$(A).each(function(index,element) {
$(this).css('color','red');
//index 是当前循环元素的索引
//element是对应的循环元素
//this指向当前对应的循环元素
})
12. jQuery 事件
12.1 click() 和 dbclick()
-
ele.click( function () { } )元素ele被点击时，调用函数，函数中的this指向绑定事件的元素
eg:
$("button").click(function(e) { alert(this); });
this指向绑定事件的元素
-
ele.click()手动触发点击事件 ele.click( data, function() { } )
$("#test").click(123, function(e) {
//e.data=>123;
}
-
dbclick()双击事件
12.2 鼠标事件
- 用法同
click()事件 -
mouseup()是鼠标松开时触发 -
mousedown()是鼠标按下时触发 -
mousemove()鼠标移动时触发 -
mouseover()鼠标移入时触发（当元素和它的父元素都有绑定mouseover()事件时，元素触发mouseover()事件，会向上冒泡触发父元素的mouseover()事件） -
mouseout()鼠标移出时触发（也会冒泡） -
mouseenter()鼠标移入时触发（不会冒泡） -
mouseleave()鼠标移出时触发（不会冒泡） -
hover(hoverIn,hoverOut);hoverIn是鼠标移入时执行的事件函数，hoverOut是鼠标移出时执行的事件函数 -
focusin()元素获得鼠标焦点时触发（有冒泡） -
focusout()元素失去鼠标焦点时触发（有冒泡） -
focus()元素获得鼠标焦点时触发（无冒泡） -
blur()元素失去鼠标焦点时触发（无冒泡） - 点击鼠标事件，
event.which属性的值：鼠标左键为1，鼠标中键为2，鼠标右键为3；
12.3 表单事件
-
change();<input> <textarea> <select>的元素值改变后失去焦点时触发 -
select();<input> <textarea>元素值被选中时触发 -
submit()提交表单时触发
12.4 键盘事件
-
keydown()键按下时触发 -
keyup()键松开时触发 keypress()
12.5 事件绑定 on
- 绑定一个事件
$(selector).on('click',function() { });
- 多个事件绑定同一个函数（用空格分隔多个事件）
$(selector).on('mouseover mouseout',function() { });
- 多个事件绑定不同函数
$(selector).on({
mouseover:function() { },
mouseout:function() { }
})
- 传递数据
function greet(event) {
alert(event.data.name);
}
$(selector).on("click",{
name:"chendahong"
},greet);
-
on()事件委托
$(selector1).on("click","selector2",fn)向上冒泡到第二参数选择器指定的元素时触发函数fn
12.6 事件卸载off
-
$(selector).off("mouseover");卸载事件mouseover -
$(selector).off()卸载全部事件
12.7 事件对象
$(selector).on("click",function(event) {
//event 是事件对象
//event.target 是当前触发事件的元素
}
-
event.type获取事件的类型 -
event.pageX和event.pageY获取鼠标当前相对于页面的坐标 -
event.preventDefault()阻止默认行为 -
event.stopPropagation() 方法阻止事件冒泡 -
event.which获取在鼠标单击时，单击的是鼠标的哪个键 -
event.currentTarget在事件冒泡过程中的当前DOM元素 -
this和event.target的区别:js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素
13. jQuery 动画
13.1 元素隐藏显示（display:none 和 display:block）
-
$(selector).hide()直接隐藏 -
$(selector).hide("fast/slow/数值")fast:200ms,slow:600ms
$(selector).hide({
duration:3000, //3000ms
complete:function() { } //动画完成时执行的函数
})
- ``$(selector).show(数值)`` 数值：动画执行时间（毫秒）
- ``$(selector).toggle(数值)`` 元素原来隐藏，则显示；元素原来显示，则隐藏
- ```
$(selector).toggle({
duration:3000, //3000ms
complete:function() { } //动画完成时执行的函数
})
-
$(selector).slidedown(duration,fn)（下拉改变高度）duration:执行时间；fn动画执行完毕的回调函数 -
$(selector).slideup(duration,fn)（上卷改变高度动画） -
$(selector).slideToggle()上卷下拉切换显示或隐藏 -
$(selector).fadeOut(参数)淡出（透明度在0-1间切换） -
$(selector).fadeInt(参数)淡入（透明度在0-1间切换） -
$(selector).fadeToggle(参数)淡出淡入切换显示或隐藏（透明度在0-1间切换） -
$(selector).fadeTo(duration,opacity,fn)duration:动画执行时间；opacity:指定达到的透明度；fn:动画执行完毕的回调函数 $(selector).animate()
$(selector).animate({
properties1://要改变的属性值一
properties2://要改变的属性值二
},[duration],[fn]); //duration:动画执行时间，fn:动画执行完毕的回调函数
-
$(selector).stop()停止第一个动画 -
$(selector).stop(true)停止所有动画 -
$(selector).stop(true,true)停止所有动画，跳到第一个动画的完成状态
14. jQuery的一些方法
-
$.each(array/object,fn);fn第一个参数是数组的索引或者对象的属性名，第二个参数是数组索引对应的元素值或者对象属性名对应的属性值 -
$.inArray(value,array,start);value:要查找的值，array:查找的数组，start:查到的起始位置。如果要查找的值不在查找的数组中，返回“-1”，查找到一个即停止 -
$.trim(string);对字符串去除空格 -
$(selector).get(index);获取jQuery对象合集中的某个元素，index是正值时从左往右计，起始值是 0，index是负值时从右往左计，起始值是 -1 -
$(selector).index();index中无参数，则返回选择器选中的jQuery合集中的第一个相对于他的兄弟元素的位置 -
$(selector).index(dom元素/jq对象);返回改DOM元素或jq对象相对于selector选择器选中的jQuery对象合集中的位置
