jquery理解

最新推荐文章于 2022-10-03 15:42:55 发布

cnsd007

最新推荐文章于 2022-10-03 15:42:55 发布

阅读量138

点赞数

分类专栏： JavaScript 文章标签： jQuery JavaScript CSS ActionScript XHTML ViewUI

本文链接：https://blog.csdn.net/cnsd007/article/details/83488214

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

下载好后引用这个jQuery库就可以了我们的jQuery开发了，在页面的<head></head>区插入<script type="text/javascript" src="jquery-1.3.2/jquery-1.3.2.min.js"></script>就可以了。

我们的第一个jQuery程序

我们写一个弹出Hello jQuery！的程序：

jQuery对象和DOM对象
：这是我第一个碰到的问题。

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如：

$(”#img”).attr(”src”,”test.jpg”); 这里的$(”#img”)就是获取jQuery对象；

DOM对象就是Javascript固有的一些对象操作。DOM对象能使用Javascript固有的方法，但是不能使用jQuery里的方法。例如：

document.getElementById(”img”).src=”test.jpg”;这里的document.getElementById(”img”)就是DOM对象；

$(”#img”).attr(”src”,”test.jpg”); 和document.getElementById(”img”).src=”test.jpg”;是等价的，是正确的
但是$(”#img”).src=”test.jpg”;或者document.getElementById(”img”).attr(”src”,”test.jpg”); 
都是错误的





。

再说一个例子：就是this，我在写jQuery的时候经常这样写：

this.attr(”src”,”test.jpg”);

可是就是出错。其实this是DOM对象，而

.attr(”src”,”test.jpg”)

是jQuery方法，所以出错了。要解决这个问题就要将DOM对象转换成jQuery对象，例如：

$(this).attr(”src”,”test.jpg”);

1.DOM对象转成jQuery对象:

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)

如：var v=document.getElementById(”v”); //DOM对象

var $v=$(v); //jQuery对象

转换后，就可以任意使用jQuery的方法了。

2.jQuery对象转成DOM对象:

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);

(1)jQuery对象是一个数据对象 ，可以通过[index]的方法，来得到相应的DOM对象。

如：

var $v =$(”#v”) ; //jQuery对象

var v=$v[0]; //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

如：var $v=$(”#v”); //jQuery对象

var v=$v.get(0); //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用DOM中的方法，jQuery对象是不可以用DOM中的方法。

jQuery选择器是我们学jQuery的真正的开始也是我们必须做的第一件事情，jQuery选择能让我们取得我们想要的几乎所有的页面DOM对象（如果你不知道什么是DOM元素，google一下“什么是DOM”）。确切的说我们获取的应该是jQuery对象，这在上面的章节中我已经说过两者的区别和转换。

大家知道javascript变成中很大一块是对DOM的操作，当我们获取了DOM元素后，我们就可以对改元素绑定事件，增删属性等操作，通过这些操作可以实现很多绚丽的页面效果和富因特网的应用，但是我们在做这些事情之前首相要通过DOM元素的钩子找到该DOM元素，javascript是非常灵活的语言，查找DOM元素和DOM元素的钩子方法非常多，再者由于各个浏览器对js dom属性解析的少许区别，也给我们带来了不少麻烦。jQuery的选择器就解决了这些问题，而且功能非常强大。

jQuery选择器函数–$()

大家可以去很多jQuery程序，绝大部分的函数都是从$()开始的，$()函数简化了javascript获取DOM元素的复杂性，消除了使用for循环获取一组DOM元素，所以$()函数获取的DOM元素其实是一个DOM元素组成的数组。

简单的$()

这些是最常用的几个例子：

$(”div”)：标签名，取得DOM文档中所有div标签的元素，返回的是一个元素集合；
$(”#nickName”)：ID属性，取得DOM文档中ID为nickName的一个元素（ps：一个文档中ID是唯一的），返回的是一个元素；
$(”.user”)：样式名，取得DOM文档中class为user的所有元素，返回的是一个元素集合；

我们来看一个简单的例子：

< !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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery简单的选择器</title>
<script type="text/javascript" src="jquery-1.3.2/jquery-1.3.2.min.js"></script>
<style type="text/css">
.txt-color1{ color:#FF0000}
.txt-color2{ color:#666600}
.txt-color3{ color:#000066}
</style>
</head>
<body>
<h1>jQuery简单的选择器</h1>
<div>大家可以去很多jQuery程序，绝大部分的函数都是从$()开始的，$()函数简化了javascript获取DOM元素的复杂性，消除了使用for循环获取一组DOM元素</div>
<div>
<ol>
<li>$("div")：标签名，取得DOM文档中所有div标签的元素，返回的是一个元素集合；</li>
<li id="nickName">$("#nickName")：ID属性，取得DOM文档中ID为nickName的一个元素（ps：一个文档中ID是唯一的），返回的是一个元素；</li>
<li class="user">$(".user")：样式名，取得DOM文档中class为user的所有元素，返回的是一个元素集合；</li>
<li class="user">$(".user")：样式名，取得DOM文档中class为user的所有元素，返回的是一个元素集合；</li>
</ol>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("h1").addClass("txt-color1");//给标签为h1的加上txt-color1样式
$(".user").addClass("txt-color2");
$("#nickName").addClass("txt-color3");
});
</script>
</body>
</html>

$(”h1″).addClass(”txt-color1″);表示给标签为h1的加上txt-color1样式，

这里你要注意jQuer库的引用路径。我这里使用的是本地的。

jQuery选择器有很大一部分的写法和css选择器的写法非常相识，

我们先来看看css选择器的写法 ;这些对于你应该不是很陌生，呵呵。那么我们开始学习jQuery选择器。

一、简单的jQuery选择器

首先看看最简单的jQuery选择器 ,再次说明jQuery选择器获取的DOM元素返回的是一个数组，及时他只返回一个元素：

查看上一篇jQuery选择器入门【jQuery入门三】 中的$("div")：标签名，$("#nickName")：ID属性，$(".user")：样式名及例子，

$("div")：标签名，取得DOM文档中所有div标签的元素，返回的是一个元素集合，$(".user")：样式名：
$("#nickName")：ID属性，取得DOM文档中ID为nickName的一个元素（ps：一个文档中ID是唯一的），返回的是一个元素；
$(".user")：样式名，取得DOM文档中class为user的所有元素，返回的是一个元素集合；

这里再补充1个通配符，即*：

$(”*”):通配符，取得DOM文档中所有节点元素；例如：$(”*”).css(”color”,”#FF3300″);则整个文档的文字颜色都会显示红色。至于.css(”color”,”#FF3300″)给元素加上color:#FF3300的css样式，我们会在后面再给大家详细解释。

大家可以看看这个我们写的css选择器非常的相似，下面的例子也是一样，这样我们就非常容易理解jQuery选择器的含义了

二、jQuery的组合选择器：

$(”selector1,selector2,selectorN”)：多元素组合选择器，将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。例如：$(”h1,div,li#nickName”)，并查看一下代码：

< !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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery简单的选择器</title> <script type="text/javascript" src="http://www.css88.com/jquery-1.3.2/jquery-1.3.2.min.js"></script> </head> <body> <h1>jQuery简单的选择器</h1> <div>大家可以去很多jQuery程序，绝大部分的函数都是从$()开始的，$()函数简化了javascript获取DOM元素的复杂性，消除了使用for循环获取一组DOM元素</div> <ol> <li>$("div")：标签名，取得DOM文档中所有div标签的元素，返回的是一个元素集合；</li> <li id="nickName">$("#nickName")：ID属性，取得DOM文档中ID为nickName的一个元素（ps：一个文档中ID是唯一的），返回的是一个元素；</li> <li class="user">$(".user")：样式名，取得DOM文档中class为user的所有元素，返回的是一个元素集合；</li> <li class="user">$(".user")：样式名，取得DOM文档中class为user的所有元素，返回的是一个元素集合；</li> </ol> <script type="text/javascript"> $(document).ready(function(){ $("h1,div,li#nickName").css("color","#FF3300") }); </script> </body> </html>

三、JQuery的层级选择器：

层级选择器严格来说就2种，在给定的父元素下匹配子元素，还有一个就是在给定的祖先元素下匹配后代元素。为了形像的比较两者的区别

，举个例子来说，你爸叫张二，你叫张三，你儿子叫张四，从你爸这儿来查，第一种情况只查到你，而第二种情况不光是你，连你的儿子也查

到了。（高手别笑话，为了一眼看出区别，这是N年前上数据结构的时候老是给举的例子。）

　　ancestor descendant，在给定的祖先元素下匹配所有的后代元素，如$("form input") ，找到表单中所有的 input 元素。

　　parent > child，在给定的父元素下匹配所有的子元素，如$("form > input") ，匹配表单中所有的input元素。

　　这是之前说的2个，还有2个不知道算不算

　　prev + next，匹配所有紧接在 prev 元素后的 next 元素，如$("label + input") ，匹配所有跟在 label 后面的 input 元素

　　prev ~ siblings，匹配 prev 元素之后的所有 siblings 元素，如$("form ~ input") ，找到所有与表单同辈的 input 元素

　　看到他们的区别没？第一个强调了紧接在，如果prev元素的下一个元素就是所查的元素，就可以找到，如果下一个的下一个才是，那就找

不到，而第二种方法就可以。
　　以上都是按元素名来查的，官方给的例子都是这样，但是能不能按id或类来查呢？比如查找ajaxa类下的所有类为yecao的元素，

$(".ajaxa").find(".yecao")。find用来搜索所有与指定表达式匹配的元素，这个函数是找出正在处理的元素的后代元素的好方法。

$(”ancestor descendant”):在给定的祖先元素下匹配所有的后代元素，即子孙元素,例如：$(”div span.num”);

$(”parent > child”):在给定的父元素下匹配所有的子元素,例如：$(”div>span”);

$(”prev + next”):匹配所有紧接在 prev 元素后的 next 元素，即第一个跟屁虫的兄弟元素,例如：$(”p+span”);

$(”prev ~ siblings”):匹配 prev 元素之后的所有 siblings 元素，即一群跟屁虫的兄弟元素（当然也有可能是一个屁虫的兄弟元素，那就和$(”prev + next”)等价了）,例如：$(”p~span”);

关于层级选择器的示例：

< !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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery简单的选择器</title> <script type="text/javascript" src="http://www.css88.com/jquery-1.3.2/jquery-1.3.2.min.js"></script> </head> <body> <h1>jQuery简单的选择器</h1> <div>javascript森林群规有<span class="num">120</span>个会员,其中管理员<span class="num">120</span>个；</div> <div>javascript森林群博客目前有<span>30</span>作者,<span>10</span>篇文章；</div> <p>我是愚人码头</p> <span>你叫什么名字呢？</span> <span>我爱javascript森林；</span> <span>以为森林里有我好好多的朋友；</span> <span>欢迎你加入我们；</span> <div> <input type="submit" name="button" id="button1" value="测试$('div span.num')" /> <input type="submit" name="button" id="button2" value="测试$('div/>span')" /> <input type="submit" name="button" id="button3" value="$('p+span')" /> <input type="submit" name="button" id="button4" value="测试$('p~span')" /> </div> <script type="text/javascript"> $(document).ready(function(){ $("#button1").click(function(){ $("div span.num").css("color","#FF0033") }); $("#button2").click(function(){ $("div>span").css("color","#FF0033") }); $("#button3").click(function(){ $("p+span").css("color","#FF0033") }); $("#button4").click(function(){ $("p~span").css("color","#FF0033") }); }); </script> </body> </html>

四：简单的过滤选择器

:animated：匹配所有正在执行动画效果的元素集合；
:eq(index)：匹配索引为 index 的一个元素，例如：$(”div:eq(0)”)//第一个div；
:even：匹配索引为偶数（双数）的元素集合，例如：$(”div:even”)；
dd：匹配索引为奇数（单数）的元素集合，例如：$(”div:odd”)；
:first：匹配找到的第一个元素，等价于:eq(0)，例如：$(”div:first”)；
:gt(index) ：匹配索引大于 index 的元素集合，例如：$(”div:gt(0)”)//除了第一个div外的所以div；
:lt(index)：匹配索引小于于 index 的元素集合，例如：$(”div:lt(0)”)；
:header：匹配h1-h6的所有元素集合；
:last：匹配找到的最后一个元素，例如：$(”div:last”)//最后一个div；
:not(selector)：去除所有与给定选择器匹配的元素，例如：$(”input:not(:checked)”)//除了被选中的所有input；

五、Jquery的子元素选择器

:first-child ：匹配每个父元素的第一个子元素，相当于E:nth-child(0)，例如：$(”ul li:first-child”)；
:last-child ：匹配每个父元素的最后一个子元素，例如：$(”ul li: last -child”)；
:nth-child(index/even/odd/equation)：匹配每一个父元素的第N个子或奇偶元素，例如：$(”ul li:nth-child(2)”)；
nly-child ：如果某个元素是父元素中唯一的子元素，那将会被匹配$(”ul li:only-child”)；

六、子元素选择器和过滤性选择器的一些区别

:first-child和:first：

:first只匹配一个元素，而:first-child将为每个父元素匹配一个子元素，所以:first-child匹配出来的是一个集合当然也有可能只匹配一个元素，而:first永远只能匹配到一个元素。

:last-child和:last的区别道理也是一样的；

看示例：

< !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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://www.css88.com/jquery1.3.2/jquery-1.3.2.min.js"></script>
</head>

<body>
	<h3>我正在学习并且应用的技术</h3>
	<ul>
		<li>javascript</li>
		<li>css2.1</li>
		<li>html4</li>
		<li>MXML</li>
	</ul>
	<h3>我想学习的技术</h3>
	<ul>
		<li>actionscript</li>
		<li>css 3</li>
		<li>html 5</li>
		<li>PHP</li>
	</ul>
	<h3>我精通的技术</h3>
	<ul>
		<li>群里吹水</li>
		<li>忽悠新人</li>
	</ul>
	<div><input type="submit" name="button" id="button1" value="测试$('li:first')" />
  <input type="submit" name="button" id="button2" value="测试$('li:first-child')" /></div>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#button1").click(function(){
				$("li:first").css("color","#FF3300");//这里匹配了<li>javascript</li>
			});
			$("#button2").click(function(){
				$("li:first-child").css("color","#0071db");//这里匹配了<li>javascript</li>、<li>actionscript</li>、<li>群里吹水</li>
			});
		});
	</script>
</body>
</html>

:nth-child(index/even/odd/equation)和:eq(index)

:eq(index) 只匹配一个元素，索引值从0开始；

:nth-child(index/even/odd/equation) 匹配每一个父元素的第N个子或奇偶元素, 索引值从1开始,并且提供更丰富的参数及表达式；

:nth-child(even)// 匹配每一个父元素的偶数元素；

:nth-child(odd) // 匹配每一个父元素的奇数元素；

:nth-child(3n) // 匹配每一个父元素的索引值能被3整除的元素；

:nth-child(2) // 匹配每一个父元素的第2个元素；

:nth-child(3n+1) // 匹配每一个父元素的索引值被3整除后余1的元素

:nth-child(3n+2) // 匹配每一个父元素的索引值被3整除后余2的元素

所以:nth-child(index/even/odd/equation)匹配出来的是一个集合当然也有可能只匹配一个元素，而:eq(index)永远只能匹配到一个元素。

看示例（顺带:only-child也在这里测试一下）：

< !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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery1.3.2/jquery-1.3.2.min.js"></script>
</head>

<body>
	<h3>我正在学习并且应用的技术</h3>
	<ul>
		<li>javascript</li>
		<li>css2.1</li>
		<li>html4</li>
		<li>MXML</li>
	</ul>
	<h3>我想学习的技术</h3>
	<ul>
		<li>actionscript</li>
		<li>css 3</li>
		<li>html 5</li>
		<li>PHP</li>
	</ul>
	<h3>我精通的技术</h3>
	<ul>
		<li>群里吹水</li>
	</ul>
	<div><input type="submit" name="button" id="button1" value="测试$('li:eq(2)')" />
  <input type="submit" name="button" id="button2" value="测试$('li:nth(2)')" />
  <input type="submit" name="button" id="button3" value="测试$('li:nth-child(even)')" />
  <input type="submit" name="button" id="button4" value="测试$('li:nth-child(3n)')" />
  <input type="submit" name="button" id="button5" value="测试$('li:only-child')" /></div>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#button1").click(function(){
				$("li:eq(2)").css("color","#FF3300");//这里匹配了<li>html4</li>
			});
			$("#button2").click(function(){
				$("li:nth-child(1)").css("color","#0071db");//这里匹配了<li>javascript</li>、<li>actionscript</li>、<li>群里吹水</li>
			});
			$("#button3").click(function(){
				$("li:nth-child(even)").css("color","#185309");//这里匹配了<li>css2.1</li>、<li>MXML</li>、<li>css 3</li>、<li>PHP</li>
			});
			$("#button4").click(function(){
				$("li:nth-child(3n)").css("color","#185309");//这里匹配了<li>html4</li>、<li>html 5</li>
			});
			$("#button5").click(function(){
				$("li:only-child").css("color","#4C1F68");//这里匹配了<li>html4</li>、<li>html 5</li>
			});
		});
	</script>
</body>
</html>

cnsd007

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery理解

下载好后引用这个jQuery库就可以了我们的jQuery开发了，在页面的&lt;head&gt;&lt;/head&gt;区插入&lt;script type="text/javascript" src="jquery-1.3.2/jquery-1.3.2.min.js"&gt;&lt;/script&gt;就可以了。我们的第一个jQuery程序我们写一个弹出Hello jQuery！的...
复制链接

扫一扫