js例题之鼠标事件、固定导航条、tab切换、自定义属性、节点、留言、表格

最新推荐文章于 2023-11-03 23:29:06 发布
最新推荐文章于 2023-11-03 23:29:06 发布
阅读量321 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yizhangzzzz/article/details/109007833
版权

例题总结

1.onmouseover和onmouseout的区别

常见鼠标事件：

onclick：鼠标点击左键触发

onmouseover：鼠标经过触发

onmouseout：鼠标离开触发

onfocus：获得鼠标焦点触发

onblur：失去鼠标焦点触发

onmousemove：鼠标移动触发

onmousedown：鼠标按下触发

onmouseup：鼠标弹起触发

 <style>
        img{
            width: 100px;
        }
    </style>
</head>
<body>
    <img src="./images/1.jfif" alt="">
    <script>
        document.querySelector('img').οnmοuseοver=function(){
            this.src='./images/2.jpg'
        }
        document.querySelector('img').οnmοuseοut=function(){
            this.src='./images/1.jfif'
        }
    </script>

2.京东固定导航条

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #eee;
        }

        .nav {
            position: fixed;
            right: 10px;
            top: 50px;
            width: 60px;
            background-color: #fff;
        }

        .nav ul {
            list-style-type: none;
        }

        .nav li {
            padding: 10px 10px 5px 10px
        }

        .nav a {
            display: block;
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
            color: #333;
            text-decoration: none;
            font-size: 14px;
        }

        /* .active {
            background-color: #e1251b;
            color: #fff;
        } */
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li><a href="#">京东秒杀</a></li>
            <li><a href="#">特色优选</a></li>
            <li><a href="#">频道广场</a></li>
            <li><a href="#">为你推荐</a></li>
        </ul>
    </div>
    <script>
        var lis = document.querySelectorAll('li')
        /*在循环当中，只是为每一个li标签注册onmouseover事件，但是事件中的代码
        只有当事件被处罚时才会执行*/
        for (var i = 0; i < lis.length; i++) {
            // 当鼠标进入元素时候触发这个事件
            lis[i].onmouseover = function () {
                this.style.backgroundColor = '#e1251b'
                // console.log(this.children[0]);
                this.children[0].style.color='#fff'
            }
            // 当鼠标从此元素上离开后触发
            lis[i].οnmοuseοut=function(){
                this.style.backgroundColor = '#fff'
                // console.log(this.children[0]);
                this.children[0].style.color='#333'
            }
        }

    </script>
</body>

</html>

3.tab切换

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #eee;
        }

        .nav {
            position: relative;
            width: 500px;
            left: 400px;
            height: 300px;
            background-color: #fff;
        }

        .nav ul {
            float: right;
            list-style-type: none;
            height: 30px;
            /* border: 1px solid red; */
            overflow: hidden;
        }

        .nav li {
            float: left;
            margin: 0 13px;
            font-size: 14px;
            color: #333;
            padding-bottom: 2px;
            cursor: pointer;
        }

        .active {
            color: #e1251b !important;
            border-bottom: 2px solid #e1251b;
        }

        .content {
            position: absolute;
            top: 30px;
            width: 500px;
            height: 270px;
            text-align: center;
            line-height: 270px;
            /* border: 1px solid black; */
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li class="active">精选</li>
            <li>美食</li>
            <li>游戏</li>
            <li>家居</li>
            <li>宇宙飞船</li>
        </ul>
        <div class="content">
            
        </div>
    </div>
    <script>
        // 获取content
        var content = document.querySelector('.content')
        content.innerHTML='精选'
        // 获取所有li标签
        var lis = document.querySelectorAll('li')
        for (var i = 0; i < lis.length; i++) {
            lis[i].onmouseover = function () {
                // 将所有li标签的class 属性的值设置为空字符串即可
                reset()
                // 将当前悬浮的li标签的文字颜色和下边框变为红色
                this.className = 'active'
                console.log(this.innerHTML);
                var txt = this.innerHTML
                if (txt == '精选') {
                    content.innerHTML = '精选'
                } else if (txt == '美食') {
                    content.innerHTML = '美食城'
                } else if (txt == '游戏') {
                    content.innerHTML = '游戏'
                } else if (txt == '家居') {
                    content.innerHTML = '家居'
                } else if (txt == '宇宙飞船') {
                    content.innerHTML = '宇宙飞船'
                }
            }
        }
        function reset() {
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = ''
            }
        }
    </script>
</body>

</html>

4.自定义属性

自定义属性目的：是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’) 获取

<body>
    <p id="1" data-zhx="18" data-index="20">美女</p>
    <button id="btn_get">获得属性</button>
    <button id="btn_set">设置属性</button>
    <script>
        var p=document.querySelector('p')
        document.querySelector('#btn_get').οnclick=function(){
            // 仍然可以使用getAttribuet方法获取带data-前缀的属性
            console.log(p.getAttribute('data-index'))
            // 也可以用dataset.属性名称的方法获取
            console.log(p.dataset.index)
            console.log(p.dataset.zhx)
        }
    </script>

5.父节点

parentNode属性可返回某节点的父节点，注意是最近的一个父节点

如果指定的节点没有父节点则返回null

<body>
    <ul>
        <li id="li1"> 帅哥</li>
        <li>美女</li>
    </ul>
    <script>
        var lis=document.querySelector('#li1');
        console.log(li1.parentNode);
        // 获取父节点   <ul>...</ul>
    </script>
</body>
</html>

6.子节点

<body>
    <ul>
        <li>张</li>
        <li>慧宣</li>
        <li>宣宣宣宣</li>
        <li>宣宣</li>
    </ul>
    <script>
        var ul = document.querySelector('ul')
        // childNodes将空白也当做子节点
        console.log(ul.childNodes); //(标准)
        
        //虽然是非标准的，但是各个浏览器都支持
        console.log(ul.children);

        // 根据索引获取第一个子节点
        ul.children[0],style.color='red'
        // 使用属性获取第一个子节点
        ul.firstElementChild,style.color='red'  //谷歌支持这个
        ul.firstChild.style.color='red'  //IE8才能获取
        /* 兼容性问题
         
         */
    </script>
</body>
</html>

这两个方法有兼容性问题，解决方案：

（1） 用索引方式
（2）var first=ul.firstElementChild || ul.firstChild

7.创建，添加，删除节点

创建节点：document.creatElement(‘tagName’)

添加节点：node.appendChild（child） node.insertBefore(child,指定元素)

删除节点：node.removeChild(child)

node.remove（）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   
</head>

<body>
    <ul>
        <li>熊大</li>
        <li id="li2">熊二</li>
        <li id="li3">熊三</li>
        <li>熊四</li>
    </ul>
    <button id="btn_add">添加</button>
    <button id="btn_del">删除</button>
    <script>
        var button = document.querySelector('#btn_del')
        var li3 = document.querySelector('#li3')
        var btn_add = document.querySelector('#btn_add')
        button.onclick = function () {
            // li3.remove()
            document.querySelector('li:nth-child(3)').remove()
        }
        // 添加
        btn_add.onclick = function () {
            var liNode = document.createElement('li')
            liNode.id='li5'
            liNode.innerHTML = '熊五'
            li3.insertAdjacentElement('beforebegin', liNode)
        }
    </script>
</body>

</html>

注意

  • beforebegin：在当前元素节点的前面。
  • afterbegin：在当前元素节点的里面，插在它的第一个子元素之前。
  • beforeend：在当前元素节点的里面，插在它的最后一个子元素之后。
  • afterend：在当前元素节点的后面。

8.留言

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #eee;
        }
        ul{
            list-style-type: none;
        }
        .box{
            width: 800px;
            height: 400px;
            background-color: #fff;
            margin: 10px auto;
            padding: 20px;
        }
        
        .message{
            width: 600px;
            height: 34px;
            border: 1px solid #eee;
            border-radius: 10px;
            outline: none;
            font-size: 18px;
            padding-left: 10px;
        }
        .btn_publish{
            width: 100px;
            height: 34px;
            background-color: orange;
            border: none;
            color: #fff;
            border-radius: 10px;
            outline: none;
        }
        .message_list{
            margin-top: 20px;

        }
        .message_list li{
            margin-bottom: 30px;
            /* border: 1px solid black; */
            overflow: hidden;
            width: 700px;
        }
        .msg{
            float: left;
        }
        .btn_delete{
            float: right;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="publish_box">
            <input type="text" class="message" placeholder="请撰写留言">
            <button class="btn_publish">提交评论</button>
        </div>
        <ul class="message_list">
            <!-- <li>
                <span class="msg">今天天气不错</span>
                <a href="#" class="btn_delete">删除</a>
            </li>           -->
        </ul>
    </div>
    <script>
        var ul=document.querySelector('.message_list')
        var input=document.querySelector('.message')
        
       
        document.querySelector('.btn_publish').οnclick=function(){
            var txt=input.value
            if(txt==''){
                alert('留言不能为空')
                // 后面的代码不会执行
                return false
            }           
            var liNode=document.createElement('li')
            
            liNode.innerHTML=`
                <span class="msg">${txt}</span>
                <a href="#" class="btn_delete">删除</a>`                
                
            ul.insertAdjacentElement('afterbegin',liNode)
            // 为新创建的li节点注册单击事件
            liNode.children[1].οnclick=function(){
                this.parentNode.remove()
            }
            // 清空文本框内容
            input.value=''
            // 让文本框获取焦点
            input.focus()
        }
    </script>
</body>

</html>

9.表格（添加和删除）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            width: 800px;
            border: 1px solid #eee;
            border-collapse: collapse;
            margin: 10px auto;
            text-align: center;
        }

        th,
        td {
            border: 1px solid #eee;
            padding: 15px;
        }

        .box {
            width: 800px;
            margin: 10px auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <label for="">编号</label>
        <input type="text" id="number">
        <label for="">姓名</label>
        <input type="text" id="nearname">
        <button id="btn_add">添加</button>
    </div>
    <table>
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>001</td>
                <td>詹姆斯邦德</td>
                <td>
                    <a href="#" class="delete">删除</a>
                </td>
            </tr>

        </tbody>
    </table>
    <script>
        var tbody = document.querySelector('tbody')
        document.querySelector('#btn_add').onclick = function () {
            var trNode = document.createElement('tr')
            // 获取编号
            var number = document.querySelector('#number').value
            // 获取姓名
            var nearname = document.querySelector('#nearname').value
            trNode.innerHTML = `
                <td>${number}</td>
                <td>${nearname}</td>
                <td>
                    <a href="#" class="delete">删除</a>
                </td>
            `
            tbody.insertAdjacentElement('beforeend', trNode)
            // 为新创建的行注册单击事件
            var btn_delete = trNode.querySelector('.delete')
            btn_delete.onclick = function () {
                this.parentNode.parentNode.remove()
            }
            // 为新创建的td注册双击事件
            var td_arr = trNode.querySelectorAll('td')
            for (var i = 0; i < td_arr.length; i++) {
                td_arr[i].ondblclick = function () {
                    console.log(this);
                    // 创建文本框
                    var input = document.createElement('input')
                    input.type = 'text'
                    input.value = this.innerHTML
                    this.innerHTML = ''
                    this.insertAdjacentElement('afterbegin', input)
                    input.focus()
                    // 为文本框注册失去焦点事件
                    input.onblur = function () {
                        var txt = this.value
                        this.parentNode.innerHTML = txt
                    }
                    console.log(input);
                }
            }
        }
    </script>
</body>

</html>
yizhangzzzz
关注
组合模式实现tab切换、轮播图、放大镜效果
HAI6545的博客
01-21 1011
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="./css/14-组合模式.css"> </head> <body> <!-- tab切换开始 --> <di..
鼠标事件案例
小肥猫吃鱼的博客
09-20 251
div{ width: 300px; height: 300px; border: 1px solid #000000; float: left; margin: 10px 20px; } div p{ background-color: gray; color: #FFFFFF; text-align: center; height: 50px; line-height:
javascript事件处理中的鼠标事件实例
张亚运的专栏
12-01 949
主要是onmouseout和onmouseover方法 .html代码如下： *{margin:0} #layer{width:100px;height:30px;position:relative;background:#ffc;float:left;line-height:30px} #layer1{width:400px;height:300px;display:none;pos
html5点击切换选项卡,简单纯js实现点击切换TAB标签实例
weixin_36127428的博客
06-04 1041
一个不需要jQuery实现的tab选项卡切换效果，代码简洁易用。默认是鼠标悬停显示tab效果，可将其中的onmouseover 修改为 onclick 点击效果使用方法：1、将附件中的index.html中的css样式以及代码部分拷贝到你需要的地方即可相关链接：几行简单的jQuery代码搞定tab标签切换效果展示效果图：/p>"http://www.w3.org/TR/xhtml1/DTD/...
tab栏自动切换功能 鼠标移动上去取消自动切换 离开启动自动切换
qq_70020706的博客
11-22 653
tab栏自动切换功能 鼠标移动上去取消自动切换 离开启动自动切换 mouseenter 和 mouseleave 事件的应用
节点电压法经典例题.ppt
03-31
节点电压是一种求解对象的电路计算方法。节点电压是在为电路任选一个节点作为参考点(此点通常编号为"0")，并令其电位为零后，其余节点对该参考点的电位。
节点电压法经典例题PPT课件.ppt
08-08
节点电压法经典例
C语言：自定义函数经典例题九道
05-01
在我们编写C语言程序时，我们可以通过自定义函数来实现特定的功能或算法。 自定义函数是一段能够根据给定的输入执行特定任务并返回一个结果的代码块。 这类函数的目的是可以在程序的任何地方多次被调用，这样能够...
JavaScript从入门到精通 所有例题程序
01-09
随着Web技术的发展，JavaScript的重要性日益凸显，成为前端开发人员不可或缺的技能之一。"JavaScript从入门到精通 所有例题程序"是一个专门针对学习者设计的资源包，旨在帮助初学者通过实践掌握JavaScript的核心概念...
单纯形法表格法例题详解_Linear programing–simplex method(单纯形法) 解题步骤
weixin_34887818的博客
02-05 4374
图1图2图1是线性规划问题转化后的标准形式，图2是对图1的另一种形式(即单纯形表)，具体编程按图2格式编写。具体步骤如下：第一步：作单纯形表.(1)将原线性规划问题化为标准形式；(2) 找出初始可行基，通常取约束方程组系数矩阵中的单位矩阵；(3) 目标函数非基化；(4) 作初始单纯形表.简单讲就是将一个线性规划问题转换成图2的格式！第二步：最优解的判定.(1)若所有检验数都是非正数，即在图2里面可...
京东页面JS效果实现，js实现导航条控制，很完整
03-26
京东页面JS效果实现，js实现导航条控制，很完整，跟京东页面的效果一模一样。
原生JS实现tab栏切换和拖拽效果
weixin_46005715的博客
04-04 385
<!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>Do
javascript之鼠标事件大全
SIMIN_1617的博客
05-25 357
js鼠标事件大全 一般事件 事件 浏览器支持 描述 onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 onDblClick HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标双击事件 onMouseDown HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标上的按钮被按下了 onMouseUp HTML: 2 .
javascript实现鼠标滑过特效和导航栏效果
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-03 278
javascript实现鼠标滑过特效和导航栏效果
Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件
weixin_44657829的博客
04-23 2552
Js鼠标悬停事件，简单的实现导航栏鼠标划过内容弹窗的效果。可读性较高的鼠标悬停事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * ...
JavaScript编程实现tab选项卡切换的效果+1
Purpleendurer@CSDN
04-11 2142
网页中的tab选项卡切换效果一般是使用和匹配来实现的。如果在中嵌套了，和的匹配关系可能就会被打乱，这样显示时就可能出现问题。
onmouseover事件
wuji3390的博客
05-10 471
1 function create(mouse){ 2 var num=44; 3 var bgcolor='#'; 4 var body=document.getElementsByTagName('body')[0]; 5 var div=document.getElementsByTagName('div'); 6 // var scr_x=d
[iview]Tabs标签点击事件on-click
西格玛猫
05-31 7099
<template> <div> <Tabs type="card" @on-click="handleTabClick"> <TabPane label="标签一" name="name1">标签一</TabPane> <TabPane label="标签二" name="name2">标签二</TabPane> <TabPane label="标签三" name="name3">标签三
原生js实现可切换式导航栏
Iguodala的博客
06-08 8428
前些日子看到个这样的效果： 于是就想实现一下，思路是通过js实现多个div的是否显示，也就是display:none;来控制内容的切换，我的效果如下： 由于切换的是div，所以里面的内容不会影响整体功能。下面上代码。 html： <!DOCTYPE html> <html> <head> <title>新浪式点击切换导航&l...
节点导纳矩阵计算例题
最新发布
09-09
假设我们有一个包含三个节点A、B和C的简单电路，只有一条电阻R连接A和B，另一条电阻S连接B和C。节点A的电压记为Va，节点B的电压记为Vb，节点C的电压记为Vc。 首先，我们定义节点导纳矩阵，它是一个3x3的矩阵，因为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值