CSS应用到页面中有3中方式:
行间样式表
内部样式表
外部样式表
CSS选择器
标签选择器 E{ CSS规则 }
ID选择器 #ID{ CSS规则 }
类选择器 E.className{ CSS规则 }
群组选择器 E1,E2,E3{ CSS规则 }
后代选择器 E F{ CSS规则 }
通配符选择器 *{ CSS规则 }
jQuery选择器
简单选择器
#id 返回单个 $("#test")
.class 集合 $(".test")
* 集合 $("*")
selector1,sel2...selN 集合 $("div,span,p.myClass")选取所有<div>,<span>,class为myClass的<p>标签的一组元素
层次选择器
$("div span") 选取<div>里所有的<span>元素
$("div > span") 选取<div>元素下元素名是<span>的子元素
$(".one+div")选取class为one的下一个<div>同辈元素 ==$(".one").next("div")
$("#tow~div")选取id为tow的元素后面所有<div>的同辈元素 ==$("#tow").nextAll("div")
siblings()和$("#tow~div")比较
//选取#prev之后的所有同辈div元素
$("#prev ~ div").css("background","#bbffaa");
//同上
$("#prev").nextAll("div").css("background","#bbffaa");
//选取#prev所有的同辈div元素,无论前后位置
$("#prev").siblings("div").css("background","#bbffaa");
过滤选择器
:first 选取第一个元素 如:$("div:first")
:last 选取最后一个元素 如: $("div:last")
:not(selector) 去除所有给定选择器匹配的元素 如:$("input:not(.myClass)")
:even 选取索引是偶数的所有元素,0开始 如:$("input:even")
:odd 选取索引是奇数的所有元素,0开始 如:$("input:odd")
:eq(index)选取索引等于index的元素 如:$("inout:eq(1)")
:gt(index)选取索引大于index的元素
:lt(index)选取索引小于index的元素
:header 选取所有的标题元素,h1,h2等等 如:$(":header")
:animated选取当前正在执行动画的所有元素 如:$("div:animated")选取正在执行动画的<div元素>
:focus 选取当前获取焦点的元素 如:$(":focus")
内容过滤选择器
$("div:contains('我')") 选取含有文本"我"的<div>的元素
$("div:empty")选取不包含子元素(包括文本元素)的<div>空元素
$("div:has(p)")选取含有<p>元素的<div>元素
$("div:parent")选取拥有子元素(包括文本元素)的<div>元素
可见性过滤选择器
$(":hidden") 选取所有不可见的元素
$("div:visible") 选取所有可见的元素
属性过滤选择器
$("div[id]") 选取所有属性id的元素
$("div[title=test]")选择属性title为"test"的<div>元素
$("div[title!=test]")选取属性title不等于"test"的<div>元素(没有属性的title也会选中);
$("div[title^=test]") 选取属性title以"test"开始的<div>元素
$("div[title$=test]") 选取属性title以"test"结束的<div>元素
$("div[title*=test]") 选取属性title含有"test"的<div>元素
$('div[title|="en"]') 选取属性title等于en或以en为前缀的元素(该字符串后跟一个连字符"-")
$('div[title-="uk"]') 选取属性title用空格分隔的值中包含字符uk的元素
$("div[id][title$='test']")选取拥有属性id,并且属性title以“test”结束的<div>元素
子元素过滤选择器
:nth-child(index/even/odd/equation) 选取每个父元素下的第index个子元素或奇偶元素(index从1起)
:first-child 选取每个父元素的第一个子元素
:lest-child 选取每个父元素的最后一个子元素
:only-child 如果某个元素是它父元素的唯一的子元素,那么将会被匹配;如果父元素中包含其他元素,则不会被匹配
表单对象属性过滤选择器
$("#form1:enabled") 选取id为form1的表单内的所有可用元素
$("#form2:disabled")选取id为form2的表单内的所有不可用元素
$("input:checked") 选取所有被选中的<input>元素
$("select option:selected") 选取所有被选中的选项元素
表单选择器
$(":input") 选择所有的<input><textarea><select><button>元素
$(":text") 选择所有的单行文本框
$(":password") 选择所有的密码框
$(":radio") 选择所有的单选框
$(":checkbox") 选择所有的复选框
$(":submit") 选择所有的提交按钮
$(":image") 选择所有的图像按钮
$(":reset") 选取所有的重置按钮
$(":button") 选取所有的按钮
$(":file") 选取所有的上传域
$(":hidden") 选取所有不可见的元素
$("#ID")替换 document.getElementById()函数,即通过ID获取ID元素
$("tagName")替换document.getElementsByTagName()函数,即通过标签名获取HTML元素
CSS选择器找到元素添加样式,jQuery选择器找到元素是添加行为
检查网页是否存在某一元素
if( $("#tt").length > 0 ){
//do something
}
或者转换DOM对象来判断
if( $("#tt")[0]){
// do something
}