JavaScript交互式网页设计 • 【第6章 初识jQuery】
全部章节 >>>>
本章目录
6.1 jQuery概述
6.1.1 初识 jQuery
为了解决开发过程中的兼容性问题，产生了许多JavaScript库，目前被频繁使用的JavaScript库包括 jQuery、Prototype、Spry 和 Ext JS
其中使用最广泛的JavaScrip库是jQuery, 是于2006年创建的一个JavaScript库
- 集 JavaScript、CSS、DOM 和 Ajax 于一体的强大框架体系
- 它的主旨是以更少的代码实现更多的功能（Write less,do more）
6.1.2 jQuery 基本功能
jQuery 基本功能
- 访问和操作 DOM 元素
- 对页面事件的处理
- 大量插件在页面中的运用
- 与 Ajax 技术的完美结合
- 大幅提高开发效率
6.1.3 搭建 jQuery 开发环境
- 下载 jQuery 文件库（http://jquery.com）
- 引入 jQuery 文件库
在页面<head></head> 标签对中加入如下代码：
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
示例：单击按钮时，隐藏的 <div> 逐渐放大并显示出来
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn").click(function() {
$("#info").show(2000);//show(2000) 表示用 2 秒显示标签
});
});
</script>
<input type="button" value=" 显示 " id="btn"/>
<div id="info" style= "display:none">
<img src="../img/mobile.jpg" width="350"/>
</div>
6.1.4 编写一个简单的 jQuery 应用
- $(document).ready(function(){ }); 类似JavaScript代码:window.οnlοad=function(){ }
- $(document).ready 在页面框架下载完毕后就执行；而 window.onload 必须在页面全部加载完毕（包括下载图片）后才能执行
- $(document).ready(function(){ }) 可以简写成 $(function(){ })
- $("#btn").click(function(){ }); 使用 click() 方法，将函数绑定到指定元素的 click 事件中，单击按钮时，绑定的函数就会执行
6.1.5 jQuery代码的特点
示例：单击 <h3> 标签时，切换属性值，同时后面的兄弟元素会切换其显示或隐藏状态
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("h3").click(function() {
$(this).toggleClass("highLight").next("ul").toggle();
});
});
</script>
- $符号标志：是JQuery对象的简写形式，$()等效于jQuery()，是jQuery程序的标志
- 隐式循环：当使用jQuery查找符合要求的元素后，无须一一遍历每一个元素，直接通过jQuery命令操作符合要求的元素
- 链式书写：可以将针对于同一个对象多个操作命令写在一个语句中，还可以插入换行和空格
6.1.6 实践练习
6.2 jQuery 基本选择器
6.2.1 jQuery 选择器概述
使用jQuery选择器可以选择页面元素，并生成jQuery对象，能够使用jQuery中的方法。jQuery 对页面元素的选择完全继承了 CSS 选择器的语法规则
6.2.2 基本选择器
基本选择器是由标签 id、class、标签名和多个选择符组成
| 选择器 | 功能 | 返回值 |
| #id | 根据 id 属性值选取元素 | 单个元素 |
| .class | 根据 class 属性值选取元素 | 元素集合 |
| element | 根据给定的标签名选取元素 | 元素集合 |
| * | 选取所有元素，包括 html 和 body | 元素集合 |
| selector1,selector2,…,selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 元素集合 |
示例：使用jQuery 显示元素并设置其样式
<script type="text/javascript">
$(function() {
// 选取 <div> 和 <span> 元素，合并选取
$("div,span").css("display","block");
// 根据 id 属性值选取元素
$("#one").css("color","#f30");
// 根据给定的标签名选取元素
$("span").css("font-size","20px");
// 根据 class 属性值选取元素
$("div.two").css("background-color","#ccc");
$("#one,span").css("border-style","dashed");
});
</script>
<div id="one"> 设置了 div 的 id 属性 </div>
<div class="two"> 设置了 div 的 class 属性 </div>
<span>SPAN</span>
6.2.3 实践练习
6.3 过滤选择器
6.3.1 基本过滤选择器
过滤选择器附加在所有选择器的后面，通过特定的过滤规则来筛选出一部分元素，书写时以冒号（：）开头
过滤选择器可以分为
- 基本过滤选择器
- 内容过滤选择器
- 可见性过滤选择器
- 属性过滤选择器
| 选择器 | 功能 | 返回值 |
| first() 或 :first | 获取第一个元素 | 单个元素 |
| last() 或 :last | 获取最后一个元素 | 单个元素 |
| :not(selector) | 获取除给定选择器之外的所有元素 | 元 素 集 合， 如$("li:not(.title)") 获 取class 不是 title 的 <li> 元素 |
| :even | 获取索引值为偶数的元素，索引号从 0 开始 | 元素集合 |
| :odd | 将每一个选择器匹配到的元素合并后一起返回 | 元素集合 |
| :eq(index) | 获取索引值等于 index 的元素，索引号从 0 开始 | 单个元素，如 $(“li:eq(1)”) 获取索引等于 1 的 <li> 元素 |
| :gt(index) | 获取索引值大于 index 的元素，索引号从 0 开始 | 元素集合，如 $("li:gt(1)") 获取索引大 于但不包括 1 的 <li> 元素 |
| :lt(index) | 获取索引值小于 index 的元素，索引号从 0 开始 | 元素集合，如 $("li:lt(1)") 获取索引小 于但不包括 1 的 <li> 元素 |
| :header | 获取所有标题元素，如 h1~h6 | 元素集合 |
| :animated | 获取正在执行动画效果的元素 | 元素集合 |
示例：使用基本过滤器定位 DOM 元素，改变元素样式
<script type="text/javascript">
$(function() {
$("#btnTitle").click(function() {
// 单独使用过滤选择器，等同于附加在基本选择器 * 的后面
$(":header").css("color","#f00");});
$("#btnEven").click(function() {
// 获取索引值为偶数的 <li> 元素
$("li:even").css("color","#00f");});
$("#btnOdd").click(function() {
// 获取索引值为奇数的 <li> 元素
$("li:odd").css("color","#f93");});
});</script>
6.3.2 内容过滤选择器
内容过滤选择器根据元素中的文字内容或所包含的子元素特征来获取元素
| 选择器 | 功能 | 返回值 |
| :contains(text) | 获取含有文本内容为 text 的元素 | 元素集合 |
| :empty | 获取不包含后代元素或者文本的空元素 | 元素集合 |
| :has(selector) | 获取含有后代元素为 selector 的元素 | 元素集合 |
| :parent | 获取含有后代元素或者文本的非空元素 | 元素集合 |
在 :contains(text) 内容过滤选择器中，如果参数 text 内容出现在匹配元素的任何后代元素中，也认为该元素含有文本内容 text。如果参数 text 使用英文字母，则有大小写的区别
<input>、<img>、<br> 和 <hr> 等标签属于不包含后代元素和文本的空元素
示例：使用内容过滤选择器查找 DOM 元素，改变元素样式
$(function() {
$("#btnContain").click(function() {
// 获取含有文本内容为 A 的 div
$("div:contains('A')").css("background-color","#f00");
});
$("#btnEmpty").click(function() {
$("div:empty").css("background-color","#0f0"); //获取不包含后代元素或文本的div
});
$("#btnHas").click(function() {
$("div:has(span)").css("background-color","#00f"); //获取含有后代元素为span的元素
});
$("#btnParent").click(function() {
//获取含有后代元素或者文本的div元素
$("div:parent").css("background-color","white"); }); });
6.3.3 可见性过滤选择器
可见性过滤选择器根据元素是否可见的特征来获取元素
| 选择器 | 功能 | 返回值 |
| :hidden | 选取不可见元素 | 元素集合，如 $(":hidden") 选取所有隐藏的元素 |
| :visible | 选取可见元素 | 元素集合，如 $(":visible") 选取所有可见的元素 |
不可见元素包括：css 样式中 display 属性值为 none 的元素、type 属性值为 hidden 的 <input> 元素及宽高设置为 0 的元素
示例：使用可见性过滤选择器锁定 DOM 元素，改变元素样式
<script type="text/javascript">
$(function() {
$("#btnShow").click(function() {
$(".pic:hidden").show().addClass("current");
});
$("#btnHidden").click(function() {
$(".pic:visible").hide();
});
});
</script>
<img src="../img/mobile.jpg" class="pic"/>
<p><input type="button" value=" 显示 " id="btnShow"/>
<input type="button" value=" 隐藏 " id="btnHidden"/></p>
6.3.4 属性过滤选择器
属性过滤选择器根据元素的某个属性获取元素，以“[”号开始、以“]”号结束
| 选择器 | 说明 | 返回值 |
| [attribute] | 获取拥有该属性的所有元素，如 $('li[title]') 表示获取所有包含title 属性的 <li> 元素 | 元素集合 |
| [attribute=value] | 获取某属性值为 value 的所有元素，如 $('li[title=test2]') 表示获取所有包含 title 属性且属性值等于 test2 的 <li> 元素 | 元素集合 |
| [attribute!=value] | 获取某属性值不等于 value 的所有元素，如 $('li[title!=test2]') 表示获取所有包含 title 属性且属性值不等于 test2 的 <li> 元素 | 元素集合 |
| [attribute^=value] | 选取属性值以 value 开头的所有元素，如 $('a[href^="mailto:"]') 表示获取所有包含 href 属性，且属性值以 mailto: 开头的 <a> 元素 | 元素集合 |
| [attribute$=value] | 选取属性值以 value 结束的所有元素，如 $('a[href$=".zip"]') 表示获取所有包含 href 属性，且属性值以 .zip 结尾的 <a> 元素 | 元素集合 |
| [attribute*=value] | 选 取 属 性 值 中 包 含 value 的 所 有 元 素， 如 $('a[href*="jquery.com"]') 表示获取所有包含 href 属性且属性值中包含 jquery.com的 <a> 元素 | 元素集合 |
| [selector1][selector2]…[selectorN] | 合并多个选择器，满足多个条件，每选择一次将缩小一次范围，如 $('li[id][title^=test]') 选取所有拥有属性 id 且属性 title 以 test开头的 <li> 元素 | 元素集合 |
示例：使用属性过滤选择器锁定 DOM 元素，全选筛选框
<script type="text/javascript">
$(function() {// 页面加载事件
$("input[type='button']").click(function() {
$("input[name='songs']").attr("checked","checked");
});
});
</script>
<p>
请选择喜欢的歌曲：<br/>
<input type="checkbox" name="songs"/> 小幸运
<input type="checkbox" name="songs"/> 非酋
<input type="checkbox" name="songs"/> 佛系少女
<input type="checkbox" name="songs"/> 醉赤壁
</p>
<input type="button" value=" 全选 "/>
6.3.5 实践练习
6.4 层次选择器和表单选择器
6.4.1 层次选择器
层次选择器通过 DOM 元素之间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻和兄弟关系。层次选择器由两个选择器组合而成
| 名称 | 语法 | 功能 | 返回值 |
| 后代选择器 | selector1 selector2 | 从 selector1 的后代元素里选取 selector2 | 元素集合，如 $(“#nav span”) 表示选取 #nav下所有的<span>元素 |
| 子选择器 | selector1>selector2 | 从 selector1 的子元素里选取 selector2 | 元素集合，如("#nav>span")表示选取 #nav 的子元素<span> |
| 相邻元素选择器 | selector1+selector2 | 从 selector1 后面的第一个 兄弟元素里选取 selector2 | 元素集合，如 $("h2+dl") 表示选取紧邻<h2>元素之后的同辈元素 <dl> |
| 同辈元素选择器 | selector1~selector2 | 从 selector1 后面的所有兄 弟元素里选取 selector2 | 元 素 集 合， 如 $("h2~dl") 表 示 选 取<h2> 元素之后所有的同辈元素<dl> |
selector1 selector2 与 selector1>selector2 所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系
selector1+selector2 可以使用 jQuery 对象的 next() 方法代替
selector1~selector2 从 selector1 后面的所有兄弟元素里选取 selector2，不能获取前面部分，可以使用nextAll() 方法代替。而 siblings() 方法获取全部的相邻元素，不分前后
selector1 selector2 与 selector1:has(selector2) 虽然这两个选择器都要求 selector2 是 selector1 的后代元素，但是前者最终选取的是后代元素，后者最终选取的是拥有这些后代元素的元素
示例：使用层次选择器锁定 DOM 元素
<script type="text/javascript">
$(function() {// 页面加载完毕事件
// 设置标题的颜色
$(":header").css("color","red");
// 设置第一层无序列表的字体颜色
$(":header+ul>li").css("color","green");
// 设置第二层无序列表的字体颜色
$(":header+ul>li>ul>li").css("color","blue");
});
</script>
html代码略
6.4.2 表单选择器
| 选择器 | 功能 | 返回值 |
| :input | 获取 <input><textarea><select><button> 元素 | 元素集合 |
| :text | 获取符合 [type=text] 的 <input> 元素 | 元素集合 |
| :password | 获取符合 [type=password] 的 <input> 元素 | 元素集合 |
| :radio | 获取符合 [type=radio] 的 <input> 元素 | 元素集合 |
| :checkbox | 获取符合 [type=checkbox] 的 <input> 元素 | 元素集合 |
| :image | 获取符合 [type=image] 的 <input> 元素 | 元素集合 |
| :file | 获取符合 [type=file] 的 <input> 元素 | 元素集合 |
| :hidden | 参考“可见性过滤选择器” | 元素集合 |
| :button | 获取 <button> 元素和符合 [type=button] 的 <input> 元素 | 元素集合 |
| :submit | 获取符合 [type=submit] 的 <input> 元素 | 元素集合 |
| :reset | 获取符合 [type=reset] 的 <input> 元素 | 元素集合 |
表单对象属性过滤选择器
表单对象属性过滤选择器也是专门针对表单元素的选择器，它属于过滤选择器的范畴，可以附加在其他选择器的后面，主要功能是对所选择的表单元素进行过滤
| 选择器 | 功能 |
| :enabled | 选取可用的表单元素 |
| :disabled | 选取不可用的表单元素 |
| :checked | 选取被选中的 <input> 元素 |
| :selected | 选取被选中的 <option> 元素 |
示例：使用表单选择器和表单对象属性过滤选择器锁定 DOM 元素
$(function() {// 页面加载完毕事件
$("#pa :button").click(function() {
// 选择器 #pa 后的空格表示获取后代元素
$("#pa :text:enabled").css("border","1px solid red");
});
$("#pb :button").click(function() {
$("#pb :radio:checked").parent().css("background-color","#63c");
});
$("#pc :button").click(function() {
$("#pc :checkbox:checked").parent().css("background-color","#63c");
});
$("#pd :button").click(function() {
var info = " 你最喜欢的球星是："
info += $("#pd :input option:selected").val();
alert(info);
});
});
6.4.3 实践练习
总结:
- jQuery代码的特点：”$”标志、隐式循环、链式书写
- jQuery中基本选择器有“#id”、“.class”、“element”和“*”
- 基本过滤选择器有“:first”、“:last”、“:not”、“:even”、“：odd”、“:eq”、“:gt”、“:lt”、“:header”和“：animated”
- 内容过滤选择器有“：contains”、“:empty”、“:has”和“:parent” 可见性过滤选择器有“：hidden”和“:visible”
- 属性过滤选择器有“[attribute]”、“[attribute=value]”和“ [attribute=!value]”等
- 层次选择器有“selector1 selector2”、“ selector1> selector2”、“ selector1 +selector2”和“ selector1 ~selector2”
- 表单选择器有“:input”、“:text”、“:password”、“:radio”和“:checkbox”等
本文来自博客园，作者：明金同学，转载请注明原文链接：https://www.cnblogs.com/vmuu/p/15663427.html
公众号：【明金同学】