2022-08-26 第四小组王星苹学习笔记

学习心得

今天讲述了关于js文件，就是别人写好的，可以直接用的一个库。库里有方法，可以做一些小动画效果。

掌握情况：还行一般

学习总结：如下

JS库：别人写好的JS文件，我们拿来直接用

开发中，会引入很多的.js文件

JQuery.js------濒临淘汰，经典。10%以下

css库，bootstrap，layui，easyui。

React.js-------30%市场

Angular.js-----10%以下，最难

Vue.js---------50%以上，简单。最主流。

尤雨溪

文档就绪函数

当页面的文档部分加载完毕之后，要执行的函数

       $(document).ready(function(){
        alert("文档就绪函数");
       });
       $(function(){
        alert("111");
       })

选择器

基本选择器

id选择器---返回值是固定的一个

class选择器---返回值是一堆

标签选择器---返回值是一堆

*号选择器---返回值是所有标签

层级选择器

div p---div里的p，后代

div>p---直接子元素

div+p---相邻

过滤选择器

:first---获取第一个元素

:last---获取最后一个元素

:eq(index)---给定位置的元素

:gt(index)---大于给定位置

:lt(index)---小于给定位置

:not(selector)---除了selector以外的所有选择器

内容选择器：

:empty---匹配所有不包含子元素的选择器

:parent---含有子元素的父元素

属性选择器：

[name]---包含name属性的元素

input[type=text]---文本框

input[type!=text]---除文本框的其他

写法：需要有$符

            $(()=>{
               let div = $("div");
               console.log(div);
            })

事件

他们分别在什么时候触发？

1、JQuery文档就绪函数在页面加载完毕之后触发。浏览器解析完HTML标签

window.onload，除了解析完HTML标签之外，等到浏览器创建好DOM对象

2、JQuery文档就绪函数可以执行多次，window.onload只能执行一次

$(function(){
     alert("JQuery1");
})
     window.onload = function() {
     alert("window1");
}
$(function(){
     alert("JQuery2");
})
     window.onload = function() {
     alert("window2");
}
//这么写完之后window的只有2能出来，但JQuery的两个都可以出来。

click()---单击事件

blur()----失去焦点

mouseover()---鼠标悬停

change()-----改变事件

live()----它可以来绑定选择器匹配的元素的事件，哪怕这个元素是后面动态创建出来的

我们常规的添加事件

addEventListener

$().click()

前提条件：

标签必须原原本本存在于HTML页面上

<button id="btn1">按钮1</button>
<button id="btn2" onclick="fun()">按钮2</button>
<div id="btns"></div>
$(() => {
    $("#btn1").click(() => {
        $("<button id='cr'>创建</button>").appendTo($("#btns"));
    });          
})
function fun() {
        $("#cr").click(()=>{
            alert("cr");
        });
    };

练习

第一个块越来越小

第二个块变浅了

第三个块越来越扁后来没了

 <style>
            .a{
                width: 200px;
                height: 200px;
                background-color: orange;
            }
        </style>
<body>


        <button id="btn1">隐藏</button>
        <button id="btn2">显示</button>
        <button id="btn3">隐藏 / 显示</button>


        <div class="a" id="div1"></div>


        <hr>
        <button id="btn4">隐藏</button>
        <button id="btn5">显示</button>
        <button id="btn6">隐藏 / 显示</button>
        <button id="btn7">透明</button>


        <div class="a" id="div2"></div>


        <hr>
        <button id="btn8">隐藏</button>
        <button id="btn9">显示</button>
        <button id="btn10">隐藏 / 显示</button>


        <div class="a" id="div3"></div>


        <script src="js/jquery-1.9.1.js"></script>
        <script>
            $(()=>{


                $("#btn8").click(() => {
                    $("#div3").slideUp(5000);
                });
                $("#btn9").click(() => {
                    $("#div3").slideDown(5000);
                });
                $("#btn10").click(() => {
                    $("#div3").slideToggle();
                });


                $("#btn4").click(() => {
                    $("#div2").fadeOut(5000);
                });
                $("#btn5").click(() => {
                    $("#div2").fadeIn(5000);
                });
                $("#btn6").click(() => {
                    $("#div2").fadeToggle();
                });
                $("#btn7").click(() => {
                    $("#div2").fadeTo(1000,0.2);
                });




                $("#btn1").click(() => {
                    $("#div1").hide(5000,() => {
                        alert("div已经隐藏了");
                    });
                });
                $("#btn2").click(() => {
                    $("#div1").show(5000);
                });
                $("#btn3").click(() => {
                    $("#div1").toggle();
                });
            });
        </script>

-=-=-=-

posted on 2022-08-26 21:35 骐琳阅读(30) 评论(0) 编辑收藏举报