老生常谈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 相关文章推荐
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
百度地图API之本地搜索与范围搜索
Jul 30 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
vue.js事件处理器是什么
Mar 20 Javascript
fullPage.js和CSS3实现全屏滚动效果
May 05 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
如何使用puppet替换文件中的string
Dec 06 Javascript
微信小程序—setTimeOut定时器的问题及解决
Jul 26 Javascript
JS访问对象两种方式区别解析
Aug 29 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
输出控制类
2006/10/09 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
php封装的pdo数据库操作工具类与用法示例
2019/05/08 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
PHP 判断字符串是中文还是英文, 或者是中英混合
2021/03/09 PHP
jQuery 在光标定位的地方插入文字的插件
2012/05/10 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
jQuery 弹出层插件(推荐)
2016/05/24 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
js模拟微博发布消息
2017/02/23 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
Vue的Class与Style绑定的方法
2017/09/01 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
Django框架下在视图中使用模版的方法
2015/07/16 Python
Python中使用asyncio 封装文件读写
2016/09/11 Python
Python获取浏览器窗口句柄过程解析
2020/07/25 Python
CSS3动画之利用requestAnimationFrame触发重新播放功能
2019/09/11 HTML / CSS
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
LINUX下线程,GDI类的解释
2012/04/17 面试题
高中综合实践活动总结
2014/07/07 职场文书
优秀纪检干部材料
2014/08/27 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
2014年大学生工作总结
2014/11/20 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
公司业务员管理制度
2015/08/05 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
简单聊聊Golang中defer预计算参数
2022/03/25 Golang
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers