特点:1.被封装。2.链式表达式。3.自动协调浏览器的兼容性。4.非侵入性。
基本语法构:
<script src="scripts/jquery-1.7.1.min.js"></script>
<script language="javascript">
//ready()是个事件,当HTML在浏览器中加载完成后触发
$(document).ready(function () {
//当页面加载完成后自动触发
alert("aaa");
});
</script>
一、选择器——找到对象
(一)基本选择器
1.最基本
ID 选择器——#
class选择器——。
标签选择器——标签名
2.组合
并列关系——用逗号隔开
后代关系——用空格隔开
子级关系——用>隔开
(二)过滤选择器——使用:进行过滤。
1.基本过滤——按照元素在HTML中的排列次序进行过滤
:first,:last,:eq(n),:even,:odd,:not(选择器)
$(".dd").css("margin","5px").css("float","left").css("background-color","yellow").css("border","5px solid red").css("width","100px").css("height","100px"); //$(".dd:first").css("background-color", "blue"); //$(".dd:last").css("background-color", "blue"); //$(".dd:eq(4)").css("background-color", "blue");//等于第几个equal从0开始 //$(".dd:even").css("background-color", "blue");//偶数 //$(".dd:odd").css("background-color", "blue");//奇数 //$(".dd:not(#d1)").css("background-color", "blue");//不包括
2.属性过滤——[]
a.是否有这个属性——选择器[属性名]
$(".dd[title]").css("background-color", "blue");
b.属性等于某个值——选择器[属性名=值]
$(".dd[title=hello]").css("background-color", "blue");
c.属性不等于某个值——选择器[属性名!=值]
$(".dd[title!=hello]").css("background-color", "blue");
d.属性以某个字符串开头——选择器[属性名^=值]
$(".dd[title^=h]").css("background-color", "blue");//正则表达式
e.属性以某个字符串结尾——选择器[属性名$=值]
$(".dd[title$=o]").css("background-color", "blue");//正则表达式
f.属性中包含某个字符串——选择器[属性名*=值]
$(".dd[title*=o]").css("background-color", "blue");
$(".dd[title=1234][thhhh]").css("background-color", "blue");//两级过滤以及多层过滤一直往后加【】就行
3.内容过滤
a.通过子元素情况进行过滤——:has(选择器)
$(".dd:has(span)").css("background-color", "blue");
$(".dd:has(span[class=ss])").css("background-color", "blue");
b.通过文本情况进行过滤——:contains(文字)
$(".dd:contains(水)").css("background-color", "blue");