浅学 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

<!DOCTYPEhtml><htmllang="en"><head><metacharset="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 文件 --><scriptsrc="../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 代码：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>jQuery对象和js对象的区别</title><scriptsrc="../static/jquery/jquery-2.1.4.min.js"></script></head><body><divid="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 代码：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>jQuery 常用方法</title><scriptsrc="../static/jquery/jquery-1.11.3.js"></script></head><body><h1id="h1">学习<i>要勤奋</i></h1><inputtype="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 代码：

<htmllang="en"><head><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"><title>jQuery 常用选择器</title><scriptsrc="../static/jquery/jquery-1.11.3.js"></script><styletype="text/css">.selected{background-color: gray;}</style></head><body><divid="msg">使用 ID 选择器获取当前 DIV元素</div><ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li></ul><ulid="myul"><li>item1</li><liclass="selected">item2</li><li>item3</li><liclass="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 代码：

<!DOCTYPEhtml><htmllang="en"><head><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"><title>jQuery 层次选择器</title><scriptsrc="../static/jquery/jquery-1.11.3.js"></script></head><body><ulid="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><inputtype="text"value="text1"/><inputtype="text"value="text2"/><br/><label>LABEL2</label><inputtype="text"value="text3"/><inputtype="text"value="text4"/><br/><label>
        LABEL3
        <inputtype="text"value="text5"/><inputtype="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 代码：

<htmllang="en"><head><metacharset="UTF-8"><title>jQuery 过滤选择器</title><scriptsrc="../static/jquery/jquery-1.11.3.js"></script></head><body><inputtype="hidden"name="id"value="1"><select><optionvalue="1">Flowers</option><optionvalue="2"selected>Gardens</option><optionvalue="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. 标签中绑定点击事件属性

<buttononclick="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 代码：

<htmllang="en"><head><metacharset="UTF-8"><title>jQuery 事件绑定</title><scriptsrc="../static/jquery/jquery-1.11.3.js"></script><scripttype="text/css">
        myBtn {
            background-color: red;}</script></head><body><inputtype="text"placeholder="请输入 6666"/><buttonclass="myBtn">btn</button><buttonclass="myBtn">btn</button><select><optionvalue="">请选择</option><optionvalue="1">跑酷</option><optionvalue="2">跳远</option><optionvalue="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 代码：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>jQuery DOM 操作</title><scriptsrc="../static/jquery/jquery-1.11.3.js"></script></head><body><spanstyle="background-color: blue;color: red;"id="span">SPAN</span><divid="div1"style="background-color: gray;">DIV1</div><divid="div2"style="background-color: green;">DIV2</div><ulid="ul"><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul><inputid="btn"type="button"value="删除我"/><form><fieldset><!-- 练习 1.给页面某元素加子元素。--><legend>内部插入节点(插入子节点)</legend><inputtype="button"value="append"id="append"/></fieldset></form><form><fieldset><!-- 练习 2.给页面某元素加弟弟元素。--><legend>外部插入节点(插入兄弟节点)</legend><inputtype="button"value="after"id="after"/></fieldset></form><form><fieldset><legend>删除节点</legend><!-- 练习 3.删除页面某元素的子孙元素。 --><inputtype="button"value="删除所有子节点"id="empty"/><!-- 练习 4.删除页面某元素。 --><inputtype="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 代码：

<htmllang="en"><head><metacharset="UTF-8"><title>jQuery 属性操作</title><scriptsrc="../static/jquery/jquery-1.11.3.js"></script><styletype="text/css">.other{background-color: orange;font-size: 20px;}.myBtn{background-color: red;}</style></head><body><inputid="btn"type="button"value="点我"/><form><fieldset><legend>属性操作</legend><!-- 练习 1.获取页面某元素的 style 属性值。 --><inputtype="button"value="获取属性值"id="getAttr"/><!-- 练习 2.获取和设置页面某元素的 value 属性值。 --><inputtype="button"value="设置属性值"id="setAttr"/></fieldset></form><form><fieldset><legend>CSS 操作</legend><!-- 练习 3.追加，移除页面某元素的 class 属性值。 --><inputtype="button"value="追加，移除CSS"id="toggleClass"/><!-- 练习 4.获取和设置页面某元素的 checked 属性值。 --><inputtype="button"value="获取checked"id="prop"/><!-- 练习 5.获取页面某元素的 data- 开头的属性值。 --><inputtype="button"value="获取data- 开头的属性值"id="data"/></fieldset></form><inputtype="checkbox"value="1"checkedname="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 代码：

<htmllang="en"><head><metacharset="UTF-8"><title>下拉框回显</title><scriptsrc="../static/jquery/jquery-1.11.3.js"></script></head><body><selectid="s1"><optionvalue="1">选项1</option><optionvalue="2">选项2</option><optionvalue="3">选项3</option><optionvalue="4">选项4</option><optionvalue="5">选项5</option></select><br/><inputtype="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 代码：

<htmllang="en"><head><metacharset="UTF-8"><title>列表移动</title><scriptsrc="../static/jquery/jquery-1.11.3.js"></script></head><body><tableborder="1"><tr><td><selectid="select1"style="width:100px;height:200px"size="10"multiple="multiple"><optionvalue="选项1">选项1</option><optionvalue="选项2">选项2</option><optionvalue="选项3">选项3</option><optionvalue="选项4">选项4</option><optionvalue="选项5">选项5</option><optionvalue="选项6">选项6</option><optionvalue="选项7">选项7</option><optionvalue="选项8">选项8</option><optionvalue="选项9">选项9</option></select></td><tdalign="center"><inputtype="button"onclick="moveSelected('select1','select2')"value="-->"/><br/><inputtype="button"onclick="moveAll('select1','select2')"value="==>"/><br/><inputtype="button"onclick="moveSelected('select2','select1')"value="<--"/><br/><inputtype="button"onclick="moveAll('select2','select1')"value="<=="/></td><td><selectid="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 代码：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>下拉框去重</title><scriptsrc="../static/jquery/jquery-1.11.3.js"></script></head><body><tableborder="1"><tr><td><selectid="s1"style="width:100px;"size="10"multiple="multiple"><optionvalue="1">选项1</option><optionvalue="2">选项2</option><optionvalue="3">选项3</option><optionvalue="4">选项4</option><optionvalue="5">选项5</option></select></td><tdalign="center"><inputtype="button"value="去除重复"onclick="distinct();"/><br/></td><td><selectid="s2"style="width:100px;"size="10"multiple="multiple"><optionvalue="1">选项1</option><optionvalue="3">选项3</option><optionvalue="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>

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

标签： jquery javascript 前端

本文转载自: https://blog.csdn.net/MaShaYaDi/article/details/124781829
版权归原作者 MaShaYaDi 所有，如有侵权，请联系我们删除。

浅学 jQuery

浅学 jQuery

一、什么是 jQuery

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

三、如何使用 jQuery

1、jQuery 源文件介绍：

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

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

4、jQuery 对象

5、jQuery 选择器

1.选择器的作用

2.选择器的组成

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

4.后续学习

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

常用方法实操：

(一)基础选择器

1. id 选择器

2. 元素选择器

3.类选择器

基础选择器实操：

(二)、层次选择器

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

2.层次选择器的使用

层次选择器实操：

(三)、过滤选择器

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

2.过滤选择器的使用

层次选择器实操：

6、jQuery 事件绑定

1、传统的事件绑定

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

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

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

2、 jQuery 事件绑定

jQuery 事件绑定实操：

7、jQuery 常用的 DOM 操作方法

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

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

3. empty 和 remove 方法

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

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

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

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

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

练习1：下拉框回显

练习2：列表移动

练习3：下拉框去重

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

发表评论

“浅学 jQuery”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航