jQuery框架快速入门

北海怪兽Monster

已于 2022-12-16 15:45:05 修改

阅读量302

点赞数

分类专栏：前端文章标签： jquery

于 2020-06-28 10:01:54 首次发布

本文链接：https://blog.csdn.net/m0_48639280/article/details/106993116

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

jQuery快速入门

jQuery介绍

jQuery 是一个 JavaScript 库。
所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就
是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了 JavaScript 编程。
jQuery 官网：https://www.jquery.com

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Duls6EEV-1593309427067)(C:\Users\肖绍霆\AppData\Roaming\Typora\typora-user-images\1592980796247.png)]$

将原生JavaScript类比为楼梯，那么jQuery就是电梯

jQuery基本语法

JS对象和jQuery对象转换

jQuery 本质上虽然也是 JS，但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery 对象，而不是
JS 方式获得的 DOM 对象，二者的 API 方法不能混合使用，若想使用对方的 API，需要进行对象的转换。

JS 的 DOM 对象转换成 jQuery 对象

$(JS的DOM对象)
jQuery对象转换成JS对象

jQuery对象[索引]

jQuery对象.get(索引)；

jQuery的事件

在 jQuery 中将事件封装成了对应的方法。去掉了 JS 中的 .on 语法

常见的事件

事件名	说明
load	当页面或图像被加载完成
submit	当表单提交时触发该事件
click	鼠标单击事件
dbclick	鼠标双击事件
blur	元素失去焦点
focus	元素获得焦点
change	用户改变域的内容

事件的绑定和解绑

绑定事件

jQuery对象.on(事件名称 , 匿名函数)
解绑事件

jQuery对象 . off(事件名称)

如果不传入事件名称，则解绑该对象的所有事件

遍历

方式一：传统方式

for(let i = 0 ; i < 容器对象长度 ; i++ ){

执行功能

}

方式二：对象 . each()方法

容器对象 . each(function(index , ele){

执行功能

});

方式三：$ . each() 方法

$.each(容器对象，function(index , ele){

执行功能；

});

方式四：for of 语句

for(ele of 容器对象){

执行功能

}

jQuery选择器

基本选择器

选择器：类似于 CSS 的选择器，可以帮助我们获取元素。
例如：id 选择器、类选择器、元素选择器、属性选择器等等。
jQuery 中选择器的语法：$();

基本选择器：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TZ5LzuNe-1593309427069)(C:\Users\肖绍霆\AppData\Roaming\Typora\typora-user-images\1593149017323.png)]$

层级选择器：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FYUMwzAw-1593309427070)(C:\Users\肖绍霆\AppData\Roaming\Typora\typora-user-images\1593149065802.png)]$

属性选择器：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2wE4cjUo-1593309427072)(C:\Users\肖绍霆\AppData\Roaming\Typora\typora-user-images\1593149102989.png)]$

过滤选择器：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TVWrfZOB-1593309427074)(C:\Users\肖绍霆\AppData\Roaming\Typora\typora-user-images\1593149135391.png)]$

表单属性选择器：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kPD2Oman-1593309427075)(C:\Users\肖绍霆\AppData\Roaming\Typora\typora-user-images\1593149166890.png)]$

jQuery DOM

操作文本

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cJlY9fPm-1593309427075)(C:\Users\肖绍霆\AppData\Roaming\Typora\typora-user-images\1593149228352.png)]$

html可以解析标签，text()方法是纯文本的方法，不会解析标签

操作对象

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U9MXmh30-1593309427076)(C:\Users\肖绍霆\AppData\Roaming\Typora\typora-user-images\1593167853596.png)]$

操作样式

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Okp2ZwHo-1593309427076)(C:\Users\肖绍霆\AppData\Roaming\Typora\typora-user-images\1593167882274.png)]$

操作属性

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fbva1AUr-1593309427077)(C:\Users\肖绍霆\AppData\Roaming\Typora\typora-user-images\1593167901893.png)]$

prop多用于设置布尔类型的属性值

复选框Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复选框</title>
</head>
<body>
    <table id="tab1" border="1" width="800" align="center">
        <tr>
            <th style="text-align: left">
                <input style="background:lightgreen" id="selectAll" type="button" value="全选">
                <input style="background:lightgreen" id="selectNone" type="button" value="全不选">
                <input style="background:lightgreen" id="reverse" type="button" value="反选">
            </th>
    
            <th>分类ID</th>
            <th>分类名称</th>
            <th>分类描述</th>
            <th>操作</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>1</td>
            <td>手机数码</td>
            <td>手机数码类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>2</td>
            <td>电脑办公</td>
            <td>电脑办公类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>3</td>
            <td>鞋靴箱包</td>
            <td>鞋靴箱包类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" class="item"></td>
            <td>4</td>
            <td>家居饰品</td>
            <td>家居饰品类商品</td>
            <td><a href="">修改</a>|<a href="">删除</a></td>
        </tr>
    </table>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //全选
    //1. 为全选按钮绑定单击事件
    $("#selectAll").click(function(){
        //2. 获取所有的商品项复选框元素，为其添加checked属性，属性值为true
        $(".item").prop("checked",true);
    });

    //全不选
    //1. 为全不选按钮绑定单击事件
    $("#selectNone").click(function(){
        //2. 获取所有的商品项复选框元素，为其添加checked属性，属性值为false
        $(".item").prop("checked",false);
    });

    //反选
    //1. 为反选按钮绑定单击事件
    $("#reverse").click(function(){
        //2. 获取所有的商品项复选框元素，为其添加checked属性，属性值是目前相反的状态
        let items = $(".item");
        items.each(function(){
            $(this).prop("checked",!$(this).prop("checked"));
        });
    });
</script>
</html>