老生常谈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 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
JavaScript函数基础详解
Feb 03 Javascript
全面解析vue中的数据双向绑定
May 10 Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 Javascript
vue通信方式EventBus的实现代码详解
Jun 10 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 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
B2K与车机的中波PK
2021/03/02 无线电
PHP+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
实例:尽可能写友好的Javascript代码
2006/10/09 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
使用PHP+JQuery+Ajax分页的实现
2013/04/23 Javascript
javascript 实现 秒杀,团购 倒计时展示的记录 分享
2013/07/12 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
浅谈React中组件间抽象
2018/01/27 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
高效jQuery选择器的5个技巧实例分析
2019/11/26 jQuery
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
Vue中强制组件重新渲染的正确方法
2021/01/03 Vue.js
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
机器学习实战之knn算法pandas
2019/06/22 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
python实现图像拼接
2020/03/05 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
斯洛伐克最大的婴儿食品和用品网上商店:Feedo.sk
2020/12/21 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
中学教师管理制度
2014/01/14 职场文书
小学教师管理制度
2014/01/18 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
党的作风建设心得体会
2014/10/22 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python
看完这篇文章获得一些java if优化技巧
2021/07/15 Java/Android