html和jQuery常用的选择器

来源：互联网发布：网络安全教育图片编辑：程序博客网时间：2024/05/20 23:58

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>css.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
/*id选择器*/
#myDiv{color:red}
/*类选择器*/
.myDiv2{color:green}
/*标签选择器*/
span{color:gray}
/*属性选择器*/
[my='a']{color:blue}
/*后代选择器*/
div p{color:skyblue}
</style>
<script type="text/javascript" src="../../jquery-2.2.4.js"></script>
<script type="text/javascript">
//jquery的选择器,沿用css3的选择器语法,半增强
//作用是为了获取满足选择器条件的dom元素集合(返回值就是数组)
//通过jquery选择器获取到的数组,并不是js的数组,是jquery拓展后的数组
$(function(){
/*id选择器*/
var myDiv=$("#myDiv");
//alert(myDiv);
/*类选择器*/
var myDiv2=$(".myDiv2");
//alert(myDiv2);
//标签选择器
var spanArray=$("span");
//alert(spanArray);
//属性选择器
var p=$("[my]");
p.text("一二三");
var p=$("[my='b']");
p.text("四五六");
//后代选择器
$("div a").text("google");
$("table tr:even").css("backgroundColor","gray");
$("table tr:first").css("backgroundColor","yellow");
})
</script>
</head>
<body>
<div id="myDiv">hello jquery</div>
<div class="myDiv2">hello world</div>
<span>hello</span>
<p my="a"></p>
<p my="b"></p>
<div>
<a href="www.google.com"></a>
</div>
<div>
<p>whos your daddy</p>
</div>
<table border="1" width="800" height="400">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>

阅读全文

0 0