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 相关文章推荐
jquery插件lazyload.js延迟加载图片的使用方法
Feb 19 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 Javascript
js实现小窗口拖拽效果
Dec 03 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 Javascript
JS数组方法slice()用法实例分析
Jan 18 Javascript
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
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
利用 window_onload 实现select默认选择
2006/10/09 PHP
php抓取页面与代码解析 推荐
2010/07/23 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
php使用escapeshellarg时中文被过滤的解决方法
2016/07/10 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
2013/12/22 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
浅谈javascript中基本包装类型
2015/06/03 Javascript
使用AngularJS制作一个简单的RSS阅读器的教程
2015/06/18 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
[02:35]DOTA2英雄基础教程 末日使者
2013/12/04 DOTA
Python使用ftplib实现简易FTP客户端的方法
2015/06/03 Python
python使用socket创建tcp服务器和客户端
2018/04/12 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
使用python获取邮箱邮件的设置方法
2019/09/20 Python
Python tkinter三种布局实例详解
2020/01/06 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
Python 发送邮件方法总结
2020/08/10 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
德国足球商店:OUTFITTER
2019/05/06 全球购物
开业主持词
2014/03/21 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
小学生运动会报道稿
2014/09/12 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server