jQuery- 跟着李南江学编程

jQuery 库可以通过一行简单的标记被添加到网页中。

jQuery 库 - 特性
jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
向您的页面添加 jQuery 库
jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。

可以通过下面的标记把 jQuery 添加到网页中：

请注意，

基础 jQuery 实例
下面的例子演示了 jQuery 的 hide() 函数，隐藏了 HTML 文档中所有的

元素。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){$("button").click(function(){$("p").hide();
});
});
</script>
</head><body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>

把 jQuery 添加到您的网页
如需使用 jQuery，您需要下载 jQuery 库（会在下面为您讲解），然后把它包含在希望使用的网页中。

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的

请注意，

提示：您是否很疑惑为什么我们没有在

在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

下载 jQuery
有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
这两个版本都可以从 jQuery.com 下载。

提示：您可以把下载文件放到与页面相同的目录中，这样更方便使用。

替代方案
如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。

谷歌和微软的服务器都存有 jQuery 。

如需从谷歌或微软引用 jQuery，请使用以下代码之一：

Google CDN:

提示：通过 Google CDN 来获得最新可用的版本：

如果您观察上什么的 Google URL - 在 URL 中规定了 jQuery 版本 (1.8.0)。如果您希望使用最新版本的 jQuery，也可以从版本字符串的末尾（比如本例 1.8）删除一个数字，谷歌会返回 1.8 系列中最新的可用版本（1.8.0、1.8.1 等等），或者也可以只剩第一个数字，那么谷歌会返回 1 系列中最新的可用版本（从 1.1.0 到 1.9.9）。

Microsoft CDN:

jQuery 语法实例
$(this).hide()
演示 jQuery hide() 函数，隐藏当前的 HTML 元素。
$("#test").hide()
演示 jQuery hide() 函数，隐藏 id=“test” 的元素。
$(“p”).hide()
演示 jQuery hide() 函数，隐藏所有

元素。
$(".test").hide()
演示 jQuery hide() 函数，隐藏所有 class=“test” 的元素。
jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素

$(“p”).hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class=“test” 的所有元素

$("#test").hide() - 隐藏所有 id=“test” 的元素

提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。

文档就绪函数
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

— jQuery functions go here ----

});

jQuery 选择器
在前面的章节中，我们展示了一些有关如何选取 HTML 元素的实例。

关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。

选择器允许您对 HTML 元素组或单个元素进行操作。

在 HTML DOM 术语中：

选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。

$(“p”) 选取

元素。

$(“p.intro”) 选取所有 class=“intro” 的

元素。

$(“p#demo”) 选取所有 id=“demo” 的

元素。

jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href=’#’]") 选取所有带有 href 值等于 “#” 的元素。

$("[href!=’#’]") 选取所有带有 href 值不等于 “#” 的元素。

("[href("[href("[href=’.jpg’]") 选取所有 href 值以 “.jpg” 结尾的元素。

jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

实例
$(“p”).css(“background-color”,“red”);

我正在跟着江哥学编程, 更多前端+区块链课程: www.it666.com

jQuery- 跟着李南江学编程相关推荐

从零玩转HTML5+CSS3项目实战-跟着李南江学编程
从零玩转HTML5+CSS3项目实战-跟着李南江学编程 1.CSS高级应用 1.边框圆角的基本使用 1.1什么是边框圆角:将直角的边框变为圆角的边框 1.2边框圆角的格式:border-radius: ...
前端基础1 - 跟着李南江学编程
前端基础1 - 跟着李南江学编程基础语法: ` Title <div> <dl> <dt> <a href="text.html"> ...
Bootstrap - 跟着李南江学编程
Bootstrap Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局.移动设备优先的 WEB 项目. Bootstrap 是一个用于 HTML.CSS 和 JS 开发的开源工具包.利 ...
【深度学习】ResNet残差网络 ResidualBlock残差块实现(pytorch) | 跟着李沐学AI笔记 | ResNet18进行猫狗分类
文章目录前言一.卷积的相关计算公式(复习) 二.残差块ResidualBlock复现(pytorch) 三.残差网络ResNet18复现(pytorch) 四.直接调用方法五.具体实践(ResN ...
动手学深度学习在线课程-跟着李沐学AI
动手学深度学习在线课程-跟着李沐学AI http://courses.d2l.ai/zh-v2/ 李宏毅<机器学习>中文课程(2022) https://hub.baai.ac.cn/vi ...
C语言学习——从零开始学编程（第二篇：C语言知识总括）
本节将介绍:C语言的基本框架和大部分知识的浅了解(记得先看目录哦~~) 前言--小颖的话提示:本文篇幅长,知识点多,可以分开学习,记得收藏点赞哦~ 一.数据类型 1.C语言中的关键字 2.不同类型所 ...
脑残式网络编程入门(一)：跟着动画来学TCP三次握手和四次挥手
转自即时通讯网:http://www.52im.net/ 1.引言网络编程中TCP协议的三次握手和四次挥手的问题,在面试中是最为常见的知识点之一.很多读者都知道"三次"和&quo ...
跟着c++Primer Plus学编程--- 4.13编程练习答案详解】
跟着c++Primer Plus学编程--- 4.13编程练习答案详解 1.编写一个C++程序,如下述输出事例所示那样请求并显示信息. 2.修改程序清单4.4,使用C++ string 类而不是 ch ...
在 B 站学编程，真滴牛逼！
互联网让信息更容易触达,但是由于信息过于庞大,筛选出有价值的信息所花费的精力也会很大. 众所周知,B 站是一个学习的网站,很多人在 B 站上大学.考研.学编程,但 B 站的视频资源那更是五花八门,要从 ...
第五章处理器拦截器详解——跟着开涛学SpringMVC
5.1.处理器拦截器简介 Spring Web MVC的处理器拦截器(如无特殊说明,下文所说的拦截器即处理器拦截器)类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理. ...

jQuery- 跟着李南江学编程

jQuery- 跟着李南江学编程相关推荐

最新文章

热门文章