jQuery四种选择器使用及示例

2020-05-29 07:17:42易采站长站整理

 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');
}