js选择器汇总

JavaScript015

js选择器汇总,第1张

JS选择器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()

基本选择器有ID选择器、类选择器、标签选择器、通用选择器,事件的添加方法如下:

$(...).事件名(function() { })

属性样式有:

$(...).css("border","1px solid red")

$(...).css({...})

$(...).css("border")

$(...).attr(属性名,值)

$(...).html() innerHTML

$(...).text() innerText

$(...).val() value值

$(...).addClass() 增加

$(...).removeClass() 移除

$(...).toggleClass() 开关

一般常用的原生选择器有:

id选择器:document.getElementById("test")

name选择器:document.getElementsByName("test")

节点选择器:document.getElementsByTagName("p")

class选择器:document.getElementsByClassName("test")

这次要详细说的是 document.querySelector() , 开挂般的存在, jQuery的完美替代版本。

接收一个字符串参数, 返回返文档中与指定选择器或选择器组匹配的第一个 HTMLElement 对象。 如果找不到匹配项,则返回 null 。

3.返回带有foo或者bar样式类的首个元素

4.返回id为‘my-element’的 p 元素

6.其他选择方式可自行排列组合

document.querySelector() 的用法虽然与jQuery里的$()选择器类似,但有些细微区别:

一个id选择器和10个类选择器的优先级相等。

CSS样式选择器分为4个等级,a、b、c、d,可以以这四种等级为依据确定CSS选择器的优先级。

id优先级比class高是相对于同一个元素来说的,例如标签<div id="header" class="header">header</div>对应的css #header{font-size: 14px}.header{font-size: 12px},此时div里面的文字大小为14px,这就是你说的id高于class。

ID选择器:

ID选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素,具有唯一性,这意味着同一id在同一文档页面中只能出现一次,例如,你将一个元素的id取值为”navi”,那么在同一页面你就不能再将其他元素id取名为”navi”了。

css选择器还是会把这些元素都选中应用样式,对于css选择器,id属性的唯一性似乎不存在。然而,对于js而言,它只会选择具有相同id名字元素中的第一个。出于一个好的编程习惯,同一个id不要在页面中出现第二次。