BCSP-玄子前端开发之JavaScript+jQuery入门CH10_jQuery基础

BCSP-玄子前端开发之JavaScript+jQuery入门CH10_jQuery基础

4.10 jQuery

4.10.1 jQuery 简介

jQuery是流行的JavaScript程序库，是对JavaScript对象和函数的封装

设计思想是write less, do more

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gx0f3UFO-1682307309412)(./assets/image-20230423230915569.png)]

4.10.2 jQuery 能做什么

• 访问和操作DOM元素
• 控制页面样式
• 对页面事件进行处理
• 扩展新的jQuery插件
• 与Ajax技术完美结合

jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

4.10.3 初识 jQuery

获取页面中所有选中的复选框，计算并在控制台输出其数量

// 代码1：JavaScript实现
var length = 0;
var checkboxs = document.getElementsByTagName("input");
for (var i = 0; i < checkboxs.length; i++) {
    if (checkboxs[i].type == 'checkbox' && checkboxs[i].checked) {
        length += 1;
    }
}
console.log(length);
// 代码2：jQuery实现
$( function () {
    var count = $("input[type='checkbox']:checked").length;
    console.log(count);
})

4.10.4 jQuery 的优势

• 轻量级
• 强大的选择器
• 出色的DOM封装
• 可靠的事件处理机制
• 出色的浏览器兼容性
• 使用链式操作、隐式迭代简化编程
• 丰富的插件支持
• 完善的文档
• 开源
• ……

4.11 jQuery 下载

4.11.1下载官网

进入jQuery官网：https://jquery.com

jQuery库分开发版和发布版

类型	文件	说 明
开发版	jquery-版本号.js	完整无压缩版本，主要用于测试、学习和开发
发布版	jquery-版本号.min.js	经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目

4.11.2 引入 jQuery

<script src="js/jquery-3.5.1.js" type="text/javascript"></script>

4.11.3 查看 jQuery 版本

可以通过在浏览器控制台中输入$.fn.jquery，查看引入的jQuery版本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nDidFB47-1682307309414)(./assets/image-20230423231305170.png)]

4.11.4 挂载 jQuery

可以使用CDN（Content Delivery Network，内容分发网络）的形式载入jQuery

• 使用和维护更为方便
• 可以利用减少加载时间

// CDNJS
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
// Staticfile CDN
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
// BootCDN
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
// Microsoft CDN
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.js"></script>
// Google CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

4.12 jQuery基本语法

通过jQuery实现在页面加载完成后，在浏览器控制台中输出“Hello,jQuery!”

<script src="jquery.js" type="text/javascript"></script>
<script>
    $( document ).ready( function () {
        console.log("Hello,jQuery!");
    });
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MAxUIcHF-1682307309415)(./assets/image-20230423231514621.png)]

4.12.1 $(document).ready()

• 实际开发中，通常使用ready()方法实现在页面加载后执行操作
• $(document).ready()与window.onload类似，但也有区别

比较项	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后（包括图片、视频、flash等）才能执行	网页中所有DOM文档结构绘制完毕后即刻执行，与DOM元素关联的内容（图片、视频、flash等）可能并没有加载完
编写次数	同一页面不能同时编写多个	同一页面能同时编写多个
简化写法	无	$( function() { // 执行代码} ) ;

4.12.2 jQuery语法结构

$( selector ).action(); 

• 工厂函数 $()：等同于jQuery()，将DOM对象转化为jQuery对象
• 选择器 selector：获取需要操作的DOM元素
• 方法 action()：jQuery中提供的方法，对元素进行操作，根据方法的作用可以划分为
  • 事件处理方法
  • 动画方法
  • HTML/CSS方法
  • 遍历方法
  • Ajax方法
  • 杂项方法

4.12.3 DOM对象和jQuery对象

DOM对象：直接使用JavaScript获取的节点对象

var objDOM = document.getElementById("title");
var objHTML = objDOM.innerHTML;  

jQuery对象：使用jQuery包装DOM对象后产生的对象，能够使用jQuery中的方法

var $objJQuery = $("#title");
var objHTML = $objJQuery.html();

DOM对象和jQuery对象的方法不能混用

4.13 jQuery选择器

jQuery选择器类似于CSS选择器，用来选取网页中的元素

jQuery选择器功能强大，种类也很多

• 类CSS选择器

  • 基础选择器
  • 层次选择器

• 过滤选择器

  • 基础过滤选择器
  • 属性过滤选择器

• 表单选择器

4.13.1 基础选择器

基础选择器包括ID选择器、类选择器、标签选择器、全局选择器和并集选择器

名称	语法构成	描述	示例
ID选择器	#id	根据给定的id匹配元素	$(“#title”)选取id为title的元素
类选择器	.class	根据给定的class匹配元素	$(“.title”)选取所有class为title的元素
标签选择器	element	根据给定的标签名匹配元素	$(“h2” )选取所有h2元素
全局选择器	*	匹配所有元素	$(“*” )选取所有元素
并集选择器	selector1,selector2,…, selectorN	将每一个选择器匹配的元素合并后一起返回	$(“div,p,.title” )选取所有div、p和拥有class为title的元素

4.13.2 层次选择器

层次选择器通过DOM元素之间的层次关系来获取元素

名称	语法构成	描述	示例
后代选择器	anc dsct	选取ancestor元素里的所有descendant（后代）元素	$(“#menu span”)选取#menu下的元素
子选择器	parent>child	选取parent元素下的child（子）元素	$(“#menu>span”)选取#menu的子元素
相邻元素选择器	prev+next	选取紧邻prev元素之后的next元素	$(“h2+dl”)选取紧邻 元素之后的同辈元素
同辈元素选择器	prev~sibings	选取prev元素之后的所有siblings元素	$(“h2~dl”)选取 元素之后所有的同辈元素

4.13.3 过滤选择器

通过特定的过滤规则来筛选出所需的元素

主要分类

• 基本过滤选择器
• 内容过滤选择器
• 可见性过滤选择器
• 子元素过滤选择器
• 属性选择器
• 表单选择器

基本过滤选择器

语法	描述	示例
:first	选取第一个元素	$(“li:first”)选取所有 元素中的第一个 元素
:last	选取最后一个元素	$(“li:last”)选取所有 元素中的最后一个 元素
:not(selector)	选取去除所有与给定选择器匹配的元素	$(“li:not(.three)”)选取class不是three的 元素
:even	选取索引是偶数的所有元素（index从0开始）	$(“li:even”)选取所有 元素中索引值是偶数的 元素
:odd	选取索引是奇数的所有元素（index从0开始）	$(“li:odd”)选取所有 元素中索引值是奇数的 元素

语法	描述	示例
:eq(index)	选取索引等于index的元素（index从0开始）	$(“li:eq(1)”)选取索引等于1的 元素
:gt(index)	选取索引大于index的元素（index从0开始）	$(“li:gt(1)”)选取索引大于1的 元素
:lt(index)	选取索引小于index的元素（index从0开始）	$(“li:lt(1)”)选取索引小于1的 元素
:header	选取所有标题元素，如h1~h6	$(“:header”)选取网页中所有标题元素
:focus	选取当前获取焦点的元素	$(“:focus”)选取当前获取焦点的元素
:animated	选择所有动画	$(“:animated”)选取当前所有动画元素

属性过滤选择器

属性过滤选择器通过HTML元素的属性来选择元素

语法构成	描述	示例
[attribute]	选取包含给定属性的元素	$(“[href]”)选取含有href属性的元素
[attribute=value]	选取等于给定属性是某个特定值的元素	$(“[href = ‘#’]”)选取href属性值为“#”的元素
[attribute!=value]	选取不等于给定属性是某个特定值的元素	$(“[href != ‘#’]”)选取href属性值不为“#”的元素
[attribute^=value]	选取给定属性是以某些特定值开始的元素	$(“[href ^= ‘en’]”)选取href属性值以en开头的元素
[attribute$=value]	选取给定属性是以某些特定值结尾的元素	$(“[href $= ‘.jpg’]”)选取href属性值以.jpg结尾的元素
[attribute*=value]	选取给定属性是以包含某些值的元素	$(“[href *= ‘txt’]”)选取href属性值中含有txt的元素

4.13.4 注意事项

特殊符号的转义

<div id="id#a">aa</div>
<div id="id[2]">cc</div>

获取以上两个元素的选择器

$("#id\\#a");
$("#id\\[2\\]");

选择器中的空格

选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果

var $t_a = $(".test :hidden"); // 带空格的jQuery选择器
// 选取class为“test”的元素内的所有隐藏元素

var $t_b = $(".test:hidden");  // 不带空格的jQuery选择器
// 选取class为“test”的隐藏元素

4.14 jQuery让渡$操作符

jQuery不是唯一使用 $ 的脚本库，项目中有其他同样使用 $ 的脚本库时就会引起冲突

// Prototype的 $ 会覆盖jQuery的 $
<script type="text/javascript" src="../js/jquery.min.js" />
<script type="text/javascript" src="../js/prototype.js" />
// 或者
// jQuery的 $ 会覆盖Prototype的 $
<script type="text/javascript" src="../js/prototype.js" />
<script type="text/javascript" src="../js/jquery.min.js" />

jQuery定义了jQuery.noConflict()方法

jQuery.noConflict(); // 让渡$使用权，后续jQuery代码使用jQuery代替$
jQuery( document ).ready( … );
// 或者重新指定一个替代符号：
var  $j = jQuery.noConflict(); // 让渡$使用权，并指定用 $j 代替$
$j( document ).ready( … );

放弃对$的使用权改变了jQuery的编码风格，烦琐且不利于重用已有代码

jQuery.noConflict(); // 让渡$使用权，其他脚本库可以使用$
jQuery( document ).ready( function( $ ) {
    // 在这里继续使用$编写jQuery代码
    $( "#show" ).click( … );
} );

jQuery.noConflict(); // 让渡$使用权，其他脚本库可以使用$
( function( $ ) {
    // 在这里继续使用$编写jQuery代码
    $( document ).ready( function() {
        $( "#show" ).click( … );
    } );
} )( jQuery );

---

BCSP-玄子前端开发之JavaScript+jQuery入门CH10_jQuery基础