JavaScript知识点8

梦幻之光_dream

于 2021-01-10 16:36:03 发布

阅读量121

点赞数 1

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/William_fang/article/details/112431811

版权

JavaScript 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

本文主要介绍了JavaScript中的事件绑定、事件处理、元素查找、hover效果实现、jQuery动画函数的应用，如显示隐藏效果，并探讨了框架和JavaScript库的使用。

摘要由CSDN通过智能技术生成

文章目录

1.事件绑定
2.事件
3.查找3个div
4.使用hover
5.百度一下
6.jQuery动画函数--显示隐藏动画
7.精简显示品牌
8.框架/js库
篇章

1.事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.3.js"></script>
</head>
<body>

<h1>事件绑定</h1>
<button id="btn1">发射子弹</button>
<button id="btn2">获得奖励</button>
<button id="btn3">失去奖励</button>
<script>
    $("#btn1").on('click',function () {
        console.log('发射子弹......');
    })
    //当我点击第二个按钮时  alert 发射跟踪导弹
    function shoot() {
        alert('发射跟踪导弹');
    }
    $("#btn2").on('click',function () {
        $("#btn1").on('click',shoot)
    })
    $("#btn3").on('click',function () {
        $("#btn3").on('click',shoot)
    })
    //事件绑定

    //标准的事件绑定
    //dom:元素.addEventListener('事件名',处理函数) jq--> on
    //    元素.removeEventListener('事件名',处理函数) off
    //jq->  $元素.on('事件名',处理函数)
    //      $元素.off('事件名',处理函数)

    //简写的事件绑定
    //$元素.事件名(function(){
    //
    // })
</script>
</body>
</html>

2.事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.3.js"></script>
<!--    当窗口中的所有内容加载完才执行的-->
    <script>
        // $(document).ready(function () {
        //     $('button').click(function () {
        //         alert(111);
        //     })
        // })
     $(function(){
        $('button').click(function () {
            alert(111);
        });
     })
    </script>
</head>
<body>
<button>
    提交
</button>
<!--事件-->
<!--问题:浏览器加载html和js时顺序加载 必须保证js在html在加载后执行,才能保证所有的查找都能找到想要的元素

   window有一个事件load,会在整个网页加载完成后自动执行，所有js代码都应该放在window.οnlοad=function(){}中，在页面加载后自动执行
   window.οnlοad=function(){}无论写在哪,都只能在整个窗口内容加载完才自动执行
   =赋值的意思,如果同时出现多个 window.οnlοad=function(){} 结果只有最后一个覆盖之前的所有
   解决:$(window).load(function(){})  可反复加多个
   window.onload 需要等待所有页面内容(html,css,js,图片)加载完才行   --慢
   大多数情况下,用户急于使用功能,而无所谓图片内容和网页美观
   解决:其实在window.onload 之前还有一个事件会提前触发,:DOMContentLoad-- 只等待html和js加载完,无需css和图片 --快
   DOMContentLoad有兼容性问题  只能用jQuery方式绑定$(docment).ready(function(){}) 所以放在$(docment).ready(function(){})中代码会在dom内容加载后就提前
   触发,无需等待css和图片
   总结:jQuery中所有代码都要放在$(document).ready(function(){})中
   $(document).ready(function(){}) 简化$(function(){})
-->

<script>

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

3.查找3个div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.3.js"></script>
    <style>
        #d1,d2,d3{
            cursor: pointer;
        }
        #d1{
            position: relative;
            width: 150px;
            height: 150px;
            text-align: center;
            background-color: green;
        }
        #d2{
            position: absolute;
            top: 25px;
            left: 25px;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        #d3{

            position: absolute;
            top: 25px;
            left: 25px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            background-color: red;
        }

    </style>
</head>
<body>
<div id="d1">
    <div id="d2">
        <div id="d3"></div>
    </div>
</div>
<script>
    //查找三个div
    // $('div')
    // //div绑定事件
    // .mouseenter(function(){
    //     console.log(`进入 ${this.id}`);
    // })
    //
    // //div绑定事件
    // .mouseleave(function(){
    //     console.log(`移出 ${this.id}`);
    // })
    //mouseover,mouseout --即使父元素也当做独立的元素看待，从父元素进入子元素，同样会被
    //出发父元素的mouseover，mouseout事件，与现实不符
    //解决:jQuery中用mouseenter mouseleave代替

    //简写：如果同时绑定mouseenter和mouseleave时，其实只要绑定一个hover函数即可
    //$元素.hover(
    // function () {
    //
    // },
    // function () {
    //
    // }
    // )
    $('div').hover(
        function () {
            console.log(`进入 ${this.id}`);
        },
        function () {
            console.log(`移出 ${this.id}`);
        }
    )
</script>
</body>
</html>

4.使用hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.3.js"></script>
    <style>
        #target{
            border: 1px solid #eee;
            border-radius: 6px;
            padding: 10px;
        }
        #target.hover{
            border: 1px solid #aaa;
            box-shadow: 0 0 6px #aaa;
        }
    </style>
</head>
<body>
<h1>使用hover</h1>
<h3>鼠标悬停在div上方，则突出显示，移出则取消突出显示</h3>
<div id="target">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequatur deserunt, dicta distinctio harum illum itaque magnam maiores maxime, nostrum, numquam placeat porro possimus praesentium quas quidem rerum saepe sunt.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut deleniti dignissimos error eveniet expedita fugit iste itaque nulla, quae tenetur. Eaque excepturi facere ipsa omnis, porro quam quod repellendus ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam autem impedit laboriosam molestias obcaecati saepe soluta. Architecto consequuntur ducimus fuga fugiat iure, minima modi molestiae mollitia, numquam provident, quae quam!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur debitis deserunt doloremque dolorum ducimus eaque est, expedita hic inventore laboriosam laudantium nam quas qui quis quos temporibus voluptatem voluptatum?
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid delectus dolore dolorum eaque earum est excepturi harum illo magni maiores minus non odit rem, repellendus tenetur ut veniam? Deleniti!

    </p>
</div>
<script>
    //当鼠标进入div时，为当前div自己添加class hover，当鼠标移出时，去掉div的class hover
    //1.查找元素div
    // $('div#target').hover(
    //     function () {头条新闻宁波 17°C-23°C 小雨

    //         $(this).addClass('hover');
    //     },
    //     function () {
    //         $(this).removeClass('hover');
    //     }
    // )
    $('div#target').hover(
        function () {
            $(this).toggleClass('hover');
        }
    )
    //2.使用hover函数进行事件绑定
    //3.操作元素
</script>
</body>
</html>

5.百度一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<input type="text">
<button>百度一下</button>
<script>
    //单机按钮时，输出：搜索xxx相关内容
$('button').click(function () {
    console.log(`搜索 ${$(':text').val()} 相关的内容`);
})
    //为文本框绑定键盘抬起的事件
    $(':text').keyup(function (e) {
        //只有按下的键是回车，才执行和按钮相同的事件处理函数
        if (e.keyCode==13){
            $('button').click();//两用 调用
            //模拟触发：即使没有点击按钮，也可以执行按钮的单机事件处理函数
            //如何$元素.事件名//调用制定元素上的事件处理函数
        }
    })
</script>
</body>
</html>

6.jQuery动画函数–显示隐藏动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.3.js"></script>
    <style>
        #target{
            border: 1px solid #eee;
            border-radius: 6px;
            padding: 10px;
        }
    </style>
</head>
<body>
<h1>jQuery动画函数--显示隐藏动画</h1>
<button id="btn1">显示/隐藏div</button>
<hr>
<div id="target">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequatur deserunt, dicta distinctio harum illum itaque magnam maiores maxime, nostrum, numquam placeat porro possimus praesentium quas quidem rerum saepe sunt.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut deleniti dignissimos error eveniet expedita fugit iste itaque nulla, quae tenetur. Eaque excepturi facere ipsa omnis, porro quam quod repellendus ut.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam autem impedit laboriosam molestias obcaecati saepe soluta. Architecto consequuntur ducimus fuga fugiat iure, minima modi molestiae mollitia, numquam provident, quae quam!
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur debitis deserunt doloremque dolorum ducimus eaque est, expedita hic inventore laboriosam laudantium nam quas qui quis quos temporibus voluptatem voluptatum?
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid delectus dolore dolorum eaque earum est excepturi harum illo magni maiores minus non odit rem, repellendus tenetur ut veniam? Deleniti!
    </p>
</div>
<script>
  //点击按钮 让div瞬间显示隐藏
  $('#btn1').click(function () {
      //#target瞬间显示隐藏
      //如果#target是隐藏的
      // if($('#target').is(':hidden')) {
      //    $('#target').show(2000);//显示2000毫秒
      // }else{
      //    //否则
      //    $('#target').hide(2000);//隐藏2000毫秒
      // }
      $('#target').slideToggle(); //$('#target').fadeToggle();

  })
    //动画：1.简单动画：固定三种动画效果
    //1.显示隐藏：$元素.show() $元素.hide()  本质是用display:none和display：block来实现瞬间隐藏显示
    //2.上滑下滑 : $元素.slideUp() $元素.slideDown()  $元素.slideToggle()
    //3.淡入淡出 :$元素.fadeIn() $元素.fadeOut() $元素.fadeToggle()
    //问题1：效果固定无法修改
    //2.都是用js程序和定时模拟器动画效果--效率低
    //总结：将来未能用css做的动画，首选css--效率高可维护
</script>
</body>
</html>

7.精简显示品牌

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.3.js"></script>
    <style>
        body{
            text-align: center;
        }
        ul{
            list-style: none;
        }
        li{
            margin: 0;
            padding: 0;
            display: inline-block;
            width: 30%;
        }
    </style>
</head>
<body>
<ul id="list">
    <li>尼康</li>
    <li>佳能</li>
    <li>索尼</li>
    <li>宾得</li>
    <li>爱国者</li>
    <li>欧巴</li>
    <li>海鸥</li>
    <li>卡西欧</li>
    <li>三星</li>
    <li>松下</li>
    <li>其他品牌</li>
</ul>
<button data-toggle="brandlist">精简显示品牌</button>
<script>
    //为data-toggle="brandlist" 绑定点击事件
    $('[data-toggle=brandlist]').click(function () {
        //如果ul#list下有隐藏元素，就显示全部，顺便该当前按钮内容为精简显示品牌
        var $ul=$('#list');
        if($ul.is(':has(:hidden)')){
            $ul.children().show();
            $(this).html('精简显示品牌')
        }else{
            //否则隐藏5以上。但是除最后一个元素之外的剩余元素，顺便该当前的按钮内容为显示所有品牌
            $ul.children(':gt(5):not(:last)').hide();
            $(this).html('显示所有品牌');
        }

    })

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

8.框架/js库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular.js"></script>
</head>
<body>

<!--vue.js-->
<!--react-->

<!--框架/js库-->
<!--
    ①基础语法
    ②数据（内部数据，通信数据）
    ③路由（建立一种映射关系）
如何区分：将框架比作一个坦克，学会如何实现基础操作，然后才能正确地用起来
          将库比作瑞士军刀，专注于一个细节

          设计原则：
          ①@YANGI You Aren't Gonna Need It(不要写不需要的代码)
          ②KISS keep it simple and stupid 保证代码足够的简洁
          ③DRY Don't repeat Yourselt 要学会封装和复用
          ④高内聚 低耦合 耦合度：不同模块、不同组件之间的关联度
          ⑤SRP single responsibility principle 单一责任原则 一个文件，一个方法，一个变量只做一件事
          ⑥OCP open closed principle 开闭原则

          anjular是由谷歌公司在09年推出的js框架
          主要用来实现大中型，大型的spa(单一页面应用程序)开发
-->
<!--初始化应用程序-->
<!--<div ng-app>-->
<!--&lt;!&ndash;  大胡子语法、插值表达式   &ndash;&gt;-->
<!--  <p>{{3+5}}</p>-->
<!--</div>-->

<!--ng-init 初始化应用程序数据-->
<!--<div ng-app="" ng-init="a=2;b=5">-->
<!--    <p>值为：{{a*b}}</p>-->
<!--</div>-->

<!--<div ng-app="" ng-init="firstName='ba';lastName='jianjuan'">-->
<!--    <p>姓名：{{firstName+" "+lastName}}</p>-->
<!--</div>-->

<!--<div ng-app="" ng-init="pearon={firstName:'ba',lastName:'jianjuan'}">-->
<!--&lt;!&ndash;    <p>姓为：{{pearon.firstName}}</p>&ndash;&gt;-->
<!--    <p>姓为：<span ng-bind="pearon.firstName"></span></p>-->
<!--</div>-->

<!--<div ng-app="" ng-init="arr=[1,2,5,8]">-->
<!--    <p>第三个值为：{{arr[2]}}</p>-->
<!--</div>-->

<!--ng-model 把元素值（输入框的值）绑定到应用程序-->
<!--
    --mvc模式
    m module模块   v view视图    c-controller 控制器
-->

<!--<div ng-app="" ng-init="fisrtName='tom'">-->
<!--    <p>在输入框输入。。。</p>-->
<!--    <p><input type="text" ng-model="fisrtName"></p>-->
<!--    <p>你输入的值为{{fisrtName}}</p>-->
<!--</div>-->

<!--两个变量通过ng-model计算相乘结果-->
<!--<div ng-app="" ng-init="a=5;b=8" >-->
<!--    <input type="number" ng-model="a">-->
<!--    <input type="number" ng-model="b">-->
<!--    <p>总计：{{a*b}}</p>-->
<!--</div>-->

<!--循坏 ng-repeat-->
<!--<div ng-app="" ng-init="arr=[5,8,6,7]">-->
<!--    <h2>循环数组</h2>-->
<!--    <ul>-->
<!--        <li ng-repeat="x in arr">-->
<!--            {{x}}-->
<!--        </li>-->
<!--    </ul>-->
<!--</div>-->

<!--<div ng-app="" ng-init="info=[-->
<!--                     {name:'tom',age:15},-->
<!--                     {name:'kai',age:14},-->
<!--                     {name:'dong',age:13},-->
<!--                     {name:'jan',age:15},-->
<!--                            ]">-->
<!--    <h1>循坏对象</h1>-->
<!--    <ul>-->
<!--        <li ng-repeat="x in info">-->
<!--            {{x.name+' '+x.age}}-->
<!--        </li>-->
<!--    </ul>-->
<!--</div>-->

<div ng-app="myApp" ng-controller="ctrl">
<!--    姓名:<input type="text" ng-model="name">-->
<!--    <h3>输入的姓名为：{{name}}</h3>-->
    <input type="text" ng-model="firstName">
    <input type="text" ng-model="lastName">
    <p>姓名:{{fullName()}}</p>    <!--    <p>姓名:{{firstName+' '+lastName}}</p>-->
</div>
<!--
scope 作用域  它是视图和控制器之间的纽带
scope是一个对象，有可用的方法和属性
scope 可应用在视图和控制器上
-->
<script>
    var app=angular.module('myApp',[]);
    app.controller('ctrl',function ($scope) {
        $scope.firstName='ba';
        $scope.lastName='jianjuan';
        $scope.fullName=function () {<!-- -->
            return $scope.firstName+" "+$scope.lastName
        }
    })
</script>

</body>
</html>

篇章

上一篇：JavaScript知识点7
下一篇：JavaScript知识点9-案例大全

梦幻之光_dream

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript知识点8

文章目录1.事件绑定2.事件3.查找3个div4.使用hover5.百度一下6.jQuery动画函数--显示隐藏动画7.精简显示品牌8.框架/js库篇章1.事件绑定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-1.11.3.js">
复制链接

扫一扫

专栏目录