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

JavaScript018

强大的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选择器常用的有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() 开关

操作步骤：

1、打开Dreamweaver软件，然后在创建新项目下选择HTML；

2、点击“文件”选项，然后点击“另存为”，将文件命名为test，并将其保存在电脑桌面上；

3、编写一个基本的html文件，该html文件包含一个用户名及一个密码输入文本框和一个确定以及一个取消按钮；

4、在title标签下插入<script language="JavaScript">js代码</script>，然后在html中调用js函数；

5、完成js代码编写及html调用js代码后保存tset.html文件，然后在浏览器中打开test.html文件，检查js代码执行的效果；

6、在Dreamweaver软件中新建一个check.js文件（方法同html文件新建），在check文件中输入校验函数；

7、然后在test.html的title标签下引用check.js文件；

8、在程序中引用check.js文件中的js函数，然后在浏览器中刷新test.hmtl文件，然后在username的输入框中输入非法字符来检验js代码。