老生常谈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在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
Jun 20 Javascript
嵌入式iframe子页面与父页面js通信的方法
Jan 20 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
Javascript 动态改变imput type属性
Nov 01 Javascript
JS中如何实现复选框全选功能
Dec 19 Javascript
express.js中间件说明详解
Mar 19 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 Javascript
详解elementUI中input框无法输入的问题
Apr 27 Javascript
js 获取扫码枪输入数据的方法
Jun 10 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
学习使用curl采集curl使用方法
2012/01/11 PHP
使用PHP Socket 编程模拟Http post和get请求
2014/11/25 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
webapp框架AngularUI的demo改造之路
2014/12/21 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
js删除数组元素、清空数组的简单方法(必看)
2016/07/27 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
Vue中的Props(不可变状态)
2018/09/29 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
浅析python协程相关概念
2018/01/20 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
python实现动态创建类的方法分析
2019/06/25 Python
python SQLAlchemy的Mapping与Declarative详解
2019/07/04 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
利用CSS3伪元素实现逐渐发光的方格边框
2017/05/07 HTML / CSS
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
施工资料员的岗位职责
2013/12/22 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
2014年应急工作总结
2014/12/11 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
求职简历自我评价2015
2015/03/10 职场文书
工程技术员岗位职责
2015/04/11 职场文书
护士心得体会范文
2016/01/25 职场文书
简历自我评价范文
2019/04/24 职场文书
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS
mysql5.7使用binlog 恢复数据的方法
2021/06/03 MySQL
vue动态绑定style样式
2022/04/20 Vue.js
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python