jQuery 简介

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

相关推荐