一、JQuery是JS的一个框架，简化了开发。
如何使用JQuery：
- 1、导入js文件
- JQuery有三个大的版本、1.xxx、2.xxx、3.xxx
- 普通项目一般使用1.xxx( 最终版本：1.12.4 )版本，兼容性最好。
- 2、使用script标签导入js文件
- 3、获取JQuery对象：语法格式
var JQuery对象 = $("选择器");
二、JQuery对象与JS对象的互相转化
JQuery-- > JS: JQuery对象[索引] 或者 JQuery对象.get(索引)
JS -- > JQuery: $(js对象)
三、JQuery选择器和样式控制
JQuery选择器、和CSS的选择器的语法相似。但是目的不同，CSS是为了改变样式、JQuery是一个JS的框架，用于进行一些操作。
基本选择器：
- 1、标签选择器：$("div")、选中所有的div标签。
- 2、id选择器：$("#idName")、选中id为idName的标签。
- 3、类选择器：$(".className")、选中所有class为className的标签。
- 4、并集选择器：$("选择器1，选择器2，....")、选中满足选择器的所有并集。
#####层级选择器：
- 1、后代选择器：$("A B")，选中A的所有后代B，注意子孙也会被选中。
- 2、子选择器：$("A > B"),选中A的子元素的B，仅仅是父子关系，爷孙关系不会被选中的。
属性选择器：
- 1、 属性名称选择器：$("A[属性名B]")，选中所有包含属性名B的A标签。
- 2、属性选择器：$("A[ 属性名B='C' ]")，选中所有包含属性名B且属性值为C的A标签。
- 3、属性选择器：$("A[ 属性名B='C' ][...],..."),选中包含多个属性条件的选择器。
属性选择的模糊查询：
- 1、属性值以xxx开头：$("A[ 属性名B ^= 'xxx' ]")
- 2、属性值以xxx结尾：$("A[ 属性名B $= 'xxx' ]")
- 3、属性值包含xxx： $("A[ 属性名B *= 'xxx' ]")
过滤选择器：
- 1、首元素选择器：$("选择器1:first")，选中选择器1选中的第一个标签。
- 2、尾元素选择器：$("选择器1:last")，选中选择器1选中的最后一个标签。
- 3、非元素选择器：$("选择器1:not(selector)")，选中选择器1选中的，其中除了selector选中的元素之外的所有元素。
- 4、奇数选择器：$("选择器1:odd")，选中选择器1选中的元素中，序号是奇数的元素。
- 5、偶数选择器：$("选择器1:even")，选中选择器1选中的元素中，序号是偶数的元素。
- 6、等于索引选择器：$("选择器1:eq(index)")，选中选择器1选中的元素中，序号是index的元素。
- 7、大于索引选择器：$("选择器1:gt(index)")，选中选择器1选中的元素中，序号大于index的元素。
- 8、小于索引选择器：$("选择器1:gt(index)")，选中选择器1选中的元素中，序号大于index的元素。
- 9、标签选择器：$(":header"),获取所有h1~h6标签,固定的写法！
表单过滤选择器：
- 1.获取选中的元素
- 复选框：$(":checked")
- 下拉列表：$(":selected")
- 2.获取可用或不可用元素的选择器
- 可用：$(":enabled")
- 不可用：$(":disabled")
入口函数：相当于JS中的window.onload = function() {};
$(function () {
})
绑定事件：例如click事件。
$("#b1").click(function () {
});
修改css样式：
$("#one").css("backgroundColor","red");
四、使用JQuery控制dom对象。
1、内容控制：
- 1.val()方法，获取或者修改dom的value属性值。相当于value属性。
- 2.html()方法，获取或者修改dom的标签体内容。相当于innerHTML属性。
- 3.text()方法，获取或者修改dom的纯文本内容。相当于 innerText属性。
2、通用属性控制：
- 1.attr()方法，获取/设置元素的属性
- 2.removeAttr()方法，删除属性
- 3.prop()方法，获取/设置元素的属性
- 4.removeProp()方法，删除属性
- 操控标签原有的属性使用prop方法。
- 操控标签自定义的属性使用attr方法。
3、Class属性控制：
1. addClass():添加class属性值
2. removeClass():删除class属性值
3. toggleClass():切换class属性,若存在该class，则删除，若不存在该class，添加。
4. css()：修改css的代码。
4、CRUD操作:
插入到内部
- 1.append()方法，
//对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
- 2.appendTo()方法，
//对象1.appendTo(对象2): 将对象1添加到对象2元素内部，并且在末尾
- 3.prepend()方法，
//对象1.prepend(对象2):将对象2添加到对象1内部，并且在开头
- 4.prependTo()方法，
//对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头
插入到同级
- 1.after()方法，
//对象1.after(对象2)： 在对象1后面添加对象2。对象1和对象2是兄弟关系
- 2.before()方法，
//对象1.after(对象2)： 在对象1前面添加对象2。对象1和对象2是兄弟关系
- 3.insertAfter()方法，
//对象1.insertAfter(对象2)： 把对象1添加到对象2的后面。对象1和对象2是兄弟关系
- 4.insertBefore()方法，
//对象1.insertBefore(对象2)： 把对象1添加到对象2的前面。对象1和对象2是兄弟关系
删除方法
- 1.remove()方法，删除对象。
//对象.remove():将对象删除掉
- 2.empty()方法，清空元素的所有后代元素。
//对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点
五、JQuery动画效果
显示隐藏
- 1.显示： show([speed],[easing],[fn]])方法
- 2.隐藏： hide([speed],[easing],[fn]])方法
- 3.切换显隐： toggle([speed],[easing],[fn]])方法
- 1.向下滑动显示：slideDown([speed],[easing],[fn])方法
- 2.向上滑动隐藏：slideUp([speed],[easing],[fn])方法
- 3.滑动切换显隐：slideToggle([speed],[easing],[fn])方法
- 1.淡入显示：fadeIn([speed],[easing],[fn])方法
- 2.淡出隐藏：fadeOut([speed],[easing],[fn])方法
- 3.淡入淡出切换显隐：fadeToggle([speed],[easing],[fn])方法
参数说明：
- [speed]参数：slow——慢，normal——普通，fast——快，自定义毫秒数。
- [easing]设置动画快慢：默认是swing（慢—快—慢），linear是匀速。
- [fn]设置动画执行时的回调函数。
六、JQuery遍历
- 1.使用for循环，将JQuery对象转换成JS对象遍历。
var citys = $("#city li");
for(var i = 0;i<citys.length;i++){
alert(citys[i].innerHTML);
}
- 2.使用each(function(index,element){}))方法。
//语法格式： jquery对象.each(function(index,element){});
//参数： index:就是元素在集合中的索引
//参数： element：就是集合中的每一个元素对象,是JS对象。
//方法返回值：返回true,相当于continue；返回false,相当于break；
citys.each(function (index,element) {
//需求：遇到上海就结束循环或者跳过本次。
if ($(element).text()=='上海'){
// return true; //返回true,相当于continue；
return false; //返回false,相当于break；
}
});
七、JQuery事件的绑定与解绑
事件的绑定：
- 1.jq对象.事件方法(回调函数)；
- 注意：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。例如：.jq对象.submit()方法不写回调函数，会直接提交表单。
- on("事件名称",回调函数)方法绑定事件。
事件的解绑：
- off("事件名称")方法解绑事件。
事件的切换：
- toggle(fn1,fn2...)方法实现方法间的切换，fn1—>fn2—>...—>fn1—>fn2—>...
- 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。
八、JQuery插件（增强JQuery）
1、$.fn.extend(object)
- 增强通过Jquery获取的对象的功能 $("#id")
$.fn.extend({
checked:function () {
$(this).prop("checked",true);
},unchecked:function () {
$(this).prop("checked",false);
}
});
$(function () {
$("#btn-check").click(function () {
$("input[type='checkbox']").checked();
});
$("#btn-uncheck").click(function () {
$("input[type='checkbox']").unchecked();
})
})
2.、$.extend(object)
- 增强JQeury对象自身的功能 $/jQuery
//对全局方法扩展2个方法，
//扩展min方法：求2个值的最小值；
//扩展max方法：求2个值最大值。
$.extend({
max:function (a,b) {
return a >= b? a : b;
},min:function (a,b) {
return a <= b? a : b;
}
});
alert("max(12,10)="+$.max(12,10));
alert("min(12,10)="+$.min(12,10));
