jQuery 基本選取器

標籤：

 

1 基本選取器

$(‘#id屬性值’)  ----------->document.getElementById()

$(‘tag標籤名稱’)----------->document.getElementsByTagName();

$(‘.class屬性值’)   class屬性值選取器

$(‘*’)     萬用字元選取器

$(‘s1,s2,s3’)聯合選取器

/**********************************************/

 

<script type="text/javascript">
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>

<h2>基本選取器</h2>
<input type="text" name="username" value="xiaoqiang" id="username" /><br />
<p>Today is Sunday</p>
<div class="apple">We are studying jquery</div>
<span>this is beijing</span><br />

<input type="button" value="觸發" onclick="f1()" />

/**********************************************/

jQuery 基本選取器