`
fengxu0706
  • 浏览: 15694 次
社区版块
存档分类
最新评论

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基础教程中文版2015

    **jQuery基础教程中文版2015** jQuery是一款强大的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。2015年发布的这个基础教程,旨在帮助初学者快速掌握jQuery的核心概念和技术。 一、...

    jquery基础教程第四版源码

    《jQuery基础教程第四版》是一本深受欢迎的前端开发指南,专注于jQuery库的使用和实践。jQuery是一个轻量级、高性能的JavaScript库,它极大地简化了JavaScript操作DOM(文档对象模型)、事件处理、动画制作以及Ajax...

    jQuery基础教程第5章中文版

    以下是关于jQuery基础教程第5章的一些核心知识点: 1. **选择器**:jQuery的选择器基于CSS,允许开发者轻松地选取DOM中的元素。如`$("#id")`用于选取ID为"id"的元素,`$(".class")`用于选取所有class为"class"的...

    jQuery基础教程(第四版)中文pdf版+配套源码

    《jQuery基础教程(第四版)中文pdf版+配套源码》是针对JavaScript库jQuery的一份详细学习资源,旨在帮助初学者和进阶开发者掌握jQuery的核心概念和技术。jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历...

    jQuery基础教程笔记jQuery基础教程笔记

    jQuery基础教程笔记jQuery基础教程笔记jQuery基础教程笔记jQuery基础教程笔记

    jQuery基础教程源码

    这个"jQuery基础教程源码"资源包含了与《jQuery基础教程》一书配套的所有实例源代码,旨在帮助读者更好地理解和实践jQuery的核心概念。 在jQuery中,DOM(文档对象模型)操作是其主要功能之一。DOM是HTML和XML文档...

    jQuery基础教程(第四版),完整高清版

    《jQuery基础教程(第4版)》是jQuery经典技术教程的最新升级版,涵盖jQuery 1.10.x和jQuery 2.0.x。本书前6章以通俗易懂的方式讲解了jQuery的核心组件,包括jQuery的选择符、事件、动画、DOM操作、Ajax支持等。第7...

    jQuery基础教程(第二版)源码

    《jQuery基础教程(第二版)源码》是一个用于学习jQuery库的配套资源,包含了多个章节的实例代码。jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。这个教程源码...

    jquery 基础教程 pdf

    ### jQuery基础教程知识点详解 #### 一、jQuery技术框架概览 **1.1 jQuery的起源与发展** - **创建者**: John Resig在2006年初创建了jQuery。 - **最新版本**: 截至资料所述时,最新版本为1.3.2。 - **官方...

    jQuery基础教程(第四版)中文

    《jQuery基础教程(第四版)中文》是一本深入浅出介绍jQuery库的指南,适合初学者和有一定经验的开发者。jQuery是JavaScript的一个强大框架,它简化了DOM操作、事件处理、动画效果以及Ajax交互,极大地提高了开发...

    Learning jQuery 1.3 | Jquery基础教程(第二版)

    **jQuery基础教程(第二版)** jQuery是一款广泛应用于Web开发的JavaScript库,它极大地简化了JavaScript的使用,尤其是处理HTML文档、事件处理、动画效果以及AJAX交互。本教程将深入探讨jQuery的核心概念和功能,...

    jQuery基础教程源码 第三版

    "jQuery基础教程源码 第三版"是一本旨在帮助初学者和有经验的开发者深入了解jQuery的著作。在这个版本中,作者深入浅出地介绍了jQuery的核心概念、方法和最佳实践,通过实例代码帮助读者更好地理解和应用jQuery。 ...

    jQuery基础教程第四版+配套源码

    《jQuery基础教程第四版》是一本专为初学者设计的指南,旨在帮助读者掌握JavaScript库jQuery的核心概念和技术。jQuery简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务,是Web开发中广泛使用的工具。这...

    jquery基础教程(第四版)

    ### jQuery基础教程(第四版)知识点总结 #### 一、jQuery简介与背景 - **诞生时间**:2006年1月14日 - **创始人**:John Resig,一位年轻的80后程序员 - **背景**: - 在jQuery诞生之前,已经有像Dojo和...

    jquery基础教程第二版

    《jQuery基础教程第二版》正是应这样的需求而生。这本书不仅详细地介绍了jQuery的基础知识,还通过实例和代码片段让初学者快速上手。更重要的是,书中涵盖了jQuery的核心概念和高级应用,使得即便是经验丰富的开发者...

    JQuery基础教程(高清中文版PDF)

    **jQuery基础教程(高清中文版PDF)** 这本由Jonathan Chaffer和Karl Swedberg编写的《jQuery基础教程》是国外备受推崇的经典著作,它深入浅出地讲解了jQuery库的基础知识,对于想要掌握JavaScript前端开发的人员来说...

Global site tag (gtag.js) - Google Analytics