jquery1.9学习笔记 之选择器(基本元素五)
2013-08-31 21:16
706 查看
多种元素选择器 jQuery("selector1,selector2,selectorN")
例子:
<!doctype html>
<html lang='zh'>
<head>
<meta charset='utf-8'>
<title>multiple demo</title>
<style type="text/css">
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div>div</div>
<p class='myClass'>p class='myClass'</p>
<p class='notMyClass'>p class='notMyClass'</p>
<span>span</span>
<script>
$("div,span,p.myClass").css("border","3px solid red");
</script>
</body>
</html>
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/14/ef062a59b816900de362bd6d4e078036.png)
例:
<!doctype html>
<html lang='zh'>
<head>
<meta charset='utf-8'>
<title>multiple demo</title>
<style type="text/css">
b{
color:red;
font-size: 16px;
display: block;
clear: left;
}
div,span,p{
width: 40px;
height: 40px;
float: left;
margin: 10px;
background-color: blue;
padding: 3px;
color:white;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<span>span</span>
<p>p</p>
<p>p</p>
<div>div</div>
<span>span</span>
<p>p</p>
<div>div</div>
<b></b>
<script type="text/javascript">
var list = $("div,p,span").map(function(){
return this.tagName;
}).get().join(", ");
$("b").append(document.createTextNode(list));
</script>
</body>
</html>
例子:
<!doctype html>
<html lang='zh'>
<head>
<meta charset='utf-8'>
<title>multiple demo</title>
<style type="text/css">
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div>div</div>
<p class='myClass'>p class='myClass'</p>
<p class='notMyClass'>p class='notMyClass'</p>
<span>span</span>
<script>
$("div,span,p.myClass").css("border","3px solid red");
</script>
</body>
</html>
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/14/ef062a59b816900de362bd6d4e078036.png)
例:
<!doctype html>
<html lang='zh'>
<head>
<meta charset='utf-8'>
<title>multiple demo</title>
<style type="text/css">
b{
color:red;
font-size: 16px;
display: block;
clear: left;
}
div,span,p{
width: 40px;
height: 40px;
float: left;
margin: 10px;
background-color: blue;
padding: 3px;
color:white;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<span>span</span>
<p>p</p>
<p>p</p>
<div>div</div>
<span>span</span>
<p>p</p>
<div>div</div>
<b></b>
<script type="text/javascript">
var list = $("div,p,span").map(function(){
return this.tagName;
}).get().join(", ");
$("b").append(document.createTextNode(list));
</script>
</body>
</html>
![](https://oscdn.geek-share.com/Uploads/Images/Content/202010/14/db3fee51b00e209f51d7a7cc096d7928.png)
相关文章推荐
- jquery1.9学习笔记 之选择器(基本元素四)
- jquery1.9学习笔记 之选择器(基本元素二)
- JQUERY1.9学习笔记 之基本过滤器(十一) 奇数选择器
- JQUERY1.9学习笔记 之内容过滤器(二) 空元素选择器
- JQuery学习笔记-基本过滤选择器
- 前端学习笔记-jquery-5-基本选择器
- JQUERY1.9学习笔记 之内容过滤器(三) has选择器
- JQuery学习笔记-基本选择器
- JavaScript学习笔记8-jQuery基本选择器深度解析
- JQUERY1.9学习笔记 之属性选择器(一) 前缀选择器
- JQUERY1.9学习笔记 之基本过滤器(十二) 根元素选择器
- JQUERY1.9学习笔记 之基本过滤器(四) 首元素选择器
- JQuery学习笔记-基本过滤选择器
- JQUERY1.9学习笔记 之属性选择器(二) 包含选择器
- JQuery学习笔记-基本选择器
- JavaScript学习笔记8-jQuery基本过滤选择器深度解析
- jQuery学习笔记2之jQuery选择器
- jquery学习之1.3-基本选择器
- {传智播客} (学习笔记)--JQuery需要掌握的是9种选择器的用法
- JQuery 学习笔记 选择器之三