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库分开发版和发布版

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类似，但也有区别

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选择器、类选择器、标签选择器、全局选择器和并集选择器

4.13.2 层次选择器

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

4.13.3 过滤选择器

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

主要分类

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

基本过滤选择器

属性过滤选择器

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

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基础