js学习+练习

最新推荐文章于 2024-09-26 01:42:12 发布

小矮多

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量193

点赞数

分类专栏： html css js 文章标签： js javascript

本文链接：https://blog.csdn.net/nefss_/article/details/114644774

版权

html css js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.数据处理：
window.location 对象用于获得当前页面的地址（URL），并把浏览器重定向到新页面
window.location.search 获取到url中从?开始的属性
window.location.href 返回当前页面的完整路径（URL）

2.三种输出:
打印到控制台弹窗输出到网页文档

<script>  console.log(window.location.search);//打印到控制台
        alert(123); //弹窗
        document.write("hello");//输出到网页文档
    </script>

3.JS定义变量
JavaScript是一门弱类型的语言，我们可以使用 var 关键词来声明变量：变量声明之后，该变量是空的（它没有值）。如需向变量赋值，请使用等号,也可以在声明变量时对其赋值.
var和let和const对比:
let作用域规则:let 声明的变量只在其声明的块或子块中可用，这一点，与var相似。二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数。
const 关键字用来声明 JavaScript中的常量（与变量相对，不可修改，但同样是用于存储信息的"容器"。），常量的值不能通过重新赋值来改变，并且不能重新声明。
获取元素:

<body>
    <div id="div1">初始文字</div>
    <script>
       //通过id来获取元素
        var oDiv = document.getElementById("div1");
        //修改元素的内容
        oDiv.innerHTML="修改后的文字";
        //修改元素的宽
        oDiv.style.width="500px";

    </script>
</body>

4.函数:
有名函数和匿名函数

<body>
    //定义元素
    <div id="div1">点击我</div>
    <script>
        //定义变量，获取到元素
        var oDiv = document.getElementById("div1");
        //定义函数
        function fnName() {
            alert(oDiv.innerHTML);
        }

        //事件
        // onclick 点击事件
        //当页面被点击时，调用fnName函数
        // document.onclick = fnName;
        oDiv.onclick = fnName;
    </script>
</body>

5.JS常用鼠标事件
onclick 鼠标单击
ondblclick 鼠标双击
onmouseover 鼠标移动到元素上
onmouseout 鼠标移动到元素外

例:鼠标移入和移走显示不同的颜色:

body>
    <div id="div1"></div>
    <script>
        //获取元素
        var oDiv = document.getElementById("div1");
        //触发鼠标移入事件
        oDiv.onmouseover = function () { //匿名函数
           oDiv.style.backgroundColor = "blue";
        }
        //触发鼠标移走事件
        oDiv.onmouseout =function () {
           oDiv.style.backgroundColor = "red";
        }
    </script>
</body>

6.留言功能:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #ul1{
        /*数据溢出时,浏览器显示滚动条,方便查看其余内容*/
            overflow: auto;
        }
    </style>
</head>
<body>
    <ul id="ul1"></ul>
    <input id="ipt1" type="text">
    <button id="btn1">提交</button>
    <script>
    	//获取元素
        var oUl = document.getElementById("ul1");
        var oPt = document.getElementById("ipt1");
        var oBt = document.getElementById("btn1");
        	//触发鼠标点击事件
            oBt.onclick=function(){
            oUl.innerHTML +="<li>"+oPt.value+"</li>";
        }
    </script>
</body>
</html>

结果展示:
在这里插入图片描述
7.判断语句:
if else
三目运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        button{
            width: 50px;
            height: 30px;
        }
        div{
            width: 200px;
            height: 300px;
            background-color: red;
            display:none;
        }
    </style>
</head>
<body>
<button id="btn"></button>
<div id="div1"></div>
    <script>
        var oBtn = document.getElementById("btn");
        var oDiv = document.getElementById("div1");
        var b = true;
        //点击按钮div块出现,再点击按钮div块消失
        oBtn.onclick = function () {
            oDiv.style.display = b?"block":"none";
            b=!b;
        }
        var b2=true;
        //点击div块,变成蓝色,再点击变成红色
        oDiv.onclick = function () {
            oDiv.style.backgroundColor = b2?"blue":"red";
            b2=!b2;
        }
    </script>
</body>
</html>

8.数据类型：
五种基本数据类型:
数字、字符串（双引号或单引号）、布尔值(true/false)、空对象（null)、未定义（undefined)
对象数据类型:数组、json、事件等

 <script>
        var a = [1,2,3,4]; //数组
        var b = {          //json
            "a":1,
            "b":2
        };
        var c = new Date();//事件对象
        var d = function(){};//函数表达式
        //function fnName(){};//函数声明
    </script>

9.数据类型转化
(1) 隐式转化

<script>
        var a =10; //数字
        var b ="20";//字符串
        var c =true;//布尔值
        console.log(a+b);//1020
        console.log(a+c);//11
        //- * / % ++ -- + 是数字的隐式转换
        //+ 是字符串的隐式转换
        //== === > < >= <= != !== 是布尔值的隐式转换
    </script>

(2) 强制类型转换:

<script>
        var a = 10;
        var b = 20;

        //字符串的强制类型转换
        console.log(a+b.toString());
        console.log(String(null));//构造函数生成实例：new String()

        //数字的强制类型转换
        console.log(Number("100px"));  // NaN=>not a number
        console.log(parseInt("100px")*4+"px") //400px
    </script>

10.数组

定义数组:

var arr = [1,2,3,4];

for循环遍历数组元素:

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

字符串方法:
substring() 切割字串,下标从0开始,前闭后开
split() 根据指定分隔符把一个字符串分割成字符数组
join() 把数组中的所有元素放入一个字符串,元素通过指定分隔符进行分割

<body>
    <input id="ipt1" type="text"/>
    <button id="btn1">弹出值</button>
    <script>
        var str = "user=root&password=111";
        // console.log(str.substring(1,5));// user
        var arr = str.split("&");//["user=root","password",]
        for(var i=0;i<arr.length;i++){
            arr[i]=arr[i].split("=");
            //arr[0][0]=user  arr[0][1]=root
            //arr[1][0]=password  arr[0][0]=111
        }
        var oPt = document.getElementById("ipt1");
        var oBt = document.getElementById("btn1");
        oBt.onclick = function() {
            for(var i=0;i<arr.length;i++){
                if(oPt.value == arr[i][0]){
                    alert(arr[i][1]);
                }
            }
        }
    </script>
</body>

数组排序:
注意:数组在数组上进行排序,不生成副本.

字符类型可以直接使用 sort() 排序

<script>
		var s1 = "yoekfssalj";
		s1 = s1.split("").sort().join("");
		console.log(s1);
	</script>

数字类型需要:

<script>
        var arr = [1,2,5,7,1,3];
        arr.sort(function (a,b) {
        	//从小到大排序
            return a-b;
        })
       console.log(arr);

    </script>

练习:在ul里创建20个50*50的li元素，水平排列背景色为yellow，鼠标移入的li元素的背景颜色过渡成green

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            margin:0 auto;
            list-style:none;
            overflow:hidden;
        }
        li{
            width: 50px;
            height: 50px;
            float:left;
            background-color: yellow;
            margin:10px;
            transition:all linear 0.4s;
        }
    </style>
</head>
<body>
    <ul id="ul1">
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
<!--        <li></li>-->
    </ul>
    <script>
        var oUl = document.getElementById("ul1");
        var str = "";
        for(var i=0;i<50;i++){
            str +="<li></li>";
        }
        oUl.innerHTML=str;
        var aLi = document.getElementsByTagName("li");
        for(var i=0;i<aLi.length;i++){
            aLi[i].onmouseover = function(){
                this.style.backgroundColor="green";
            }
            //鼠标移开,又变成黄色
            // aLi[i].onmouseout = function(){
            //     this.style.backgroundColor="yellow";
            // }
        }
    </script>
</body>
</html>

练习:动态商品列表,假设数据从后台传过来了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态商品列表</title>
    <style>
        ul{
            height:600px;
            margin:0 auto;
            list-style:none;
            overflow: auto;
        }
        li{
            width: 180px;
            height: 245px;
            border:1px #666 solid;
            float:left;
            margin:10px;
        }
        img{
            width: 160px;
            height: 160px;
            display: block;
            margin:0 auto;
        }
        li span{
            text-align:center;
            line-height: 28px;
            display:block;
        }
        .name{
            font-size: 17px;
            font-weight: bold;
        }
        .price{
            color:red;
        }
    </style>
</head>
<body>
    <ul id="ul1">
<!--        <li>-->
<!--            <img src="../img/girl.png" alt="">-->
<!--            <span class="name">商品1</span>-->
<!--            <span class="concat"></span>-->
<!--            <span class="price"></span>-->
<!--        </li>-->
    </ul>
    <script>
        var data = [{
            "name":"草莓",
            "concat":"又大又甜",
            "price":"30元/斤",
            "src":"../img/1.jpeg"
        },{
            "name":"蛋糕甜点",
            "concat":"低糖不发胖",
            "price":"20元/个",
            "src":"../img/2.jpeg"
        },{
            "name":"戒指",
            "concat":"情侣对戒，代表一心一意",
            "price":"200元/对",
            "src":"../img/3.jpeg"
        },{
            "name":"芒果",
            "concat":"好吃不贵",
            "price":"25元/斤",
            "src":"../img/4.jpeg"
        },{
            "name":"桃子",
            "concat":"汁多脆桃",
            "price":"30元/斤",
            "src":"../img/5.jpeg"
        },{
            "name":"百香果",
            "concat":"味道好极了",
            "price":"30元/斤",
            "src":"../img/6.jpeg"
        },{
            "name":"牛油果",
            "concat":"营养丰富",
            "price":"50元/斤",
            "src":"../img/7.jpeg"
        },{
            "name":"绿葡萄",
            "concat":"打折促销",
            "price":"10元/斤",
            "src":"../img/8.jpeg"
        },{
            "name":"蔬菜披萨",
            "concat":"送货到家",
            "price":"30元/个",
            "src":"../img/9.jpeg"
        },{
            "name":"蛋糕甜点",
            "concat":"特价",
            "price":"1元/个",
            "src":"../img/10.jpeg"
        }];
        var str = "";
        for(var i = 0;i<data.length;i++){
        	//需要引号套引号时,可以使用``
            str += `<li>
            <img src="${data[i].src}" alt="">
            <span class="name">${data[i].name}</span>
            <span class="concat">${data[i].concat}</span>
            <span class="price">${data[i].price}</span>
        </li>`
        }
        var oUl = document.getElementById("ul1");
        oUl.innerHTML = str;

        var aLi = document.getElementsByTagName("li");
        for(var i=0;i<aLi.length;i++){
        	//点击某一个li元素时,该边框颜色变成红色
            aLi[i].onclick = function(){
                this.style.border = "red solid 1px";
            }
        }
    </script>
</body>
</html>