1、css选择器
$()
可以是$(expresion)
,即css选择器、Xpath或html元素,也就是通过上述表达式来匹配目标元素。
比如:$(“a”)构造的这个对象,是用CSS选择器构建了一个jQuery对象——它选择了所有的<a/>
这个标签。如:
$("a").click(function(){...})
就是在点击页面上的任何一个链接时的触发事件。确切地说,就是jQuery用<a/>
这个标签构建了一个对象$(“a”),函数 click()是这个jQuery对象的一个(事件)方法。
比如有这样一段HTML代码:
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()" >jQuery</a>
而操作这段HTML的是如下一条语句:
alert($(“div>p”).html());
$()
中的是一个查询表达式,也就是用“div>p”这样一个查询表达式构建了一个jQuery对象,然后的“html()”意思是显示其html内容,也就是上面HTML代码段的[two]。再如:
$("<div><p>Hello</p></div>").appendTo("body");
$()中的是一个字符串,用这样一段字串构建了jQuery对象,然后向中添加这一字串。
2、特定的DOM元素
$()
可以是$(element)
,即一个特定的DOM元素。如常用的DOM对象有document、location、form等。如这样一行代码:
$(document).find("div>p").html());
$()
中的document是一个DOM元素,即在全文寻找带<p>
的<div>
元素,并显示<p>
中的内容。
要直接访问DOM元素,可用get(0)的方法,如
$('#myelement').get(0)
,也可缩写成$(‘#myelement’)[0]
3、一个函数
$()
可以是$(function)
,即一个函数,它是$(document).ready()的一个速记方式。如常见的形式是这样的:
$(document).ready(function(){
alert("Hello world!");
});
可变形作:
$(function(){
alert("Hello world!");
});
对于选择HTML文档中的elements,jQuery有两种方法:
1)如$("div>ul a")
,它的意思是div标签中的ul标签中的a标签
不过,$('div>ul')和$('div ul')
是有区别的,
$('div>ul')
是<div>
的直接后代里找<ul>
;
而$('div ul'
)是在<div>
的所有后代里找<ul>
。
2)用jQuery对象的几个方法(如方法find()、each()等)
$("#orderedlist).find("li")
就像 $("#orderedlist li"). each()
一样迭代了所有的li,而表达式中的“#”表示HTML中的ID,如上例中的“#orderedlist”就表示“ID为orderedlist所在的标签”。