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" 的元素
转载自本人ITeye链接:http://xiaozhuang0706.iteye.com/blog/2255546