jQuery--语法

jQuery语法

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

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

❤美元符号定义jQuery

❤选择符（selector）“查询”和“查找”HTML元素

❤jQuery的action()执行对元素的操作

示例

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有class = "test" 的所有元素

$("#test").hide() - 隐藏所有id = "test" 的元素

提示：jQuery使用的语法是XPath与CSS选择器语法的组合。

文档就绪函数

$(document).ready(function(){

--- jQuery function go here ---

})

这是为了防止文档在加载之前运行jQuery代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。

jQuery元素选择器

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

$("p")选取<p>元素

$("p.intro")选取所有class = "intro"的<p>元素。

$("p#demo")选取所有id = "demo"的<p>元素。

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