目录
jQuery概念：
JQuery: JavaScript Query; 这是js的一个函数库。(完全由js封装写成的一个js文件)
优点: 简单易用，链式编程隐式迭代。
缺点: 方法冗余。
链式编程：实际就是执行完某一个函数后，返回它本身，然后继续调用
隐式迭代：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用
入口函数：
原生js：
window.onload = function(){
}jQuery中：
1.
$(function(){
alert('有了这个方法，就可以获取下面的标签了，写法dollar符+括号+在括号中写function')
})2.
$(document).ready(function(){
})3.
$(window).ready(function(){
})JQuery对象就是通过$()获取到页面标签。
$()获取的对象，里面有JQuery自己封装好的方法，原生js没有。
JQuery想要操作标签，底层还是要调用原生js自己的方法。
jQuery选择器：
1.普通获取方法：
标签：标签直接写$('标签名')
id:id值前面加#，$('#id值')
类：类前加点,$('.类名')
层级：空格，$('#box1 li p')
2.比较特殊的选择器
name:如果一个li标签的name属性=demo，$('li[name=demo]')
has:如果一个li标签中有一个p标签，$(li).has('p')
eq:通过索引获取，$('li').eq(标签对应的索引值，从0开始)
($('#li3').prev());//选择id是li3的元素 前面 紧挨的同辈元素
($('#li3').prevAll());
($('#li3').next());//选择id是li3的元素 后面 紧挨的同辈元素
($('#li3').nextAll());
($('#li3').siblings());//选择id是li3的元素的同级元素（兄弟们，不包括自己）
($('#li3').parent());//选择id是li3的元素的父元素
($('#li3').children());
($('#ul1').find('.li4'));//选择id是ul1的元素内的class等于.li4的元素（后代标签，子子孙孙）
($('#li3').index());// 元素在父盒子中，所有子元素排列对应的索引值
样式操作：
①style-->css()
一个参数: 获取属性
$('div').css('width')
两个参数：设置属性
$('div').css('width', '350px')
通过一个字典形式的参数：进行设置
var set = {'width':666, 'height':600, 'background':'gold'}
$('div').css(set)
②通过操作class类名，来达到操作样式的目的，如下：
<div class="box div bbb"></div>$('div').addClass('aaa') // 添加类(类及类的样式，这里的aaa可以在style中通过类名，设置属性)
$('div').removeClass('box') // 删除类
$('div').toggleClass('lili') // 事件触发，无变有有变无（循环变化）
可以联系选项卡案例，点击谁就给谁添加xx类，siblings其它去掉xx类。
属性操作：
1.普通属性：attr(); id/title/src/href/name...
将input的name属性设置为‘setset’
$('input').attr('name', 'setset')
2.表单属性：prop(); selcted/checked/disabled
$('option').eq(1).prop('selected', true) //将索引为1的option设置为选中，false为不选中
3.特殊属性innerHTML/className/style/value...
| 原生js | jQuery语法 |
| innerHTML | html() |
| className | addClass() removeClass() toggleClass() |
| style | css() |
| value | val() |
animate参数：
参数一：要改变的样式属性值，写成字典的形式
参数二：动画持续的时间，单位为毫秒，一般不写单位
参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动
参数四：动画回调函数，动画完成后执行的匿名函数
$('.class1').animate(obj, 2000, 'swing', function(){
// 回掉函数才是真正的执行完毕自定义函数后，在执行的逻辑。
alert('程序执行完毕才执行的我')
})特殊动画：
1.show()/hide()/toggle()显示隐藏，参数为（毫秒值，回调函数）
$('div').hide(1000,)
$('div').show(1000,function(){
alert('show ok')
})
切换
$('div').toggle(1000,)
2.滑入滑出
$('div').slideUp(1000)
$('div').slideDown(1000)
$('div').slideToggle(1000)
3.淡入淡出
$('div').fadeOut(1000)
$('div').fadeIn(1000)
$('div').fadeToggle(1000)
半透明程度：必须传递时间
// $('div').fadeTo(2000,0.3)
事件：
click() 鼠标单击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
submit() 用户递交表单
*取消浏览器默认行为：
return false;
event.preventDefault()
表单校验中的控制器思想：设置几个全局变量，默认是false，如果通过正则改为true，在校验时设置一个变量：为几个控制器的与条件，判断是否提交
var bool1 = false;
var bool2 = false;
var bool3 = false;
var bool4 = false;
var bool5 = false;
var flag = bool1 && bool2 && bool5;
if (flag == false){
// 没有通过，取消提交
// return false;
event.preventDefault();
}
事件冒泡：
事件是可以传播的，子元素的事件被触发，父系元素的同类事件也会被触发。
阻止冒泡：return false;或event.stopPropagation();
事件委托：
事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。
如：让ul中新创建出来的li全都具有click属性
方法一：delegate
$('ul').delegate('li', 'click', function(){
alert(555)
})方法二：on
$('ul').on('click', 'li',function(){
alert(666)
})jQuery中的DOM操作：
1.创建
方法一：
var $newLi = $('<li>')
$newLi.html('i am new li')
console.log($newLi)方法二：
// 使用多属性和标签嵌套
var $newLi = $('<li class="aaa bbb" name="ccc" title="ddd">i am new li...</li>')2.添加
$('ul').append($newLi)或：
$newLi.appendTo($("ul"))
子元素添加：向父标签最前面添加元素，prepend() / prependTo(
$('ul').prepend($newLi)
兄弟元素添加：before()/insertBefore()：互换位置,添加到之前
$('#box').before($newLi)
兄弟元素添加，after() /insertAfter():添加到兄弟元素之后
$('#box').after($newLi)
删除：remove()
$('#box').remove()
拓展：clone()，举例：
<body>
<p>This is a paragraph.</p>
</body>
// 复制每个 p 元素，然后追加到 body 元素
$("body").append($("p").clone());
replaceWith()
用指定的 HTML 内容或元素替换被选元素。