jQuery的三种$()

孙卫国77

孙卫国77

2016-02-19 14:14

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的jQuery的三种$()懂设计的网友们快点来了解吧!
1、$()可以是$(expresion),即css选择器、Xpath或html元素,也就是通过上述表达式来匹配目标元素。
比如:$("a")构造的这个对象,是用CSS选择器构建了一个jQuery对象——它选择了所有的a/这个标签。如:
$("a").click(function(){...})
就是在点击页面上的任何一个链接时的触发事件。确切地说,就是jQuery用a/这个标签构建了一个对象$("a"),函数 click()是这个jQuery对象的一个(事件)方法。

比如有这样一段HTML代码:

代码如下:
pone/p
div
ptwo/p
/div
pthree/p
a href="#" id="test" onClick="jq()" jQuery/a


而操作这段HTML的是如下一条语句:
alert($("divp").html());

$()中的是一个查询表达式,也就是用“divp”这样一个查询表达式构建了一个jQuery对象,然后的“html()”意思是显示其html内容,也就是上面HTML代码段的[two]。再如:
$("divpHello/p/div").appendTo("body");
$()中的是一个字符串,用这样一段字串构建了jQuery对象,然后向body/中添加这一字串。

2、$()可以是$(element),即一个特定的DOM元素。如常用的DOM对象有document、location、form等。如这样一行代码:
$(document).find("divp").html());
$()中的document是一个DOM元素,即在全文寻找带p的div元素,并显示p中的内容。
3、$()可以是$(function),即一个函数,它是$(document).ready()的一个速记方式。如常见的形式是这样的:
$(document).ready(function(){
alert("Hello world!");
});
可变形作:
$(function(){
alert("Hello world!");
});

对于选择HTML文档中的elements,jQuery有两种方法:
1)如$("divul a"),它的意思是div标签中的ul标签中的a标签
不过,$('divul')和$('div ul')是有区别的,


$('divul')是div的直接后代里找ul;
而$('div ul')是在div的所有后代里找ul。



2)用jQuery对象的几个方法(如方法find()、each()等)
$("#orderedlist).find("li") 就像 $("#orderedlist li"). each()一样迭代了所有的li,而表达式中的“#”表示HTML中的ID,如上例中的“#orderedlist”就表示“ID为orderedlist所在的标签”。

****************************************************************

1、标签选择器$('p')、类选择器$('.myClass')、id选择器$('#myId')相对简单,不多说。不过有一点——$('divul')和$('div ul')是有区别的,
$('divul')是div的直接后代里找ul;而$('div ul')是在div的所有后代里找ul。
所以,$('#sIdli')所选择的是id为"sId"的所有li孩子节点,即使这个li的后代还有li也不是它所找的范围(所找到的DOM对象,只是它本级的DOM对象。)。而$('#sId li:not(.horizontal)'),就是指类名"sId"里面的所有li的子孙中没有horizontal类的所有元素。——这里的not()是一个negation pseudo class.
这里返回的是一个jQurey对象,一个数组对象,这个jQuery对象的长度可用.length()得到。
2、XPath选择器
如:选择所有带有title 属性的链接,我们会这样写:$('a[@title]')
[]里带@,说明[]里的是元素的属性;是个属性选择器
[]里没@,说明[]里的是元素的子孙。
$('ul li')和$('ul[li]')虽然返回的都是一个jQuery数组,但两者的含义正好相反。前者是要找ul下所有li子孙,而后者却是在找所有子孙为li的ul数组。
在XPath中,要找一个“以...开头”的属性,用^=,如找一个name属性是以mail开头的input元素,就用
$('input[@name^="mail"]')
要找一个“以...结尾”的属性,要用$=
要找一个“不头不尾”的属性,用*=

3、不属于上述的CSS和XPath的选择器,就是自定义的选择器了,用“:”表示,这里要用的就是:first,:last,:parent ,:hidden,:visible,:odd,:even,:not('xxx'), ":eq(0)"(始于0),:nth(n),:gt(0),:lt(0),:contains("xxx")
如:$('tr:not([th]):even')意为tr元素的子孙中不含th的所有子孙的偶数项

4、还有几个,简单不解释了
$('th').parent()——
$('td:contains("Henry")').prev()——内容包含有"Henry"的td的上一个节点
$('td:contains("Henry")').next()——内容包含有"Henry"的td的下一个节点
$('td:contains("Henry")').siblings()——内容包含有"Henry"的td的所有兄弟节点
还有一个,就是end(),这个方法肯定是用在某个DOM节点执行了某一动作之后,还想在与其相关的节点上执行类似动作,这里就要用到end()。用过end()方法之后,所返回的是执行动作的那个节点的父节点上。举个例子
$(...).parent().find(...).addClass().end()
这里执行动作的节点是find(...),是一个数组对象,它所做的动作是“addClass()”,之后,用了个end(),这时所返回的东东就是指向了parent()所指向的节点,也就是执行“addClass()”动作的那个数组对象的父节点。

5、要直接访问DOM元素,可用get(0)的方法,如
$('#myelement').get(0),也可缩写成$('#myelement')[0]
展开更多 50%)
分享

猜你喜欢

jQuery的三种$()

Web开发
jQuery的三种$()

《质量效应3》三种结局 三种体验

游戏动漫
《质量效应3》三种结局 三种体验

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jquery 将disabled的元素置为enabled的三种方法

Web开发
jquery 将disabled的元素置为enabled的三种方法

三种语言简介

电脑网络
三种语言简介

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

三种饺子的吃法

猪肉
三种饺子的吃法

南瓜的三种做法

南瓜 南瓜饼 美食
南瓜的三种做法

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

tomcat5中文问题解决之道

tomcat5中文问题解决之道

js正则表达式验证邮箱

js正则表达式验证邮箱
下拉加载更多内容 ↓