老生常谈jquery id选择器和class选择器的区别


Posted in Javascript onFebruary 12, 2017

实例如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="style.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css"/>
  <script type="text/javascript" src="jquery-2.1.4.js"></script>
  <script type="text/javascript" src="dams.js">
  </script>
</head>
<body>
  <div class="box">hello</div>
  <div class="box">world</div>
</body>
</html>



$(function(){
  alert($('.box').size());  //返回2
});

size() 方法返回DOM对象的个数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="style.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css"/>
  <script type="text/javascript" src="jquery-2.1.4.js"></script>
  <script type="text/javascript" src="dams.js">
  </script>
</head>
<body>
  <div id="box">hello</div>
  <div id="box">world</div>
</body>
</html>





$(function(){
  alert($('#box').size());  //只能获得一个id=box的DOM对象,返回1
});

即: id是唯一的,即使有多个id相同的元素,jquery选择器也只能获取其中一个 。所以:想在jquery中对id设置动作, id在页面中只允许出现一次。

对于CSS样式来说,可以选取页面中所有id=box的DOM对象:

#box {

  color: red;


};

jQuery选择器的写法和CSS选择器十分类似,但是功能却不同:

CSS找到元素后添加的是单一样式,而jquery添加的是动作行为。

以上这篇老生常谈jquery id选择器和class选择器的区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
一个可以增加和删除行的table并可编辑表格中内容
Jun 16 Javascript
再探JavaScript作用域
Sep 24 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
JS触摸与手势事件详解
May 09 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
vue实现简单计算商品价格
Sep 14 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 Javascript
react antd实现动态增减表单
Jun 03 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
Feb 12 #Javascript
浅谈jQuery中事情的动态绑定
Feb 12 #Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
Feb 12 #Javascript
jq stop()和:is(:animated)的用法及区别(详解)
Feb 12 #Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 #Javascript
详解Sea.js中Module.exports和exports的区别
Feb 12 #Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 #Javascript
You might like
php array_merge下进行数组合并的代码
2008/07/22 PHP
php类常量用法实例分析
2015/07/09 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
javascript arguments 传递给函数的隐含参数
2009/08/21 Javascript
JS在IE和FireFox之间常用函数的区别小结
2010/03/12 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
Bootstrap每天必学之级联下拉菜单
2016/03/27 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
js实现购物车功能
2018/06/12 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
python对字典进行排序实例
2014/09/25 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
python3.7.0的安装步骤
2018/08/27 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
CSS的background属性及CSS3的背景图片设置总结
2016/06/13 HTML / CSS
HTML5 Canvas概述
2009/08/26 HTML / CSS
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
渠道运营商合作协议书范本
2014/10/06 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
离婚起诉状范本
2015/05/19 职场文书
西安事变观后感
2015/06/12 职场文书
如何解决springcloud feign 首次调用100%失败的问题
2021/06/23 Java/Android
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL
python使用torch随机初始化参数
2022/03/22 Python