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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。