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

Posted chuwanliu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于javascript实例解释分析常用选择器的主要内容，如果未能解决你的问题，请参考以下文章

jQ选择器学习片段（JavaScript 部分对应）

编写自己的代码库（javascript常用实例的实现与封装）

前端开发常用js代码片段

常用Javascript代码片段集锦

解释器在解析JavaScript代码时对于这两种方式

VSCode自定义代码片段——CSS选择器