189 8069 5689
在网页实现中，如何合理的选用“三种基本选择器”呢？
成都创新互联是专业的召陵网站建设公司，召陵接单;提供网站建设、成都网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行召陵网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
1、在此强烈推荐新手使用“类名选择器”。之所以选择“类名选择器”，主要原因在于：类名选择器可以同时选择多个元素，类似的元素可以使用同一个类名，比ID选择器操作起来更灵活；由于类名选择器必须定义，只有定义类名的标签才能够应用样式，并不会对网页中其他元素造成不必要的影响。
2、标签名选择器，由于其选择范围过广，会导致网页当中所有的同种类型标签都会被选中，此时很容易造成样式影响。不推荐使用。
3、ID选择器，优先级比较高，并且只能够选择一个，适合其使用的“环境”并不多。另外，ID选择器通常是给原生JavaScript预留，一旦看到ID选择器，就能够想“在这里应该是有JS功能存在的”。 不推荐使用。
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这种方法选出的元素是动态的。静态的就是说选出的所有元素的数组，不会随着文档操作而改变．
1、灵活 jquery 选择器提供多个模式 id class 属性 等等选择器
2、方面 比较js你会发现在jquery当中往往几个字符就能解决 而js需要写上1行甚至是多行才能实现
3、jquery提供的多选择器模式，类似就跟写sql一样带上N多条件可以检索出自己想要的元素，这种开发效率比js高出很多
5、代码简洁度提高了
6、jquery比JavaScript读起来顺口多了
个人感受 手打 往采纳