【学习笔记】:jQuery及其选择器

前端开发 作者: 2024-08-20 23:35:02
[toc] 一、jQuery概述 write less , do more . jQuery是轻量级的JavaScript函数库,在使用时需要引入jQuery库文件。引用方式如下,两种都可。 二、jQ

一、jQuery概述

<script src="../jquery-1.4.2.min.js"></script>	 <!--生产版-->
<script src="../jquery-1.4.2.js"></script>		 <!--开发版-->

二、jQuery对象的创建方式

三、JS对象和jQuery对象的转换

var div = document.getElementById("test");
var $div = $(div);				//$div是一个变量名,只是为了提高可读性。
var div = $("div")[0];			//方式1
var div1 = $("div").get(0);		//方式2

四、jQuery的选择器

$("#test") 			//选取id为test的元素。
$(".city")			//选取所有class为city的元素。
$("p")				//选取所有<p>元素。
$("*")				//选取所有的元素。
$("div,span,p.city")//选取所有<div>,<span>,class为city的<p>
$("div span") 	//匹配div下所有的span元素
$("div>span") 	//匹配div下所有的span子元素
$("div+span")	//匹配div后面紧邻的span兄弟元素
$("div~span") 	//匹配div后面所有的span兄弟元素 
$("div:first")		//匹配所有div中的第一个div元素
$("div:last") 		//匹配所有div中的最后一个div元素
$("div:even") 		//匹配所有div中索引值为偶数的div元素,0开始
$("div:odd")		//匹配所有div中索引值为奇数的div元素,0开始
$("div:eq(n)")		//匹配所有div中索引值为n的div元素,0开始
$("div:lt(n)") 		//匹配所有div中索引值小于n的div元素,0开始
$("div:gt(n)") 		//匹配所有div中索引值大于n的div元素,0开始
$("div:not(.one)") 	//匹配所有class值不为one的div元素
$("div:contains('abc')") //匹配所有div中包含abc内容的div元素,如: <div>xxxabcxx</div>
$("div:has(p)") 		 //匹配所有包含p元素的div元素,如: <div><p></p></div>
$("div:empty") 			 //匹配所有内容为空的div元素,如: <div></div>
$("div:parent") 		 //匹配所有内容不为空的div元素,如: <div>xxxxx</div>
$("div:hidden") 		// 匹配所有隐藏的div元素
$("div:visible") 		// 匹配所有可见的div元素
$("div[id]") 			//匹配所有具有id属性的div元素
$("div[id='d1']") 		//匹配所有具有id属性并且值为d1的div元素
$("div[id!='d1']") 		//匹配所有id属性值不为d1的div元素
$("div[id^='d1']") 		//匹配所有id属性值以d1开头的div元素
$("div[id$='d1']") 		//匹配所有id属性值以d1结尾的div元素
//等等……
$("div:nth-child(n)") 	//n可以取even、odd、关于m的表达式(m从1开始)、
$("div:first-child") 	//匹配div中第1个子元素。
$("div:last-child") 	//匹配div中最后一个子元素。。。
$(":selected") 		//匹配所有被选中的option选项
$(":checked") 		//匹配所有的被选中的单选框/复选框/option
$(":enabled")		//匹配所有可用的元素
$(":disabled")		//匹配所有不可用的元素
//例
$("input:checked") 	//匹配所有的被选中的单选框/复选框
$(":input") 		//匹配所有的input文本框、密码框、单选框、复选框、select框、textarea、button。
$(":password") 		//匹配所有的密码框
$(":radio") 		//匹配所有的单选框
$(":checkbox") 		//匹配所有的复选框
$(":submit")		//匹配所有的提交按钮
$(":reset")			//匹配所有的重置按钮
$(":hidden")		//匹配所有的不可见元素
//等等……

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_65780.html