jquery简单选择器

原创 2012年03月21日 19:33:21
•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简单选择器

  • 2014年10月28日 16:31
  • 18KB
  • 下载

jquery选择器的简单实现

  • 2017年05月13日 21:43
  • 1.53MB
  • 下载

JS简单实现JQuery选择器

简单实现jQuery的$函数

jQuery选择器简单应用

用Js写一些例如全选、反选等功能的时候,会感觉代码相当的多,而如果用jQuery选择器的话就会相当的简洁了 jQueryTest...
  • garygg
  • garygg
  • 2013年05月22日 15:06
  • 493

Jquery内容、可见度、属性过滤选择器的理解和简单语句说明

Jquery内容过滤选择器 一、概念:根据节点内容进行选择,实现了对基本内容的过滤 二、用途:1、可以实现内容的过滤         2、判断选择指定元素内的元素         3、判断特殊...

jQuery简单过滤选择器

根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中,在过滤选择器中有可以分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过...

Jquery简单过滤选择器(应用最广泛的选择器)

(1)Jquery中简单过滤选择器 jquery根据某一类过滤规则进行元素匹配,书写时以:开头,是Jquery中应用最为广泛的选择器 (2)简单过滤选择器的基本语法 ①first()或者...

简单的时间选择器

  • 2016年01月02日 20:54
  • 73KB
  • 下载

模仿jQury-简单的选择器封装

  • 2016年05月28日 00:09
  • 2KB
  • 下载

jQuery过滤选择器详解

基本过滤选择器选取第一个元素(:first) //选择第一个div元素. $('#btn1').click(function(){ $('div:first...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery简单选择器
举报原因:
原因补充:

(最多只允许输入30个字)