JavaWeb笔记之前端开发JQuery

2023-12-21 17:35:31
? ?

一、引言

1.1 概述
jQuery是一个快速、简洁的JavaScript代码库。jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的 JavaScript操作方式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
??

1.2 特点
具有独特的链式语法。
支持高效灵活的CSS选择器。
拥有丰富的插件。
兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
??
1.3 优点
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。很多大公司都在使用 jQuery， 例如：Google、Microsoft、IBM、Netflix
? ? ?

二、安装

2.1 直接引用
从 jQuery.com 官网或从GitHub下载合适版本（本课程使用1.12.4版本，兼容性更好，最新版本为3.x），放入服务器的合适目录中，在页面中直接引用。
有两个版本的 jQuery 可供下载：
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，便于可读）。
jQuery 库是一个 JavaScript 文件，使用 HTML 的 < script src="">< /script> 标签引用。 
<head>
    <script src="jquery-1.12.2.min.js"></script>
</head>
? ?
2.2 CDN引用

2.2.1 什么是CDN
CDN的全称是Content Delivery Network，即内容分发网络 , 使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。
? ?
2.2.2 常见 CDN
百度 CDN 
<head>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
</head>
? ?
新浪 CDN 
<head>
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
    </script>
</head>
? ?
Google CDN 
<head>
    <script
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
</head>
? ?
Microsoft CDN 
<head>
    <script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
    </script>
</head>
??

三、语法

3.1 基本使用
$(匿名函数)：表示页面DOM加载完毕，则执行，比onload事件执行早，并且可以写多个。$是jQuery函数的简写。 
<html>
    <head>
        <script src="jquery-1.12.2.min.js"></script>
    </head>
</html>
<body>
    <script>
        $(function(){
            alert("欢迎使用jQuery1");
        });
        $(function(){
            alert("欢迎使用jQuery2");
        })
    </script>
</body>
? ??
$(selector).action()：通过选取 HTML 元素，并对选取的元素执行某些操作。
选择符（selector）表示"查找" HTML 元素。
jQuery 的 action() 执行对元素的操作。 
- $(this).hide() - 隐藏当前元素
- $("p").hide() - 隐藏所有 <p> 元素
- $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
- $("#test").hide() - 隐藏所有 id="test" 的元素
<html>
    <head>
        <script src="jquery-1.12.2.min.js"></script>
    </head>
</html>
<body>
    <p>窗前明月光</p>
    <p>疑是地上霜</p>
    <p>举头望明月</p>
    <p>低头思故乡</p>
    <script>
        $("p").hide();
        $("p.test").hide();
        $("#test").hide();
    </script>
</body>

? ?

3.2 选择器
元素选择器：jQuery 元素选择器基于元素名选取元素。
示例：在页面中选取所有元素。 
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});
? ?
id选择器：jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下： 
$(document).ready(function(){
    $("button").click(function(){
        $("#test").hide();
    });
});
? ?
class选择器：jQuery 类选择器可以通过指定的 class 查找元素。
语法如下： 
$(document).ready(function(){
    $("button").click(function(){
        $(".test").hide();
    });
});
??
所有选择器 $("*")
层次选择器

? ? ?
过滤选择器

??
内容过滤选择器

? ??
可见性过滤选择器

? ??
属性选择器

??
子元素过滤选择器

文章来源:https://blog.csdn.net/m0_52514893/article/details/135130974
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。