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选择器的实现原理

html部分 Document 1 2 var result = $("div"); console.log(result); alert($('div').size(...
  • qq_30100043
  • qq_30100043
  • 2016年11月03日 00:57
  • 975

JS简单实现JQuery选择器

简单实现jQuery的$函数
  • qq_27090183
  • qq_27090183
  • 2016年03月23日 00:02
  • 2051

jQuery选择器和JS选择器

jQuery选择器: jQuery选择器的写法和CSS选择器的写法非常相似,在学习之前了解下CSS选择器,对掌握jQuery选择器是非常有帮助的(一) 基本选择器:主要包含id选择器、class选择...
  • shadow_yn
  • shadow_yn
  • 2015年07月27日 10:48
  • 5976

JQuery中的特殊选择器--this

相信很多刚接触jQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢?下面我们一起来看一下! this是JavaScript中的关键字,指的是当前的上下文对象,简单...
  • LHJBK
  • LHJBK
  • 2016年05月30日 21:16
  • 1181

Jquery选择器分类(基本选择器,层次选择器,过滤选择器,表单选择器)

基本选择器 说明:通过元素id、class和标签名等来查找DOM元素 1.id选择器:$("#test");//选取id为test的元素 2.类选择器:$(".test");//选取所有class为...
  • allan492975230
  • allan492975230
  • 2013年08月01日 15:50
  • 1166

JQuery_九大选择器

JQuery中九大选择器。
  • pseudonym_
  • pseudonym_
  • 2017年07月25日 18:19
  • 615

常用jQuery选择器详解

元素选择是一切操作的前提,jQuery中$()函数最强大最常用的功能之一就是使用选择器选择DOM元素。这里就汇总一些十分常用的jQuery选择器。1、jQuery选择器基本结构$('选择器') $('...
  • a153375250
  • a153375250
  • 2016年05月26日 14:46
  • 1547

详解jQuery选择器正则表达式

1、空白 whitespace = "[\\x20\\t\\r\\n\\f]", 在字符串中,斜杠是用于转义的,若想输出斜杠,必须采用双斜杠来表示。上述字符串若直接用正则表达式对象来表示,如下: ...
  • mole
  • mole
  • 2015年02月02日 18:26
  • 3326

jquery 联合选择器,相对选择和层级选择器__多类交集选择器,多属性选择器

1、多条件选择器 用途:使用多个条件同时选择多个标签 用法:$(“条件1,条件2,条件3,……,条件n “); 特征:多个条件在“”内用逗号隔开; 用例:$(“div#id,span.tip,...
  • h330531987
  • h330531987
  • 2017年10月26日 10:26
  • 194

jquery选择器扩展之样式选择器

jquery中提供了丰富多样的选择器,利用这些选择器我们可以完成大多数任务,但是喜欢思考的我们总得找点事,提问时间: 1.如何选择所有字体颜色为红色的元素 2.如何选择出背景颜色为为白色的元素 3.如...
  • duwen90
  • duwen90
  • 2016年01月23日 18:05
  • 1512
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery简单选择器
举报原因:
原因补充:

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