【前端】之jQuery基础知识

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 基础语法

入口函数（写法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);

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：

$("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：

$("ul").html("");

方法2：

$("ul").empty();

方法3：

$("li").remove();

，这种方法用于自己清除自己

复制节点：

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) {})

，代码如下：

js   $(document).on('click mouseenter', '.box', {'name': 111}, function(e) {   alert(e.data.name); // 通过event.data可以获取JSON串中传递的参数   });

子元素参数可以不写，如果不写，则视为父容器触发事件

JSON串参数可以不写，如果不写，则视为没有传递参数

事件解绑：

unbind方式解绑事件：

$('.box').unbind('mouseenter');

undelegate方式解绑事件：

$(document).undelegate('.box', 'mouseenter');

off方式解绑事件：

$('document').off('mouseenter', '.box');

一般情况下，bind与unbind、delegate与undelegate、on与off是一一对应的

事件触发：

事件触发：当达到某种要求之后触发事件

语法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版本时，版本之间会发生覆盖（通常是最后定义的版本覆盖之前的所有版本），如果想要使用之前版本的特性，则需要设置当前版本放弃某个类型或方法的使用权

多库共存的解决方案代码（本例中设置对

$

的使用权）：

js   var my$ = $.noConflict(true);    // 让当前版本放弃$符的使用权，同时将当前版本的$符号重定义为my$   // 以后如果想用当前版本的$功能，则可以使用my$代替，如：my$(document)

补充：查看某方法或类型的版本（如$）：

console.log($.fn.jquery);

jQuery 插件

可以去这个网站搜索、下载搜许插件

例如：原生jQuery不支持颜色变换动画，因此，我们需要使用插件来实现这个功能

在网站搜索框中输入

颜色动画

，点击搜索，即可看到所有颜色动画插件

每个插件中都有演示按钮，点击可以查看插件效果

点击

立即下载

即可下载插件

下载后解压，用Sublime等工具打开index.html文件，查看插件用法