JQuery中的类选择器
类选择器
类选择器,顾名思义,通过class样式类名来获取节点
使用方式为$( “.class” )
类选择器,相对id选择器来说,效率相对会低一点,但是优势就是可以多选
同样的jQuery在实现上,对于类选择器,如果浏览器支持,jQuery使用JavaScript的原生getElementsByClassName()函数来实现的
下面实现一个原生getElementsByClassName()函数的实现代码与jQuery实现代码的比较
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-type" content="text/html; charset=utf-8" /><title></title><style>div {width: 100px;height: 90px;float: left;padding: 5px;margin: 5px;background-color: #EEEEEE;}</style><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body> <div class="aaron"><p>class="aaron"</p><p>选中</p></div> <div class="aaron"><p>class="aaron"</p><p>选中</p></div><div class="imooc"><p>class="imooc"</p><p>jQuery选中</p></div><div class="imooc"><p>class="imooc"</p><p>jQuery选中</p></div><script type="text/javascript">//通过原生方法处理//样式是可以多选的,所以得到的是一个合集//需要通过循环给合集中每一个元素修改样式var divs = document.getElementsByClassName('aaron');for (var i = 0; i < divs.length; i++) {divs[i].style.border = "3px solid blue";}</script><script type="text/javascript">//通过jQuery直接传入class//class选择器可以选择多个元素$(".imooc").css("border", "3px solid red");</script></body></html>
我们不难发现:
jQuery除了选择上的简单,而且没有再次使用循环处理
不难想到$(“.imooc”).css()方法内部肯定是带了一个隐式的循环处理,所以使用jQuery选择节点,不仅仅只是选择上的简单,同时还增加很多关联的便利操作,后续我们还会慢慢的学到其他的优势。
JQuery中的类选择器相关推荐
- jQuery框架学习第二天:jQuery中万能的选择器
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
- 【jQuery 教程系列第 10 篇】jQuery 中的过滤选择器(基本筛选器)
这是[jQuery 教程系列第 10 篇],如果觉得有用的话,欢迎关注专栏. jQuery 中除了一些 基本选择器 ,也有一些过滤选择器,本篇博客仅挑选其中的几个简单说明一下,其它的大家可以点击 jQ ...
- jQuery中的基本选择器,id,class,元素,通用
常用的基本选择器: 后续的补充选择器 为了后面看的方便,我们先将body中的内容展示出来: <body><p>账号:<input type="text" ...
- JQuery中的层级选择器
层级选择器 文档中的所有的节点之间都是有这样或者那样的关系.我们可以把节点之间的关系可以用传统的家族关系来描述,可以把文档树当作一个家谱,那么节点与节点直接就会存在父子,兄弟,祖孙的关系了. 选择器中 ...
- JQuery中的全选择器(通配符)
全选择器(*选择器) 在CSS中,经常会在第一行写下这样一段样式 * {padding: 0; margin: 0;} 通配符*意味着给所有的元素设置默认的边距.jQuery中我们也可以通过传递*选择 ...
- jquery 中多条件选择器,相对选择器,层次选择器的区别
一.Jquery常用的过滤选择器如下所示: 1.:first,选取第一个元素,比如$("div:first")选取第一个div元素 2.:last,选取最后一个元素,比如$(&qu ...
- JQuery中的id选择器含有特殊字符时,不能选中dom元素的解决方法
1.jquery类库在我们实际项目中用的很多,大家经常需要根据控件的id,获取对应的html元素.但是:当id含有特殊字符的时候,是不能选中的. 2.自己简单的测试了下,jquery的id选择器只支持 ...
- JQuery中的特殊选择器--this
相信很多刚接触jQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢?下面我们一起来看一下! this是JavaScript中的关键字,指的是当前的上下文对象,简单 ...
- JQuery中的元素选择器
元素选择器 元素选择器:根据给定(html)标记名称选择所有的元素 表示方式为:$( "element" ) 搜索指定元素标签名的所有节点,这个是一个合集的操作.同样的也有原生方法 ...
最新文章
- 数据结构--Javascript--排序篇
- c# 计算空格宽度像素_用pythonnet为计算机视觉做图像整理
- IE6下兼容CSS属性min-height的解决办法
- win10搭建Linux子系统,win10中搭建Linux子系统
- (转)Scala中的Some和Option
- 基于 display 和 javaScript 封装一个页面布局小插件
- 《 Python笔记》— 将pyinstalller打包封装的exe文件反编译为pyc文件和python文件
- matlab如何求状态方程,matlab状态方程解
- halcon代码LAWS纹理滤波
- 计算机多媒体技术主要有什么特征,多媒体技术特征有哪些_多媒体技术的关键特性介绍...
- 国内如何申请到Twitter API
- Android 使用MediaRecorder录音调用stop()方法的时候报错
- 制度决定成败:揭秘思科顶层设计的秘密
- 微软Excel 2007 打勾方框/框里打勾
- springboot+vue疫情管理大作业
- Alpha 冲刺(4/10)
- 【从零开始学习YOLOv3】3.YOLOv3的数据组织和处理
- 保卫萝卜迅玩版53关php,2018微信保卫萝卜迅玩版第50关攻略
- 宏碁暗影骑士3 win10 和 ubuntu18.04双系统安装
- 狂送京东购物卡(无门槛¥1200)