jQuery 简介

最新推荐文章于 2024-09-19 08:47:47 发布

原创最新推荐文章于 2024-09-19 08:47:47 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #ViewUI

jQuery 专栏收录该内容

4 篇文章

订阅专栏

jQuery 是一个 JavaScript 库，它极大地简化了 JavaScript 编程。

1、jQuery 库包含以下特性：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

2、如何向您的页面添加 jQuery 库？

如需使用 jQuery，您需要下载 jQuery 库，然后把它包含在希望使用的网页中。
下载jQuery：http://jquery.com/download/

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：

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

3、jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

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

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

示例：

$(this).hide(); // 隐藏当前元素
$("p").hide(); // 隐藏所有段落
$(".test").hide(); // 隐藏所有 class="test" 的所有元素
$("#test").hide(); // 隐藏所有 id="test" 的元素

4、jQuery选择器

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

（1）jQuery 元素选择器

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

$("p");     //选取 <p> 元素。
$("p.intro");     //选取所有 class="intro" 的 <p> 元素。
$("p#demo");     //选取所有 id="demo" 的 <p> 元素。

（2）jQuery 属性选择器

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

$("[href]");     //选取所有带有 href 属性的元素。
$("[href='#']");     //选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']");      //选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']");     //选取所有 href 值以 ".jpg" 结尾的元素。

更多的选择器实例：

$(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" 的元素