关闭

jquery简单选择器

标签: jquerybuttondivfunctionclassborder
213人阅读 评论(0) 收藏 举报
•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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:38634次
    • 积分:1097
    • 等级:
    • 排名:千里之外
    • 原创:73篇
    • 转载:0篇
    • 译文:0篇
    • 评论:12条
    最新评论