jQuery选择器

JQuery强大的选择器

---

基本选择器

标签选择器	$(“p”).css(“color”,”red”);
id选择器	$(“#er”).css(“color”,”red”);
class选择器	$(“.si”).css(“color”,”red”);
选择器1，选择器2。。。	$(“#er,.si”).css(“color”,”red”);

层级选择器

后代选择器	$(“#d2 p”).css(“color”,”red”); p1p2
子代选择器	$(“#d2>p”).css(“color”,”red”); p1
相邻的兄弟	$(“#d2+p”).css(“color”,”red”);
后面的所有兄弟	$(“#d2~p”).css(“color”,”red”);

基本的筛选选择器

第一个元素	$(“p:first”).css(“color”,”red”);
最后一个元素	$(“p:last”).css(“color”,”red”);
not过滤	$(“p:not(.si)”).css(“color”,”red”);
下标为奇数的元素	$(“p:odd”).css(“color”,”red”);
下标为偶数的元素	$(“p:even”).css(“color”,”red”);
下标相等的	$(“p:eq(2)”).css(“color”,”red”);
大于下标的	$(“p:gt(2)”).css(“color”,”red”);
小于小标的	$(“p:lt(2)”).css(“color”,”red”);

表单选择器

:input	选取所有输入框
:text	选取所有的文本框
: password	选取所有的密码框
: radio	选取所有的单选按钮
: checkbox	选取所有的复选框
: submit	选取所有的提交按钮
: reset	选取所有的重置按钮
: button	选取所有的按钮
: file	选取所有的文件域
: hidden	选取所有的隐藏域

属性函数，样式函数

$(“img”).attr(“title”);	得到img的title属性值
$(“img”).attr(“title”,”xxx”);	设置img的title属性值
$(“img”).removeAttr(“title”);	移除img的title属性值

$(“input”).val();	得到input框的值
$(“input”).val(“xxxx”);	设置input框的值

$(“div”).text();	得到div里面的纯文本内容
$(“div”).text(“xxxx”);	设置div里面的纯文本内容

$(“div”).html();	得到div里面所有内容（html标签+文本值）
$(“div”).html(“xxxx”);	设置div里面所有内容（html标签+文本值）

样式函数

$(“p”).addClass(“fan”);	为元素添加类样式
$(“p”).removeClass(“fan”);	为元素移除类样式
$(“p”).toggleClass(“fan”);	切换样式（有->无、无->有）

$(“p”).css(“css属性”)	获得p元素的css属性的值
$(“p”).css(“属性”,”值”)	设置p元素的css属性的值
$(“p”).css({json})	设置p元素多个css属性的值
$(“p”).css({“width”:”150px”,”font-weight”:”bold”,”color”:”red”});

$(“div”).width()	获得元素的宽度
$(“div”).height()	获得元素的高度
$(“div”).width(值)	设置元素的宽度
$(“div”).height(值)	设置元素的高度

div元素的宽度

$(“div”).innerWidth()	包含内边距
$(“div”).outerWidth()	包含内边距+边框
$(“div”).outerWidth(true)	包含内边距+边框+外边距