老生常谈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运行机制之this详细介绍
Feb 07 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 Javascript
Java File类的常用方法总结
Mar 18 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
angularjs 动态从后台获取下拉框的值方法
Aug 13 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 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 模拟$_PUT实现代码
2010/03/15 PHP
php微信开发自定义菜单
2016/08/27 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
JS小功能(onmouseover实现选择月份)实例代码
2013/11/28 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
JavaScript中诡异的delete操作符
2015/03/12 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
基于jQuery实现中英文切换导航条效果
2016/09/18 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
初步解析Python下的多进程编程
2015/04/28 Python
Python中不同进制的语法及转换方法分析
2016/07/27 Python
对python的文件内注释 help注释方法
2018/05/23 Python
python调用外部程序的实操步骤
2019/03/04 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
详解python中的lambda与sorted函数
2020/09/04 Python
函数指针的定义是什么
2016/08/14 面试题
大一新生检讨书
2014/10/29 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
六一晚会主持词开场白
2015/05/28 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
新手初学Java网络编程
2021/07/07 Java/Android