强大的js原生选择器 document.querySelector()

JavaScript046

强大的js原生选择器 document.querySelector(),第1张

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

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里的$()选择器类似,但有些细微区别:

首先js是不大可能控制选项卡的,再说每种浏览器也都有不一样的选项卡模式,你通过api去实现不太可能。

你可以转换思路,不要用真正的选项卡,而是自己写一个类似于选项卡的页面,可以点击切换页面等等。点击切换选项卡或提交按钮时ajax加载你想要的内容就可以了。

1.在页面加载之后使用js解析url地址,读取里面的id值

函数我这里有一个:

function GetQueryStringItem(priStrQueryName, queryString) {

if (queryString == null) {

queryString = this.location.search

}

priStrValue = ""

priIsFound = false

if (queryString.indexOf("?") == 0 &&queryString.indexOf("=") >1) {

priArraySource = unescape(queryString).substring(1, queryString.length).split("&")

priGetQSi = 0

while (priGetQSi <priArraySource.length &&!priIsFound) {

if (priArraySource[priGetQSi].indexOf("=") >0) {

if (priArraySource[priGetQSi].split("=")[0].toLowerCase() == priStrQueryName.toLowerCase()) {

priStrValue = priArraySource[priGetQSi].split("=")[1]

priIsFound = true

}

}

priGetQSi++

}

}

if (priStrValue == undefined) {

priStrValue = ""

}

return priStrValue

}

var id=GetQueryStringItem("id",location.href)

2. 根据id值切换到指定的选项卡:

delayChangeTab(id,500)