JQuery

jQuery

jQuery介绍

1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less，do more.”

JQuery的优势

1. 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
2. 丰富的DOM选择器，jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
4. 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
5. Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
7. 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控片、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么它就可以使用jQuery里的方法，例如：$("#a").html()。

$("#a").html()的意思是：获取id值为a的元素的html代码。其中html()是jQuery里的方法。

相当于：document.getElementById("a").innerHTML;

虽然jQuery对象是包装DOM对象后产生的，但是jQuery对象无法使用DOM对象的任何方法，同理DOM对象也不能使用使用jQuery里的方法。

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对象
var variable = DOM对象
$variable[0] // jQuery对象转成DOM对象

jQuery对象和DOM对象各自方法的使用：

$("a").html();  // jQuery对象可以使用jQuery的方法
$("a")[0].innerHTML;  // DOM对象使用DOM的方法

jQuery基础语法

$(selector).action()

查找标签

基本选择器

id选择器

$("#id")

类选择器

$(".className")

标签选择器

$("tagName")

配合使用

$("div.cl")  // 找到所有class="cl"的div标签

所有元素选择器

$("*")

组合选择器

$("#id, .className, tagName")

层级选择器

x和y可以为任意选择器

$("x y");  // x的所有后代y
$("x > y");  // x的所有儿子y
$("x + y");  // 找到所有紧挨在x后面的y
$("x ~ y");  // x之后所有的兄弟y

基本筛选器

:first  // 第一个
:last  // 最后一个
:eg(index)  // 索引等于index的那个元素
:even  // 匹配所有索引值为偶数的元素，从0开始计数
:odd  // 匹配所有索引值为奇数的元素，从0开始计数
:gt(index)  // 匹配所有大于给定索引值的元素
:lt(index)  // 匹配所有小于给定索引值的元素
:not(元素选择器)  // 移除所有满足not条件的标签
:has(元素选择器)  // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

例子

$("div:has(h1)")  // 找到所有后代中有h1标签的div标签
$("div:has(.c1)")  // 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")  // 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")  // 找到所有后代中不包含a标签的li标签

属性选择器

[attribute]
[attribute=value]  // 属性等于
[attribute!=value]  // 属性不等于

例子

<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");  // 取到checkbox类型的input标签
$("input[type!='text']");  // 取到类型不是text的input标签

表单筛选器

:text
:password
:file
:radio
:checkbox
:submit
:reset
:button

例子

$(":checkbox")  // 找到所有的checkbox

表单对象属性

:enabled
:disabled
:checked
:selected

例子

找到可用的input标签

<form>
    <input name="email" disabled="disabled" />
    <input name="id" />
</form>

$("input:enabled")  // 找到可用的input标签

找到被选中的option

<select id="s1">
    <option value="beijing">北京市</option>
    <option value="shanghai">上海市</option>
    <option selected value="guangzhou">广州市</option>
    <option value="shenzhen"深圳市></option>
</select>

$(":selected")  // 找到所有被选中的option

筛选器方法

下一个元素

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#id2")

上一个元素

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#id2")

父亲元素

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil()  // 查找当前元素的所有父辈元素，直到遇到匹配的那个元素为止

儿子和兄弟元素

$("#id").children();  // 儿子们
$("#id").siblings();  // 兄弟们

查找

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$("div").find("p") 等价于 $("div p")

筛选

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的

等价于$("div.c1")

补充

.first()  // 获取匹配的第一个元素
.last()  // 获取匹配的最后一个元素
.not()  // 从匹配元素的集合中删除与指定表达式匹配的元素
.has()  // 保留包含特定后代的元素，去掉那些不含有指定后代的元素
.eq()  // 索引值等于指定值的元素

操作标签

样式操作

样式类

addClass();  // 添加指定的CSS类名
removeClass();  // 移除指定的CSS类名
hasClass();  // 判断样式存不存在
toggleClass();  // 切换CSS类名，如果有就移除，没有就添加

CSS

css("color","red")  // DOM操作：tag.style.color="red"

位置操作

offest()  // 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()  // 获取匹配元素相对父元素的偏移
scrollTop()  // 获取匹配元素相对滚动条顶部的偏移
scrollLeft()  // 获取匹配元素相对滚动条左侧的偏移

.offset()方法允许我们检索一个元素相对于文档(document)的当前位置。

和.position()的差别在于：.position()是相对于父级元素的位移。

尺寸

height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()

文本操作

HTML代码

html()  // 取得第一个匹配元素的html内容
html(val)  // 设置所有匹配元素的html内容

文本值

text()  // 取得所有匹配元素的内容
text(val)  // 设置所有匹配元素的内容

值

val()  // 取得第一个匹配元素的当前值
val(val)  // 设置所有匹配元素的值
val(val1, val2)  // 设置多选的checkbox、多选select的值

例子1

<input type="checkbox" value="basketball" name="hobby" />篮球
<input type="checkbox" value="football" name="hobby" />足球

<select multiple id="s1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

设置值

$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])

例子2

获取被选中的checkbox或radio的值

<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0" />
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1" />

可以使用

$("input[name='gender']:checked").val()

属性操作

用于ID等或自定义属性

attr(attrName)  // 返回第一个匹配元素的属性值
attr(attrName, attrValue)  // 为所有匹配元素设置一个属性值
attr(k1: v1, k2: v2)  // 为所有匹配元素设置多个属性值
removeAttr()  // 从每一个匹配的元素中删除一个属性

用于checkbox和radio

prop  // 获取属性
removeprop  // 移除属性

prop和attr的区别

attr全称attribute(属性)

prop全称property(属性)

虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。

文档处理

添加到指定元素内部的后面

$(A).append(B)  // 把B追加到A后面
$(A).appendTo(B)  // 把A追加到B后面

添加到指定元素内部的前面

$(A).prepend(B) // 把B前置到A
$(A).prependTo(B)  // 把A前置到B

添加到指定元素外部的后面

$(A).after(B)  // 把B放到A的后面
$(A).insertAfter(B)  // 把A放到B的后面

添加到指定元素外部的前面

$(A).before(B) // 把B放到A的前面
$(A).insertbefore(B)  // 把A放到B的前面

替换

replaceWith()
replaceAll()

克隆

clone()  // 参数

事件

常用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

事件绑定

1. .on(events [selector] function(){})

• events：事件
• selector：选择器（可选的）
• function：事件处理函数

移除事件

1. .off(events [selector] [function(){}])

off()方法移除用.on()方法绑定的事件处理程序。

• events：事件
• selector：选择器（可选的）
• function：事件处理函数

阻止后续事件执行

1. return false; // 常见阻止表单提交等
2. e.preventDefault();

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>阻止默认事件</title>
    </head>
    <body>
        <form action="">
            <button id="b1">点这里</button>
        </form>
        <script>
            $("#b1").click(function (e) {
                alert(123);
                e.preventDefault;
            });
        </script>
    </body>
</html>

注意：

像click、keydown等DOM中定义的事件，我们都可以使用.on()方法来绑定事件，但是hover这种jQuery中定义的事件就不能使用.on()方法来绑定了。

想使用事件委托的方式绑定hover事件处理函数，可以这么做：

$("ul").on("mouseenter", "li", function () {  // 绑定鼠标进入事件
    $(this).addClass("hover");
});
$("ul").on("mouseleave", "li", function () {  // 绑定鼠标划出事件
    $(this).removeClass("hover");
});

阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>阻止事件冒泡</title>
    </head>
    <body>
        <div>
            <p>
                <span>点这里</span>
            </p>
        </div>
        <script src="jquery-3.3.1.min.js"></script>
        <script>
            $("span").click(function (e) {
                alert("span");
                e.stopPropagation();
                	// 阻止事件冒泡
                	e.stopPropagation
            });
            $("p").click(function () {
                slert("p");
            });
            $("div").click(function () {
                alert("div");
            });
        </script>
    </body>
</html>

页面载入

当DOM载入就绪可以查询及操纵时绑定一个需要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

两种写法：

$(document).ready(function () {
    // 在这里写JS代码
});

简写：

$(function () {
    // 在这里写JS代码
});

与window.onload的区别

• window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
• jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）

事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

例子

$("table").on("click", "delete", function () {
    // 删除按钮绑定的事件
});

动画效果

// 基本
show([s, [e], [fn]])
hide([s, [e], [fn]])
toggle([s], [e], [fn])
// 滑动
slideDown([s], [e], [fn])
slideUp([s, [e], [fn]])
dlideToggle([s], [e], [fn])
// 淡入淡出
fadeTn([s], [e], [fn])
fadeOut([s], [e], [fn])
fadeTo([[s], o, [e], [fn]])
fadeToggle([s, [e], [fn]])
// 自定义（了解即可）
animate(p, [s], [e], [fn])

补充

each

jQuery.each(collection, callback(indexInArray, valueOfElement)):

描述：一个通用的迭代函数，它可以用来无缝替代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length-1。其他对象通过其属性名进行迭代。

li = [10,20,30,40]
$.each(li, function (i, v) {
    console.log(i, v);  // index是索引，ele是每次循环的具体元素。
});

.each(function(index, Element)):

描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。

.each()方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字this总是指向这个元素。

// 为每一个li标签添加foo
$("li").each(function () {
    $(this).addClass("c1");
});

注意：jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不显示地循环的.each()方法：

也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：

$("li").addClass("c1");  // 对所有标签做统一操作

注意：

在遍历过程中可以使用return false提前结束each循环。

终止each循环

return false;

.data()

在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定的数据存储的值。

.data(key, value):

描述：在匹配的元素上存储任意相关数据。

$("div").data("k", 100);  // 给所有div标签都保存一个名为k，值为100

.data(key):

描述：返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过.data(name, value)或HTML5 data-*属性设置。

$("div").data("k");  // 返回第一个div标签中保存的"k"的值

.removeData(key):

描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

$("div").removeData("k");  // 移除元素上存放k对应的数据