jQuery的三种$()


Posted in Javascript onDecember 30, 2009

1、$()可以是$(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对象,然后向<body/>中添加这一字串。

2、$()可以是$(element),即一个特定的DOM元素。如常用的DOM对象有document、location、form等。如这样一行代码:
$(document).find("div>p").html());
$()中的document是一个DOM元素,即在全文寻找带<p>的<div>元素,并显示<p>中的内容。
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所在的标签”。

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

1、标签选择器$('p')、类选择器$('.myClass')、id选择器$('#myId')相对简单,不多说。不过有一点——$('div>ul')和$('div ul')是有区别的,
$('div>ul')是<div>的直接后代里找<ul>;而$('div ul')是在<div>的所有后代里找<ul>。
所以,$('#sId>li')所选择的是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]

Javascript 相关文章推荐
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
Jquery 最近浏览过的商品的功能实现代码
May 14 Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 Javascript
js 遍历json返回的map内容示例代码
Oct 29 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
webpack多页面开发实践
Dec 18 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
layui的layedit富文本赋值方法
Sep 18 Javascript
jquery UI 1.72 之datepicker
Dec 29 #Javascript
用js做一个小游戏平台 (一)
Dec 29 #Javascript
js 学习笔记(三)
Dec 29 #Javascript
js DOM模型操作
Dec 28 #Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 #Javascript
javascript iframe编程相关代码
Dec 28 #Javascript
通过javascript设置css属性的代码
Dec 28 #Javascript
You might like
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
在Nginx上部署ThinkPHP项目教程
2015/02/02 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
yii用户注册表单验证实例
2015/12/26 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
js word表格动态添加代码
2010/06/07 Javascript
JS 控件事件小结
2012/10/31 Javascript
js调用AJAX时Get和post的乱码解决方法
2013/06/04 Javascript
js图片处理示例代码
2014/05/12 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
解决antd Form 表单校验方法无响应的问题
2020/10/27 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
python获取目录下所有文件的方法
2015/06/01 Python
python通过socket查询whois的方法
2015/07/18 Python
python去除字符串中的换行符
2017/10/11 Python
Python实现的计数排序算法示例
2017/11/29 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
Python 序列化和反序列化库 MarshMallow 的用法实例代码
2020/02/25 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
幼师自我鉴定范文
2013/10/01 职场文书
服务之星获奖感言
2014/01/21 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
毕业实习单位意见
2015/06/04 职场文书
JavaScript中MutationObServer监听DOM元素详情
2021/11/27 Javascript
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技