What is a selector
The condition used to obtain various element node objects on the page is the selector.
document.getElementById()
document.getElementsByTagName();
document.getElementsByName();
Basic selector
$('#id attribute value') ----------->document.getElementById()
$('tag tag name')----------->document.getElementsByTagName();
$('. class attribute value') class attribute value selector
- ##$('*') Wildcard selector
- $('s1,s2, s3') Union selector
<!DOCTYPE html>
<html>
<head>
<title>php.cn</title>
<meta charset="utf-8" />
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
function f1(){
//① $('#id属性值')
$('#username').css('color','red');
//② $('tag标签名称')tag标签选择器
$('input').css('background-color','blue');
//③ $('.class属性值') class类别选择器
$('.apple').css('background-color','green');
//④ $('*') 通配符选择器
//$('*').css('background-color','gray');
//⑤ $('s1,s2,s3...')联合选择器selector
$('p,#username,.apple').css('font-size','25px');
}
</script>
<style type="text/css">
#username{}
p{}
.apple{}
*{}
.apple,span,input{} /*联合选择器*/
</style>
</head>
<body>
<h2>基本选择器(灵感来源于css样式选择器)</h2>
<input type="text" name="username" value="php中文网" id="username" /><br />
<p>大家好</p>
<div class="apple">欢迎来到php中文网</div>
<span>让我们一起开始学习jQuery吧</span><br />
<input type="button" value="触发" onclick="f1()" />
</body>
</html>Next Section