jQuery入门之常见的属性选择器

一、基本选择器

			1. 标签选择器（元素选择器）
				* 语法： $("html标签名") 获得所有匹配标签名称的元素
			2. id选择器 
				* 语法： $("#id的属性值") 获得与指定id属性值匹配的元素
			3. 类选择器
				* 语法： $(".class的属性值") 获得与指定的class属性值匹配的元素
			4. 并集选择器：
				* 语法： $("选择器1,选择器2....") 获取多个选择器选中的所有元素

$("div")   $("#one")   $(".mini")   $("span,#two")

二、层级选择器

			1. 后代选择器
				* 语法： $("A B ") 选择A元素内部的所有B元素		
			2. 子选择器
				* 语法： $("A > B") 选择A元素内部的所有B子元素

$("body div")   $("body > div")

三、属性选择器

			1. 属性名称选择器 
				* 语法： $("A[属性名]") 包含指定属性的选择器
			2. 属性选择器
				* 语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器
			3. 复合属性选择器
				* 语法： $("A[属性名='值'][]...") 包含多个属性条件的选择器
				补充：不等于：!= 	 以什么开始：^= 		以什么结束：$=		含有什么：*=

$("div[title]")
$("div[title ='test']")
$("div[id][title = 'es']")

四、 过滤选择器

			1. 首元素选择器 
				* 语法： :first 获得选择的元素中的第一个元素
			2. 尾元素选择器 
				* 语法： :last 获得选择的元素中的最后一个元素
			3. 非元素选择器
				* 语法： :not(selector) 不包括指定内容的元素
			4. 偶数选择器
				* 语法： :even 偶数，从 0 开始计数
			5. 奇数选择器
				* 语法： :odd 奇数，从 0 开始计数
			6. 等于索引选择器
				* 语法： :eq(index) 指定索引元素
			7. 大于索引选择器 
				* 语法： :gt(index) 大于指定索引元素
			8. 小于索引选择器 
				* 语法： :lt(index) 小于指定索引元素
			9. 标题选择器
				* 语法： :header 获得标题（h1~h6）元素，固定写法

		$(function () {
		//改变第一个 div 元素的背景色为 红色
				$("div:first").css("backgroundColor","red")
		// 改变最后一个 div 元素的背景色为 红色
                $("div:last").css("backgroundColor","red")
        //  改变class不为 one 的所有 div 元素的背景色为 红色
                $("div:not(.one)").css("backgroundColor","red")
        //  改变索引值为偶数的 div 元素的背景色为 红色
                $("div:even").css("backgroundColor","red")
        //  改变索引值为奇数的 div 元素的背景色为 红色
                $("div:odd").css("backgroundColor","red")
        // 改变索引值为大于 3 的 div 元素的背景色为 红色
                $("div:gt(3)").css("backgroundColor","red")
        //  改变索引值为等于 3 的 div 元素的背景色为 红色
                $("div:eq(3)").css("backgroundColor","red")
        // 改变索引值为小于 3 的 div 元素的背景色为 红色
                $("div:lt(3)").css("backgroundColor","red")
        //  改变所有的标题元素的背景色为 红色
                $(":header").css("backgroundColor","red")
            
        })

五、表单过滤选择器

			1. 可用元素选择器 
				* 语法： :enabled 获得可用元素
			2. 不可用元素选择器 
				* 语法： :disabled 获得不可用元素
			3. 选中选择器 
				* 语法： :checked 获得单选/复选框选中的元素
			4. 选中选择器 
				* 语法： :selected 获得下拉框选中的元素	

	$(function () {
		//利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值
				$("input[type='text']:enabled").val("aaa")
        //利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值
                $("input[type='text']:disabled").val("aaa")
        //利用 jQuery 对象的 length 属性获取复选框选中的个数
				alert($("input:checked").length)
        //利用 jQuery 对象的 length 属性获取下拉框选中的个数
                alert($("select option:selected").length)
        })