jQuery 简介
- 在项目中引入jQuery：
- 去jQuery官网下载jQuery包：jquery-3.2.1.min.js
- 将下载的jQuery包添加到项目目录中
- 在标签下添加jQuery引用：
<script src='jquery-3.2.1.min.js'></script>
- jQuery和$没有区别，具体体现在：
-
console.log($===jQuery)返回true -
$('div')和jQuery('div')效果相同
-
- jQuery文件的差异：
- jquery-xx.js：代码格式清晰，可读性高，参数命名规范，建议在开发时使用
- jquery-xx.min.js：代码格式混乱，可读性差，参数命名不规范，但占空间小，建议发布上线时使用
- jQuery的特性：
- 链式编程：jQuery中的不同方法可以在一条语句中相继进行
- jQuery中的所有设置方法，最后都会
return this; - jQuery中的所有获取方法，最后都会
end();，返回匹配元素之前的状态
- jQuery中的所有设置方法，最后都会
- 隐式迭代：jQuery可以直接在数组对象上进行操作，而不需要遍历数组中的每一个元素
- 链式编程：jQuery中的不同方法可以在一条语句中相继进行
jQuery 基础语法
- 入口函数（写法1）：
$(document).ready(function() { ...... }); - 入口函数（写法2）：
$(function() { ...... }); - 页面加载完成后执行的方法：
$(window).ready(function() { ...... }); - 获取元素：
var jqdom = $('div/.box/#box01'); - 元素的点击事件：
jqdom.click(function() { ...... }); - 显示元素：
jqdom.show(); - 在1秒钟的动画之后显示元素：
jqdom.show(1000); - 隐藏元素：
jqdom.hide(); - 在1秒钟的动画之后隐藏元素：
jqdom.hide(1000); - 设置innerHTML：
jqdom.html('hahahaha'); - 为元素设置样式（JSON）：
jqdom.css({"width":100,"background-color":"red"}); - each遍历：
$('li').each(function(index, element){ ...... });
jQuery 和JS中DOM的区别
- 使用原生JS获取到的DOM就是DOM对象本身
- 使用jQuery获取到的DOM是一个数组，DOM对象仅仅是这个数组中的一部分
- 原生JS和jQuery中DOM的转换：
- 原生JS对象转换成jQuery对象：
jqdom = $(jsdom); - jQuery对象转换成原生JS对象：
jsdom = jqdom[0];或者jsdom = jqdom.get(0);
- 原生JS对象转换成jQuery对象：
jQuery 选择器
- 基本选择器：
$("div")、$(".box")、$("#box01") - 层级选择器：
$("#box01 li")、#box01>ul>li - 过滤选择器：
$("li:eq(2)")、$("li:odd")、$("li:even") - 筛选选择器：
- $("#box01").find("li")：获取id为box01的盒子中的所有li标签（子子孙孙都算）
- $("#box01").children()：获取id为box01的盒子的所有子元素（仅子元素）
- $("#box01").children("ul")：获取id为box01的盒子的ul子元素（仅子元素）
- $("#box01").children().eq(2)：获取id为box01的盒子下的第二个子元素（仅子元素）
- $("#box01").siblings()：获取id为box01的盒子的所有兄弟元素
- $("#box01").next()：获取id为box01的盒子的下一个兄弟元素
- $("#box01").prev()：获取id为box01的盒子的上一个兄弟元素
- $("#box01").parent()：获取id为box01的盒子的父元素
jQuery 样式操作
- 设置单个样式：
$("#box01").css("color", "red"); - 设置多个样式：
$("#box01").css({"color":"red", "width":100}); - 获取样式值：
var width = $("box01").css("width"); - 添加类样式：
$("#box01").addClass("myClass"); - 移除类样式：
$("#box01").removeClass("myClass"); - 有无类样式：
var flag = $("#box01").hasClass("myClass"); - 切换类样式：
$("#box01").toggleClass("myClass");
jQuery 属性操作
- 添加属性：
$("li").attr("aaa", 111); - 获取属性：
var aaa = $("li").attr("aaa"); - 移除属性：
$("li").removeAttr("aaa"); - 当涉及到值为boolean类型的属性时，需要使用
$("checkbox").prop("checked", true); - 获取表单value属性的值：
$("input").val(); - 设置表单value属性的值：
$("input").val("XXXX"); - 获取表单中的文本：
$("input").text(); - 设置表单中的文本：
$("input").text("XXXXX");
jQuery 尺寸位置操作
- 获取宽度：
var width = $("div").width(); - 设置宽度：
$("div").width(200); - 获取高度：
var height = $("div").height(); - 设置高度：
$("div").height(200); - 上面方法获取到的宽度和高度与padding、margin、border均无关
- 获取距离网页顶端/左端的距离：
var top/left = $("div").offset().top/left; - 获取距离父盒子顶端/左端的距离：
var top/left = $("div").position().top/left;，只与left、top属性有关，与margin、padding都无关 - offset和position只能获取，不能设置
- 获取页面被卷去的距离：
var top/left = $(document).scrollTop()/scrollLeft(); - 设置页面被卷去的距离：
$(document).scrollTop(100)/scrollLeft(100);
jQuery 动画
- 显示/隐藏动画：
- 显示、隐藏的方法：
show()、hide()、toggle()，可以有很多参数种类 -
$("#box01").show();：直接显示 -
$("#box01").show(1000);：通过一个1秒的动画显示出来 -
$("#box01").show("fast");：可以填入fast、normal和slow -
$("#box01").show(XX, function() { ...... });：显示完成后回调函数
- 显示、隐藏的方法：
- 滑入/滑出动画：
- 滑入、滑出的方法：
slideDown()、slideUp()、slideToggle() - 滑入、滑出操作中的参数种类与显示、隐藏操作中的相同
- 滑入、滑出的方法：
- 淡入/淡出动画：
- 淡入、淡出的方法：
fadeIn()、fadeOut()、fadeToggle() - 淡入、淡出操作中的参数种类与显示、隐藏操作中的相同
- 这里可以支持设置淡入/淡出的透明度，方法：
fadeTo(XX, 0.5, function() { ... })
- 淡入、淡出的方法：
- 自定义动画：
- 语法：
JQ对象.animate(参数JSON串, 毫秒值, 回调函数); - 当前jQuery版本支持的参数见这个网页
- 语法：
- 停止动画：
- 停止动画的方法：
stop()，可以有两个参数，如果不写，则默认都是false - 第一个参数：后续动画是否不再执行
- 第二个参数：是否要执行完当前动画
- 停止动画的方法：
jQuery 节点操作
- 创建节点：
- 方法1：
var node = $("\<li\>哈哈哈\<\/li\>"); - 方法2：
var node = $("ul").html("\<li\>嘻嘻嘻\<\/li\>");
- 方法1：
- 添加节点：
- 方法1：
$("ul").append(newLi);，将新元素添加到容器最后面 - 方法2：
newLi.appendTo($("ul")); - 方法3：
$("ul").prepend(newLi);，将新元素添加到容器最前面 - 方法4：
newLi.prependTo($("ul")); - 方法5：
$("oldLi").after(newLi);，将newLi添加到oldLi之后 - 方法6：
$("oldLi").before(newLi);，将newLi添加到oldLi之前
- 方法1：
- 清空节点：
- 方法1：
$("ul").html(""); - 方法2：
$("ul").empty(); - 方法3：
$("li").remove();，这种方法用于自己清除自己
- 方法1：
- 复制节点：
var newNode = oldNode.clone();
jQuery 事件机制
- 事件绑定：
- 简单事件绑定：与JS中的方法相同，去掉on，改成方法，如
onclick -> click() - bind方式绑定事件：
$('.box').bind('click mouseenter', function() { ...... }); - delegate方式绑定事件：
$(document).delegate('.box', 'click mouseenter', function() { ...... }); - on方式绑定事件：
- 语法：
$(父容器).on('事件', '子元素', JSON串, function(event) {})，代码如下：$(document).on('click mouseenter', '.box', {'name': 111}, function(e) {
alert(e.data.name); // 通过event.data可以获取JSON串中传递的参数
}); - 子元素参数可以不写，如果不写，则视为父容器触发事件
- JSON串参数可以不写，如果不写，则视为没有传递参数
- 语法：
- 简单事件绑定：与JS中的方法相同，去掉on，改成方法，如
- 事件解绑：
- unbind方式解绑事件：
$('.box').unbind('mouseenter'); - undelegate方式解绑事件：
$(document).undelegate('.box', 'mouseenter'); - off方式解绑事件：
$('document').off('mouseenter', '.box'); - 一般情况下，bind与unbind、delegate与undelegate、on与off是一一对应的
- unbind方式解绑事件：
- 事件触发：
- 事件触发：当达到某种要求之后触发事件
- 语法1：
$('.box').click();，这种方法只能触发系统方法，如click等 - 语法2：
$('.box').trigger('myevent');，这种方法可以触发自定义方法，代码如下：var num = 0;
var timer = null;
$(document).ready(function() {
$('div').on('myevent', function() {
alert('number reached 30...');
});
timer = setInterval(function() {
console.log(1);
num++;
if(num === 30) {
$('div').trigger('myevent');
}else if(num > 30) {
clearInterval(timer);
}
}, 100);
}); - 语法3：
$('.box').triggerHandler('focus');，同trigger，但不会触发浏览器默认事件 - 以上三种触发方法中，第一、第二种会触发浏览器事件，第三种不会触发浏览器事件
- 触发浏览器事件：例如语法3中的focus，当用前两种方法触发后，会执行focus方法获取焦点，而使用第三种方法触发后，不会执行focus方法获取焦点
- jQuery事件对象：
-
$(document).on('click', '.box', {}, function(e) {});，一些事件对象如下 - e.data：传入事件的参数
- e.currentTarget：触发事件的元素，jQuery的DOM对象
- e.target：触发事件的元素，javascript的DOM对象
- e.pageX和e.pageY：发生事件时鼠标距离文档顶部和左部的距离
- e.type：事件类型，click、mouseenter等
- e.which：鼠标按键类型，左键1，中键2，右键3
- e.keyCode：按下键盘的键值，如果没有按键盘则返回undefined
-
jQuery 多库共存
- 多库共存：当多个库中的类型或方法发生冲突时，需要用到多库共存
- 例如：当项目中有多个jQuery版本时，版本之间会发生覆盖（通常是最后定义的版本覆盖之前的所有版本），如果想要使用之前版本的特性，则需要设置当前版本放弃某个类型或方法的使用权
- 多库共存的解决方案代码（本例中设置对
$的使用权）：var my$ = $.noConflict(true);
// 让当前版本放弃$符的使用权，同时将当前版本的$符号重定义为my$
// 以后如果想用当前版本的$功能，则可以使用my$代替，如：my$(document) - 补充：查看某方法或类型的版本（如$）：
console.log($.fn.jquery);
jQuery 插件
- 可以去这个网站搜索、下载搜许插件
- 例如：原生jQuery不支持颜色变换动画，因此，我们需要使用插件来实现这个功能
- 在网站搜索框中输入
颜色动画，点击搜索，即可看到所有颜色动画插件 - 每个插件中都有演示按钮，点击可以查看插件效果
- 点击
立即下载即可下载插件 - 下载后解压，用Sublime等工具打开index.html文件，查看插件用法