初识 jQuery基础Day 2—— 笔记整理 +课后练习 ×2

最新推荐文章于 2023-04-25 01:06:09 发布

UndeFIned丶

最新推荐文章于 2023-04-25 01:06:09 发布

阅读量281

点赞数

分类专栏： JavaScript学习文章标签： js

Atuthor:Chen.orange

本文链接：https://blog.csdn.net/weixin_46313446/article/details/106363644

版权

JavaScript学习专栏收录该内容

36 篇文章 8 订阅

订阅专栏

本文详细介绍了jQuery的基础操作，包括属性操作的prop()、attr()、data()，文本属性值的html()、text()、val()，以及元素遍历、创建、添加和删除的方法。通过实例解析了jQuery如何进行元素操作和数据缓存。

摘要由CSDN通过智能技术生成

文章目录
一. jQuery 属性操作
   1 . 元素固有属性值 prop()
   2 . 元素自定义属性值 attr()
   3. 数据缓存 data()
二. jQuery 文本属性值
   1 . jQuery内容文本值
三. jQuery 元素操作
   1 . 遍历元素
   2 . 创建、添加、删除

一. jQuery 属性操作

jQuery 常用属性操作有三种：prop() / attr() / data() ;

1. 元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如元素里面的 href ，比如元素里面的 type。

在这里插入图片描述

注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。

2. 元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index =“1”。

语法

在这里插入图片描述
注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）

3. 数据缓存 data()

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

语法
在这里插入图片描述
注意：同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。

二. jQuery 文本属性值

jQuery的文本属性值常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。

1. jQuery内容文本值

常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作。

语法
在这里插入图片描述
注意：html() 可识别标签，text() 不识别标签。

三. jQuery 元素操作

jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。

1. 遍历元素

jQuery 隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。

语法1

在这里插入图片描述
注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。
语法2

在这里插入图片描述
注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。

2. 创建、添加、删除

jQuery方法操作元素的创建、添加、删除方法很多，则重点使用部分，如下：

语法总和

在这里插入图片描述

练习题部分：
移动元素：
在这里插入图片描述


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        select {
            width: 200px;
            height: 300px;
            font-size: 22px;
            background-color: #80ff45;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(window).ready(function () {
            //需求1：点击前两个按钮，一侧的所有option移动到另一侧的select标签中;
            //需求2：点击后两个按钮，一侧的所有option中"被选中"的全部移动到另一侧的select标签中;


            //以前我们要一把一把操作需要借助for循环;有了jQuery之后，就不用for循环;
            //需求1：点击前两个按钮，一侧的所有option移动到另一侧的select标签中;
            $("button").eq(0).click(function () {
                //左侧所有option全部移动到右侧select中(不用for循环)
                $("#sel2").append($("#sel1>option"));
            });
            $("button").eq(1).click(function () {
                //右侧所有option全部移动到左侧select中(不用for循环)
                $("#sel1").append($("#sel2>option"));
            });

            //需求2：点击后两个按钮，一侧的所有option中"被选中"的全部移动到另一侧的select标签中;
                    //(:selected)
            $("button").eq(2).click(function () {
                //左侧所有option全部移动到右侧select中(不用for循环)
                $("#sel2").append($("#sel1>option:selected"));
            });
            $("button").eq(3).click(function () {
                //右侧所有option全部移动到左侧select中(不用for循环)
                $("#sel1").append($("#sel2>option:selected"));
            });


            //优化封装;
//            function fn(str1,str2) {
//                //右侧所有option全部移动到左侧select中(不用for循环)
//                $(str1).append($(str2));
//            }
        });
    </script>
</head>
<body>

    <select name="" id="sel1" size="4" multiple>
        <option value="">香蕉</option>
        <option value="">大鸭梨</option>
        <option value="">苹果</option>
        <option value="">大西瓜</option>
    </select>

    <button>&gt;&gt;&gt;</button>
    <button>&lt;&lt;&lt;</button>
    <button>&gt;</button>
    <button>&lt;</button>

    <select name="" id="sel2" size="4" multiple></select>




</body>
</html>

2.全选按钮绑定事件
在这里插入图片描述

 <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(document).ready(function() {
            //需求1: 点击上面的input，下面所有input的checked和上面的保持一致;
            //需求2: 点击下面的每一个input，下面所有input被选中的个数为4个上面才被选中，否则不被选中;


            //需求1: 点击上面的input，下面所有input的checked和上面的保持一致;
            $("#j_cbAll").click(function() {
                $("#j_tb input").prop("checked", $("#j_cbAll").prop("checked"));
            });
            //需求2: 点击下面的每一个input，下面所有input被选中的个数为4个上面才被选中，否则不被选中;
            $("#j_tb input").click(function() {
                var bool = $("#j_tb input:checked").length === 4;
                $("#j_cbAll").prop("checked", bool);
            });
        });
    </script>