JAVA学习第三阶段模块二

模块二 前端进阶

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>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值