老生常谈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 相关文章推荐
struts2 jquery 打造无限层次的树
Oct 23 Javascript
使用jquery为table动态添加行的实现代码
Mar 30 Javascript
javascript利用apply和arguments复用方法
Nov 25 Javascript
jquery获取元素索引值index()示例
Feb 13 Javascript
jquery中的$(document).ready()使用小结
Feb 14 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
Vue.js 和 MVVM 的注意事项
Nov 07 Javascript
详解Angular 4 表单快速入门
Jun 05 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
vue中v-show和v-if的异同及v-show用法
Jun 06 Javascript
webpack打包优化的几个方法总结
Feb 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
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
javascript 读取图片文件的大小
2009/06/25 Javascript
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
JavaScript操作文件_动力节点Java学院整理
2017/06/30 Javascript
关于Stream和Buffer的相互转换详解
2017/07/26 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
2018/03/20 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
python计算auc的方法
2020/09/09 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
将"引用"作为函数参数有哪些特点
2013/04/05 面试题
四风存在的原因分析
2014/02/11 职场文书
青年志愿者活动总结
2014/04/26 职场文书
理财计划书
2014/08/14 职场文书
2014年数学教师工作总结
2014/12/03 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
挂职个人工作总结
2015/03/05 职场文书
个人年终总结开头
2015/03/06 职场文书
四风之害观后感
2015/06/09 职场文书