老生常谈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 API学Jquery之一 选择器
Apr 07 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
AngularJS 整理一些优化的小技巧
Aug 18 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 Javascript
JS实现简单的天数计算器完整实例
Apr 28 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 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
php预定义变量使用帮助(带实例)
2013/10/30 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
PHP中__set()实例用法和基础讲解
2019/07/23 PHP
JavaScript 克隆数组最简单的方法
2009/02/12 Javascript
JavaScript 的方法重载效果
2009/08/07 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
JavaScript交换两个变量值的七种解决方案
2016/12/01 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
利用vue开发一个所谓的数独方法实例
2017/12/21 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
Django重装mysql后启动报错:No module named ‘MySQLdb’的解决方法
2018/04/22 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
python pandas库的安装和创建
2019/01/10 Python
django的ORM操作 增加和查询
2019/07/26 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
华为慧通面试题
2012/09/11 面试题
公司薪酬管理制度
2014/01/31 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
《和时间赛跑》读后感3篇
2019/12/16 职场文书
Win2008系统搭建DHCP服务器
2022/06/25 Servers
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技