jQuery 学习(一)
1、文档就绪函数
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){
— jQuery functions go here —-
});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
下面是两种假如文档完全加载之前运行函数的话,操作失败的情况:
试图隐藏一个不存在的元素。
获得未完全加载的图像的大小。
jQuery 语法实例
演示 jQuery hide() 函数,隐藏当前的 HTML 元素。
演示 jQuery hide() 函数,隐藏 的元素。
演示 jQuery hide() 函数,隐藏所有 元素。
演示 jQuery hide() 函数,隐藏所有 的元素。
2、jQuery 选择器
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$(“p”) 选取 元素。
$(“p.intro”) 选取所有 的 元素。
$(“p#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.intro”) |
| 所有 的 元素 |
| $(“.intro”) |
| 所有 的元素 |
| $(“#intro”) |
| id=”intro” 的第一个元素 |
| $(“ul li:first”) |
| 每个 的第一个 元素 |
| $(“[href$=’.jpg’]”) |
| 所有带有以 “.jpg” 结尾的 href 属性的属性 |
| $(“div#intro .head”) |
| id=”intro” 的 元素中的所有 的元素 |
Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE
1**、文档就绪函数 **
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){
— jQuery functions go here —-
});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
下面是两种假如文档完全加载之前运行函数的话,操作失败的情况:
试图隐藏一个不存在的元素。
获得未完全加载的图像的大小。
jQuery 语法实例
演示 jQuery hide() 函数,隐藏当前的 HTML 元素。
演示 jQuery hide() 函数,隐藏 id=”test” 的元素。
演示 jQuery hide() 函数,隐藏所有 元素。
演示 jQuery hide() 函数,隐藏所有 class=”test” 的元素。
2、jQuery 选择器
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.intro”) |
| 所有 class=”intro” 的 元素 |
| $(“.intro”) |
| 所有 class=”intro” 的元素 |
| $(“#intro”) |
| id=”intro” 的第一个元素 |
| $(“ul li:first”) |
| 每个 的第一个 元素 |
| $(“[href$=’.jpg’]”) |
| 所有带有以 “.jpg” 结尾的 href 属性的属性 |
| $(“div#intro .head”) |
| id=”intro” 的 元素中的所有 class=”head” 的元素 |



