一、jQuery的三种$()

$号是jQuery“类”的一个别称,$()构造了一个jQuery对象。所以,“$()”可以叫做jQuery的构造函数。

1、$()可以是$(expresion),即css选择器、Xpath或html元素,也就是通过上述表达式来匹配目标元素。

比如:$("a")构造的这个对象,是用CSS选择器构建了一个jQuery对象——它选择了所有的<a/>这个标签。如:
$("a").click(funcTIon(){...})
就是在点击页面上的任何一个链接时的触发事件。确切地说,就是jQuery用<a/>这个标签构建了一个对象$("a"),函数 click()是这个jQuery对象的一个(事件)方法。

比如有这样一段HTML代码:

而操作这段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!");
});

形式:

$(document).ready(function(){ // 你的代码 });

$(document)意思是说,获取整个网页文档对象(类似的于window.document),

$(document).ready意思就是说,获取文档对象就绪的时候。

对于选择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]

二、 jQuery中$符号的作用

1、作为jQuery包装器,利用选择器来选择DOM元素(这个也是最强大的功能)

例如:$("table tr:nth-child(even)")

2、实用工具函数,作为几个通用的实用工具函数的命名空间的前缀

例如:$.trim(someString)

3、文档就绪处理程序,相当于$(document).ready(...)

例如:$(function(){...}); 里面的函数会在DOM树加载完之后执行

4、创建DOM元素

例如:$("<p>how are you?</p>")

5、扩展jQuery

例如:$.fn.disable = function(){...}

6、使用jQuery和其他库

例如:Prototype库也是使用$符号,jQuery提供noConflict函数避免冲突,jQuery.noConflict();把$符号还原到非jQuery库定义的含义。
 转自:jquery中的$()是什么?以及$符号的作用 - 全文

这个学习网上很详细:jQuery 教程

jquery中的$()详解的更多相关文章

  1. jQuery中$.ajax()详解(转)

    JQuery中$.ajax()方法参数详解     url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get) ...

  2. jquery的css详解(二)

    jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...

  3. jQuery 事件用法详解

    jQuery 事件用法详解 目录 简介 实现原理 事件操作 绑定事件 解除事件 触发事件 事件委托 事件操作进阶 阻止默认事件 阻止事件传播 阻止事件向后执行 命名空间 自定义事件 事件队列 jque ...

  4. jQuery.ready() 函数详解

    jQuery.ready() 函数详解 ready()函数用于在当前文档结构载入完毕后立即执行指定的函数. 该函数的作用相当于window.onload事件. 你可以多次调用该函数,从而绑定多个函数, ...

  5. jquery inArray()函数详解

    jquery inarray()函数详解 jquery.inarray(value,array)确定第一个参数在数组中的位置(如果没有找到则返回 -1 ). determine the index o ...

  6. jQuery extend方法详解

    先说个概念的东西: jQuery为开发插件提拱了两个方法,分别是: $.fn.extend(item):为每一个实例添加一个实例方法item.($("#btn1") 会生成一个 j ...

  7. jQuery的观察者模式详解 转载

    jQuery的观察者模式详解 投稿:hebedich 本文主要是介绍了jQuery中on方法及trigger方法,以及围绕这个方法来体验的观察者模式,是篇非常不错的文章,对我们理解观察者模式很有帮助. ...

  8. 【转载】jQuery.extend 函数详解

    转载自:http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html jQuery.extend 函数详解 JQuery的e ...

  9. jQuery.attr() 函数详解

    一,jQuery.attr()  函数详解: http://www.365mini.com/page/jquery-attr.htm 二,jQuery函数attr()和prop()的区别: http: ...

  10. winxp计算机管理中服务详解

    winxp计算机管理中服务详解01 http://blog.sina.com.cn/s/blog_60f923b50100efy9.html http://blog.sina.com.cn/s/blo ...

随机推荐

  1. ArcGIS GP服务的发布及调用

    参考https://www.jianshu.com/p/5331fa708fe5

  2. 数据库帮助类 SqlServerHelp

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.D ...

  3. Jquery的树插件jqxTreeGrid的使用小结(实现基本的增删查改操作)

    一.引入相应的js <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" t ...

  4. C++ IDE环境

    --------siwuxie095                     IDE:集成开发环境,包括:编辑器.编译器.调试器.图形用户界面工具 以及其他的一些小工具                 ...

  5. dedecms导出csv文件

    1.mshd_orderlist.tpl <form id="frm" method="GET" action="mshd_orderlist. ...

  6. SpringCloud之服务注册-eureka

    类似于DUBBO 的zookeeper, SpringCloud本身提供一套服务注册中心--eureka 与zookeeper的区别在于 1:zookeeper本身就是一个应用,安装即可用:eurek ...

  7. 如何用Python实现常见机器学习算法-3

    三.BP神经网络 1.神经网络模型 首先介绍三层神经网络,如下图 输入层(input layer)有三个units(为补上的bias,通常设为1) 表示第j层的第i个激励,也称为单元unit 为第j层 ...

  8. apicloud 和 微信小程序,你会用哪 个?

    微信 小程序开始火了,app跨平台的革命再次高涨,不得不说,不用再担心android和ios双版本开发成本,及h5的开发 和apicloud一样,不需要关注平台问题,只需要关注前端js.css就能大a ...

  9. Myeclipse的webservice本地监听设置(一个简陋的代理)

    (1) 首先打开Myeclipse,然后选择window--->show view ---->other (2)搜索tcp,然后找到如图的样式 (3)选中,点击ok (4)弹出下图界面 ( ...

  10. ImageUploader卸载教程-Xproer.ImageUploader

    1.1. 手动卸载控件-Windows XP 主要步骤如下: 1.关闭所有IE 2.打开cmd 3.进入C:\Windows\System32 4.输入命令regsvr32 -u ImageUploa ...