ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

2022-08-26 第二小组 张鑫 学习笔记

2022-08-27 22:04:12  阅读：175  来源： 互联网

标签：function index 26 张鑫 08 click --- div 选择器


实训四十八天 JS库

学习内容

JS库

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

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

  • JQuery.js------濒临淘汰，经典 10%以下 css库，bootstrap，layui，easyui
  • React.js-------30%市场
  • Angular.js-----10%以下，最难
  • Vue.js---------50%以上，简单 最主流

选择器

基本选择器
    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]---除文本框的其他

jquery

加载就绪
<script src="js/jquery-1.9.1.js"></script>
  $(()=>{
    let div = $("div");
    console.log(div);
 })
文档就绪函数
 当页面的文档部分加载完毕之后，要执行的函数
$(document).ready(function(){
    alert("文档就绪函数");
});
$(function(){
    alert("111");
})
事件触发
<script src="js/jquery-3.0.0.min.js"></script>
<script>
    /*
        事件
        他们分别在什么时候触发？
        1、JQuery文档就绪函数在页面加载完毕之后触发。浏览器解析完HTML标签
         window.onload，除了解析完HTML标签之外，等到浏览器创建好DOM对象
        2、JQuery文档就绪函数可以执行多次，window.onload只能执行一次
    */
   $(function(){
        alert("JQuery1");
   })
   window.onload = function() {
        alert("window1");
   }
   </script>
 }

==

click()---单击事件
blur()----失去焦点
mouseover()---鼠标悬停
change()-----改变事件
live()----它可以来绑定选择器匹配的元素的事件，哪怕这个元素是后面动态创建出来的

==

事件添加
<button id="btn1">按钮1</button>
<button id="btn2" onclick="fun()">按钮2</button>
<div id="btns"></div>
<script src="js/jquery-3.0.0.min.js"></script>
<script>
 
    $(() => {
        /*
            我们常规的添加事件
            addEventListener
            $().click()
            前提条件：
            标签必须原原本本存在于HTML页面上
        */
        $("#btn1").click(() => {
            $("<button id='cr'>创建</button>").appendTo($("#btns"));
        });
        
    })
    function fun() {
            $("#cr").click(()=>{
                alert("cr");
            });
        };
</script>
字符串
<div id="container">
    <p id="p123">123</p>
</div>
<!-- 
    script标签：只可以做一件事情
    要么是导入js文件，要么是写js代码
 -->
<script src="js/jquery-1.9.1.js"></script>
<script>
    $(() => {
        /*
            appendTo()：参数是一个JQuery元素，追加到xxx
            prepareTo()：在之前追加
        */
        $("<p>546</p>").appendTo($("#container"));
        $("<p>999</p>").prependTo($("#container"));
        $("<p>888</p>").insertAfter($("#container"));
        $("<p>777</p>").insertBefore($("#container"));
        $("#p123").replaceWith($("<p>666</p>"));
        // $("<span>000</span>").replaceAll($("p"));
        // 在内部的后面追加
        $("#container").append($("<p>100</p>"));
        $("#container").prepend($("<p>200</p>"));
        $("#container").after($("<p>5000</p>"));
        $("#container").before($("<p>6000</p>"));
        // 清空标签内的所有内容
        // $("#container").empty();
        $("p:gt(5)").remove();
    })
</script>
属性操作
<script>
    $(() => {
        // $("#div1").text("<p>123</p>");
        $("#username").val("666");
        /*
            属性操作：
            html() ===== innerHTML
            text() ===== innerText
            val() ====== input.value
            val()函数：可以给文本框赋值，
                可以操作单选框，复选框，下拉菜单的选中状态
        */
       $("#checkAll").click(()=> {
            // $("#swimming").val("swimming");
            // 相当于setAttribute
            // 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"));
       })
    })
</script>
样式增减
        <style>
            .a{
                width: 200px;
                height: 200px;
                background-color: orange;
            }
            .f {
                color: red;
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        <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>
    </body>
样式隐藏和显示
       <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>
    </body>

案例1 反选 全选 全不选

<!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 src="js/jquery-1.9.1.js"></script>
    <script src="js/jquery-3.0.0.min.js"></script>
    <script>
        $(function () {
            $("#checkAll").click(function () {
                $("input[type=checkbox]").prop("checked", "true");
            })
            $("#unCheckAll").click(function () {
                $("input[type=checkbox]").prop("checked", "");
            })

            $("#revBtn").click(function () {
                $("input[type=checkbox]").each(function () {
                    this.checked = !this.checked;
                });
            })
        })
    </script>
    你爱好的运动是？
    <br>
    <br>
    <input type="checkbox">足球
    <input type="checkbox">篮球
    <input type="checkbox">羽毛球
    <input type="checkbox">乒乓球
    <br>
    <br>
    <input type="button" id="checkAll" value="全选">
    <input type="button" id="unCheckAll" value="全不选">
    <input type="button" id="revBtn" value="反选">
</body>

</html>

案例2 切换div

<!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>
            .container {
                width: 500px;
                height: 150px;
                position: relative;
                margin: auto;
            }
            .item {
                width: 500px;
                height: 500px;
                position: absolute;
            }
            .item:nth-child(1) {
                background-color: yellow;
            }
            .item:nth-child(2) {
                background-color: red;
            }
            .item:nth-child(3) {
                background-color: green;
            }
            .item:nth-child(4) {
                background-color: blue;
            }
            .active {
                z-index: 10;
            }
        </style>
    </head>
    <body>
        <!-- 
            需求：
            每隔1s钟，切换颜色，
            当切换到第四种颜色时，再切换回第1个

            我们可以给HTML添加我们自定义的属性
            a="1"
            原则：
            div id="div1"
         -->
        <div class="container">
            <div data-index="1" class="item active"></div>
            <div data-index="2" class="item"></div>
            <div data-index="3" class="item"></div>
            <div data-index="4" class="item"></div>
        </div>

        <script src="js/jquery-1.9.1.js"></script>
        <script>

            function next(index) {
                index = parseInt(index);

                if(index == $(".item").length) {
                    return 1;
                }

                return index + 1;
            }

            setInterval(() => {
                // 我要先知道现在是谁在上面
                // 我要获取现在在最上面的div
                let active = $(".active");
                // 接住我们获取到的最上面的div的自定义的索引值属性
                let index = active.attr("data-index");
                // 现在最上面的div删除激活样式
                active.removeClass("active");

                $(".item[data-index="+ next(index) +"]").addClass("active");

            },500);
            
        </script>
    </body>
</html>

标签：function,index,26,张鑫,08,click,---,div,选择器
来源： https://www.cnblogs.com/zxscj/p/16631573.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有