老生常谈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 相关文章推荐
document.compatMode介绍
May 21 Javascript
js调用webservice中的方法实现思路及代码
Feb 25 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
Jan 24 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 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
mysql数据库差异比较的PHP代码
2012/02/05 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
php自动加载机制的深入分析
2013/06/08 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
Aster vs KG BO3 第三场2.18
2021/03/10 DOTA
extjs中grid中嵌入动态combobox的应用
2011/01/01 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
2013/03/11 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
2015/03/12 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
详解vue静态资源打包中的坑与解决方案
2018/02/05 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
nodejs log4js 使用详解
2019/05/31 NodeJs
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
python实现的简单窗口倒计时界面实例
2015/05/05 Python
wxpython实现图书管理系统
2018/03/12 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
详解Python self 参数
2019/08/30 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
Django添加bootstrap框架时无法加载静态文件的解决方式
2020/03/27 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
若干个Java基础面试题
2015/05/19 面试题
教师评语大全
2014/04/28 职场文书
2014年学校法制宣传日活动总结
2014/11/01 职场文书
2016北大自主招生自荐信模板
2016/01/28 职场文书