JAVA学习第三阶段模块二

最新推荐文章于 2024-10-30 19:10:39 发布

miaoit

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量215

点赞数

分类专栏： Java学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/miaoit/article/details/110351049

版权

Java学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

模块二前端进阶

jQuery

引入jQuery.js

<script src="js/jquery-3.4.1.min.js"></script>

获取标签文本值

<script>
    alert($("p").text());
</script>

选择器

基本选择器

<body>
    <p class="chinese">中国</p>
    <p id="america">美国</p>
    <p>新加坡</p>
    <p>印度尼西亚</p>
    <h3 class="chinese">中国</h3>
    <script src="js/jquery-3.4.1.min.js"></script>

    <script>
        //$("p").css("color","red"); //标签选择器，获得所有的p标签
        //$(".chinese").css("color","red"); //类选择器
        //$("#america").css("color","blue"); //ID选择器，更具备唯一性
        $(".chinese,#america").css("color", "yellow"); //并集选择器
        $("h3.chinese").css("color","red"); //交集选择器，取h3和.chinese的交集
    </script>
</body>

层次选择器

<body>
    <h3>000</h3>
    <div id="x">
        <p>111</p>
        <div>
            <p>222</p>
        </div>
    </div>
    <h3>222</h3>
    <h3>333</h3>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        //$("#x p").css("color","red"); //后代选择器，忽略层级 #x下的所有p标签全部被修改
        //$("#x>p").css("color","red"); //子代选择器，#x下的所有子p标签被修改
        //$("#x+h3").css("color","red"); //相邻选择器，#x下一个相邻的h3标签被修改，上边相邻的h3不会被修改
        $("#x~h3").css("color","red"); //同辈选择器，#x下边所有的同级h3标签被修改，上边同级的h3不会被修改
    </script>
</body>

属性选择器

<body>
    <a href="www.lagou.com">拉勾网</a>
    <a href="www.百度.cn">百度</a>
    <a href="http://百度.cn">百度http</a>
    <a href="http://hao123.com">好123</a>
    <p href="x">xxxxx</p>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        //$("[href]").css("color","red"); //给所有有href的元素修改颜色
        //$("[href='x']").css("color","red"); //给所有有href值为x的元素修改颜色
        //$("[href!='x']").css("color","red"); //给所有有href值不为x的元素修改颜色
        //$("[href^='www']").css("color","red"); //给所有有href值以www开头的元素修改颜色
        //$("[href$='cn']").css("color","red"); //给所有有href值以cn结尾的元素修改颜色
        //$("[href*='lagou']").css("color","red"); //给所有有href值包含lagou的元素修改颜色
        $("[href^='www'][href$='cn']").css("color","red"); //复合条件 给既以www开头又以cn结尾的元素修改颜色
    </script>
</body>

过滤选择器

<body>
    <li>西游记</li>
    <li>三国演义</li>
    <li>水浒传</li>
    <li>红楼梦</li>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        //$("li:first").css("color","red"); //li列表中第一个元素被修改
        //$("li:last").css("color","red"); //li列表中最后一个元素被修改
        //$("li:even").css("color","red"); //li列表中索引值为偶数元素0、2、4...被修改
        //$("li:odd").css("color","red"); //li列表中索引值为奇数元素1、3、5...被修改
        //$("li:eq(2)").css("color","red"); //li列表中索引值为2的元素被修改
        //$("li:gt(2)").css("color","red"); //li列表中索引值大于2的元素3、4、5...被修改
        $("li:lt(2)").css("color","red"); //li列表中索引值小于2的元素0、1被修改
    </script>
</body>

事件

鼠标事件

click：点击时触发
mouseover：鼠标悬停时触发
mouseout：鼠标离开时触发

<style>
    img{
        width: 300;
    }
</style>
<body>
    <img src="img/1.jfif">
    <img src="img/1.jfif">
    <img src="img/1.jfif">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("img").click(function(){
            $(this).attr("src","img/2.jfif")  //点击图片时更新为新图片
        });
        $("img").mouseover(function(){
            $(this).css("border","2px solid red");  //鼠标悬停时边框为红色
        });
        $("img").mouseout(function(){
            $(this).css("border","2px solid white"); //鼠标离开时边框为白色
        });
    </script>
</body>

键盘事件

keydown：点击按键时触发
keyup：释放按键时触发

<body>
    <input>
    <h3></h3>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        //释放按键时触发
        $("input").keyup(function(){
            var str = $(this).val(); //获取输入框中的值
            $("h3").text(str); //将h3中的值替换为输入框中的值
        })
    </script>
</body>

表单事件

focus：获得焦点时触发
blur：失去焦点时触发

<body>
    <script src="js/jquery-3.4.1.min.js"></script>
    <form>
        <p>账号：<input type="text" id="a" value="请输入账号："></p>
        <p>电话：<input type="text" id="b"></p>
    </form>

    <script>
        //当输入框获得焦点时，清空输入框中的值
        $("#a").focus(function(){
            $(this).val("");
        });
        $("#a").blur(function(){
            $(this).val("请输入账号：");
        });
    </script>
</body>

鼠标悬停复合事件

hover：hover（悬停时执行，离开时执行）

<body>
    <script src="js/jquery-3.4.1.min.js"></script>
    <img src="img/4.jpg" width="500">

    <script>
        $("img").hover(
            function () {
                $(this).css("border", "2px solid red");
            },
            function () {
                $(this).css("border", "2px solid white");
            })
    </script>
</body>

连续点击复合事件

toggle：点击隐藏，再次点击展示

<style>
    h3{
        cursor: pointer;
    }
</style>
<body>
    <script src="js/jquery-3.4.1.min.js"></script>
    <h3>四大名著</h3>
    <ul>
        <li>西游记</li>
        <li>水浒传</li>
        <li>三国演义</li>
        <li>红楼梦</li>
    </ul>
    <script>
        //点击h3标签，ul标签内容隐藏，再次点击显示
        $("h3").click(function(){
            $("ul").toggle();
        });
    </script>
</body>

动态绑定

可以绑定多种类型的事件
- on（“事件1 事件2 …”，function）

<body>
    <script src="js/jquery-3.4.1.min.js"></script>
    <h3>
        点击事件
    </h3>
    <script>
        $("h3").on("click mouseover keyon",function(){
            alert("嘻嘻")
        })
    </script>
</body>

元素的隐藏和显示

show(speed)：显示
hide(speed)：隐藏
toggle(speed)：切换
speed：动画速度

<body>
    <button id="show">显示</button>
    <button id="hide">隐藏</button>
    <button id="change">切换</button><br>
    <img src="img/4.jpg">
    <script src="js/jquery-3.4.1.min.js"></script>

    <script>
        $("#show").click(
            function(){
                $("img").show(1000);
            }
        );
        $("#hide").click(
            function(){
                $("img").hide(1000);
            }
        );
        $("#change").click(
            function(){
                $("img").toggle(1000);
            }
        );
    </script>
</body>

链式编程

点击一次按钮，让div完成4个指定动作
1. 背景变粉
2. 字体变绿
3. 收缩
4. 拉伸

<body>
    <script src="js/jquery-3.4.1.min.js"></script>

    <div>
        hello
    </div>
    <button>按钮</button>
    <script>
        $("button").click(
            function () {
                $("div").css("background-color", "pink").css("color", "green").slideUp(1000).slideDown(1000);
            });

    </script>
</body>

DOM操作

属性函数

attr(“属性”)：获得元素的属性值
- attr(“属性”，“新值”)：修改元素属性值
- attr(“样式参数”)：可以写成json格式

<body>
    <script src="js/jquery-3.4.1.min.js"></script>
    <img src="img/4.jpg">
    <script>
        // var src = $("img").attr("src");
        $("img").click(
            function () {
                //alert(src);
                $("img").attr("src", "img/1.jfif");
            });
    </script>
</body>

val()：获取表单中的value值
- val(“修改后”)：修改表单元素中的value值

<body>
    <script src="js/jquery-3.4.1.min.js"></script>
    <form>
        账号：<input type="text" id="username">
        密码：<input type="text">
    </form>
    <button>点击</button>

    <script>
        $("button").click(
            function () {
                alert($("#username").val());
                $("#username").val("hahah");
            }
        );
    </script>
</body>

html()：获得元素中的内容（标签+文本）
- html(“修改后”)：修改元素中的内容

<body>
    <script src="js/jquery-3.4.1.min.js"></script>

    <h1><i>拉勾教育</i></h1>

    <button>点击</button>

    <script>
        $("button").click(
            function () {
                alert($("h1").html());
            }
        );
    </script>
</body>

text()：获取元素中的文本内容
- text(“修改后”)

<body>
    <script src="js/jquery-3.4.1.min.js"></script>

    <h1><i>拉勾教育</i></h1>

    <button>点击</button>

    <script>
        $("button").click(
            function () {
                alert($("h1").text());
                $("h1").text(1231);
            }
        );
    </script>
</body>

样式函数

css( “属性”)：获得该属性值
css( “属性”,“值”)：设置属性的值
css( { json} )：设置多个属性的值

宽高函数

width(); 获得元素的宽度
width( number ); 修改元素的宽度
height(); 获得元素的高度
height( number ); 修改元素的高度

类样式函数

addClass(); 为元素添加类样式
removeClass(); 将元素的类样式移除
toggleClass(); 样式的切换（有->无，无->有）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
        color: white;
        width: 300px;
        height: 300px;
        background-color: black;
    }
    .a{
        border: 5px solid red; 
    }
    .b{
        background-origin: padding-box;
        opacity: 50%;
    }
    .cn{
        font-size: 100px;
    }
</style>
<body>
    <script src="js/jquery-3.4.1.min.js"></script>

    <div>
        hello
    </div>

    <button id="button1">添加样式</button>
    <button id="button2">删除样式</button>
    <button id="button3">切换样式</button>

    <script>
        //添加类样式 a和b
        $("#button1").click(function(){
            $("div").addClass("a b");
        });
        $("#button2").click(function(){
            $("div").removeClass("a b");
        });
        $("#button3").click(function(){
            $("div").toggleClass("cn");
        });
    </script>
</body>
</html>

练习

手风琴特效

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    dd {
        display: none;
    }
    dt{
        cursor: pointer;
    }
</style>

<body>
    <nav>
        <ul>
            <li>
                <dt>四大名著</dt>
                <dd>西游记</dd>
                <dd>三国演义</dd>
                <dd>水浒传</dd>
                <dd>红楼梦</dd>
            </li>
            <li>
                <dt>四大诗人</dt>
                <dd>李白</dd>
                <dd>杜甫</dd>
                <dd>李贺</dd>
                <dd>王维</dd>
            </li>
            <li>
                <dt>海外名著</dt>
                <dd>鲁滨逊漂流记</dd>
                <dd>悲惨世界</dd>
                <dd>老人与海</dd>
                <dd>巴黎圣母院</dd>
            </li>
        </ul>
    </nav>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("dt").click(
            function(){
                //将所有除了自己的同辈元素收起
                $("dd").not($(this).siblings()).slideUp(500);
                //控制自己当前的同辈元素展开收起
                $(this).siblings("dd").slideToggle(500);
            }
        )
    </script>
</body>

</html>

购物车

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .jian,
    .jia {
        border: 1px solid #999;
        display: inline-block;
        /*超链接a是行内元素，只能转换成行内块元素，才能改变宽和高*/
        width: 20px;
        height: 20px;
        text-align: center;
        text-decoration: none;
    }
</style>

<body>
    <table border="1" cellspacing="0" width="400">
        <tr>
            <td>商品编号</td>
            <td>名称</td>
            <td>单价</td>
            <td>数量</td>
            <td>总价</td>
        </tr>
        <tr>
            <td>1</td>
            <td>炸香肠</td>
            <td>3</td>
            <td>
                <a href="#" class="jian">-</a>
                <span>1</span>
                <a href="#" class="jia">+</a>
            </td>
            <td>3</td>
        </tr>
        <tr>
            <td>2</td>
            <td>王八</td>
            <td>10</td>
            <td>
                <a href="#" class="jian">-</a>
                <span>1</span>
                <a href="#" class="jia">+</a>
            </td>
            <td>10</td>
        </tr>
        <tr>
            <td>3</td>
            <td>恐龙</td>
            <td>1000</td>
            <td>
                <a href="#" class="jian">-</a>
                <span>1</span>
                <a href="#" class="jia">+</a>
            </td>
            <td>1000</td>
        </tr>
    </table>
    <p style="width: 400px; text-align: right;">
        总价：<b style="color:red;">111</b> <button>提交订单</button>
    </p>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        //进入直接计算
        getTotal();
        $(".jia").click(
            function () {
                //获取当前商品数量
                var i = $(this).prev().text();
                i++;
                //修改当前商品数量
                $(this).prev().text(i);
                //获取当前商品单价
                var price = $(this).parent().prev().text();
                //修改当前商品总价
                $(this).parent().next().text(i * price);
                //获取总价
                getTotal();
            }
        );
        $(".jian").click(
            function () {
                //获取当前商品数量
                var i = $(this).next().text();
                i--;
                //判断是否为0
                if (i == 0) {
                    if (confirm("是否确定删除该商品?")) {
                        $(this).parents("tr").remove();
                    }
                } else {
                    //修改当前商品数量
                    $(this).next().text(i);
                    //获取当前商品单价
                    var price = $(this).parent().prev().text();
                    //修改当前商品总价
                    $(this).parent().next().text(i * price);
                }
                //获取总价
                getTotal();
            }
        );
        //计算总价方法
        function getTotal() {
            var sum = 0;
            //去除第一个tr之后获取所有tr最后一个td（当前商品总价）
            $("tr").not("tr:first").find("td:last").each(
                //遍历数组的值加到sum中
                function () {
                    sum += Number($(this).text())
                }
            );
            //给总价赋值
            $("b").text(sum);
        };
    </script>
</body>

</html>

ES6

hello world
node hello.js

console.log("hello nodejs");

NPM

node包管理器
查看npm配置

npm config list

下载jQuery1.9.1版本

npm install jQuery@1.9.1

###　基本语法

let变量声明

与var之间的区别

作用域不同
- var声明的变量是全局变量,let声明的变量是局部变量

{
  var a = 0; //全局变量
  let b = 0; //局部变量

  console.log(b);
}
console.log(a);
//console.log(b); // b is not defined

声明次数不同
- var可以声明多次,let只能声明一次

var m = 1;
var m = 2; //var可以重复声明
let n = 1;
let n = 2; //let不能重复声明
console.log(m);
console.log(n); //SyntaxError: Identifier 'n' has already been declared

声明与使用顺序不同
- var声明的变量会全局储存,let声明的变量只有在执行后才存储

console.log(x); //undefined 没有异常
var x = "苹果";
console.log(y); //ReferenceError: Cannot access 'y' before initialization
let y = "香蕉";

const声明常量

const声明常量为只读变量

声明之后值不可被改变

const pai = 3.1415926;
pai = 3.14;
console.log(pai); //TypeError: Assignment to constant variable.

必须要初始化

const pai;
console.log(pai); //SyntaxError: Missing initializer in const declaration

####　解构赋值

数组解构

var arr = [1, 2, 3];

//传统js写法
let a = arr[0];
let b = arr[1];
let c = arr[2];
console.log(a, b, c);

//es6新写法
var [x, y, z] = arr;
console.log(x, y, z);

对象解构

var user = {
  username: "miaoxun",
  age: 18,
  hobby: "打篮球",
};
//传统js写法
let username = user.username;
let age = user.age;
let hobby = user.hobby;
//es6新写法
let { username, age, hobby } = user;

模板字符串

加强版的字符串
反引号`可以定义多行字符串
多行字符串

let str = `hello
world`
console.log(str)
//输出
//hello
//world

拼接字符串

let name = `苗珣`;
let age = 18;

var user = `我叫${name},我今年${age}岁`;
console.log(user);

拼接函数

function test(){
    return "我爱你"
}

var str1 = `刘亦菲${test()}`;

console.log(str1)

声明对象和方法

声明对象简写

let name = `吕布`;
let age = 28;
//传统
let user1 = {
  name: name,
  age: age,
};
console.log(user1);
//es6新语法中的简写
let user2 = { name, age };
console.log(user2);

声明方法简写

// 传统
let user1 = {
	say : function(){
		console.log("大家好！");
	}
};
user1.say();
//es6
let user2 = {
    say(){
		console.log("大家好啊！");
	}
};
user2.say();

对象拓展运算符

let user1 = {
  username: "miaoxun",
  age: 18,
};

let user2 = {
    username: "miaoxun",
    age: 18,
    hobby:"打篮球"
  };
//合并两个对象
let user3 = { ...user1,...user2 };
//克隆user2
let user4 = { ...user2 }

console.log(user3);

默认参数和不定参数

默认参数

function test(name, age) {
  console.log(`我叫${name},今年${age}岁`);
}

test("吕布", 33); //我叫吕布,今年33岁

function test1(name, age = 18) {
  console.log(`我叫${name},今年${age}岁`);
}

test1("吕布"); //我叫吕布,今年18岁
test1("马超", null); //我叫马超,今年null岁
test1("张飞", ""); //我叫张飞,今年岁
test1("刘备", undefined); //我叫刘备,今年18岁

不定参数

function test2(...arg) {
  for (var i = 0; i < arg.length; i++) {
    console.log(arg[i]);
  }
}

箭头函数

当箭头函数一个参数时，（）可以省略
当箭头函数没有参数或者有多个参数，要用（）括起来
当箭头函数的函数体有多行语句，用｛｝括起来，表示代码块
当只有一条语句，并且需要返回时，可以省略｛｝，结果会自动返回

// 传统
var f1 = function (a) {
  return a * 10;
};
console.log(f1(10));
// es6
var f2 = (a) => a * 10;
console.log(f2(20));
// 当箭头函数一个参数时，（）可以省略
// 当箭头函数没有参数或者有多个参数，要用（）括起来
// 当箭头函数的函数体有多行语句，用｛｝括起来，表示代码块
// 当只有一条语句，并且需要返回时，可以省略｛｝，结果会自动返回
var f3 = (a, b) => {
  let sum = a + b;
  return sum;
};
console.log(f3(3, 7));
// 可以将f3进行简化
var f4 = (a, b) => a + b;
console.log(f3(11, 22));

promise

模块化

传统模块化

user.js

function addUser(name){
	return `保存${name}成功！`;
}
function removeUser(id){
	return `删除${id}号用户！`;
}
// 声明模块并导出
// module.exports={
// save:addUser,
// delete:removeUser
// }
// 声明模块导出的简写
module.exports={
	addUser,
	removeUser
}

test.js

let user = require("./user.js"); //引入user模块
console.log( user );
let result1 = user.addUser("吕布");
let result2 = user.removeUser(101);
console.log(result1);
console.log(result2);

ES6模块化

运行test.js报错语法错误
- nodejs不支持es6的import语法,需要将es6转为es5
user.js

let name = "老孙";
let age = 66;
let fn = function(){
	return `我是${name}!我今年${age}岁了！`;
}
// 声明模块并导出
export{
	name,
	age,
	fn
}

test.js

import {name,age,fn} from "./user.js"
console.log(name);
console.log(age);
console.log(fn);

Bootstrap

来自Twitter,是目前最后欢迎的响应式前端框架

为什么使用Bootstrap

移动设备优先,支持移动设备优秀
- 不是简单的增加了一些可选的移动设备样式,而是直接融合进了框架的内核中
响应式框架:能够自适应台式机平板电脑手机
开源免费

hello world

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body>
    <h1>hello world</h1>
    <button class="btn btn-primary">提交</button>
</body>

</html>