0
0

2022-08-26 第六小组 瞒春 学习笔记

🚩前言

🌻今天进行JQuery的学习

目录

✏️JQuery

✒️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]—除文本框的其他

✒️事件

他们分别在什么时候触发？
1、JQuery文档就绪函数在页面加载完毕之后触发。浏览器解析完HTML标签
window.onload，除了解析完HTML标签之外，等到浏览器创建好DOM对象
2、JQuery文档就绪函数可以执行多次，window.onload只能执行一次

📌click()—单击事件

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

我们常规的添加事件
addEventListener
$().click()
前提条件：
标签必须原原本本存在于HTML页面上

<!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>
            div {
                width: 600px;
                height: 600px;
                border: 1px solid;}
            p {
                background-color: yellow;}</style></head><body><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></body></html>

✒️属性操作：

html() ===== innerHTML
text() ===== innerText
val() ====== input.value
val()函数：可以给文本框赋值，
可以操作单选框，复选框，下拉菜单的选中状态

📌添加删除等样式演示

<!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>.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></html>

📌显示小特效展示

<!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>.a{
                width: 200px;
                height: 200px;
                background-color: orange;}</style></head><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></html>

✏️练习

✒️关于选择按钮

<!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>.a{
                width: 200px;
                height: 200px;
                background-color: orange;}</style></head><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></html>

✒️关于颜色切换

<!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>functionnext(index){
                index =parseInt(index);if(index == $(".item").length){return1;}return index +1;}setInterval(()=>{// 我要先知道现在是谁在上面// 我要获取现在在最上面的divlet active = $(".active");// 接住我们获取到的最上面的div的自定义的索引值属性let index = active.attr("data-index");// 现在最上面的div删除激活样式
                active.removeClass("active");

                $(".item[data-index="+next(index)+"]").addClass("active");},500);</script></body></html>
标签： 学习 easyui javascript
本文转载自: https://blog.csdn.net/weixin_49405762/article/details/126550729
版权归原作者 烫嘴的辛拉面 所有， 如有侵权，请联系我们删除。
登录后发布评论

“2022-08-26 第六小组 瞒春 学习笔记”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航