老生常谈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图片自动或手动切换示例附演示源码
Sep 04 Javascript
JS获取网页图片name属性的方法
Apr 01 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
JavaScript &amp; jQuery完美判断图片是否加载完毕
Jan 08 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
关于axios返回空对象的问题解决
Apr 04 Javascript
Vue.js 2.0和Cordova开发webApp环境搭建方法
Feb 26 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 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
10条PHP编程习惯助你找工作
2008/09/29 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
php实现cookie加密的方法
2015/03/10 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
ie 处理 gif动画 的onload 事件的一个 bug
2007/04/12 Javascript
JS模拟的QQ面板上的多级可展开的菜单
2009/10/10 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
2014/09/01 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
JS操作HTML自定义属性的方法
2015/02/10 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
2018/02/27 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
[08:53]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS 选手采访
2021/03/11 DOTA
Fiddler如何抓取手机APP数据包
2016/01/22 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
pandas中ix的使用详细讲解
2020/03/09 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
基于python实现音乐播放器代码实例
2020/07/01 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
python Timer 类使用介绍
2020/12/28 Python
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
医院护理人员的自我评价分享
2013/10/04 职场文书
大三学习计划书范文
2014/05/02 职场文书
经验交流材料格式
2014/12/30 职场文书
新学期感想
2015/08/10 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
mysq启动失败问题及场景分析
2021/07/15 MySQL
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android