1. jQuery基础入门

1.1 jQuary简介

jQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript代码库（或JavaScript框架）

jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。

它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：

• 具有独特的链式语法和短小清晰的多功能接口

• 具有高效灵活的css选择器，并且可对CSS选择器进行扩展

• 拥有便捷的插件扩展机制和丰富的插件

jQuery 库包含以下特性：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• Ajax

1.2 jQuery 语法

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

• 美元符号定义 jQuery
• 选择符（selector）“查询”和“查找” HTML 元素
• jQuery 的 action() 执行对元素的操作

示例

• $(this).hide() - 隐藏当前HTML元素

• $("p").hide() - 隐藏所有<p>元素

• $(".test").hide() - 隐藏所有 class="test" 的所有元素

• $("#test").hide() - 隐藏所有 id="test" 的元素

1.3 JS对象与JQ对象转换

• JQuery对象在操作时更加方便

• JQuery对象和JS对象方法不通用的

对象转换：

• JS对象转JQ----> $(JS对象)

• JQ对象转JS---->JQ对象[索引] 或者 JQ对象.get(索引)

【JavaScript对象转jQuery对象】

【jQuery对象转JavaScript对象】

1.4 事件绑定

由于我们的脚本语言是按代码的顺序来执行的，在事件绑定（事件注册）时，要么将script中的代码放在body之后，或者使用window.onload等HTML页面加载完再去获取资源

jQuery中的事件绑定与JS的有何区别？又简化在了哪里？

window.onload 和 $(function)区别：

• window.onload只能定义一次，如果定义多次，后面的会将前边的覆盖掉

• $(function)可以定义多次

2. jQuery选择器

2.1 基本选择器

标签选择器（元素选择器）

• 语法： $("html标签名") 获得所有匹配标签名称的元素

id选择器

• 语法： $("#id的属性值") 获得与指定id属性值匹配的元素

类选择器

• 语法：$(".class的属性值") 获得与指定的class属性值匹配的元素

并集选择器

• 语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素

2.2 层级选择器

后代选择器(子孙们都选全部)

• 语法： $("A B ") 选择A元素内部的所有B元素

子选择器(只选儿子)

• 语法： $("A > B") 选择A元素内部的所有B子元素

2.3 属性选择器

属性名称选择器

• 语法： $("A[属性名]") 包含指定属性的选择器

属性选择器

• 语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器

复合属性选择

• 语法： $("A[属性名1='值1'][属性名]...") 包含多个属性条件的选择器

2.4 过滤选择器

首元素选择器

• 语法： first 获得选择的元素中的第一个元素

尾元素选择器

• 语法：last 获得选择的元素中的最后一个元素

非元素选择器

• 语法： not(selector) 不包括指定内容的元素

偶数选择器

• 语法： even 偶数，从 0 开始计数

奇数选择器

• 语法： odd 奇数，从 0 开始计数

等于索引选择器

• 语法： eq(index) 指定索引元素

大于索引选择

• 语法： gt(index) 大于指定索引元素

小于索引选择器

• 语法： lt(index) 小于指定索引元素

标题选择器

• 语法： header 获得标题（h1~h6）元素，固定写法

2.5 表单过滤选择器

5. 可用元素选择器

• 语法： enabled 获得可用元素

2. 不可用元素选择器

• 语法： disabled 获得不可用元素

3. 选中选择器

• 语法： checked 获得单选/复选框选中的元素

4. 选中选择器

• 语法： selected 获得下拉框选中的元素

3. DOM

3.1 内容操作

• html()：获取/设置元素的标签体内容

• text()：获取/设置元素的标签体纯文本内容

• val()：获取/设置元素的 value属性值

3.2 属性操作

通用属性操作

• attr()：获取/设置元素的属性

• removeAttr()：删除属性

• prop()：获取/设置元素的属性

• removeProp()：删除属性

attr和prop区别？

1. 如果操作的是元素的固有属性，则建议使用prop

2. 如果操作的是元素自定义的属性，则建议使用attr

对class属性操作

• addClass()：添加class属性值

• removeClass()：删除class属性值

• toggleClass()：切换class属性

• toggleClass("one")

  • 判断如果元素对象上存在class="one"，则将属性值one删除掉。 如果元素对象上不存在class="one"，则添加

3.3 CRUD操作

append()：父元素 将 子元素追加到末尾

• 对象1.append(对象2)：将对象2添加到对象1元素内部的末尾

prepend()：父元素 将 子元素追加到开头

• 对象1.prepend(对象2)：将对象2添加到对象1元素内部的开头

appendTo()

• 对象1.appendTo(对象2)：将对象1添加到对象2内部的末尾

prependTo()

• 对象1.prependTo(对象2)：将对象1添加到对象2内部的开头

after()：添加元素到元素后边对象，对象1和对象2是兄弟关系

• 1.afte(对象2)：将对象2添加到对象1后边。

before()：添加元素到元素前边，对象1和对象2是兄弟关系

• 对象1.before(对象2)：将对象2添加到对象1前边

insertAftero().对象1和对象2是兄弟关系

• 对象1.insertAfter(对象2)：将对象2添加到对象1后边

insertBeforeo()

• 对象1.insertBefore(对象2)：将对象2添加到对象1前边

remove()：移除元素

• 对象.remove()：将对象刪除掉

empty()：清空元素的所有后代元秦。

• 对象.empty()：将对象的后代元素全部清空，但是保留当前对象以及其属性节点

4. jQuery高级

4.1 动画(三种方式显示和隐藏元素)

默认显示和隐藏方式

• show([speed,[easing],[fn]])

• hide([speed,[easing],[fn]])

• toggle([speed],[easing],[fn])

滑动显示和隐藏方式

• slideDown([speed],[easing],[fn])

• slideUp([speed,[easing],[fn]])

• slideToggle([speed],[easing],[fn])

<script>
    function hideFn() {
        $("#showDiv").slideUp("slow","swing");
    }
    function showFn() {
        $("#showDiv").slideDown(5000, "linear");
    }
    function toggleFn() {
        $("#showDiv").slideToggle(5000, "linear");
    }
</script>

淡入淡出显示和隐藏方式

• fadeIn([speed],[easing],[fn])

• fadeOut([speed],[easing],[fn])

• fadeToggle([speed,[easing],[fn]])

---

【参数】

1. speed：动画的速度

   • 三个预定义的值("slow","normal", "fast")

   • 或表示动画时长的毫秒数值(如：1000)

2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"

   • swing：动画执行时效果是先慢，中间快，最后又慢
   • linear：动画执行时是匀速的

3. fn：在动画完成时执行的函数，每个元素执行一次

---

4.2 遍历

js的遍历方式

• for(初始化值;循环结束条件;步长)

//js遍历获取
$(function() {
    //获取ul下的li
    var msg = $("#city li");
    for (var i = 0; i < msg.length; i++) {
        alert(i + " : " + msg[i].innerHTML);
    }
});

jq的遍历方式

I. jq对象.each(callback)

【语法】 jquery对象.each(function(index,element){});

• index:就是元素在集合中的索引

  • element：就是集合中的每一个元素对象
  • this：集合中的每一个元素对象

• 回调函数返回值：

  • true：如果当前function返回为false，则结束循环(break)

  • false：如果当前function返回为true，则结束本次循环，继续下次循环(continue)

//I.JQ对象.each(callback)
$(function() {
    var msg = $("#city li");
    msg.each(function (index, element) {
        //方式一,无法获取到索引
        //alert(this.innerHTML);

        //方式二：获取li对象,在回调函数中定义参数(index[索引],element[元素对象])

        /**
        ** 回调函数返回值：
        - true：如果当前function返回为false，则结束循环(break)
        - false：如果当前function返回为true，则结束本次循环，继续下次循环(continue)
        */
        if("上海" == $(element).html()) {
            return true;
        }   
        alert(index + "--" + $(element).html());
    });
});

II. $.each(object, [callback])

//II. $.each(object, [callback])
$(function() {
    var msg = $("#city li");
    $.each(msg , function (index, element) {
        //alert($(this).html());

        alert(index + "--" + $(element).html());
    });
});

III. for(元素对象 of 容器对象）

//III. for...of (jQuery3.0以上版本)
$(function () {
    var msg = $("#city li");
    for(li of msg) {
        alert($(li).html());
    }
});

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery-3.4.1/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script>
        //I.JQ对象.each(callback)
        $(function() {
            var msg = $("#city li");
            msg.each(function (index, element) {
                if("上海" == $(element).html()) {
                    return true;
                }
                alert(index + "--" + $(element).html());
            });
        });

        //II. $.each(object, [callback])
        $(function() {
            var msg = $("#city li");
            $.each(msg , function (index, element) {
                //alert($(this).html());

                alert(index + "--" + $(element).html());
            });
        });

        //III. for...of (jQuery3.0以上版本)
        $(function () {
            var msg = $("#city li");
            for(li of msg) {
                alert($(li).html());
            }
        });
    </script>
</head>
<body>
<ul id="city">
    <li>北京</li>
    <li>上海</li>
    <li>西安</li>
    <li>杭州</li>
</ul>
</body>
</html>

4.3 事件绑定

jQuery标准的绑定方式

• JQ对象.事件方法(回调函数)；

注：如果调用的事件方法，不传递回调函数，则会触发浏览器默认行为。

• 表单对象.submit();//让表单提交

on绑定事件/off解除绑定

• jq对象.on("事件名称",回调函数)

• jq对象.off("事件名称")

如果off方法不传递任何参数，则将组件上的所有事件全部解绑

事件切换toggle

jq对象.toggle(fn1,fn2...)

• 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....

• 注意：1.9版本toggle() 方法删除，jQuery Migrate（迁移）插件可以恢复此功能

---

【参考链接】

• https://www.runoob.com/jquery/jquery-tutorial.html (opens new window)

• https://www.w3school.com.cn/jquery/jquery_syntax.asp (opens new window)

• http://jquery.cuishifeng.cn/ (opens new window)