jQuery选择器

//id选择器
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script type="text/javascript">
$(function(){
$("#div1").css("background","green")
})
</script>
<title>s上机练习</title>
</head>
<body>
<div id="div1">测试盒子</div>
</body>
//类选择器
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<title></title>
</head>
<body>
<div class="one">welcome to my code</div>
<script type="text/javascript">
//JavaScript没有原生方法
//jQuery：jQuery(".className")
$(".one").css("color","yellow");
</script>
</body>
//标签选择器
<body>
<h3>Welcom to my code</h3>
<script type="text/javascript">
//原生方法改变h1标签的颜色：
var tagH_One=document.getElementsByTagName("h3");
console.log(tagH_One);
tagH_One[0].setAttribute("style","background-color: green;")
//jQuery：
$(function(){
$("h3").css("background-color","greenyellow");
});
</script>
</body>
//通配选择器
<body>
<h1>A</h1>
<h2>B</h2>
<h3>C</h3>
<script type="text/javascript">
//可以使用getElementsByTagName("*");
/*$(function (){
$("body*").css("color","darkmagenta");
})*/
//原生代码实现：
/*var all=document.getElementsByTagName("*");
for(var i=all.length-1;i>=0;i--)
{
all[i].style.color="yellow";
}*/
//混合实现：
$(function(){
var all=document.getElementsByTagName("*");
$(all).css("color","red");
})
</script>
</body>
//组选择器
<body>
<h2>h2</h2>
<div id="one">div</div>
<span class="tow">span</span>
<p title="text">p</p>
<script type="text/javascript">
$(function (){
$("h2,#one,.tow,[title='text'").css("color","green");
})
</script>
</body>
posted @ 2018-04-04 19:52  it_dog_zhang  阅读(183)  评论(0)    收藏  举报