您的位置：首页 > Web前端 > JQuery

jQuery学习笔记_选择器

2015-12-22 15:38 876 查看

一、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")

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery class 实例函数选择器

相关文章推荐

新的分享

章节导航