jQuery選擇器之基本選擇器(1)
基本選擇器主要有五種:分別為#id選擇器、.class選擇器、element 選擇器、*選擇器和組合選擇器,
1、#id選擇器
根據id查找標簽物件
2、element選擇器
根據標簽名查找標簽物件
3、.class選擇器
根據class查找標簽物件
4、*選擇器
表示任意的,所有的元素
5、組合選擇器
合并多個選擇器的結果并回傳
主要代碼實體如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src=https://www.cnblogs.com/iris-/p/"../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//1.選擇 id 為 one 的元素 "background-color","#bbffaa"
$("#btn1").click(function () {
// css()方法設定標簽的背景顏色
// 第一個引數是樣式名( 修改什么樣式 )
// 修改為什么效果值
$("#one").css("background-color","#bbffaa");
});
//2.選擇 class 為 mini 的所有元素
$("#btn2").click(function () {
$(".mini").css("background-color","#bbffaa");
});
//3.選擇 元素名是 div 的所有元素
$("#btn3").click(function () {
$("div").css("background-color","#bbffaa");
});
//4.選擇所有的元素
$("#btn4").click(function () {
$("*").css("background-color","#bbffaa");
});
//5.選擇所有的 span 元素和id為two的元素
$("#btn5").click(function () {
$("span,#two").css("background-color","#bbffaa");
});
});
</script>
<body>
id 為 one,class 為 one 的div
class為mini
id為two,class為one,title為test的div
class為mini,title為other
class為mini,title為test
class為mini
class為mini
class為mini
class為mini
class為mini
class為mini
class為mini,title為tesst
class為"hide"的div
包含input的type為"hidden"的div
span元素
