jQuery基础

fengxu0706

浏览: 15756 次

最近访客更多访客>>

spellyaohui

刘志海

Bedlamiteman

15999904152

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery学习

jQuery

jQuery中选择器的通用语法如下：

$(selector) 或者：jQuery(selector)

1.$("#id") id选择器，相当于javascript中的 document.getElementById("id")

2.$(".someClass") 类别选择器，选择CSS类别为"someClass"的所有节点元素

3.$("p:odd") 选择所有位于奇数行的<p>标记，从0开始计数

4.$("p:nth-child(odd)") 选择所有位于奇数行的<p>标记，从1开始计数

5.$("li > a") 子选择器，返回<li>标记的所有子元素<a>，不包括孙标记

6.$("a[href$=pdf]") 选择所有的超链接，并且这些超链接是以"pdf"结尾的。

jQuery中的ready() 方法很好的解决了window.onload函数的需要页面加载之后才能使用，和频繁被使用页面冲突的问题。它能够自动将其中的函数在页面加载完成后运行，并且同一个页面中可以使用多个ready()方法，而且不相互冲突。

$(document).ready(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});

也可以简写为以下形式：

$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});

一、属性选择器

属性选择器的语法是在标记的后面用中括号[]添加相关的属性。

$("a[title]") ，选择设置了title属性的标记。

$("a[href='a.html']")，href属性值等于a.html的超链接

$("a[href^=http://]")，属性值以htt://开头的

$("a[href$=html]")，属性值以html结尾的超链接

$("a[href*=html]"),属性值包含html的超链接

$("li:has(a)")，包含了超链接的所有<li>标记

二、包含选择器

选择器	说明
*	所有标记
E	所有名称为E的标记
EF	所有名称为F的标记，并且是E标记的子标记（包括孙、重孙等）
E>F	所有名称为F的标记，并且是E标记的子标记（不包括孙标记）
E+F	所有名称为F的标记，并且该标记紧接着前面的E标记
E～F	所有名称为F的标记，并且该标记前面有一个E标记
E:has(F)	所有名称为E的标记，并且该标记包含F标记
E.C	所有名称为E的标记，属性类别为C，如果去掉E，就是属性选择器.C
E#I	所有名称为E的标记，id为I，如果去掉E，就是id选择器#I
E[A]	所有名称为E的标记，并且设置了属性A
E[A=V]	所有名称为E的标记，并且属性A的值等于V
E[A^=V]	所有名称为E的标记，并且属性A的值以V开头
E[A$=V]	所有名称为E的标记，并且属性A的值以V结尾
E[A*=V]	所有名称为E的标记，并且属性A的值中包含V

三、位置选择器

选择器	说明
:first	第1个元素，例如div p:first选中页面中所有p元素的第1个，且该p元素是div的子元素
:last	最后一个元素，例如div p:last选中页面中所有p元素的最后一个，且该p元素中div的子元素
:first-child	第一个子元素，例如ul:first-child选中所有ul元素，且该ul元素是其父元素的第一个子元素
:last-child	最后一个子元素，例如ul:last-child选中所有ul元素，且该ul元素是其父元素的最后一个子元素
:only-child	所有没有兄弟的元素，例如p:only-child选中所有p元素，如果该p元素是其父元素的惟一子元素
:nth-child(n)	第n个子元素，例如li:nth-child(2)选中所有li元素，且该li元素是其父元素的第2个子元素（从1开始计数）
:nth-child(odd\|even)	所有奇数号或者偶数号子元素，例如li:nth-child(odd)选中所有li元素，且这些li元素为其父元素的第奇数个元素（从1开始计数）
:nth-child(nX+Y)	利用公式来计算子元素的位置，例如li:nth-child(5n+1)选中所有li元素，且这些li元素为其父元素的第5n+1个元素（1,6,11,16……）
：odd或者even	对于整个页面而言的奇数号或偶数号元素，例如p:even为页面中所有排在偶数的p元素（从0开始计数）
:eq(n)	页面中第n个元素，例如p:eq(4)为页面中的第5个元素
:gt(n)	页面中第n个元素之后的所有元素（不包括第n个本身），例如 p:gt(0)为页面中第1个p元素之后的所有p元素
:lt(n)	页面中的第n个元素之前的所有元素（不包括第n个元素本身），例如p:lt(2)为页面中第3个p元素之前的所有p元素

四、过滤选择器

:animated	所有处于动画中的元素
:button	所有按钮，包括input[type=button]、input[type=submit]、input[type=reset]、<button>标记
:checkbox	所有复选框，等同于input[type=checkbox]
:contains(foo)	选择所有包含了文本"foo"的元素
:disabled	页面中被禁用了的元素
:enabled	页面中没有被禁用的元素
:file	上传文件的元素，等同于input[type=file]
:header	选中所有标题元素，例如<h1>~<h6>
:hidden	页面中被隐藏的元素
:image	图片提交按钮，等同于input[type=image]
:input	表单元素，包括<input>、<select>、<textarea>、<button>
:not(filter)	反向选择
:parent	选择所有拥有子元素（包括文本）的元素，空元素将被排除
:password	密码文本框，等同于input[type=password]
:radio	单选按钮，等同于input[type=radio]
:reset	重置按钮，包括input[type=reset]和button[type=reset]
:selected	下拉菜单中被选中的项
:submit	提交按钮，包括input[type=submit]和button[type=submit]
:text	文本输入框，等同于input[type=text]
:visible	页面中的所有可见元素

以下为这些基础选择器的代码实例（测试环境IE9）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>反向过滤</title>
<style type="text/css">
<!--

form{
	font-size:12px;
	margin:0px; padding:0px;
}
input.btn{
	border:1px solid #005079;
	color:#005079;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}
p{
	padding:5px; margin:0px;
}
.myClass{
	background-color:#ffbff4;
	text-decoration:underline;
	border:1px solid #0000FF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

.myClassPro{
	/* 设定某个CSS类别 */
	background-color:#d0baba;
	color:#5f0000;
	text-decoration:underline;
}

.myClassLocal{
	/* 设定某个CSS类别 */
	background-color:#c0ebff;
	text-decoration:underline;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
//1.基本选择器
function base(){

	var oElements = $("h2 a");
	for(var i = 0; i < oElements.length; i++){
		oElements[i].innerHTML = i.toString();
	}

}

//2.功能函数前缀
function fun(){
	var str = "     1234567890";
	str = $.trim(str);
	alert(str.length);
}
//3.创建DOM元素
function creatDOM(){
	var strHtml = $("<p>啊～～～～～～～～～</p>");
	strHtml.insertAfter("#aaa");
}

//4.自定义添加“$”
$.fn.disable = function(){
	//扩展jQuery,表单元素统一disable
	return this.each(function(){
		if(typeof this.disabled != "undefined") this.disabled = true;
	});
}
$.fn.enable = function(){
	//扩展jQuery，表单元素统一 enable
	return this.each(function(){
		if(typeof this.disabled != "undefined") this.disabled = false;
	});
}

function swapInput(name,button){
	if(button.value == "Disable"){
		//如果按钮值为Disable，则调用disable()方法
		$("input[name="+name+"]").disable();
		button.value = "Enable";
	}else{
		//如果按钮值为Enable，则调用disable()方法
		$("input[name="+name+"]").disable();
		button.value = "Disable";
	}
}

//5.属性选择器
function property(){
	$("input[type]").addClass("myClassPro");
}

//6.包含选择器
function containProperty(){
	$("ul li ul li:has(a)").addClass("myClassPro");
}

//7.位置选择器
function local(){
	$("p:even").addClass("myClassLocal");//从0计数
	//$("p:nth-child").addClass("myClassPro");//从1计数
	
	
}

//8.过滤选择器
function pass(oCheckBox){
	//使用:checked过滤出被用户选中的
	$("input[name="+oCheckBox+"]:checked").addClass("myClass");

}

//9.反向过滤的迭代使用选择器
function notFilter(){	
	$(":input:not(:checkbox):not(:radio)").addClass("myClass");
}
</script>
</head>
<body>
<form method="post" name="myForm1" action="addInfo.aspx">
<h2><a href="#" >正文</a>内容</h2>
<h2>正文<a href="#">内容</a></h2>
<br><input type="button" value="1.基本选择器" onclick="base()" class="btn">
<br>
<br><input type="button" value="2.功能函数前缀" onclick="fun()" class="btn">
<br>
<br><input type="button" value="3.创建DOM元素" onclick="creatDOM()" class="btn">
<br>
<br><input type="button" value="5.属性选择器" onclick="property()" class="btn">
<br>
<br><input type="button" value="6.包含选择器" onclick="containProperty()" class="btn">
<br>
<br><input type="button" value="7.位置选择器" onclick="local()" class="btn">


<ul>
	<li><a href="http://picasaweb.google.com/isaacshun">isaac photo</a>
		<ul>
			<li>10-6.html</li>
            <li><a href="10-7.html" id="aaa">10-7.html</a></li>
			<li><a href="10-8.html" title="圆角矩形">10-8.html</a></li>
			<li><a href="10-9.html">10-9.html</a></li>
            <li><a href="Pageisaac.html" title="制作中...">isaac</a></li>
		</ul>
	</li>
</ul>


<p id="aaa"><label for="name">姓名:</label> <input type="text" name="name" id="name"></p>
<p><label for="passwd">密码:</label> <input type="password" name="passwd" id="passwd"></p>
<p><label for="color">最喜欢的颜色:</label>
<select name="color" id="color">
	<option value="red">红</option>
	<option value="green">绿</option>
	<option value="blue">蓝</option>
	<option value="yellow">黄</option>
	<option value="cyan">青</option>
	<option value="purple">紫</option>
</select></p>
<p>性别:
	<input type="radio" name="sex" id="male" value="male"><label for="male">男</label>
	<input type="radio" name="sex" id="female" value="female"><label for="female">女</label></p>
<p>你喜欢做些什么:<br>
<input type="button" name="btnSwap" id="btnSwap" value="Disable" class="btn" onclick="swapInput('hobby',this)"><br>
	<input type="checkbox" name="hobby" id="book" value="book"><label for="book">看书</label>
	<input type="checkbox" name="hobby" id="net" value="net"><label for="net">上网</label>
	<input type="checkbox" name="hobby" id="sleep" value="sleep"><label for="sleep">睡觉</label></p>
<br>
<br><input type="button" value="8.过滤选择器" onclick="pass('hobby')" class="btn">	
<p><label for="comments">我要留言:</label><br><textarea name="comments" id="comments" cols="30" rows="4"></textarea></p>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit">
<input type="reset" name="btnReset" id="btnReset" value="Reset"></p>
<br><input type="button" value="9.反向过滤的迭代使用选择器" onclick="notFilter()" class="btn">

</form>


</body>
</html>

五.jquery链

filter()筛选元素可以接受两种元素，一是接受通用方法，二是接受返回值为布尔值的函数。在filter()的参数中，不能使用直接的等于匹配（=），只能使用前匹配（^=）、后匹配（&=）、任意匹配（*=）。

在jQuery链中，后面的操作都是以前面的操作结果为对象的。如果希望操作对象为上一步的对象，则可以使用end()方法。

通过andSelf()将前面两个对象进行组合后共同处理。

以下为实例（IE9）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>filter()方法</title>
<style type="text/css">
<!--
div{
	margin:5px; padding:5px;
	height:40px; width:40px;
	float:left;
}
.myClass1{
	background:#fcff9f;
}
.myClass2{
	border:2px solid #000000;
}
.myClass3{
	background:#ffde00;
}
.myClass4{
	border:1px solid #0000FF;
}

.myBackground{
	background:#ffde00;
}
.myBorder{
	border:2px solid #0000FF;
}

-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
	//1.通用表达式
 	function common(){
 		$("div").addClass("myClass1").filter("[class*=middle]").addClass("myClass2"); 		
 	}
 	
 	//2.函数方法，函数必须返回布尔值
 	function functionparm(){
 		$("div").addClass("myClass1").filter(function(index){
 			return index == 0 || $(this).attr("id") == "fifth";			
 		}).addClass("myClass2");
 	}
 	
 	//3.find
 	function findFunction(){
 		$("p").find("span").addClass("myClass3");	
 	}
 	//4.jquery链，上一步操作对象end()
 	function end(){
 		$("p").find("span").addClass("myClass3").end().addClass("myClass4");
 	}
 	
 	//5.andSelf()，将两个对象进行组合后共同处理
 	function andSelf(){
 		$("#aaa").find("p").addClass("myBackground").andSelf().addClass("myBorder");
 	}
</script>
</head>
<body>
	
	<div id="first"></div>
	<div class="middle" id="second"></div>
	<div class="middle" id="third"></div>
	<div class="middle" id="fourth"></div>
	<div class="middle" id="fifth"></div>
	<div id="six"></div>
	<br><br><br><br><br><br><br>
	<table>
		<tr>
			<td>
				<input type="button" value="1.通用表达式" onclick="common();">&nbsp;
				<input type="button" value="2.函数方法" onclick="functionparm();">&nbsp;
				<input type="button" value="3.find" onclick="findFunction();">&nbsp;
				<input type="button" value="4.end" onclick="end();">&nbsp;
				<input type="button" value="5.andSelf" onclick="andSelf();">
			</td>
		</tr>	
	</table>
	<p><span>Hello</span>, how are you?</p>
	<span>very nice,</span> thank you.
	<div id="aaa">
		<p>第一段</p>
		<p>第二段</p>
	</div>
</body>
	
</body>
</html>

分享到：

jQuery控制页面 | Equals、ToString、反射

2012-05-13 19:29
浏览 1793
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery基础

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery基础

评论

发表评论

相关推荐

jQuery制作动画与特效

jQuery控制页面（三）实例：快餐配送页面

jQuery控制页面（二）

jQuery控制页面

最近访客更多访客>>