成都创新互联网站制作重庆分公司

javascript选择器,js属性选择器有几种

网页开发的时候,怎么合理的选择用选择器??

在网页实现中,如何合理的选用“三种基本选择器”呢?

成都创新互联是专业的召陵网站建设公司,召陵接单;提供网站建设、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行召陵网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

1、在此强烈推荐新手使用“类名选择器”。之所以选择“类名选择器”,主要原因在于:类名选择器可以同时选择多个元素,类似的元素可以使用同一个类名,比ID选择器操作起来更灵活;由于类名选择器必须定义,只有定义类名的标签才能够应用样式,并不会对网页中其他元素造成不必要的影响。

2、标签名选择器,由于其选择范围过广,会导致网页当中所有的同种类型标签都会被选中,此时很容易造成样式影响。不推荐使用。

3、ID选择器,优先级比较高,并且只能够选择一个,适合其使用的“环境”并不多。另外,ID选择器通常是给原生JavaScript预留,一旦看到ID选择器,就能够想“在这里应该是有JS功能存在的”。 不推荐使用。

javascript选择器有哪些

JavaScript选择器介绍:

1、document.querySelector()

querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代

(1)获取文档中 id=“demo” 的元素:

document.querySelector("#demo");

(2)获取文档中第一个p的元素

document.querySelector(“p”);

(3)获取文档中 class=“example” 的第一个元素

document.querySelector(".example");

(4)获取文档中 class=“example” 的第一个 p 元素:

document.querySelector(“p.example”);

(5)获取文档中有 “target” 属性的第一个 a 元素:

document.querySelector(“a[target]”);

(6)多选择器时

document.querySelectorAll(’.ynqc’)

2、document.getElementById

这个方法将返回一个与之对应id属性的节点对象,它是document对象特有的函数,只能通过其来调用该方法,使用方法下:document.getElementById(‘idName’);

3、getElementsByTagName

这个方法返回一个对象数组(准确的说是HTMLCollection集合),返回元素的顺序是它们在文档中的顺序,传递给 getElementsByTagName() 方法的字符串可以不区分大小写,使用方法如下:document.getElementsByTagName(tagName);

4、getElementsByClassName

这个方法来获取指定class名的元素,该方法返回文档中所有指定类名的元素集合,作为 NodeList 对象。NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始), 所以有时使用时要指定下标,使用方法如下:document.getElementsByClassName(‘className’);

5、选择器的优缺点

(1)querySelector是按css规范来实现的,所以它传入的字符串中第一个字符不能是数字.

(2)querySelector() 方法返回匹配指定 CSS 选择器元素的第一个子元素 。 该方法只返回匹配指定选择器的第一个元素。如果要返回所有匹配元素,需要使用 querySelectorAll() 方法替代.

(3)query选择符选出来的元素及元素数组是静态的,而getElement这种方法选出的元素是动态的。静态的就是说选出的所有元素的数组,不会随着文档操作而改变.

相比传统javascript获取DOM元素方式jquery选择器有什么优势?

1、灵活 jquery 选择器提供多个模式 id class 属性 等等选择器

2、方面 比较js你会发现在jquery当中往往几个字符就能解决 而js需要写上1行甚至是多行才能实现

3、jquery提供的多选择器模式,类似就跟写sql一样带上N多条件可以检索出自己想要的元素,这种开发效率比js高出很多

5、代码简洁度提高了

6、jquery比JavaScript读起来顺口多了

个人感受 手打 往采纳


新闻名称:javascript选择器,js属性选择器有几种
本文链接:http://cxhlcq.com/article/dseggig.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部