老生常谈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 相关文章推荐
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 Javascript
document.forms[].submit()使用介绍
Feb 19 Javascript
node.js中的http.request.end方法使用说明
Dec 10 Javascript
JavaScript设计模式之适配器模式介绍
Dec 28 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
2013/07/18 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
JS中Safari浏览器中的Date
2017/07/17 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
推荐11个实用Python库
2015/01/23 Python
python实现矩阵乘法的方法
2015/06/28 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
详解Python 解压缩文件
2019/04/09 Python
分享一个python的aes加密代码
2020/12/22 Python
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
专升本自我鉴定
2013/10/10 职场文书
施工材料员岗位职责
2014/02/12 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
《恐龙》教学反思
2014/04/27 职场文书
项目转让协议书
2014/10/27 职场文书
学习保证书
2015/01/17 职场文书
python编程实现清理微信重复缓存文件
2021/11/01 Python
Redis 哨兵机制及配置实现
2022/03/25 Redis