通过本文主要向大家介绍了jQuery,选择器,jQuery,CSS,选择器,jQuery,属性选择器,jQuery,元素选择器等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
示例代码：
jquery 部分
$(document).ready(function(){//页面加载完成后执行
tagName();
// idName();
// className();
});
function tagName(){
$('p').addClass('heighlight');
}
function idName(){
$('#div').addClass('heighlight2');
}
function className(){
$('p.pClass').addClass('heighlight2');
}
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/select.js" ></script>
<link rel="stylesheet" href="css/select.css" />
</head>
<body>
<div id="div">
<p>this is my name!!</p>
<p class="pClass">class is import!</p>
<a href="#">you cai!!</a>
</div>
</body>
</html>
css部分
.heighlight {
background-color: blue;
}
.heighlight2 {
background-color: red;
}
.alt{
background-color:#ccc;
}
jQuery 属性选择器
Query 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jquery部分，其他部分同上。
$(document).ready(function(){
attribute();
});
function attribute(){
$('[href="#"]').addClass('heighlight');
}
jQuery CSS 选择器
.addClass()或者是.css()
$(document).ready(function(){
cssName();
});
function cssName(){
$('p').css("background-color","pink");
}
jQuery 自定义选择符
$(document).ready(function(){
custom();
});
function custom(){
$('tr:odd').addClass('alt');
}
附表
| 选择器 | 实例 | 选取 |
|---|---|---|
| * | $("*") | 所有元素 |
| #id | $("#lastname") | id="lastname" 的元素 |
| .class | $(".intro") | 所有 class="intro" 的元素 |
您可能想查找下面的文章:文章分类 |