jQuery简单介绍

最新推荐文章于 2022-09-15 11:54:03 发布

一滴墨

最新推荐文章于 2022-09-15 11:54:03 发布

阅读量1.1k

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/Care_about/article/details/52909155

版权

jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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

jQuery 库 - 特性

jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

向您的页面添加 jQuery 库

jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。
可以通过下面的标记把 jQuery 添加到网页中：

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

请注意，

jQuery 安装

把 jQuery 添加到您的网页
如需使用 jQuery，您需要下载 jQuery 库（会在下面为您讲解），然后把它包含在希望使用的网页中。
jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的

<head>
<script src="jquery.js"></script>
</head>

请注意，<script> 标签应该位于页面的部分。
提示：您是否很疑惑为什么我们没有在 <script> 标签中使用 type=”text/javascript” ？
在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

替代方案
如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。
谷歌和微软的服务器都存有 jQuery 。
如需从谷歌或微软引用 jQuery，请使用以下代码之一：

Google CDN:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>

Microsoft CDN:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>

亲自试一试
提示：使用谷歌或微软的 jQuery，有一个很大的优势：
许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

jQuery 语法

jQuery 语法实例
$(this).hide()

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $(this).hide();
});
});
</script>
</head>

<body>
<button type="button">Click me</button>
</body>

</html>

演示 jQuery hide() 函数，隐藏当前的 HTML 元素。

jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

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

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
试图隐藏一个不存在的元素
获得未完全加载的图像的大小

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$=’.jpg’]”) 选取所有 href 值以 “.jpg” 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
实例
$(“p”).css(“background-color”,”red”);

更多的选择器实例
语法  描述
$(this)    当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro")   所有 class="intro" 的 <p> 元素
$(".intro")    所有 class="intro" 的元素
$("#intro")    id="intro" 的元素
$("ul li:first")   每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")   id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery 事件

jQuery 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
通常会把 jQuery 代码放到部分的事件处理方法中：

Query 事件
下面是 jQuery 中事件方法的一些例子：
Event 函数    绑定函数至
$(document).ready(function)    将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)    触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)    触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)    触发或将函数绑定到被选元素的鼠标悬停事件

一滴墨

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery简单介绍

jQuery 库可以通过一行简单的标记被添加到网页中。jQuery 库 - 特性jQuery 是一个 JavaScript 函数库。 jQuery 库包含以下特性： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities向您的页面添加 jQuery 库jQuery 库位于
复制链接

扫一扫