一、jQuery语法
基础语法:$(selector).action();
jQuery的所有代码都将写在$(document).ready()
函数中。
二、选择器
2.1 基础选择器
#id
根据id匹配一个元素.class
根据class匹配一个元素- element 根据元素名称匹配元素
*
选择所有元素,包括body
上述实例如下:
<!DOCTYPE html>
<html>
<head>
<title>jQuery ex01</title>
</head>
<body>
<h2>welcome to jQuery</h2>
<div id="demo01"></div>
<div class="demo02">
<a href="http://www.baidu.com">
http://www.baidu.com<em>hai</em>
</a>
</div>
<script src="http://labfile.oss.aliyuncs.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("h2").css({
"color": "darkred",
"margin-bottom":"10px"
}),
$("#demo01").css({
"margin": "10px",
"float": "left",
"width":"100px",
"height":"100px",
"background":"red"
}),
$(".demo02").css({
"margin": "10px",
"float": "left",
"width":"100px",
"height":"100px",
"background":"blue"
}),
$("a,em").css({
"margin-left": '150px',
"float":"left",
"color": 'purpose',
"width":"100px",
"height":"100px"
});
});
</script>
</body>
</html>
selector1,selector2,……
用“,”分隔开然后再拼成一个选择器字符串,同时选择多个匹配的选择器的内容。
2.2 层次选择器
- ancestor descendant
选中ancestor中的所有descendant后代元素,选择类名为demo02的元素的所有后代a元素,直接的第一个子元素百度,字体样式得到改变,实验楼也是demo02的后代,也得到了样式的改变。
<div class="demo02">
<a href="http://www.baidu.com">百度</a>
<div class="innerDemo">
<a href="http://www.shiyanlou.com">实验楼</a>
</div>
</div>
-----------------------------------------------------------
$(document).ready(function() {
$(".demo02 a").css({
"font-size": "25px",
})
});
- parent>child
选中parent的直接子节点child,child必须包含在parent中,并且父类是parent元素。注:选择的是子元素,与后代元素区分。后代是一个空格,这里是>。
$(document).ready(function() {
$(".demo02>a").css({
"font-size": "25px",
})
});
- prev + next
prev和next是两个同级别的元素。选中在prev元素后面的next元素。选中class为demo后面的a元素,并设置大小如下:
$(document).ready(function() {
$(".demo02+a").css({
"font-size": "30px",
})
});
- prev~siblings
选择prev后面的根据siblings过滤的所有元素中选中class为demo的div元素后面的所有a同辈元素,并设置大小如下:
$(document).ready(function() {
$(".demo02~a").css({
"font-size": "30px",
})
});
2.3 表单选择器
:input 选取所有的
<input>、<textarea>、<select>、<button>
元素
:text 选取所有的单行文本框
:password 选取所有的密码框
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:submit 选取所有的提交按钮
:image 选取所有的图像按钮
:reset 选取所有的重置按钮
:button 选取所有的按钮 集合元素
:file 选取所有的上传域
:hidden 选取所有的不可见元素
如:
$(document).ready(function() {
$(":input").css({
"font-size": "30px",
})
});
2.4 过滤选择器
(1). 基本过滤选择器
:first-匹配第一个元素-
$("div:first")
:last-匹配最后一个元素-$("span:last")
:not(selector)-选取不包含匹配条件的元素-$("p:not(.a)")
:even-匹配索引是偶数的元素索引从0开始-$("li:even")
:odd-匹配索引是奇数的元素-索引从0开始-$("li:odd")
:eq(index)-匹配索引等于index的元素(索引从0开始)-$("input:eq(2)")
:gt(index)-匹配索引大于index的元素(索引从0开始)-$("input:gt(1)")
:lt(index)-匹配索引小于index的元素(索引从0开始)-$("input:lt(5)")
:header-匹配所有h1,h2…等标题元素-$(":header")
:animated-匹配所有正在执行动画的元素-$("div:animated")
:foucus-选取当前获取焦点的元素-$(":focus")
(2). 内容过滤选择器
:contains(text)-匹配含有文本内容text的元素-
$("p:contains(今天)")
:empty-匹配不含子元素或文本元素的空元素-$("p:empty")
:has(selector)匹配包含selector元素的元素-$("div:has(span)")
:parent-匹配含有子元素或文本的元素集合元素-$("div:parent")
(3). 可见性过滤选择器
:hidden-匹配所有不可见的元素-
$(":hidden")
:visible-匹配所有可见元素-$(":visible")
(4). 属性过滤选择器
[attr]-匹配拥有此属性的元素-
$("img[alt]")
[attr=value]-匹配属性值为value的元素-$("a[title=test]")
[attr!=value]-匹配属性值不等于value的元素-$("a[title!=test]")
[attr^=value]-匹配属性值以value开头的元素-$("img[alt^=welcome]")
[attr$=value]-匹配属性值以value结尾的元素-$("img[alt$=last]")
[attr*=vlaue]-匹配属性值中含有value的元素-$("div[title*=test]")
[attr1][attr2]…通过多个属性进行匹配-$("div[id][title*=test]")
(5). 子元素过滤选择器
:first-child-选取第一个子元素-
$("div:first-child")
:last-child-选取最后一个子元素-$("div:last-child")
:nth-child-匹配每个父元素下的第index个子元素索引从1开始-$("div:nth-child(2)")
:only-child-某元素是它父元素中的唯一的子元素则匹配它-$("div:only-child")
(6). 表单对象属性过滤选择器
:enabled-匹配所有可用元素-
$("form:enabled")
:disabled-匹配所有不可用的元素-$("form:disabled")
:checked-匹配所有被选中的元素(含单选框,复选框)-$("input:checked")
:selected-匹配所有被选中的选项元素-$("select :selected")