jquery简单选择器

•jQuery基本选择器:

    $(“#id”): 根据给定的id匹配一个元素

    $(“.myclass”):根据类名匹配元素

    $(“*”): 选取html页面中所有的元素

    $(“div”):选取html页面中所有的div元素

    $(“div,span,myclass”):选取所有的<div><span><myclass>一组元素

 

<style>
  div{
   width:150px;
   height:150px;
   border:1px dashed #00F;
   background-color:#CCC;
   margin:5px;
   float:left;}
  
  .one-1{
   width:80px;
   margin:30px;
   height:80px;
   border:1px dashed #00F;
   background-color: #FFC;
   }

</style>

 

<script language="javascript" type="text/javascript">

//使用jquery加载事件
$(document).ready(function (){
 
 //<input id="btn0" type="button" value="清空样式" />
 $("#btn0").click(function (){
  
  //当点击按钮后,设置id=two的div的背景颜色是绿色
  $("*").removeAttr("style");
  
 });
 
 
 //<input id="btn1" type="button" value="选中id=two的div,并且改变背景颜色是green (#two)" />
 
 //增加id为btn1按钮的事件
 $("#btn1").click(function (){
  
  //当点击按钮后,设置id=two的div的背景颜色是绿色
  $("#two").css("background","green");
  
 });
 
 //<input id="btn2" type="button" value="选中class=one-1的div,并且设置该div的背景颜色为green ('.one-1')" />
 //增加id为btn1按钮的事件
 $("#btn2").click(function (){
  
  //当点击按钮后,设置id=two的div的背景颜色是绿色
  $(".one-1").css("background","green");
  
 });
 
 //<input id="btn3" type="button" value="选中页面中所有的元素,并且设置背景颜色为green ('*')" />
 //增加id为btn1按钮的事件
 $("#btn3").click(function (){
  
  //当点击按钮后,设置id=two的div的背景颜色是绿色
  $("*").css("background","green");
  
 });
 
 //<input id="btn4" type="button" value="选中所有的div $('div')" />
 
 //增加id为btn4按钮的事件
 $("#btn4").click(function (){
  
  //当点击按钮后,设置id=two的div的背景颜色是绿色
  $("div").css("background","green");
  
 });
 
 //<input id="btn5" type="button" value="选中id=three,class=one-1的,span的元素,并且设置他们的背景颜色为green" /></div>
 
 //增加id为btn5按钮的事件
 $("#btn5").click(function (){
  
  //当点击按钮后,设置id=two的div的背景颜色是绿色
  $("#three,.one-1,span").css("background","green");
  
 });
 
 
 
 
 
 
 
});

 

 

</script>

 

</head>

<body>
<div id="one">id=one
   <div class="one-1">class=one-1</div>
</div>
<div id="two">id=two<span>span的内容</span></div>
<div id="three">id=three</div>
<div class="d2">class=d2</div>

<div style="clear:both;">
<input id="btn0" type="button" value="清空样式" />
<input id="btn1" type="button" value="选中id=two的div,并且改变背景颜色是green  $('#two')" />
<input id="btn2" type="button" value="选中class=one-1的div,并且设置该div的背景颜色为green $('.one-1')" />
<input id="btn3" type="button" value="选中页面中所有的元素,并且设置背景颜色为green $('*')" />
<input id="btn4" type="button" value="选中所有的div $('div')" />
<input id="btn5" type="button" value="选中id=three,class=one-1的,span的元素,并且设置他们的背景颜色为green" /></div>
</body>
</html>

阅读更多
上一篇新内容--jQuery
下一篇jquery层次选择器
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭