html和jQuery常用的选择器

来源:互联网 发布:国产羽绒服 知乎 编辑:程序博客网 时间:2024/05/24 07:04
<!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>