JQUERY的选择器

JQUERY

简称JQ 是JS语言的框架 对原生的JS代码进行封装 可以让程序员写的更少但是实现的更多。
可以大大简化JS代码的编写，更加简单的去实现功能

如何使用JQuery

//script标签如果引入了文件则不能在标签体内继续写代码 如果需要写 在创建一个script标签
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>

$("#id").click(function(){
	$("#one").css("background-color","FF69B4");
});

JQuery的选择器

1.基础选择器

标签名选择器 $("div")
id选择器 $("#id")
类选择器 $(".class")
分组选择器 $("div,#id,.class")
任意元素选择器 $("*")

2.层级选择器

$("div span") 匹配div里面的所有span元素包括子孙后代
$("div>span") 匹配div里面所有的span子元素
$("div+span") 匹配div的弟弟span
$("div-span") 匹配div的弟弟们span

层级相关的方法:

$("#abc").siblings("div") 匹配id为abc元素的所有兄弟
$("#abc").prev() 匹配id为abc元素的哥哥元素
$("abc").pervAll() 匹配id为abc元素的哥哥们元素
$("abc").next() 匹配id为abc元素的弟弟元素
$("abc").nextAll() 匹配id为abc元素的弟弟们元素
$("abc").parent() 匹配id为abc元素的父元素
$("abc").children() 匹配id为abc元素的子元素们

3.过滤选择器

$("div.first") 匹配所有div中的第一个
$("div.last") 匹配所有div中的最后一个
$("div.eq(n)") 匹配所有div中下标等于n的 n从0开始
$("div.lt(n)") 匹配所有div中下标小于n的
$("div.gt(n)") 匹配所有div中下标大于n的
$("div.not(.abc)") 匹配所有div中class值不等于abc的
$("div.even") 匹配所有div中下标为偶数的
$("div.odd") 匹配所有div中下标为奇数的

4.可见选择器

$("div:visible") 匹配所有显示的div
$("div:hidden") 匹配所有隐藏的div

隐藏显示相关的方法
$("#abc").show() 让隐藏的元素显示
$("#abc").hide() 让显示的元素隐藏
$("#abc").toggle() 隐藏显示状态切换

5.内容选择器

$("div:has(p)") 匹配包含p子元素的div
$("div:empty") 匹配空的div
$("div:parent") 匹配非空的div
$("div:contains('xxx')") 匹配包含xxx文本的div

6.属性选择器

$("div[属性名]") 匹配包含某个属性的所有div
$("div[属性名='值']") 匹配某个属性名=值的所有div
$("div[属性名！='值']") 匹配某个属性名！=值的所有div

7.子元素选择器

$("div:first-child") 匹配是div并且是第一个并且是子元素
$("div:last-child") 匹配是div并且是最后一个并且是子元素
$("div:nth-child(n)") 匹配是div并且是第n个并且是子元素 n从1开始

8.表单选择器

$(":input") 匹配所有的控件
$(":password") 匹配所有的密码框
$(":radio") 匹配所有的单选
$(":checkbox") 匹配所有的多选
$(":input：checked") 匹配所有选中的单选和多选
$(":selected") 匹配所有选中的下拉选