浅学 jQuery

MaShaYaDi

已于 2024-01-01 00:42:24 修改

阅读量541

点赞数 3

分类专栏：浅学 jQuery 快速学习 jQuery 文章标签： jquery javascript 前端

于 2022-05-15 14:39:29 首次发布

本文链接：https://blog.csdn.net/MaShaYaDi/article/details/124781829

版权

浅学 jQuery 同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

快速学习

1 篇文章 0 订阅

订阅专栏

jQuery

1 篇文章 0 订阅

订阅专栏

浅学 jQuery

前言：本文内容较为浅略，建议在有相关 JS、HTML 的基础后进行观看，仅作为预习、复习使用效果较好，如需全面学习仅做辅助学习使用。本文中的练习在浏览器查看时一定要打开 F12/开发者模式来进行观看代码效果！ —— “玛莎鸭弟”

一、什么是 jQuery

是一个 JavaScript 框架。
是轻量级的 js 库，兼容 CSS3，和各种浏览器。
免费、开源的。

[^jQuery 的版本差异]: [1.x : 经典版本,兼容 IE6、7、8]——[2.0 : 改进版本及后续版本,不再支持 IE 浏览器]

二、jQuery 能做什么？为什么要学习 jQuery？

更方便的处理 HTML 、events、实现动画效果、并且方便 AJAX 交互。
提高开发的效率，在操作文档对象、选择 DOM 元素、制作动画效果、使用AJAX 等。

三、如何使用 jQuery

1、jQuery 源文件介绍：

本文使用的 jQuery 版本为：jquery-1.11.3.js

jQuery-1.x.js：jQuery 源文件，学习或 debug 的时候使用。
jQuery-1.x.min.js：jQuery 压缩之后的文件，项目中使用。

在这里插入图片描述

2、创建 jQueryStudy 目录，在 jQueryStudy 目录下创建 static 静态资源目录在其目录下再建 jquery 目录，将 jquery.js 放入对应的目录下。

3、在要使用 jQuery 的 HTML 页面中导入 jquery.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浅学 jQuery</title>
    <!--
        script 是双标签，虽然在标签中间没有内容，但是不能使用 <script src="../" /> 的单标签模式。
        HTML 是超文本标记语言，HTML 的标签大多都是成对的出现的，仅有个别标签为单标签
        如:
            <hr />
            <br />
            <meta />
            <img />
            <link />
            <input />
    -->
    <!-- 绝对路径 将 jquery.js 文件改为对应的 .js 文件 -->
    <!-- <script src="/static/jquery/jquery-1.11.3.js"></script> -->
    <!-- 相对路径 将 jquery.js 文件改为对应的 .js 文件 -->
    <script src="../static/jquery/jquery-1.11.3.js"></script>
</head>
<body>
</body>
</html>

4、jQuery 对象

jQuery 与 JS 不同；document.getElementById() 获取的是 JS 的 DOM 对象，$() 获取的是 jQuery 对象。

通过 jQuery 获取的对象都是 jQuery 对象。
jQuery 对象实际上是对 DOM 对象进行了包装，并强化了相关的方法，使用起来更加便利。
jQuery 对象是包装的 DOM 对象但两者并不能混用。

示例：

在这里插入图片描述

JS 代码：

<script>
    window.onload = function () {
            // 获取 DOM 对象
            var testEle = document.getElementById("test");
            console.log(testEle);
            // $('#test') 获取 id 为 test 的标签元素,并封装成 jQuery 对象
            console.log($('#test'));
            console.log(testEle === $('#test'));
    }
</script>

HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery对象和js对象的区别</title>
    <script src="../static/jquery/jquery-2.1.4.min.js"></script>
</head>
<body>
    <div id="test">jQuery对象和js对象的区别</div>
</body>
</html>

5、jQuery 选择器

1.选择器的作用

jQuery 选择器的 jQuery 类库中的核心之一，jQuery 提供获取页面元素一种语法。这些选择器的用法和 CSS 语法相似，使用 jQuery 类库的方法可以方便快速的定位页面中任意元素，并为其添加效果。

2.选择器的组成

选择器一般由“特殊符号” + “字符串” 组成。如：“#” 代表 id，“mydiv” 是一个字符串，那么 “#mydiv” 代表的是 id 为 mydiv 的元素对象。

3.如何使用选择器获取元素

语法:$("选择器"),如 $("#mydiv").

注意: 如果通过 jQuery 方法获取页面中的元素，没有查找到，返回值不是 null，返回值为一个空数组 [ ]，所以判断是否获取到元素，通过 jQuery.size() != 0 来判断；这样需要注意，jQuery 在 script 中和 $ 是同一个函数；

<script>
    // $ === jQuery 结果为 true
    console.log($ === jQuery);
</script>

4.后续学习

jQuery 的选择器多种多样，若要深入学习请查询 jQuery API 文档。

常用方法实操：

在 jQueryStudy 目录中创建 CommonMethod.html 文件，将下面的 html 代码替换/粘贴进 html 文件中。

根据 div 中的提示，完成练习。优先选择在不看下面 jQuery 代码情况写出练习。

HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 常用方法</title>
    <script src="../static/jquery/jquery-1.11.3.js"></script>
</head>
<body>
    <h1 id="h1">学习<i>要勤奋</i></h1>
    <input type="text" id="username" value="mashayadi"/><br/><br/>
    <div>
        jQuery 常用方法:<br/>
        jQuery对象.size();&nbsp;&nbsp;&nbsp;// 获取 jQuery 中包含元素的个数<br/>
        jQuery对象.val();&nbsp;&nbsp;&nbsp;// 操作元素的 value 属性<br/>
        jQuery对象.html();&nbsp;&nbsp;&nbsp;// 操作元素内的 HTML 代码<br/>
        jQuery对象.text();&nbsp;&nbsp;&nbsp;// 操作元素内的文本，忽略 HTML 标签<br/>
        jQuery对象.css();&nbsp;&nbsp;&nbsp;// 操作元素的 style 属性
    </div>
    <hr/>
    <div>
        <p>
            练习 1：获取 jQuery 中包含 DOM 的个数，比如获取页面上 p 元素的个数
        </p>
        <p>
            练习 2：获取 id 为 username 元素的 value 属性值
        </p>
        <p>
            练习 3：设置 id 为 username 元素的 value 属性值为"mashayadi"
        </p>
        <p>
            练习 4：对比 h1 元素的内容和纯文本的区别
        </p>
        <p>
            练习 5：把 h1 元素内容的颜色改为黄色
        </p>
        <!-- 附加：尝试将 h1 标签中的内容修改为："健康、环保、无公害" -->
    </div>
</body>
</html>

jQuery代码：

<script>
    $(function () {
        // 练习 1：获取 jQuery 中包含 DOM 的个数，比如获取页面上 p 元素的个数
        console.log($('p').size());

        // 练习 2：获取 id 为 username 元素的 value 属性值
        console.log($('#username').val());

        // 练习 3：设置 id 为 username 元素的 value 属性值为"玛莎鸭弟"
        var $ret = $('#username').val('玛莎鸭弟');
        console.log($ret); // 返回的是被修改 value 属性值的 jQuery 对象

        // 练习 4：对比 h1 元素的内容和纯文本的区别
        console.log($('#h1').text());
        console.log($('#h1').html());

        // 练习 5：把 h1 元素内容的颜色改为绿色
        $('#h1').css('color', 'green');
    });
</script>

(一)基础选择器

jQuery 最常用、最简单的选择器。通过元素的 id 、 class 或标签等查找元素。在 html 页面中，每个 id 名称只能只用 0 次或 1 次，class 可以使用 0 次或 n 次；

1. id 选择器

语法：$(‘#myDiv’) 返回值为：单个元素的 jQuery 对象。

**解释：**选中了 html 中 id 为 myDiv 的元素。

2. 元素选择器

语法：$(‘div’) 返回值为：元素的集合

**解释：**选中 html 中的 div 元素，而 div 元素可能是多个，所以是元素的集合。同理可得：其他的标签或选择器若获取到了多个元素对象，会将其封装成一个集合。

3.类选择器

语法：$(‘.myClass’) 返回值为：元素的集合

**解释：**选中 class 属性为 myClass 的元素。

基础选择器实操：

在 jQueryStudy 目录中创建 BaseSelector.html 文件，将下面的 html 代码替换/粘贴进 html 文件中。

根据 div 中的提示，完成练习。优先选择在不看下面 jQuery 代码情况写出练习。

HTML 代码：

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery 常用选择器</title>
    <script src="../static/jquery/jquery-1.11.3.js"></script>
    <style type="text/css">
        .selected {
            background-color: gray;
        }
    </style>
</head>
<body>
    <div id="msg">使用 ID 选择器获取当前 DIV元素</div>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
    </ul>
    <ul id="myul">
        <li>item1</li>
        <li class="selected">item2</li>
        <li>item3</li>
        <li class="selected">item4</li>
    </ul>
    <hr/>
    <div>
        <p>
            练习 1：获取 id 为 msg 的元素的文本内容
        </p>
        <p>
            练习 2：获取所有的 li 元素并打印数量
        </p>
        <p>
            练习 3：获取所有 class 为 selected 的元素，字体颜色改为 red
        </p>
    </div>
</body>
</html>

jQuery 代码：

<script>
    $(function () {
        // 练习 1：获取 id 为 msg 的元素的文本内容
        console.log($('#msg').text());
        
        // 练习 2：获取所有的 li 元素并打印数量
        console.log($("li").size());
        
        // 练习 3：获取所有 class 为 selected 的元素，字体颜色改为 red
        $('.selected').css("color", "red");
    })
</script>

(二)、层次选择器

1.层次选择器解决什么问题？

若想通过 DOM 元素之间的层次关系来获取特定元素，列如：“ ul 下的的 li ”，获取子级元素；还可以获取后代元素、相邻元素、兄弟元素等。层次选择器就可以帮你来完成这些需求。

2.层次选择器的使用

2.1 ancestor descendant 译文：祖先子孙
- 语法：$(‘form input’)
- 解释：选中 form 元素中所有的 input 元素，也就是在给定的祖先元素下的所以后代元素。
2.2 parent > child 译文：父母 > 孩子
- 语法： $(’ form > input ')
- 解释：选中 form 元素下级 input 元素，也就是父元素下的对应子元素。
- /* 在这里可能会产生疑惑，这个选择器和上面一个选择器有什么区别？实践是最好的办法，下面的练习可以有效的解决你的疑惑。 */
2.3 prev + next 译文：上一个 + 下一个
- 语法： $(‘label + input’)
- 解释：选中 label 元素后的 input 元素，也就是紧跟着 prev 元素后的 next 元素。
- /* 这里的上一个、下一个从元素的角度去理解，label 的下一个，input 的上一个 */
2.4 prev ~ siblings 译文：上一个 ~ 兄弟姐妹
- 语法：$(‘label ~ input’)
- 解释：选择 label 元素之后的所有 input 元素，也就是不包含该元素在内的并与该元素是同辈的元素，同辈元素的子孙元素不被匹配。

层次选择器实操：

在 jQueryStudy 目录中创建 HierarchySelector.html 文件，将下面的 html 代码替换/粘贴进 html 文件中。

根据 div 中的提示，完成练习。优先选择在不看下面 jQuery 代码情况写出练习。

html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jQuery 层次选择器</title>
    <script src="../static/jquery/jquery-1.11.3.js"></script>
</head>
<body>
    <ul id="myul">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>
            <ul>
                <li>item1</li>
                <li>item2</li>
                <li>item3</li>
                <li>item4</li>
            </ul>
        </li>
    </ul>

    <label>LABEL1</label>
    <input type="text" value="text1"/>
    <input type="text" value="text2"/>
    
    <br/>
    
    <label>LABEL2</label>
    <input type="text" value="text3"/>
    <input type="text" value="text4"/>
    
    <br/>
    
    <label>
        LABEL3
        <input type="text" value="text5"/>
        <input type="text" value="text6"/>
    </label>
    
    <hr/>
    
    <div>
        <p>
            练习 1：获取所有 ul 下的所有 li 元素，并打印分析结果
        </p>
        <p>
            练习 2：获取 id 为 myul 下的所有子 li 元素，并打印分析结果
        </p>
        <p>
            练习 3：获取紧跟着 label 元素后的 input 元素，并打印分析结果
        </p>
        <p>
            练习 4：获取所有 label 元素后的 input 元素，并打印分析结果
        </p>
    </div>
</body>
</html>

jQuery 代码：

<script>
    $(function () {
        // 练习 1：获取所有 ul 下的所有 li 元素，并打印分析结果
        console.log($('ul li'));
        
        // 练习 2：获取 id 为 myul 下的所有子 li 元素，并打印分析结果
        console.log($('#myul > li'));
        
        // 练习 3：获取紧跟着 label 元素后的 input 元素，并打印分析结果
        console.log($('label + input'));
        
        // 练习 4：获取所有 label 元素后的 input 元素，并打印分析结果
        console.log($('label ~ input'));
    })
</script>

(三)、过滤选择器

1.过滤选择器解决什么问题？

如：查询 input 元素中被 hidden 隐藏的 value 属性值;通过特定的过滤规则来筛选所需要的 DOM 元素，过滤规则与 CSS 中的伪类选择器语法相同。

2.过滤选择器的使用

可见性过滤器：：hidden 匹配所不可见元素，或者type为hidden的元素
- 语法 : $(‘[type=hidden]’)
- 解释 : 选中 type 属性值为 hidden的元素。
表单过滤器： :selected 匹配所有选中的 option
- 语法 : $(‘select option:selected’)
- 解释 : 选中 select 中所有选择中的 option 元素

层次选择器实操：

在 jQueryStudy 目录中创建 FilterSelector.html 文件，将下面的 html 代码替换/粘贴进 html 文件中。

根据 div 中的提示，完成练习。优先选择在不看下面 jQuery 代码情况写出练习。

html 代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 过滤选择器</title>
    <script src="../static/jquery/jquery-1.11.3.js"></script>
</head>
<body>
    <input type="hidden" name="id" value="1">
    <select>
        <option value="1">Flowers</option>
        <option value="2" selected>Gardens</option>
        <option value="3">Trees</option>
    </select>
    <hr/>
    <div>
        <p>
            练习 1：获取隐藏 input 的 value 属性值, 不能使用根据元素名, 也不能通过给元素加 id 属性，再通过 id 选择器找
        </p>
        
        <p>
            练习 2：获取选中的 option
        </p>
    </div>
</body>
</html>

jQuery 代码：

<script>
    $(function () {
        // 练习 1：获取隐藏 input 的 value 属性值, 不能使用根据元素名, 也不能通过给元素加 id 属性，再通过 id 选择器找
        console.log($('[type=hidden]').val());
        
        // 练习 2：获取选中的 option
        console.log($('select option:selected'));
        console.log($('select option:selected').text());
    })
</script>

6、jQuery 事件绑定

1、传统的事件绑定

1. 标签中绑定点击事件属性

<button onclick="clickFun()">点我</button>

2.通过编写 js 给标签事件

<script>
    document.getElementById("btn").onclick = function(){
        console.log("6645")
    };
</script>

为什么要提传统的事件绑定呢？为了给下面 jQuery 事件绑定做出对比，在下面 jQuery 事件绑定中，与 js 不同的 jQuery 可以绑定对应条件的多个元素。

2、 jQuery 事件绑定

查看 jQuery 文档，其中会有很多种事件，本次拿出 click 点击事件、 blur 失去焦点事件、 change 值改变事件作为演示。

click 点击事件
- 语法 : $(‘.myBtn’).click(function () { });
- 解释 : 给 class 属性值为 myBtn 的元素绑定点击事件。
blur 失去焦点事件
- 语法 : $(‘input[type=text]’).blur(function () { })
- 解释 : 给 input 元素中 type 属性值为 text 的元素绑定失去焦点事件。
change 属性值改变事件
- 语法 : $(‘select’).change(function () { })
- 解释 : 给 select 元素绑定值改变事件

jQuery 事件绑定实操：

在 jQueryStudy 目录中创建 Event.html 文件，将下面的 html 代码替换/粘贴进 html 文件中。

根据 div 中的提示，完成练习。优先选择在不看下面 jQuery 代码情况写出练习。

html 代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 事件绑定</title>
    <script src="../static/jquery/jquery-1.11.3.js"></script>
    
    <script type="text/css">
        myBtn {
            background-color: red;
        }
    </script>
</head>
<body>
    <input type="text" placeholder="请输入 6666"/>
    
    <button class="myBtn">btn</button>
    <button class="myBtn">btn</button>
    
    <select>
        <option value="">请选择</option>
        <option value="1">跑酷</option>
        <option value="2">跳远</option>
        <option value="3">滑雪</option>
    </select>
</body>
</html>

jQuery 代码:

<script>
    $(function () {

        // 点击一个按钮打印今天天气很好。
        $('.myBtn').click(function () {
            console.log("今天天气很好");
        })

        // 给输入框绑定失去焦点事件，当触发事件时打印输入框元素的 value 属性值。
        $('input[type=text]').blur(function () {
            console.log($('input[type=text]').val());
        })

        // 给下拉框绑定值改变事件，当出发事件时打印用户选择 option 的 value 属性值。
        $('select').change(function () {
            console.log($('select').val());
        })

    })
</script>

7、jQuery 常用的 DOM 操作方法

1. append 方法往匹配的元素内部追加内容(子级元素)。

语法 : $('#div1').append($("#span"))

解释 : 在 id 为 div1 的元素中添加 id 为 span 的元素。

2. after 方法添加兄弟(同级元素)元素

语法 : $('#div2').after($("#span"));

解释 : 在 id 为 div2 的元素后添加 id 为 span 的元素。

3. empty 和 remove 方法

empty : 删除元素下的所有子元素(包括子元素下的元素);
- 语法 : $('#ul').empty()
- 解释 : 删除 id 为 ul 的元素下所有元素,不包括自己;
remove : 删除节点元素
- 语法 : $('#btn').remove();
- 解释 : 删除 id 为 btn 的元素,包括子元素;

jQuery 常用的 DOM 操作方法实操：

在 jQueryStudy 目录中创建 Event.html 文件，将下面的 html 代码替换/粘贴进 html 文件中。

根据 html 代码中注释的提示，完成练习。优先选择在不看下面 jQuery 代码情况写出练习。

html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery DOM 操作</title>
    <script src="../static/jquery/jquery-1.11.3.js"></script>
</head>
<body>
    <span style="background-color : blue;color: red;" id="span">SPAN</span>
    <div id="div1" style="background-color: gray;">DIV1</div>
    <div id="div2" style="background-color: green;">DIV2</div>

    <ul id="ul">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>

    <input id="btn" type="button" value="删除我"/>

    <form>
        <fieldset>
            <!-- 练习 1.给页面某元素加子元素。-->
            <legend>内部插入节点(插入子节点)</legend>
            <input type="button" value="append" id="append"/>
        </fieldset>
    </form>

    <form>
        <fieldset>
            <!-- 练习 2.给页面某元素加弟弟元素。-->
            <legend>外部插入节点(插入兄弟节点)</legend>
            <input type="button" value="after" id="after"/>
        </fieldset>
    </form>

    <form>
        <fieldset>
            <legend>删除节点</legend>
            <!-- 练习 3.删除页面某元素的子孙元素。 -->
            <input type="button" value="删除所有子节点" id="empty"/>
            
            <!-- 练习 4.删除页面某元素。 -->
            <input type="button" value="删除节点" id="remove"/>
        </fieldset>
    </form>
</body>
</html>

jQuery 代码：

<script>
    $(function () {

        // 练习 1.给页面某元素加子元素。
        $('#append').click(function () {
            $('#div1').append($("#span"));
        })

        // 练习 2.给页面某元素加弟弟元素。
        $('#after').click(function () {
            $('#div2').after($("#span"));
        })

        // 练习 3.删除页面某元素的子孙元素。
        $('#empty').click(function () {
            $('#ul').empty()
        })

        // 练习 4.删除页面某元素。
        $('#remove').click(function () {
            $('#btn').remove();
        })

    })
</script>

8、jQuery 元素属性常用的操作方法

1、 jQuery 元素属性常用的操作方法

css
val
addClass，removeClass
prop
data
attr

jQuery 元素属性常用的操作方法实操：

在 jQueryStudy 目录中创建 Attr.html 文件，将下面的 html 代码替换/粘贴进 html 文件中。

根据 html 代码中注释的提示，完成练习。优先选择在不看下面 jQuery 代码情况写出练习。

html 代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 属性操作</title>
    <script src="../static/jquery/jquery-1.11.3.js"></script>
    
    <style type="text/css">
        .other {
            background-color: orange;
            font-size: 20px;
        }

        .myBtn {
            background-color: red;
        }
    </style>
</head>
<body>
    <input id="btn" type="button" value="点我"/>
    
    <form>
        <fieldset>
            <legend>属性操作</legend>
            <!-- 练习 1.获取页面某元素的 style 属性值。 -->
            <input type="button" value="获取属性值" id="getAttr"/>
            <!-- 练习 2.获取和设置页面某元素的 value 属性值。 -->
            <input type="button" value="设置属性值" id="setAttr"/>
        </fieldset>
    </form>

    <form>
        <fieldset>
            <legend>CSS 操作</legend>
            <!-- 练习 3.追加，移除页面某元素的 class 属性值。 -->
            <input type="button" value="追加，移除CSS" id="toggleClass"/>
            <!-- 练习 4.获取和设置页面某元素的 checked 属性值。 -->
            <input type="button" value="获取checked" id="prop"/>
            <!-- 练习 5.获取页面某元素的 data- 开头的属性值。 -->
            <input type="button" value="获取data- 开头的属性值" id="data"/>
        </fieldset>
    </form>

    <input type="checkbox" value="1" checked name="gender" id="gender" data-option='{"name" : "蒋干"}' style="color: red; background: aqua" class="myBtn other"> 男
</body>
</html>

jQuery 代码:

<script>
    $(function () {
        // 练习 1.获取页面某元素的 style 属性值。
        $('#getAttr').click(function () {
            console.log($('#gender').attr('style'));
        });
        
        // 练习 2.获取和设置页面某元素的 value 属性值。
        var text;
        $('#setAttr').click(function () {
            console.log(text = $('#btn').val());
            $('#btn').val($('#setAttr').val());
            $('#setAttr').val(text);
        });
        
        // 练习 3.追加，移除页面某元素的 class 属性值。
        $('#toggleClass').click(function () {
            $('#btn').toggleClass("other");
        });
        
        // 练习 4.获取和设置页面某元素的 checked 属性值。
        var toggleProp;
        $('#prop').click(function () {
            console.log(toggleProp = $('#gender').prop("checked"));
            $('#gender').prop("checked", !toggleProp);
        });
        
        // 练习 5.获取页面某元素的 data- 开头的属性值。
        $('#data').click(function () {
            console.log($('#gender').data("option"));
            console.log($('#gender').attr("data-option"));
        })
    })
</script>

练习(练习中不会有解释，请尝试自行描述)：

练习1：下拉框回显

在 jQueryStudy 目录中创建 Echo.html 文件，将下面的 html 代码替换/粘贴进 html 文件中。

优先选择在不看下面 jQuery 代码情况写出练习。

html 代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉框回显</title>
    <script src="../static/jquery/jquery-1.11.3.js"></script>
</head>
<body>
    <select id="s1">
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <option value="3">选项3</option>
        <option value="4">选项4</option>
        <option value="5">选项5</option>
    </select>
    
    <br/>
    
    <input type="button" value="回显第3个选项" onclick="echo();"/><br/>
</body>
</html>

jQuery 代码：

<script>
    echo = function () {
        $(function () {
            // $('#s1').val(3);
            $('#s1 > option:eq(2)').prop("selected", true);
        })
    }
</script>

练习2：列表移动

在 jQueryStudy 目录中创建 Select.html 文件，将下面的 html 代码替换/粘贴进 html 文件中。

优先选择在不看下面 jQuery 代码情况写出练习。

HTML 代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表移动</title>
    <script src="../static/jquery/jquery-1.11.3.js"></script>
</head>
<body>
    <table border="1">
        <tr>
            <td>
                <select id="select1" style="width:100px;height:200px" size="10" multiple="multiple">
                    <option value="选项1">选项1</option>
                    <option value="选项2">选项2</option>
                    <option value="选项3">选项3</option>
                    <option value="选项4">选项4</option>
                    <option value="选项5">选项5</option>
                    <option value="选项6">选项6</option>
                    <option value="选项7">选项7</option>
                    <option value="选项8">选项8</option>
                    <option value="选项9">选项9</option>
                </select>
            </td>
            <td align="center">
                <input type="button" onclick="moveSelected('select1','select2')" value="-->"/><br/>
                <input type="button" onclick="moveAll('select1','select2')" value="==>"/><br/>
                <input type="button" onclick="moveSelected('select2','select1')" value="<--"/><br/>
                <input type="button" onclick="moveAll('select2','select1')" value="<=="/>
            </td>
            <td>
                <select id="select2" style="width:100px;height:200px" size="10" multiple="multiple"></select>
            </td>
        </tr>
    </table>
</body>
</html>

jQuery 代码：

<script>
    $(function () {
        
        moveAll = function (srcId, targetId) {
            $('#' + targetId).append($('#' + srcId + ' > option'));
        };

        moveSelected = function (srcId, targetId) {
            $('#' + targetId).append($('#' + srcId + ' > option:selected'));
        };
        
    })
</script>

练习3：下拉框去重

在 jQueryStudy 目录中创建 Select.html 文件，将下面的 html 代码替换/粘贴进 html 文件中。

优先选择在不看下面 jQuery 代码情况写出练习。 jQuery 代码中并不是最优方案，

这个练习中出现过上文未介绍的方法及参数，在下面的代码块中快速学习并应用吧！

<script>
    $('#s1 option').each(function (){
        <!-- each 方法可以遍历获取到的元素 -->
        // arguments 打印 arguments 可以查看，当前方法的参数
        console.log(arguments);
    })
</script>

HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉框去重</title>
    <script src="../static/jquery/jquery-1.11.3.js"></script>
</head>
<body>
    <table border="1">
        <tr>
            <td>
                <select id="s1" style="width:100px;" size="10" multiple="multiple">
                    <option value="1">选项1</option>
                    <option value="2">选项2</option>
                    <option value="3">选项3</option>
                    <option value="4">选项4</option>
                    <option value="5">选项5</option>
                </select>
            </td>
            <td align="center">
                <input type="button" value="去除重复" onclick="distinct();"/><br/>
            </td>
            <td>
                <select id="s2" style="width:100px;" size="10" multiple="multiple">
                    <option value="1">选项1</option>
                    <option value="3">选项3</option>
                    <option value="5">选项5</option>
                </select>
            </td>
        </tr>
    </table>
</body>
</html>

jQuery 代码：

<script>
    distinct = function () {
        $('#s1 option').each(function (index1, opt1Ele) {
            // arguments 打印当前方法的参数
            console.log(arguments);
            var $opt1Ele = $(opt1Ele);
            $('#s2 option').each(function (index2, opt2Ele) {
                var $opt2Ele = $(opt2Ele);
                if ($opt1Ele.val() == $opt2Ele.val()) {
                    $opt1Ele.remove();
                }
            })
        })
    }
</script>

本文到此结束了，篇幅所限全文内容粗浅，感谢阅读。 ——“玛莎鸭弟”

MaShaYaDi

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
浅学 jQuery

浅学 jQuery前言：本文内容较为浅略，建议在有相关 JS、HTML 的基础后进行观看，仅作为预习、复习使用效果较好，如需全面学习仅做辅助学习使用。本文中的练习在浏览器查看时一定要打开 F12/开发者模式来进行观看代码效果！ —— “玛莎鸭弟”
复制链接

扫一扫