老生常谈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的Tab选项框效果代码(插件)
Mar 01 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 Javascript
简单实用jquery版三级联动select示例
Jul 04 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
jQuery Ajax全解析
Feb 13 Javascript
Vue异步组件使用详解
Apr 08 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 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中cookie的使用方法
2014/03/29 PHP
php绘图之生成饼状图的方法
2015/01/24 PHP
PHP大神的十大优良习惯
2016/09/14 PHP
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
jQuery实现的fixedMenu下拉菜单效果代码
2015/08/24 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
[01:01:23]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第一场 11.26
2020/11/30 DOTA
python简单的函数定义和用法实例
2015/05/07 Python
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
pytorch ImageFolder的覆写实例
2020/02/20 Python
小结Python的反射机制
2020/09/28 Python
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
大学生毕业求职简历的自我评价
2013/10/24 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
怎样写辞职信
2015/02/27 职场文书
2015年个人思想总结
2015/03/09 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
javascript之Object.assign()的痛点分析
2022/03/03 Javascript