老生常谈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是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
JQuery调用WebServices的方法和4个实例
May 06 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
详解Vue单元测试case写法
May 24 Javascript
vue中$nextTick的用法讲解
Jan 17 Javascript
vue 源码解析之虚拟Dom-render
Aug 26 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 Javascript
解决vuex刷新数据消失问题
Nov 12 Javascript
浅谈克隆 JavaScript
Nov 02 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代码把全角数字转为半角数字
2007/12/10 PHP
php中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
Javascript实现单选框效果
2020/12/09 Javascript
python实现的防DDoS脚本
2011/02/08 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
Python 处理数据的实例详解
2017/08/10 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
python实现梯度法 python最速下降法
2020/03/24 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
python 模拟登陆github的示例
2020/12/04 Python
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
JACK & JONES荷兰官网:男士服装和鞋子
2021/03/07 全球购物
面向游戏玩家和书呆子的极客订阅盒:Loot Crate
2020/11/25 全球购物
高中毕业的自我鉴定
2013/12/09 职场文书
技能比赛获奖感言
2014/02/14 职场文书
查摆问题整改措施
2014/10/24 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python
golang中的struct操作
2021/11/11 Golang