2022-08-26 第二组刘禹彤 学习笔记

打卡41天

###学习内容

JS库

• 别人写好的JS文件，我们拿来直接用--------开发中会引入很多.js文件
• JQery.js：濒临淘汰，经典，10%以下市场

React.js：30%市场

Angular.js：10%以下市场，最难

Vue.js：50%以上市场，简单，最主流

• script标签，只可以做一件事情---要么导入js文件，要么写js代码

JQery.js

文档就绪函数

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

$(document).ready(function(){   })
//简写
$(function(){   })

选择器

• 基本选择器

id选择器-----返回值是固定的1个元素

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

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

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

• 层级选择器

div p------div里面的p

div>p------直接子元素

div+p------相邻

• 过滤选择器

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

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

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

xxx:gt(index)-----大于给定位置的元素

xxx:lt(index)-----小于给定位置的元素

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

• 内容选择器

xxx:empty----------匹配所有不包含子元素的元素

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

• 属性选择器

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

input{type=txt}----文本框

input{type!=txt}----除文本框的其它

事件

面试题：window.onload和$文档就绪函数的区别1.触发时间 JQery文档就绪函数：在页面加载完毕之后触发，浏览器解析完HTML标签 window.onload：解析完HTML标签，浏览器创建好DOM对象，显示的内容都加载完2.执行次数 JQuery文档就绪函数可以执行多次 window.onload只执行一次

标签操作

• click（）----------单击事件
• blur（）-----------失去焦点
• mouseover（）------鼠标悬停
• live（）-----------绑定选择器匹配的元素的事件，包括这个元素时候创建出来的

我们常规的添加事件，例如addEventListner；$().click()前提条件：标签必须原原本本的存在在 HTML页面-------live（）除外，可以解决这个问题

• appendTo--------参数是一个JQery元素，追加到xxx
• preparedTo--------在之前追加
• insertAfter---------在外部之后追加
• insertBefore-------在外部之前追加
• replaceWith-------替换
• replaceAll--------------替换所有
• append----------在内部的后面追加（被动->主动）
• empty---------清空标签内的所有内容
• remove-------删除指定内容

属性操作

• html ====== innerHTML

//div内添加内容
$("#id").html("<xx>内容</xx>")

• text ==========innerText

//div内添加内容
$("#id").text("内容")

• val（）========.value

<input type="text" id="username">
//取值
$("#id").val("内容")

val函数可以给文本框赋值，也可以操作单选框，复选框，下拉菜单的选中状态

• 选择状态

选择固定属性的内容

赋值

       // 相当于setAttribute        
       $("#checkAll").click(()=> {
      // $("#swimming").val("swimming");                

取值

       // getAttribute
      // alert($("input[type=checkbox]").attr("value","sss"));
      // alert($("input[type=checkbox]").attr("checked"));
    alert($("input[type=checkbox]").prop("checked",true));
    alert($("#sheng").prop("selected"));
    $(() => {
       // $("#div1").text("<p>123</p>");
         $("#username").val("666"); })
            })              

操作CSS样式

• 添加样式
• 删除样式
• 添加/删除样式

       .a{
                width: 200px;
                height: 200px;
                background-color: orange;
            }


        <button id="addStyle">添加样式</button>
        <button id="delStyle">删除样式</button>
        <button id="toggleStyle">添加 / 删除样式</button>
        <div id="div1">123123</div>
        <script src="js/jquery-1.9.1.js"></script>
        <script>
            $(()=> {
                $("#addStyle").click(() => {
                    $("#div1").addClass("a f");
                });
                $("#delStyle").click(() => {
                    $("#div1").removeClass("a f");
                });
                $("#toggleStyle").click(() => {
                    $("#div1").toggleClass("a f");
                });
            })
        </script>

操作多个样式，中间用空格隔开

动画

隐藏显示

• 放大缩小

        <div class="a" id="div1"></div>
        <button id="btn1">隐藏</button>
        <button id="btn2">显示</button>
        <button id="btn3">隐藏 / 显示</button>


                $("#btn1").click(() => {
                    $("#div1").hide(5000));
                $("#btn2").click(() => {
                    $("#div1").show(5000);});
                $("#btn3").click(() => {
                    $("#div1").toggle();});

• 淡入淡出

        <div class="a" id="div2"></div>
        <button id="btn4">隐藏</button>
        <button id="btn5">显示</button>
        <button id="btn6">隐藏 / 显示</button>
        <button id="btn7">透明</button>


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

• 上拉下拉

        <div class="a" id="div3"></div>
        <button id="btn8">隐藏</button>
        <button id="btn9">显示</button>
        <button id="btn10">隐藏 / 显示</button>


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

###学习心得

今天学习了JS库中的JQery.js，了解了文档就绪函数以及其中的一些属性和标签操作，感觉知识点有点分散，需要理解消化一下

###掌握情况：一般

###课上练习

<!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>
        你爱好的运动是？
        <input type="checkbox" id="checkAllBox">全选 / 全不选
        <br>
        <br>
        <input type="checkbox" class="item" value="足球">足球
        <input type="checkbox" class="item" value="篮球">篮球
        <input type="checkbox" class="item" value="羽毛球">羽毛球
        <input type="checkbox" class="item" value="乒乓球">乒乓球
        <br>
        <br>
        <input type="button" value="全选" id="checkedAllBtn">
        <input type="button" value="全不选" id="checkedNoBtn">
        <input type="button" value="反选" id="checkedReverseBtn">


        <script src="js/jquery-1.9.1.js"></script>
        <script>
            $(()=>{
                // 给全选按钮绑定事件
                $("#checkedAllBtn").click(()=>{
                    // 选取所有带有checkbox这个属性的值的元素们
                    $(":checkbox").prop("checked",true);
                });
                // 全不选绑定事件
                $("#checkedNoBtn").click(()=>{
                    // 选取所有带有checkbox这个属性的值的元素们
                    $(":checkbox").prop("checked",false);
                });
                // 反选
                $("#checkedReverseBtn").click(()=>{
                    // 获取全部的复选框
                    // 遍历复选框
                    // 
                    // for(let i = 0;i < $(".item").length;i++) {
                    //     $(".item:eq("+i+")").prop("checked",!$(".item:eq("+i+")").prop("checked"));
                    // }
                    // JQuery的遍历操作
                    /*
                        参数1：index---遍历元素的下标
                        参数2：item----当前正在遍历的项，这个item是一个DOM对象
                    */
                    $(".item").each((index,item) => {
                        // 在each遍历的function中，有一个this对象，this就是当前正在遍历的dom对象（JS对象）
                        /* this指向的问题？如果使用ES6箭头函数，
                            this指向不是DOM，指向的是当前函数的调用者。
                        */
                        item.checked = !item.checked;
                    });
                     // 检查是否满选
                    // 获取全部的选项的个数
                    let allCount = $(".item").length;
                    // 在获取选中的个数
                    let checkedCount = $(".item:checked").length;
                        $("#checkAllBox").prop("checked",allCount == checkedCount);
                });

                
                // if(allCount == checkedCount) {
                //     $("#checkAllBox").prop("checked",true);
                // }else {
                //     $("#checkAllBox").prop("checked",false);
                // }
                
                $("#checkAllBox").click(() => {
                    $(".item").prop("checked",$("#checkAllBox").prop("checked"));
                });

                // 获取所有样式为.item的元素
                // 可以直接绑定事件
                $(".item").click(()=> {
                    
                    // 检查是否满选
                    // 获取全部的选项的个数
                    let allCount = $(".item").length;
                    // 在获取选中的个数
                    let checkedCount = $(".item:checked").length;
                        $("#checkAllBox").prop("checked",allCount == checkedCount);
                });
            })
        </script>
    </body>
</html>

###运行结果