老生常谈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 相关文章推荐
js中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
javascript 24小时弹出一次的代码(利用cookies)
Sep 03 Javascript
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
JS刷新当前页面的几种方法总结
Dec 24 Javascript
JS对象转换为Jquery对象示例
Jan 26 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
vue实现多条件和模糊搜索功能
May 28 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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
用PHP为SHOPEX增加日志功能代码
2010/07/02 PHP
php导入导出excel实例
2013/10/25 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
2017/12/21 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
基于BootstrapValidator的Form表单验证(24)
2016/12/12 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
[49:02]KG vs Infamous 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
python在指定目录下查找gif文件的方法
2015/05/04 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
pywinauto自动化操作记事本
2019/08/26 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
WoolOvers爱尔兰:羊绒、羊毛和棉针织品
2017/01/04 全球购物
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
服务员岗位职责
2014/01/29 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
转让协议书范本
2014/09/13 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
新教师个人总结
2015/02/06 职场文书
java设计模式--七大原则详解
2021/07/21 Java/Android