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>

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

时间： 2024-10-31 11:57:50

javascript实例解释分析常用选择器的相关文章

一些有用的javascript实例分析(三)

原文:一些有用的javascript实例分析(三) 1 10 输入两个数字,比较大小 2 window.onload = function () 3 { 4 var aInput = document.getElementsByTagName("input"); 5 var aSpan = document.getElementsByTagName("span")[0]; 6 for(var i=0;i<aInput.length-1;i++){ 7 aInp

一些有用的javascript实例分析(一)

原文:一些有用的javascript实例分析(一) 本文以http://fgm.cc/learn/链接的实例索引为基础,可参见其实际效果.分析和整理了一些有用的javascript实例,相信对一些初学者有一定的帮助.本人水平有限,有许多不足的地方还望包涵,指正.废话不多说,正文以代码开始,不在代码中死去,就在代码中重生.不经历码农,如何来做攻城狮. 1 1 控制div属性 2 //参数为对象,样式属性和值 3 var changeStyle=function(elem,attr,value){

一些有用的javascript实例分析(二)

原文:一些有用的javascript实例分析(二) 1 5 求出数组中所有数字的和 2 window.onload = function () 3 { 4 var oBtn = document.getElementsByTagName("button")[0]; 5 var oInput = document.getElementsByTagName("input")[0] 6 var oStrong = document.getElementsByTagName

javascript内存模型分析猜想

/* * 这里我是利用分析java内存模型的方法来猜想javascript的内存模型, * 由于没有看到国内有关于分析javascript的书籍,但是可以借鉴java的 * 内存模型结构来帮助理解javascript的内存模型中的原型机制,下面先 * 给出一个简单的原型例子 * */ "use strict"; function PrototypeModel(name,author,time){ } PrototypeModel.prototype.name = "Proto

Android中的消息处理实例与分析

Android中的消息处理实例与分析 摘要 本文介绍了Android中的消息处理机制,给出了Android消息处理中的几个重点类Handler.Message.MessageQueue.Looper.Runnable.Thread的详细介绍,提供了两个消息处理的实例代码,并深入分析了使用Android消息机制应该遵循的几个原则. 阅读本文的收获 在具有java基础的情况下,Android的学习比较轻松,很多人在没有深刻了解Android消息处理机制的背景下,已经能够开发出可用的app,很多人开始

扒一扒JavaScript 预解释

带var关键字预解释 让我们先看下这段代码执行的结果: 代码如下: alert(n);//弹出undefinedvar n = 10; 弹出的结果是undefined,为何不是10?让我们再看下面这段代码执行的结果: 代码如下: alert(n);n = 10; 运行报如下错误: 为何这次会报错,原因是代码在运行的时候,没有声明这个变量n:通过这两段代码的比较,我们发现带var关键字和不带var关键字声明的变量是有区别的,带var声明的变量在代码执行之前,似乎浏览器已经给了它们一个初始值unde

转载Aaron ---- jQuery 2.0.3 源码分析core - 选择器

jQuery 2.0.3 源码分析core - 选择器(02) 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 打开jQuery源码,一眼看去到处都充斥着正则表达式,jQuery框架的基础就是查询了,查询文档元素对象,所以狭隘的说呢,jQuery就是一个选择器,并这个基础上构建和运行查询过滤器! 工欲善其事,必先利其器,所以先从正则入手 我们来分解一个表达式 // A simple way to check for HTML strings // Prioritize

【css】css常用选择器

css常用选择器 * 通配选择器 选择文档中所以HTML元素 E 元素选择器  选择指定类型的HTML元素 #id ID选择器  选择指定ID属性值为"id"的任意类型元素 .class 类选择器   选择指定class属性值为"class"的任意类型的任意多个元素 selector1,selectorN 群组选择器 将每一个选择器匹配的元素集合并 E F 后代选择器(包含选择器)  选择匹配的F元素,且匹配的F元素被包含在匹配的E元素内 E>F 子选择器 选

iostat命令的实例解释

1         命令简介 Linux系统中的 iostat是I/O statistics(输入/输出统计)的缩写,iostat工具将对系统的磁盘操作活动进行监视.它的特点是汇报磁盘活动统计情况,同时也会汇报出CPU使用情况.同vmstat一样,iostat也有一个弱点,就是它不能对某个进程进行深入分析,仅对系统的整体情况进行分析.iostat属于sysstat软件包.可以用yum install sysstat 直接安装. 1.1       命令格式: iostat [参数] [时间] [