jQurey 概述

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

美元符号定义 jQuery （$ 表示一个函数 function(selector,context)）选择符（selector）“查询”和“查找” HTML 元素，这里差找结束之后，会返回一个元素的 jQuery 对象。jQuery 的 action() 执行对元素的操作。

传入 $() 的参数

传入函数

会等待页面加载完成之后，执行传入的函数的内容。等价于 window.onload=function() {}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!Doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HelloWorld</title>
        <script type="text/javascript" src="E:\Work\HTML\node_modules\jquery\dist\jquery.js"></script>
    <body>
        <input type="text" name="name" id="username" value="">
        <input type="text" name="name" id="XXXX">
        <input type="submit" id="submit">
    </body>
</html>
<script>
    $(function(){ // 表示页面加载完成之后，等价于 window.onload=function() {}
        alert("Using jQuery Successfuly!");
    });
    })    
</script>

HTML 字符串

会为我们创建这个 html 元素的 Object 对象，然后我们就可以对其进行操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!Doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HelloWorld</title>
        <script type="text/javascript" src="E:\Work\HTML\node_modules\jquery\dist\jquery.js"></script>
    <body>
        <input type="text" name="name" id="username" value="">
        <input type="text" name="name" id="XXXX">
        <input type="submit" id="submit">
    </body>
</html>
<script>
    $(function() {
        $("<div>Xorex<div>").appendTo("body"); //传入 html 字符串，生成 juery 对象，调用 jQuery 对象 appendTo() 方法将对象插入 body 元素中。
        $("div").css("color","red"); // 传入选择器字符串，选中刚刚插入的元素对象，然后更改css 样式.
    });
</script>

选择器字符串

会根据传入的选择器字符串返回元素 jQuery 对象，然后随意调用。可以参看关于 jQuery 选择器的文档。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!Doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HelloWorld</title>
        <script type="text/javascript" src="E:\Work\HTML\node_modules\jquery\dist\jquery.js"></script>
    <body>
        <input type="text" name="name" id="username" value="">
        <input type="text" name="name" id="XXXX">
        <input type="submit" id="submit">
    </body>
</html>
<script>
    $(function(){
        var $elementObj=$("#submit"); // 等价于 getElementByIdX 字符串使用选择器格式，返回对应元素的实例
        $elementObj.click(function() { 
        alert($elementObj); // 返回类型为 jQuery Object 所以使用 $ 标识此变量为 jQuery 对象
    });
    })
</script>

DOM 对象

DOM 对象即 HTML 对象，使用 alert() 返回的结果为 Object HTML标签名Element 。

而 jQuery 使用 alert() 返回的是 Object Object，向 jQuery 的 $ 函数传入 DOM 对象返回的是一个 jQuery 对象。

jQuery 的本质是 DOM 对象的数组 + jQuery 提供的一系列函数，可以使用增强 for 循环遍历。而两者自己特有的函数是不能被对方使用的。

而 jQuery 对象和 DOM 对象之间是可以相互转化的，DOM -> jQuery 使用 $(DOM) 转化为 jQuery 对象。jQuery -> DOM 使用 jQuery[0] 返回 DOM 对象。

DOM jQuery JS 对象异同和联系

下面是关于 DOM 对象 jQuery 对象 JS 对象三者之间的异同和关系：

Dom对象

文档对象模型简称 DOM ，是 W3C 组织推荐的处理可扩展置标语言的标准编程接口。

DOM 实际上是以面向对象方式描述的文档模型。DOM 定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。

通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。

DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

DOM 对象，即是我们用传统的方法 (JavaScript) 获得的对象。

DOM 准确说是对文档对象的一种规范标准(文档对象模型),标准只定义了属性和方法行为。

JavaScript对象

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。

对象只是带有属性和方法的特殊数据类型。

通过 js 获取的 DOM 对象就是 js 对象

当浏览器支持 js 的 DOM 接口 (api) 时，这里狭义的dom对象是以 js 对象的形式出现的，也就是一个 js 对象。

jQuery对象

jQuery 对象其实是一个 JavaScript 的数组，这个数组对象包含 125 个方法和 4 个属性 4 个属性分别是：

  1. jquery 当前的 jquery 框架版本号
  2. length 指示该数组对象的元素个数
  3. context 一般情况下都是指向 HtmlDocument 对象
  4. selector 传递进来的选择器内容

jquery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的，其可以使用 jQuery 里的方法，但是不能使用 DOM 的方法;反过来 DOM 对象也不能使用jquery的方法。

jQuery对象和js对象区别

  1. jQuery 对象属于 js 的数组
  2. jQuery 对象是通过 jQuery 包装的 DOM 对象后产生的
  3. jQuery 对象不能使用 DOM 对象的方法和属性
  4. DOM 对象不能使用 jQuery 对象的方法和属性

jQuery 对象和 DOM 对象之间的转化

jQuery 对象使用下标 [0] 转化为 DOM

DOM 使用 $() 函数返回 jQuery 对象。

总结一下

DOM 对象才能使用 DOM 中的方法，jQuery 对象不可以使用 DOM　中的方法，但 jQuery 对象提供了一套更加完善的工具用于操作 DOM 。

平时用到的 jQuery 对象都是通过 $() 函数制造出来的，$() 函数就是一个 jQuery 对象的制造工厂。

注意：如果获取的对象是 jQuery 对象，那么在变量前面加上 $ ,这样方便容易识别出哪些是 jQuery 对象。

选择器

具体的所有选择器，可以查看手册：jQuery 选择器手册

选择器组合

  1. 多重叠加选择器 $(“选择器1 选择器2 选择器3”…)，可以写多个选择器/过滤器，作用效果为 &&，会返回满足每个选择器的元素。

  2. 多重平行选择器： $(“选择器1,选择器2…”)，可以写多个选择器，作用效果为 || ，会返回每个选择器满足的元素，注意和上面的不同为多了逗号。

基本选择器

  1. ID 选择器：$(“#ID名称”)，只需要对应标签设值的属性 id 的值前面加上 # 即可。

  2. 类选择器： $(“.Class名称”)，只需要在对应标签设置的属性 class 的值前面加上 . 即可。

  3. 元素选择器： $(“标签名称)，只需要写对应标签的名称即可，如 $(“div”)

  4. 所有选择器： $()，只需要写 \ 就可以表示所有的标签。

层级选择器

  1. 祖先选择器：$(‘ancestor ancestor … son’) 格式，每一个都是独立的选择器，为 ancestor 为祖先标签（不需要是严格的上一级）的选择器，最后的 son 为目标标签的选择器。ancestor 的数量可以任意设置，指是为了更加精确的定位到 son 身上。

  2. 子选择器：$(“father > son”) 要求 father 必须是 son 的严格上一级，才能选择到 son 身上。

  3. 相邻选择器： $(“Prev + Next”) 选择紧邻着 Prev 后面的 Next 元素，必须严格相邻。

  4. 之后选择器：$(“Prev ~ last”) 选择 prev 之后的同辈 last 元素，不需要严格相邻。

属性过滤选择器

过滤选择器，可以跟在一个选择器后面，将这个选择器选择出来的结果进行按照设定要求过滤，只留下来符合要求的。

也可以单独作为一个选择器来按照自己的设定选择。

  1. $([属性名]) 选择拥有此属性的元素，如 $(“div[id]”) 选择出来拥有 id 属性的 div 标签。

  2. $([属性名=属性值]) 选择有特定属性名和属性值的元素。

  3. $([属性名!=属性值]) 选择 属性名!=属性值 的元素。

  4. $([属性名^=属性值开头]) 选择属性值以此属性值开头的元素，和正则相同。

  5. $([属性名$=属性值结尾]) 选择属性值以此属性值结尾的元素，和正则相同。

  6. $([属性名*=被包含属性值]) 选择属性值中包含此属性值的元素，和正则相同就怪了。

  7. $([属性选择器1][属性选择器2][属性选择器3]…) 多个属性叠加在一起，多次选择过滤。

基本过滤器

  1. :first 选择元素集合中的第一个。

  2. :last 选择元素集合中的最后一个。

  3. :even 从零开始选择偶数的元素。

  4. :odd 从零开始选择奇数的元素。

  5. :eq(index) 从零开始，匹配一个给定索引值的元素

  6. :gt(index) 匹配比索引值大的元素。

  7. :lt(index) 匹配比索引值小的元素。

内容过滤器

  1. :contains(text) 匹配标签文本内容包含有 text 的标签元素。

  2. :empty 匹配标签里面没有子标签和文本的元素

  3. :has(selector) 选择拥有 selector 能匹配到标签的父标签，满足 has 关系。

  4. :parent 选择里面的有子标签或者文本的标签、

可见性过滤器

  1. :hidden 选择其中被隐藏的

  2. :visible 选择其中可以被看见的

子元素过滤器

  1. :first-child 选择所有父标签符合要求的的第一个子标签，而 :first 是选择符合要求的标签里面的第一个。

  2. :last-child 和上面同理，不过是最后一个子标签。

  3. :nth-child(index) 为所有父标签匹配第 index 个子标签。

  4. :only-child 只匹配没有同级姐妹标签的单独标签。

表单过滤器

  1. :enabled 选择拥有表单属性 enabled 的元素。

  2. :disabled 选择拥有表单属性 disabled 的元素。

  3. :checked 选择拥有表单属性 checked 的元素。

  4. :selected 选择拥有表单属性 selected 的元素。

jQuery 属性操作

html()

jQuery.html() 返回此标签 jQuery 对象的内容，修改里面的内容则填写在括号里 jQuery.html(“Change”) 效果和 innerHTML 相似。

需要注意的是，这玩意返回的是开始结束标签里面的 所有 内容，包括里面的子 HTML 标签。

1
2
3
4
5
6
<script>
$(function() {
    alert($(".Tempest > .Xorex").html()) //先弹出再修改（内容包括html代码）
    $(".Tempest > .Xorex").html("Xorex 天下第一");
})
</script>

text()

jQuery.text() 基本等效与 html() 但是这个是过滤了 HTML 子标签，只会返回里面的文本。和 DOM 对象里面的 innerText 效果相似。

val()

jQuery.val() 是设置和获取表单项目的 value 值。常常用来获取表单里面输入的值，当然也可以修改里面的值：

第一读取输入框内容并修改的小 demo 。

1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <input type="text" class="input">
</body>
<script>
$(function() {
    $(".input").blur(function() {
        var ele=$(".input");
        alert("你填写的值为：" + ele.val() + "，我要给你改了！");
        ele.val("Xorex 天下第一！");
    })
})
</script>

同时 val() 选项的选择，只需要将要选择的选项 value 值放在 val(["value1","value2"...]) 即可。

1
2
3
4
5
6
7
8
9
<body>
    <input type="checkbox" name="input" value="value1">Xorex
    <input type="checkbox" name="input" value="value2">Yukino
    <input type="checkbox" name="input" value="value3">Megumi
</body>
<script>
$(function() {
    $("[name='input']").val(["value1","value3"]); //这里直接选择 Xorex 和 Megumi
})

attr() 和 prop()

用来获取标签的属性或者修改标签的属性，获取属性值：attr(“属性名称”)，设置属性值：(“属性名称”,”属性值”);

1
2
3
4
5
6
7
8
9
<body>
    <p style="color:green">Xorex</div>
</body>
<script>
$(function() {
    $("p").onclick(function() {
        $("p").attr("style","color:red") //点击之后修改颜色
    });
})

对于表单的元素来说，可能没有 checked 这个属性（我们无法预测），但是对于 attr() 来说，只要没有手动写 checked 属性，此次属性查询返回的结果都是 undefined ，所以对于表单的 checked 选项来说，无法了解是否已经选中（手动无论是否选中都是 undefined）。而 prop() 就是针对 attr() 这个缺点而生的。

prop() 可以查询没有写在标签里的 checked 属性，被选中返回 true ，没有选中返回 false。

jQuery 的增删改

appendTo() & pretendTo() 嵌入

a.appendTo(b) 将 a 元素嵌入到 b 元素中，成为 b 的最后一个子元素。

a.pretendTo(b) 将 a 元素嵌入到 b 元素中，成为 b 的第一个子元素。

insertAfter() & insertBefore() 插入

a.insertAfter(b) 将 a 元素插入到 b 元素的后面，两者同级。

a.insertBefore(b) 将 a 元素插入到 b 元素前面，两者同级。

replaceWith() & replaceAll() 替换

a.replaceWith(b) 将 b 元素替换 a 元素。

a.replaceAll(b) 将 a 元素替换 b 元素。

remove() & empty() 清楚

a.remove() 删除 a 整个标签。

a.empty() 删除 a 标签里面的内容。

jQuery 动画效果

  1. show([speed,[callback]]) 展示隐藏的元素， speed 单位毫秒，callback 动画结束激活的函数。
1
2
3
$("#Show").click(function() {
    $("#div1").show(1000);
});
  1. hide([speed,[callback]]) 隐藏展示的元素， speed 单位毫秒，callback 动画结束激活的函数
1
2
3
$("#Hide").click(function() {
    $("#div1").hide(1000);
});
  1. toggle([speed,[callback]]) 隐藏展示的元素，展示隐藏的元素，speed 单位毫秒，callback 动画结束激活的函数
1
2
3
$("#Toggle").click(function() {
    $("#div1").toggle(1000);
});
  1. fadeOut([speed,[callback]]) 淡出元素，speed 单位毫秒，callback 动画结束激活的函数
1
2
3
$("#FadeOut").click(function() {
    $("#div1").fadeOut(1000);
});
  1. fadeIn([speed,[callback]]) 淡入元素，speed 单位毫秒，callback 动画结束激活的函数
1
2
3
$("#FadeIn").click(function() {
    $("#div1").fadeIn(1000);
});
  1. fadeToggle([speed,[callback]]) 淡入淡出元素，speed 单位毫秒，callback 动画结束激活的函数
1
2
3
$("#FadeToggle").click(function() {
    $("#div1").fadeToggle(1000);
});
  1. fadeTo([speed],opacity,[callback]) 淡入元素到指定透明度，opacity 必须设置。speed 单位毫秒，callback 动画结束激活的函数
1
2
3
$("#FadeTo").click(function() {
    $("#div1").fadeTo(1000,0.5);
})

jQuery 事件处理

常用事件

  1. click() 绑定点击事件处理代码

  2. mouseover() 绑定鼠标移动到元素身上处理代码

  3. mouseout() 绑定鼠标离开元素身上处理代码

  4. bind() 绑定多个事件对应的处理代码，所有事件名称写在一个双引号里，用空格隔开，如 bind(“click mouseover mouseout”,function(){})

  5. unbind() 解绑对应的事件处理代码，使用的方法和上面的 bind() 差不多。

  6. live() 动态绑定版本的 bind 即使是页面加载完成之后出现的元素，只要满足选择器，就会被绑定上设置的处理代码。

  7. one() 一次性的 bind ，所绑定的事件处理代码只会运行一次。

事件传递

当父标签和子标签绑定了相同的一个事件的时候，比如下面父标签和子标签都绑定了 click 事件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div>
    click div
    <button>click button</button>
</div>
<script>
$(function() {
    $("div").click(function() {
        alert("This is the div.");
    })

    $("button").click(function() {
        alert("This is the button.");
    })
})
</script>

由于点击 div 里面的任何事物都属于点击 div ，所以当点击 button 的时候，会被记为同时点击了 div 和 button 从而弹出两个弹窗。

要阻止这种子类事件传递给父类的行为，只需要在绑定子类事件的处理函数的时候，返回 false 就会停止标签的默认行为：传递事件给父标签。

获取事件

其实对于我们操作引起的一个事件，也同样是一个对象，想要获取到这个对象的话，只需要将变量名放在事件绑定函数的参数括号里面即可。

1
2
3
4
5
$(function() {
    $("button").click(function(event) {
        console.log(event);
    })
})

上面的 event 变量保存的就是我们获取到的点击事件的对象，从控制台可以看到这个对象里面保存的信息。

1
2
3
4
5
6
7
8
jQuery.Event
altKey: false
bubbles: true
button: 0
buttons: 0
cancelable: true
changedTouches: undefined
....