欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

详谈JQuery中id选择器和class选择器的区别于联系

程序员文章站 2022-05-07 11:21:44
...
下面小编就为大家带来一篇老生常谈jquery id选择器和class选择器的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

实例如下：


<!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>
  <p class="box">hello</p>
  <p class="box">world</p>
</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>
  <p id="box">hello</p>
  <p id="box">world</p>
</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选择器的区别于联系的详细内容，更多请关注其它相关文章！

相关标签： JQuery class 选择器 详谈

上一篇： xml转换成数组的有关问题

下一篇： jQuery四种选择器使用及示例

推荐阅读