javascript实例解释分析常用选择器
一、js选择器
1、概念：将js与html建立起关系
2、查找标签的三种方式
<div id="id" class="ftn1"> </div>
<div id="id" class="ftn1"> </div>
//第一种
console.log(d);//可以同时找到两个id为id的标签
//第二种，所有出现在页面的内容都属于文档对象，文档(document)高于页面
//在文档(document)中出现的内容都是文档(document)节点
//节点：标签节点(元素)、文本节点、注释节点、<doctype>节点
getElement(最严谨)
//第三种方式
querySelector(最方便)
3、document.getElementById(id) (只能获取一个满足条件的标签)
<div id="id" class="ftn1"> 我是div111</div>
<div id="id" class="ftn1"> 我是div222</div>
var div=document.getElementById('id');#只能检索到页面的第一个满足要求的标签
console.log(div)
===><div id="id" class="ftn1"> 我是div111</div>
4、document.getElementsByClassName(类)(可以获得页面所有满足条件的标签)
<body id="wd">
<div id="hd" class="item"></div>
<div id="hd" class="item"></div>
</body>
<script>
var body=document.getElementById('wd')
//getElementById只能由documen调用，因为我们要保证文档中一个ID只能出现一次，而document就是减速文档全部，而body只能检索自身标签内部区域
var hdiv=body.getElementsByClassName('item')
console.log(hdiv)
</script>
===> <div id="hd" class="item"></div>
<div id="hd" class="item"></div>
5、document.getElementsByName(获得标签中含有name属性的标签)
<input name="123"></input>
var hname=document.getElementByName('123')
console.log(hname)
===><input name="123"></input>
6、document.getElementsByTagName(按标签样式选择)
<body id="wd">
<div id="hd" class="item"></div>
<div id="hd" class="item"></div>
</body>
var itag=document.getElementsByTagName('div)
console.log(itag)
==><div id="hd" class="item"></div>
<div id="hd" class="item"></div> //找到所有的div标签
7、document.querySelector (支持css的语法查找标签)
<body id="wd">
<div id="hd" class="item"></div>
<div id="hd" class="item"></div>
</body>
var qs=document.querySelector(body>.item)
//只能检索第一个满足条件的
==><div id="hd" class="item"></div>
8.document.querySelectorAll
<body id="wd">
<div id="hd" class="item"></div>
<div id="hd" class="item"></div>
</body>
var qs=document.querySelectorAll(body>.item)
//检测到所有符合条件的
==》<div id="hd" class="item"></div>
<div id="hd" class="item"></div>
<body id="wd">
<div id="hd" class="item"></div>
<div id="hd" class="item"></div>
</body>
var qs=document.querySelectorAll(.hd)
//检测到所有符合条件的,包括id，所以不严谨
==》<div id="hd" class="item"></div>
<div id="hd" class="item"></div>
二、js事件
1、概念：页面标签在满足某种条件下完成指定(完成回调函数)的功能
点击事件：鼠标点击标签
双击事件：鼠标双击标签
悬浮事件：鼠标悬浮到标签
键盘按下事件：键盘按下|抬起
重点：WIN | documet | html |body
2、点击事件
<body id="wd">
<div id="hd" class="item"></div>
<div id="hd" class="item"></div>
</body>
var qs=document.querySelectorAll(.hd)
qs.onclick=function (){
alter("123")
}
<div class="outer">
<div class="div1" id="h1"></div>
<div class="div1" id="h2"></div>
</div>
var di=document.querySelectorAll('.div1');
di[0].onclick=function () {
di[0].style.backgroundColor="yellow";
}
var di=document.querySelectorAll('.div1');
di[1].onclick=function () {
di[0].style.backgroundColor="blue";
}
<div class="outer">
<div class="div1" id="h1"></div>
<div class="div1" id="h2"></div>
</div>
var di=document.querySelector('.div1');
di.onclick=function () {
this.style.backgroundColor="yellow";
}
var di=document.querySelectorAll('.div1');
di[1].onclick=function () {
di[0].style.backgroundColor="blue";
}
三、js处理页面文档(js只获取标签的行间式)
1、删除
<div class="outer">
<div class="div1" id="h1">001</div>
<div class="div1" id="h2">002</div>
<div class="div1" id="h3">003</div>
</div>
var hh1=document.querySelector('#h1');
var hh2=document.querySelector('#h2');
var hh3=document.querySelector('#h3');
var text=hh1.innerText;
//删除文本
hh1.innerText="";
2、操作子标签
var hh1=document.querySelector('#h1');
var hh2=document.querySelector('#h2');
var hh3=document.querySelector('#h3');
var text=hh1.innerText;
//修改文本
hh1.innerText="这时修改的文本";
var hh1=document.querySelector('#h1');
var hh2=document.querySelector('#h2');
var hh3=document.querySelector('#h3');
var text=hh1.innerHTML;
//修改文本(可以添加整个标签及样式)
hh1.innerHTML="<b>这是加粗的版本</b>";//只寻找内部的标签
var outer=hh1.outerHTML
console.log(outer)//会将自身的标签也携带进去
3、操作页面样式
<div class="outer">
<div class="div1" id="h1">001</div>
<div class="div1" id="h2">002</div>
<div class="div1" id="h3" style="backgrund:pink">003</div>
</div>
var hh1=document.querySelector('#h1');
var hh2=document.querySelector('#h2');
var hh3=document.querySelector('#h3');
var bgColor=hh3.style.backgroundColor;//js只能获取标签的行间式样式，也就是计算前的样式
console.log(bgColor)
===>pink
//修改style
hh3.style.backgroundColor='yellow';
注意：内联和外联的样式：计算后的样式
//获取计算后的样式
//window.getComputedStyle(标签，伪类(没有null)).backgroundColor;可以获得计算后的样式，也可以获得行间式，但他只能读，不能修改行间式样式
var bgColor=window.getComputedStyle(hh3,null).backgroundColor;
console.log(bgColor)
==>'yellow'
//第二种方式
var bgColor=getComputedStyle(hh3,null).getPropertyValue('background-color');
console.log(bgColor)
//点击div标签的切换颜色
//css
<style>
.div{
width:100px;
height:100px;
background:red;
}
</style>
//html
<div class="div1" style="background:red"></div>
//javascript
//获得标签
var hh=document.querySelector('.div1')
console.log(hh)
//设置获得标签的点击事件
hh.onclick=function (){
//查看标签的原有颜色
var bgColor=getComputedStyle(hh,null).backgroundColor;
console.log(bgColor)
//判断标签的颜色是否为rgb(255, 0, 0)
if (bgColor=='rgb(255, 0, 0)'){
this.style.backgroundColor="blue";
}
else {
this.style.backgroundColor="red";
}
}
四、js事件控制标题栏
1、循环绑定(变量污染问题)
.part1{
/*width: 100px;*/
}
.part1:after{
content: "";
display: block;
clear: both;
}
.part1 div{
color: red;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
float: left;
}
.div1{
background: yellow;
}
.div2{
background: paleturquoise;
}
.div3{
background: darkblue;
}
.div4{
background:aqua;
}
</style>
<body>
<div class="part1">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
</div>
<script>
var divs=document.querySelectorAll('.part1 div');
console.log(divs)
for (var i=0;i<divs.length;i++){
divs[i].onmouseenter=function () {
console.log(i)//此时打印的i会一直是4
}
}
2、解决变量污染难问题(将变量转化成块级作用域)
<script>
var divs=document.querySelectorAll('.part1 div');
console.log(divs)
for (let i=0;i<divs.length;i++){
divs[i].onmouseenter=function () {
console.log(i)//此时打印的i会一直是4
}
}
//将变量i定义为块作用域
3、标题栏悬浮显示
<style>
.part1:after{
content: "";
display: block;
clear: both;
}
.part1 div{
color: white;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
float: left;
}
.div1{
background: yellow;
}
.div2{
background: paleturquoise;
}
.div3{
background: darkblue;
}
.div4{
background:aqua;
}
</style>
<body>
<div class="part1">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
</div>
<script>
var divs=document.querySelectorAll('.part1 div');
console.log(divs);
//对div1 | div2 | div3 | div4循环进行时间绑定
for (let i=0;i<divs.length;i++){
//onmuseenter鼠标悬浮事件
divs[i].onmouseenter=function () {
//调用背景颜色改变函数
changeColor(i);
}
}
function changeColor(index){
//通过mouseenter捕捉的事件与循环的i对应，从而改变训中标签的状态
for (let i=0;i<divs.length;i++){
//先将所有标签的背景先设置一下
divs[i].style.backgroundColor='red';
if (i==index){
//匹配修改选中的标签
divs[i].style.backgroundColor='black'
}
}
}
4、悬浮标题修改下面标签的内容
<style>
.part1:after{
content: "";
display: block;
clear: both;
}
.part1 div{
color: white;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
float: left;
background: darkorchid;
}
h1{
height: 100px;
display: block;
background: saddlebrown;
color: white;
}
</style>
<body>
<div class="part1">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
</div>
<h1></h1>
<script>
var data=["标题一","标题二","标题三","标题四"]
var divs=document.querySelectorAll('.part1 div');
console.log(divs);
for (let i=0;i<divs.length;i++){
divs[i].onmouseenter=function () {
changeColor(i);
changeContent(i);
}
}
function changeColor(index){
for (let i=0;i<divs.length;i++){
divs[i].style.backgroundColor='red';
if (i==index){
divs[i].style.backgroundColor='black'
}
}
}
var h1=document.querySelector('h1');
function changeContent(index) {
h1.innerText=data[index]
}
</script>
五、js控制类名
//实例，实现标签类名修改
<style>
.y{
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
}
.f{
width: 100px;
height: 100px;
background: pink;
}
.g{
display:none;
}
</style>
<ul>
<li class="l1">y</li>
<li class="l2">f</li>
<li class="l3">g</li>
</ul>
<div class="box"></div>
<script>
var box=document.querySelector('.box');
var l1=document.querySelector('.l1');
var l2=document.querySelector('.l2');
var l3=document.querySelector('.l3');
l1.onclick=function () {
box.className='y'
}
l2.onclick=function () {
box.className='f'
}
l3.onclick=function () {
box.className='g'
}
</script>
