前端学习笔记-Day2

最新推荐文章于 2024-05-21 02:06:32 发布
最新推荐文章于 2024-05-21 02:06:32 发布
阅读量352 收藏 1
点赞数
分类专栏： # JavaScript 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44653420/article/details/127271443
版权

前端学习笔记-Day2

一、元素排他思想算法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>按钮1</button>    
    <button>按钮2</button>   
    <button>按钮3</button>   
    <button>按钮4</button>   
    <button>按钮5</button>   

    <script>
        // 获取所有按钮元素

        // 根据标签名获取元素
        var btns = document.getElementsByTagName('button');
        
        // BTN获得是数组

        for(var i = 0; i < btns.length; i++)
        {
            btns[i].onclick = function(){
                // 首先将所有的按钮背景颜色去掉
                for(var j = 0; j < btns.length; j++)
                {
                    btns[j].style.backgroundColor = '';
                }
                // 然后才让当前的元素背景颜色变为Pink
                this.style.backgroundColor = 'pink';
            }
        }
    </script>
</body>
</html>
  • 所有元素全部清除样式
  • 给当前元素设置样式
  • 顺序不可以颠倒

二、案例分析-更换背景图片

  • 给四个图片利用循环注册点击事件
  • 当我们点击图片之后，页面背景改为当前的图片
  • 核心思想：将当前图片的src路径取出来，给Body作为背景
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li><img src = "images/ldh.jpg"></li>
        <li><img src = "images/wrong.jpg"></li>
    </ul>

    <script>
        // 获取元素

        // 现根据类名 获取元素 再根据标签名获取元素
        var imgs = document.querySelector('.baidu').querySelector('img');

        // 循环注册事件
        for(var i = 0; i < imgs.length; i++)
        {
            imgs[i].onclick = function(){
                // 改变Body标签的背景图片
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
    
</body>
</html>

三、案例分析-表格颜色

  • 鼠标事件：鼠标经过onmouseover 鼠标离开onmouseout
  • 核心思路：鼠标经过tr行 当前行的变背景颜色 鼠标离开去掉当前的背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .bg{
            background-color: pink;
        }

    </style>

</head>
<body>
    <table>
        <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>最新公布净值</th>
                <th>累计净值</th>
                <th>前单位净值</th>
                <th>净值增长率</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>003526</td>
                <td>xxxxxx</td>
                <td>1.1111</td>
                <td>1.2121</td>
                <td>1.3221</td>
                <td>003526</td>
            </tr>
        </tbody>
    </table>


    <script>
        // 获取元素 获取的是tbody里面的所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');

        // 利用循环绑定注册事件

        for(var i = 0; i < trs.length; i++)
        {
            // 鼠标经过注册事件
            trs[i].onmouseover = function(){
                this.className = 'bg';// 直接通过类名更改样式
            }

            trs[i].onmouseout = function(){
                this.className = '';// 不添加样式
            }
        }
    </script>
    
</body>
</html>

四、案例分析-全选

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
  
    <script>
       // 全选和取消全选  让下面所有复选框的checked属性跟随全选按钮
       
       // 获取元素
        // 获取全选按钮
       var j_cbAll = document.getElementById('j_cbAll');
       
       // 获取所有单选框
       var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');

       // 全选按钮注册事件

       j_cbAll.onclick = function(){
        // checked属性查看复选框的选中状态
        for(var i = 0; i < j_tbs.length; i++)
        {
            // 所有单选框的状态随着复选框状态变化
            j_tbs[i].checked = this.checked;
        }
       }

       for(var i = 0; i < j_tbs.length; i++)
       {
         j_tbs[i].onclick = function(){
            // flag 控制全选按钮是否选中

            var flag = true;

            // 每次点击下面的复选框都要循环检查 四个小按钮是否被选中
            for(var i = 0; i < j_tbs.length; i++)
            {
                if(j_tbs[i].checked == false)
                {
                    flag = false;
                    break;
                }
            }
            j_cbAll.checked = flag;
         }
       }
    </script>
</body>
</html>

五、自定义属性

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id = "demo" index = "1" class = "nav"></div>
    <script>
        var div = document.querySelector('div');

        // element.属性
        console.log(div.id);

        //element.getAttribute('属性') 
        console.log(div.getAttribute('id'));
        console.log(div.getAttribute('index'));

        // 设置属性值
        div.id = 'test';
        div.className = 'navs';

        // 针对自定义属性
        div.setAttribute('index',2);
        div.setAttribute('class','footer');

        // 移除属性
        div.removeAttribute('index');

    </script>
</body>
</html>

六、H5自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

自定义属性获取是通过getAttribute(‘属性’) 获取。

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。

H5给我们新增了自定义属性：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div getTime = "20" data-index = "2" data-list-name = "andy"></div>

    <script>
        var div = document.querySelector('div');

        console.log(div.getAttribute('getTime'));

        // 设置自定义属性
        div.setAttribute('data-time',20);


        console.log(div.getAttribute('data-list-name'));


        // h5新增的获取自定义属性的方法
        // dataset是一个集合里面存放所有data的自定义属性

        console.log(div.dataset);
        console.log(div.dataset.index);
        console.log(div.dataset['index']);


        // 如果自定义属性有多个连接的单词 使用驼峰命名
        console.log(div.dataset.listName);
        console.log(div.dataset['listName']);
    </script>
</body>
</html>

七、利用节点操作属性

在这里插入图片描述

7.1 节点概述

 网页中的所有内容都是节点（标签、属性、文本、注释）在DOM中节点使用Node来表示，

在这里插入图片描述

 节点至少拥有nodeType（节点类型）、nodeName(节点名称)和nodeValue(节点值)三个基本属性

在这里插入图片描述

7.1 父节点parentNode

寻找该节点的父节点，找不到返回null

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 节点 -->
    <div>
        我是div
    </div>
    <span>我是span</span>

    <ul>
        <li>我是Li</li>
        <li>我是Li</li>
        <li>我是Li</li>
        <li>我是Li</li>
        <li>我是Li</li>
    </ul>

    <div class = "box">
        <span class = "erweima">x</span>
    </div>

    <script>
        var box = document.querySelector('.box');
        var e = document.querySelector('.erweima');
        console.log(e.parentNode);// 获取父节点 box
    </script>
</body>
</html>

7.2 childNodes 所有子节点

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 节点 -->
    <div>
        我是div
    </div>
    <span>我是span</span>

    <ul>
        <li>我是Li</li>
        <li>我是Li</li>
        <li>我是Li</li>
        <li>我是Li</li>
        <li>我是Li</li>
    </ul>

    <div class = "box">
        <span class = "erweima">x</span>
    </div>

    <script>
        var box = document.querySelector('.box');
        var e = document.querySelector('.erweima');
        console.log(e.parentNode);// 获取父节点 box

        // 原始的获取所有子节点方法
        var ul = document.querySelector('ul');
        var lis = ul.querySelectorAll('li');// 返回子节点集合

        // 子节点
        console.log(ul.childNodes);// 获取所有子节点
    </script>
</body>
</html>

注意：childNodes返回值包含了所有的子节点 元素节点 文本节点,需要进行筛选

for(var i = 0; i < ul.childNodes.length; i++)
        {
            if(ul.childNodes[i].nodeType == 1)
            {
                // 如果是元素节点 不是文本节点  打印
                console.log(ul.childNodes[i]);
            }
        }

使用children获取所有的子元素节点 实际开发常用的

console.log(ul.children);

7.3 子节点

这两个方法 很可能获取的是文本节点
在这里插入图片描述

获取第一个子元素节点
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 节点 -->
    <div>
        我是div
    </div>
    <span>我是span</span>

    <ul>
        <li>我是Li</li>
        <li>我是Li</li>
        <li>我是Li</li>
        <li>我是Li</li>
        <li>我是Li</li>
    </ul>

    <div class = "box">
        <span class = "erweima">x</span>
    </div>

    <script>
       var ol = document.querySelector('ol');

       // 获取第一个元素节点 或者是文本节点
       console.log(ol.firstChild);
       console.log(ol.lastChild);

       // 返回第一个子元素节点
       console.log(ol.firstElementChild);
       console.log(ol.lastElementChild);// 获取最后一个子元素节点


       // 或者写成  使用children 获取所有元素节点   排除文本节点
       console.log(ol.children[0]);// 第一个子元素节点
       console.log(ol.children[ol.children.length - 1]);// 获取最后一个子元素节点
        
    </script>


</body>
</html>

7.4 兄弟节点

在这里插入图片描述

在这里插入图片描述

 function getNextElementSibling(element)
       {
         var el = element;
         while(el = el.nextSibling)
         {
            if(el.nodeType === 1)
            {
                return el;//寻找元素节点
            }

         }

        return null;
       }

7.5 创建节点

在这里插入图片描述

创建节点之后需要添加节点
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 节点 -->
    <ul>
        <li>
            123
        </li>

    </ul>
    
    <script>
       // 创建节点元素
       var li = document.createElement('li');

       // 添加节点 
       // 先获取ul元素对象
       var ul = document.querySelector('ul');
       ul.appendChild(li);// 添加元素节点到末尾
       
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 节点 -->
    <ul>
        <li>
            123
        </li>

    </ul>
    <script>
       // 创建节点元素
       var li = document.createElement('li');

       // 添加节点 
       // 先获取ul元素对象
       var ul = document.querySelector('ul');
       ul.appendChild(li);// 添加元素节点到末尾

       // 在指定节点前面插入节点
       var lili = document.createElement('li');

       // 在第一个孩子节点前面插入节点
       ul.insertBefore(lili,ul.children[0]);
    </script>
</body>
</html>
少写代码少看论文多多睡觉
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【前端学习笔记day13】2.9. html表格
01-08
文章目录2.9.... ...1、 标签：声明一个表格，它的常用属性如下： ...2、 标签：定义表格中的一行 3、 和 标签：定义一行中的一个单元格，td代表普通单元格，th表示表头单元格，它们的常用属性如下： - align
1.19 JQuery2：节点插入与节点选取
尹成的技术博客
11-11 498
节点选取 jQuery.parent(expr) 找父亲节点，可以传入expr进行过滤，比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素 jQuery.children(expr).返回所有子节点，这个方法只会返回直接...
Web前端学习笔记--day1
qq_44515207的博客
02-03 178
Web前端学习笔记–初始 1.开发工具：visual studio code 2.安装插件：live server 二、html基础 1.新建一个html文件：快捷键!+Tab键生成模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale
大前端学习笔记-day01-HTML
qq_41692467的博客
04-04 617
HTML学习笔记-day01 1. 大前端课程体系 三要素：HTML CSS Javascript 1） 重构 html5 3天 3小时 css3 10天 项目驱动，项目内容融入到授课中（网易严选首页） 2）dom驱动阶段 linux操作系统 5天 mac系统、ubuntu16.04(8G + 固态硬盘)、阿里云服务器（腾讯云、百度云）10元/月 js、jav...
web前端学习笔记-day08 css概念基础认识
starbiu的博客
01-05 337
web前端学习笔记总页面 网页基础布局 html html基础结构 html基础标签 htm标签属性 html文本格式化标签 html实体转义符+html块级标签和行级标签 W3C规范+html语义化标签+文件命名规范 1.认识css W3C推出了css，把结构和样式分离，html只负责结构，样式交给css来实现 1.基本语法 css语法有三个部分组成：选择器,属性，属性值 selector{property：value} 2.css的引用方式 1）行嵌样式 <p s
大前端学习笔记-day02-HTML
qq_41692467的博客
05-26 231
HTML学习笔记-day02 6. Html 核心课程，前端三要素： HTML、 结构 身材 头[眉毛、眼睛、鼻子、嘴巴]、体、脚 CSS、 样式 化妆 Javascript 交互 才艺 元素 <html> <head> <meta/> <title></title> </head> <body> </body> </html>
前端学习笔记_Day 01
weixin_61145501的博客
06-26 58
mongodb 数据库。Uniapp Hybrid 混合开发。Typescript JS的超集。Nodejs – 后端语言。
Web前端开发学习笔记 - Day01
weixin_45571829的博客
06-17 1016
Day01学习笔记 1. 认识网页 网页是如何形成的？ 网页学名为HTML文件，主要由文字、图像和超链接构成，还可以包含音频、视频以及动画等。 所见的网页由：前端代码 → 浏览器内核渲染 → 用户页面 2. 常用浏览器内核 浏览器是网页显示、运行的平台，常用的五大浏览器：IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera。 Windows 10的浏览器有两款，除了IE还有一个Microsoft Edge。 2.1 浏览器内核 英文名：Rendering Engine 浏览
Web前端开发学习笔记 - Day03
weixin_45571829的博客
06-19 200
Day03学习笔记 1. CSS引入方式 1.1 行内样式 <!DOCTYPE html> <html lang="en"> <head> <title>This is title</title> </head> <body> <p style="font-size: 16px; color: red;">大家好</p> </bod
前端知识学习笔记-三（JavaScript）
strugglegirl的博客
04-03 900
JavaScript介绍JavaScript 是一种轻量级的脚本语言。所谓脚本语言指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的“脚本”。JavaScript 是一种嵌入式 (embedded)语言。它本身提供的核心语法不算很多JavaScript与ECMAScript的关系ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。什么是对象?
【前端学习笔记day09】2.5. html图像标签、绝对路径和相对路径
01-08
文章目录2.5.... 绝对路径和相对路径 像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。 绝对地址：相对于磁盘的位置去...
HTML5大前端学习过程第二周（Day10）
01-08
2020年2月21日 四级出成绩了，考了4次终于过了，哈哈。今天没学什么新知识，主要是练习昨天学习的定位。 一. 本节课学习目标。 掌握定位的应用。 重点 二. 定位练习1-小米官网1。 小米官网 ...
Day05_CSS课堂笔记.md
08-06
零基础开始学习前端，HTML和CSS
JavaScript Day_03
03-24
javascript学习第三天笔记
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 209
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
Vue.js的发展史（一）
2301_79683791的博客
05-15 768
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
【学习笔记】后端（Ⅰ）—— NodeJS（Ⅱ）
最新发布
Eddie_hyh的博客
05-21 286
NodeJS（Ⅱ）
React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法
SongZhengxing_的博客
05-18 185
子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
python学习笔记-day8-2-【python 异常处理 try except】
05-17
在Python中，异常处理是非常重要的一部分。当程序运行时如果出现错误，如果没有异常处理，程序就会崩溃。为了避免这种情况，Python提供了异常处理机制。 在Python中，异常处理语句使用 `try` 和 `except` 关键字来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

少写代码少看论文多多睡觉

求打赏，求关注，求点赞

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值