jQuery的三种$()

news/2024/7/10 22:56:21 标签: 前端, jQuery

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

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]


http://www.niftyadmin.cn/n/1870036.html

相关文章

jQuery之前端国际化jQuery.i18n.properties

jQuery.i18n.properties是一款轻量级的jQuery国际化插件&#xff0c;能实现Web前端的国际化。 国际化英文单词为&#xff1a;Internationalization&#xff0c;又称i18n&#xff0c;“i”为单词的第一个字母&#xff0c;“18”为“i”和“n”之间单词的个数&#xff0c;而“n”…

Java 相关知识点

1.一个 java 的源程序&#xff0c;从某种角度上来看&#xff0c;可以分为两部分&#xff0c;一个是各种结构的定义&#xff0c;就是用标识符给各种结构取名字&#xff1b;一个是函数内部的可执行语句。各种结构的定义&#xff0c;比如 package、class、interface、feild、metho…

jQuery AJAX获取JSON数据解析多种方式示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http://www.w3.org/1999/xhtml"> <head> <title>Ajax和getJSON获取后…

JavaSE 结构介绍

javase结构如下图&#xff1a; jdk 主要包含了 java development tools 和 jre。 jre 主要包含了 javaSE 核心类库 和 jvm。 下面就是 javase 核心类库介绍&#xff0c;Java SE中包含的主要技术如下&#xff1a; Deployment Tecknologies: 和部署相关的技术 Deployment、Ja…

Java 虚拟机内存模型

笔记&#xff1a; 原文地址&#xff1a;http://blog.csdn.net/zapldy/article/details/7401063 我们知道&#xff0c;计算机CPU和内存的交互是最频繁的&#xff0c;内存是我们的高速缓存区&#xff0c;用户磁盘和CPU的交互&#xff0c;而CPU运转速度越来越快&#xff0c;磁盘远…

jQuery插件的制作之方法的参数

1、无参数实现文字阴影效果 jQuery.fn.shadow function(){return this.each(function(){var $originalElement jQuery(this);for(var i 0;i < 5;i){$originalElement.clone().css({position :"absolute",left :$originalElement.offset().left i,top :$origina…

另一个视角解读计算机编码-补码编码

这篇文章写得很好&#xff0c;转来供大家分享&#xff01; 数学是一个完全抽象的学科&#xff0c;而计算机是这个学科的一种形象化的实现&#xff0c;显然无法处理一些仅在抽象意义上有意义的特殊”数字“&#xff0c;比如无穷之类的东西。像数学中的加法&#xff0c;乘法这样运…

jQuery插件开发全解析,jQuery.extend , (function($){ , $.fn.pluginName

序&#xff1a;匿名函数&#xff0c;匿名函数没有实际名字&#xff0c;也没有指针&#xff0c;怎么执行滴&#xff1f; 其实大家可以看看小括号的意义就应该可以理解。小括号有返回值&#xff0c;也就是小括号内的函数或者表达式的返回值&#xff0c;所以说小括号内的function返…