标签：选择   完成   转化   一个   nts   UNC   index   sele   hit   

一、js选择器

1、概念：将js与html建立起关系

2、查找标签的三种方式

 
 
//第一种  
console.log(d);//可以同时找到两个id为id的标签
//第二种，所有出现在页面的内容都属于文档对象，文档(document)高于页面
//在文档(document)中出现的内容都是文档(document)节点
//节点：标签节点(元素)、文本节点、注释节点、节点
getElement(最严谨)
//第三种方式
querySelector(最方便)

3、document.getElementById(id) (只能获取一个满足条件的标签)

 我是div111
 我是div222
var div=document.getElementById('id');#只能检索到页面的第一个满足要求的标签
console.log(div)
===>
 我是div111

4、document.getElementsByClassName(类)(可以获得页面所有满足条件的标签)

                

                



===>        

                

5、document.getElementsByName(获得标签中含有name属性的标签)

var hname=document.getElementByName('123')
console.log(hname)
===>

6、document.getElementsByTagName(按标签样式选择)

                

                


var itag=document.getElementsByTagName('div)
console.log(itag)
==>

        
  //找到所有的div标签

7、document.querySelector (支持css的语法查找标签)

                

                


var qs=document.querySelector(body>.item)
//只能检索第一个满足条件的
==>

8.document.querySelectorAll

                

                


var qs=document.querySelectorAll(body>.item)
//检测到所有符合条件的
==》

        




                

                


var qs=document.querySelectorAll(.hd)
//检测到所有符合条件的,包括id，所以不严谨
==》

        
 

二、js事件

1、概念：页面标签在满足某种条件下完成指定(完成回调函数)的功能

? 点击事件：鼠标点击标签

? 双击事件：鼠标双击标签

? 悬浮事件：鼠标悬浮到标签

? 键盘按下事件：键盘按下|抬起

重点：WIN | documet | html |body

2、点击事件

                

                


var qs=document.querySelectorAll(.hd)
qs.onclick=function (){
                alter("123")
}

    

    


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";
    }

    

    


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、删除

    
001
    
002
    
003

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="这是加粗的版本";//只寻找内部的标签
var outer=hh1.outerHTML
console.log(outer)//会将自身的标签也携带进去

3、操作页面样式

    
001
    
002
    
003

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

//html

//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;
    }




    
1
    
2
    
3
    
4

2、解决变量污染难问题(将变量转化成块级作用域)

3、标题栏悬浮显示

    
1
    
2
    
3
    
4

4、悬浮标题修改下面标签的内容

    
1
    
2
    
3
    
4

五、js控制类名

//实例，实现标签类名修改


y
    
f
    
g

javascript实例解释分析常用选择器

标签：选择   完成   转化   一个   nts   UNC   index   sele   hit   

原文地址：https://www.cnblogs.com/chuwanliu/p/11025229.html