跟着pink老师学前端之jQuery

最新推荐文章于 2023-04-14 11:12:49 发布

原创最新推荐文章于 2023-04-14 11:12:49 发布 · 912 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

前端基础学习专栏收录该内容

15 篇文章

订阅专栏

这篇博客详细介绍了jQuery的基本概念、使用方法和常见API，包括jQuery入口函数、选择器、样式操作、效果、属性操作、元素操作、事件处理等核心内容。通过实例展示了如何使用jQuery简化JavaScript代码，如显示隐藏效果、滑动、切换类、数据缓存等。还涵盖了jQuery事件的注册、解绑和自动触发，以及jQuery插件的使用，如图片懒加载和全屏滚动插件。最后，提供了一个toDoList案例，结合HTML、CSS和JS实现了一个待办事项列表功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. jQurey概述

jQuery是一个快速简洁的JavaScript库，它封装了JavaScript常用的功能代码。学习jQuery本质就是学习调用这些方法。

2. jQuery的基本使用

1. jQuery入口函数

jquery的入口函数，相当于原生js中的DOMContentLoaded。等着页面DOM加载完毕再去执行js代码。

第一种：

$(document).ready(function(){
    $('div').hide();
})

第二种：

$(function () {
    $('div').hide();
})

2. jQuery顶级对象$

$符号是 j Q u e r y 的别称，在代码中可以使用 j Q u e r y 代替$ ，但一般为了方便，使用$。

$符号也是jQuery的顶级对象，相当于原生js中的window。

3. jQuery对象和DOM对象

DOM对象：用原生js获取过来的对象就是DOM对象。
jQuery对象：用jQuery方式获取过来的对象是jQuery对象，本质是jQuery$将DOM对象包装后产生的对象。
jQuery对象只能使用jQuery方法，DOM对象只能使用原生JavaScript属性和方法。

二者的转换：

DOM对象转换为jQuery对象

// 1) 获取jQuery对象
$('video');
// 2) 获取DOM对象
var myvideo = document.querySelector('video');
// 3) 转换：直接用$包装DOM对象
$('myvideo')

jQuery对象转换成DOM对象

// 1) 第一种
$('video')[0].play();
// 2) 第二种
$('video').get(0).play();

3. jQuery常用API

1. jQuery选择器

1. jQuery基本选择器

名称	语法
ID选择器	$("#id")
全选选择器	$(’*’)
类选择器	$(".class")
标签选择器	$(“div”)
并集选择器	$(“div,p,li”)
交集选择器	$(“li.current”)

2. jQuery层级选择器

名称	语法	描述
子代选择器	$(“ul>li”)	获取亲儿子元素
后代选择器	$(“ul li”)	获取所有子代li元素

3. jQuery隐式迭代

4. jQuery筛选选择器

语法	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(2)”)	索引号为2的元素，索引从0开始
:odd	$(“li:odd”)	索引号为奇数的元素
:even	$(“li:even”)	索引号为偶数的元素

5. jQuery选择方法

语法	用法	描述
parent()	$(“li”).parent();	最近一级的父元素
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，最近一级子元素
find(selector)	$(“ul”).find(“li”)	相当于$(“ul li”)，后代选择器
siblings(selector)	$(".first").siblings(“li”)	查找兄弟节点，不包括自己本身
nextAll([expr])	$(".first").nextAll()	查找当前元素之后所有的同辈元素
prevtAll([expr])	$(".first").prevtAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$(‘div’).hasClass(“protected”)	检查当前的元素是否含有某个特定的类，如果有则返回true
eq(index)	$(“li”).eq(2)	相当于$(“li:eq(2)”)，index从0开始

6. 排他思想

$(function () {
    // 1. 隐式迭代给所有按钮绑定点击事件
    $("button").click(function () {
        // 2. 当前元素变化背景颜色
        $(this).css("background", "pink");
        // 3. 其余的兄弟去掉背景颜色，隐式迭代
        $(this).siblings("button").css("background", "");
    })
})

7. 链式编程

上面改变按钮背景颜色的案例，代码可以简写为：

$(this).css("background", "pink").siblings("button").css("background", "");

2. jQuery操作样式

1. css方法

参数值写属性名，则返回属性值；
```
$(this).css("color");
```
参数写属性名，属性值，逗号分隔。属性必须加引号，属性值如果是数字可以不用跟单位和引号。
```
$(this).css("color","red");
```
参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号分隔，属性可以不加引号但是要用驼峰命名法。
```
$(this).css("color":"red",
"font-size":"20px",
backgroundColor:"blue");
```

2. 类方法

引号里面的类名不要加点。

添加类addClass
```
$(this).addClass("current");
```
删除类removeClass
```
$(this).removeClass("current");
```
切换类toggleClass
```
$(this).toggleClass("current");
```

类操作与className区别

原生JS中className会覆盖元素原先里面的类名。
jQuery里面类操作只是对指定类进行操作，不影响原先的类名。

3. jQuery效果

1. 显示隐藏效果

显示语法
```
show([speed,[easing],[fn]])
```
隐藏语法
```
hide([speed,[easing],[fn]])
```
切换语法
```
toggle([speed,[easing],[fn]])
```
参数
- 参数都可省，无动画直接显示。
- speed：可选"slow" “noemal” "fast"或表示动画时长的毫秒数值。
- easing：默认swing，可用"linear"匀速。
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

2. 滑动效果

下拉语法
```
slideDown([speed,[easing],[fn]])
```
上拉语法
```
slideUp([speed,[easing],[fn]])
```
切换语法
```
slideToggle([speed,[easing],[fn]])
```
参数
- 参数都可省，无动画直接显示。
- speed：可选"slow" “noemal” "fast"或表示动画时长的毫秒数值。
- easing：默认swing，可用"linear"匀速。
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

3. 事件切换

第一个参数是鼠标经过触发的事件函数，第二个参数是鼠标离开触发的事件函数。

hover(mouseoverFunction(),outFunction())

滑动下拉菜单案例

两个参数版：

$(".nav>li").hover(function () {
    $(this).children('ul').slideDown(200);
}, function () {
    $(this).children('ul').slideUp
});

只写一个参数，鼠标经过和鼠标离开都会触发这个函数：

$(".nav>li").hover(function () {
    $(this).children('ul').slideToggle(200);
})

4. 停止动画排队效果

stop()方法必须写在动画的前面。

 $(this).children('ul').stop().slideToggle(200);

5. 淡入淡出效果

淡入语法
```
fadeIn([speed,[easing],[fn]])
```
淡出语法
```
fadeOut([speed,[easing],[fn]])
```
淡入淡出切换语法
```
fadeToggle([speed,[easing],[fn]])
```
渐进方式调整到指定的不透明度

opacity：透明度，速度属性和透明度属性必须写。
```
fadeTo(speed,opacity,[easing],[fn])
```
参数
- 参数都可省，无动画直接显示。
- speed：可选"slow" “noemal” "fast"或表示动画时长的毫秒数值。
- easing：默认swing，可用"linear"匀速。
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

突出显示案例

$(function () {
    $(".wrap div").hover(function () {
        $(this).siblings().stop().fadeTo(400, 0.5);
    },
        function () {
            $(this).siblings().stop().fadeTo(400, 1);
        })
})

6. 自定义动画

语法
```
animate(params,[speed],[easing],[fn])
```
参数
- params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用加引号，但是必须使用驼峰命名法。其余参数都可以省略。
- speed：可选"slow" “noemal” "fast"或表示动画时长的毫秒数值。
- easing：默认swing，可用"linear"匀速。
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

例：

$(function () {
    $("button").click(function () {
        $("div").animate({
            left: 800,
            bottom: 300,
            opacity: .5,
            width: 400,
            height: 300
        })
    })
})

4. jQuery属性操作

1. 设置或获取元素固有属性值prop()

获取属性语法：
```
prop("属性")
```
设置属性语法：
```
prop("属性":"属性值")
```

2. 设置或获取元素自定义属性值attr()

获取属性语法：
```
attr("属性")
```
类似于原生js里面的getAtrribute()
设置属性语法：
```
attr("属性":"属性值")
```
类似于原生js里面的setAtrribute()

3. 数据缓存data()

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。

附加数据语法
```
data("name","value")
```
获取数据语法
```
data("name")
```

同时，还可以读取html5自定义属性data-index，得到的是数字型。

4. 全选案例

$(function () {
    $(".a-checkbox").change(function () {
        // console.log($(".a-checkbox").prop("checked"));
        $(".j-checkbox").prop("checked", $(this).prop("checked"));
    });
    $(".j-checkbox").change(function () {
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".a-checkbox").prop("checked", true);
        } else {
            $(".a-checkbox").prop("checked", false);
        }
    })
})

5. jQuery内容文本值

1. 获取设置元素内容html()

不写参数：获取内容
参数是内容：设置内容

2. 获取设置文本内容text()

不写参数：获取内容
参数是内容：设置内容

3. 获取设置表单值val()

不写参数：获取内容
参数是内容：设置内容

6. jQuery元素操作

主要是遍历、创建、添加、删除元素操作。

1. 遍历元素

1. each()对于同一类元素做不同的操作

$("div").each(function(index,domEle) {xxx;})

回调函数第一个参数一定是索引号，可以自己指定索引号名称。
回调函数第二个参数一定是DOM元素对象。所以想要使用jQuery方法，需要给这个dom元素转换为jQuery对象$(domEle)。

2. $.each()主要用于遍历数组，处理数据

$.each(arr,function(index,ele))

第一个参数可以是数组，也可以是对象。

2. 添加元素

1. 内部添加

内部添加后二者是父子关系。

element.append("元素")
element.prepend("元素")

append将元素放在内容的最后面，prepend将元素放在内容的前面。

2. 外部添加

外部添加后二者关系是兄弟关系。

element.after("内容")
element.before("内容")

after将元素放在内容的最后面，before将元素放在内容的前面。

3. 删除元素

element.remove()

可以删除匹配的元素，自杀。

element.clear()

可以删除匹配的元素的子节点。相当于element.html("")。

7. jQuery尺寸、位置操作

1. 尺寸

参数可以不加单位。

方法	描述
width()/height()	取得匹配元素宽度和高度值，只算width/height
innerWidth()/innerHeight()	取得匹配元素宽度和高度值包含padding
outerWidth()/outerHeight()	取得匹配元素宽度和高度值包含padding和border
outerWidth(true)/outerHeight(true)	取得匹配元素宽度和高度值包含padding、border和margin

2. 位置

1. offset()

设置或获取元素偏移。offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。它有两个属性，left和top。

2. position()

获取距离带有定位父级位置，如果没有带有定位的父级，则以文档为准。该方法只能获取不能设置。

3. scrollTop() / scrollLeft()

获取文档被卷曲的头部的距离，还可以带参数设置文档被卷曲头部的距离。参数不加单位。

在animate方法中也有scrollTop方法，用来元素做去往页面某一位置的动画。

4. jQuery事件

1. jQuery事件注册

1. 单个事件注册

element.click(function() { })

2. 多个事件注册

on()方法优势1：on() 方法在匹配元素上绑定一个或多个事件的事件处理函数。

element.on({
	click:function() {
	
	},
	mouseover:function() {
	
	}
})

如果事件的事件处理函数做同样的操作，可以简写为：

element.on("mouseover mouseout",function(){

})

on()方法优势2：可以事件委派操作。事件委派的定义是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

$("ul").on("click","li",function() {
	// click 是绑定在ul身上的，但是触发的对象是ul里面的小li
})

on()方法优势3：on()方法可以给动态创建的元素绑定事件。

// $("ol li").click(function(){
//	alert(11);	// 传统绑定事件点击动态创建的li不会弹出弹框
// })
$("ol").on("click", "li", function(){
	alert(11);	// on()方法绑定事件点击动态创建的li可以弹出弹框
})
var li = $("<li>我是后来创建的</li>")
$("ol").append(li);

2. 解绑事件

off()方法用来解绑事件。

不跟参数代表解绑element身上的所有事件。

element.off()

加参数代表解绑特定事件。

element.off("click")

解绑事件委托

$("ul").off("click","li");

如果有的事件只想触发一次，可以使用one()来绑定事件。

3. jQuery自动触发事件

前提是已经为元素绑定了事件。

第一种：

$("div").click();

第二种：

$("div").trigger("事件");

第三种：triggerHandle() 不会触发元素的默认行为，比如说文本框的光标闪烁。

$("div").triggerHandle("事件")

4. jQuery事件对象

事件被触发就会有事件对象产生。

element.on(events,[selector],function(event) { })

阻止默认行为：event.preventDefault() 或者 return false;

阻止冒泡：event.stopPropagation();

5. jQuery其他方法

1. jQuery拷贝对象

如果想要把某个对象拷贝（合并）给另外一个对象使用。可以使用$.extend()方法。有冲突会覆盖原来数据。

$.extend([deep], target, obj1, [objN])

deep：可选，true表示深拷贝，默认为false，浅拷贝。
target：是要拷贝的目标对象。
obj1：待拷贝到第一个对象的对象。
objN：待拷贝到第N个对象的对象。
浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象。拷贝后target和obj会指向同一个对象，遇到同名冲突会覆盖target中的数据。
深拷贝把obj里面的数据完全复制一份给目标对象，如果里面有不冲突的属性，会合并到一起。

2. 多库共存

jQuery使用 $作为标识符，随着 j Q u e r y 的流行，其他 j s 库也会用$ 作为标识符，这样一起使用会引起冲突。让jQuery和其他js库不存在冲突，叫做多库共存。

解决方案：

把里面的$符号统一改成jQuery。比如jQuery(“div”)。
用户自己定义，让jQuery释放对$控制权。
```
var mine = jQuery.noConflict();
```
就可以使用mine(“div”)代替$(“div”)了。

3. jQuery插件

使用jQuery插件之前必须先引入jQuery文件

jQuery插件库：http://www.jq22.com/

（推荐）jQuery之家：http://www.hymleaf.com/

使用方法：

查看演示——下载插件——打开解压后的index.html——将css和js文件夹复制到自己的文件夹中——引入文档中的css文件和js文件——复制html文件中的结构——换成自己的图片和内容——根据插件说明更改自己想调的参数

1. 图片懒加载

图片懒加载的意思是：当我们页面滑动到可视区域，再显示图片。图片使用延迟加载可以提高网页下载速度，也可以减轻服务器负载。

实现方法：

jQuery插件库中下载EasyLazyload.js插件
在自己的文件中引入相关js文件。
按照说明复制代码到自己的文档中。

2. 全屏滚动

网址：www.dowebok.com/demo/2014/77/

5. toDoList案例

效果

在这里插入图片描述

todolist.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/todolist.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/todolist.js"></script>
</head>

<body>
    <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加ToDo" required>
        </section>
    </header>
    <section>
        <h2>正在进行 <span id="todocount"></span></h2>
        <ol id="todolist" class="demo-box">
        </ol>
        <h2>已经完成 <span id="donecount"></span></h2>
        <ul id="donelist">
        </ul>
    </section>
    <footer>
        Copyright &copy; 2014 todolist.cn
    </footer>
</body>

</html>

todolist.css

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: rgba(255, 133, 154, 0.897);
}

section ,
footer {
    width: 600px;
    margin: 0 auto;
}

header {
    height: 40px;
    background-color: palevioletred;
}

header label {
    height: 40px;
    float: left;
    color: white;
    line-height: 40px;
    font-size: 18px;
}

header input {
    float: right;
    height: 24px;
    width: 300px;
    margin-top: 7px;
    border-radius: 5px;
    border: 0;
    padding-left: 5px;
}

h2 {
    position: relative;
    margin: 15px 0;
    color: white;
}

ol,
ul {
    list-style: none;
}

.demo-box {
    width: 100%;
}

li {
    height: 30px;
    background-color: palevioletred;
    border-bottom: 1px solid #fff;
    margin-top: 5px;
}

li input,
li p {
    float: left;
    height: 30px;
    line-height: 30px;
    margin-left: 10px;
    color: white;
}

#donelist li input,
#donelist li p {
    color: #666;
    text-decoration: line-through;
}
footer {
    margin-top: 20px;
    /* position: absolute;
    bottom: 10px;
    left: 340px; */
    font-size: 14px;
    color: #666;
    text-align: center;
}

a {
    height: 30px;
    line-height: 30px;
    text-decoration: none;
    color: #fff;
    float: right;
    margin-right: 20px;
    font-size: 12px;
}

input[type="checkbox"]:checked {
    background-color: #fff;
}

#todocount,
#donecount {
    position: absolute;
    right: 5px;
    width: 20px;
    height: 30px;
    background-color: pink;
    font-size: 14px;
    color: white;
    line-height: 30px;
    text-align: center;
    border-radius: 5px;
}

todolist.js

$(function () {
    load();

    // 按下回车：把完整数据存储到本地存储里面
    $("#title").on("keydown", function (event) {
        if (event.keyCode === 13) {
            // 先读取本地存储原来的数据
            var local = getData();
            // 把最新的数据追加给local数组
            local.push({ title: $(this).val(), done: false });
            // 把这个数组存储到本地存储
            saveData(local);
            load();
            $(this).val("添加ToDo");
        }
    })

    // 2. 获取本地存储的数据我们需要把里面的字符串数据转换为对象格式：JSON.parse()
    function getData() {
        var data = localStorage.getItem("todolist");
        if (data !== null) {
            return JSON.parse(data);
        } else {
            return [];
        }
    }

    // 保存本地存储数据
    function saveData(data) {
        // 1. 本地存储里面只能存储字符串数据格式，要把数组对象转换为字符串格式：JSON.stringify()
        localStorage.setItem("todolist", JSON.stringify(data));
    }

    // 渲染加载页面
    function load() {
        // 读取本地存储的数据
        var data = getData();
        // 每次加载前清空ol里的内容
        $("ol,ul").empty();
        // 统计个数
        var todoCount = 0;
        var doneCount = 0;
        // 遍历这个数据
        $.each(data, function (i, n) {
            if (n.done === false) {
                $("ol").prepend("<li><input type='checkbox' id=" + i + "> <p>" + n.title + "</p> <a href='javascript:;' id=" + i + ">×</a> </li>");
                todoCount++;
            } else {
                $("ul").prepend("<li><input type='checkbox' checked='checked' id=" + i + "> <p>" + n.title + "</p> <a href='javascript:;' id=" + i + ">×</a> </li>");
                doneCount++;
            }
        });
        $("#todocount").text(todoCount);
        $("#donecount").text(doneCount);
    }

    // 删除操作
    $("ol,ul").on("click", "a", function () {
        var data = getData();
        // id是自定义属性，用来设置索引号
        var index = $(this).attr("id");
        // 没有办法直接把本地存储中的数据删掉，我们将得到的数据进行修改，然后再将该元素重新存到本地存储中
        // splice(index,n)用于删除数组中元素
        data.splice(index, 1);
        saveData(data);
        load();
    })

    // 正在进行和已完成操作
    $("ul,ol").on("click", "input", function () {
        // 点击之后获取本地存储数据
        var data = getData();
        var index = $(this).attr("id");
        // 修改done属性
        data[index].done = $(this).prop("checked");
        saveData(data);
        load();
    })
})