老生常谈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 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
jQuery html()等方法介绍
Nov 18 Javascript
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
jQuery 渐变下拉菜单
Dec 15 Javascript
JQuery中$之选择器用法介绍
Apr 05 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
Jul 17 Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
js实现的订阅发布者模式简单示例
Mar 14 Javascript
vue实现移动端返回顶部
Oct 12 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 Javascript
JavaScript数组 几个常用方法总结
Nov 11 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
PHP 和 HTML
2006/10/09 PHP
关于PHP开发的9条建议
2015/07/27 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
根据地区不同显示时间的javascript代码
2007/08/13 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
在Vue中使用highCharts绘制3d饼图的方法
2018/02/08 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
jquery 验证用户名是否重复代码实例
2019/05/14 jQuery
layui清空,重置表单数据的实例
2019/09/12 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
[52:09]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第二场
2014/05/26 DOTA
Windows下安装Django框架的方法简明教程
2018/03/28 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
PyQt5实现下载进度条效果
2018/04/19 Python
django最快程序开发流程详解
2019/07/19 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
捷克钓鱼用品网上商店:Parys.cz
2018/06/15 全球购物
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
微软巴西官方网站:Microsoft Brasil
2019/09/26 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
CSS实现fullpage.js全屏滚动效果的示例代码
2021/03/24 HTML / CSS
《藤野先生》教学反思
2014/02/19 职场文书
三八妇女节寄语
2015/02/27 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
Nginx的基本概念和原理
2022/03/21 Servers