前端HTML+JS

最新推荐文章于 2024-05-07 02:27:10 发布

青青草原霸主ma

最新推荐文章于 2024-05-07 02:27:10 发布

阅读量275

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_58414041/article/details/129069111

版权

Js (Java Script):解释器语言，脚本语言，没有编译过程与Java语言无关，必须进入html页面里面执行，建一个.html文件,可以加在标签里

回调属性：以on开头或者以in开头：

<div on style="height: 100px; width: 100px;background-color: aqua;"></div>

触发之前预先设置好的动作

onclick:点击后会出现的操作

点击后警告1：

<div onclink="alther("1")" style="height: 100px; width: 100px;
background-color: aqua;"></div>

js语言写在JavaScript：

<body>
        <div style="height: 100px; width: 100px;background-color: aqua;"></div>
        <script></script>
</body>

script标签可以放在任何地方，他也是一个盒子：

<script>
            alert('1');//阻塞式的操作,打开网页警告1
</script>

<script>
            window.document.write("")//写入，坠在当前文档流的最后，尽量不用
</script>

向控制台输出日志，可以将内容打印到控制台：

优点：1、不影响控制布局2、不阻塞界面加载

不需要中断过程时用

<script>
            console.log('shgdsvsdy');
</script>

var：

用于声明变量，并可选地将其初始化为一个值；语法格式“var varname [=value];”，参数value可以是任何合法的表达式，默认值为“undefined”。

<script>
            var a = 3;
            a = 'abc';
            a = [];
            a = {};
            a = 3.14;
</script>

var没有类型，值是什么类型他就是什么类型

也可以用for和while与java使用方法相同：

<script>
            var a = 3;
            for(var i = 0; i<Thing.length;i++){
                Thing.length = 10;
            }
</script>

<script>
            var a = 3;
            while(a < 10){
                console.log(a++);
            }
</script>

var arr = [];//数组大小可变

<script>
            // alert('1');//阻塞式的操作
            // window.document.write("")//写入，坠在当前文档流的最后，尽量不用
            // console.log('shgdsvsdy');
            var a = 3;
            var arr = [];
            arr.push(true);
            arr.push("guo");
            arr.push(123);
            arr.push([124,456,888,"false",false]);
            console.log(arr);
</script>

对象名叫 JSO即JavaScriptObject

变量名叫var

以k-v形式执行

<script>
    var obj = {
                age : 13,
                gender : "男",
                name : "哈哈哈"
            };
            console.log(obj);
</script>

定义一个方法（function）：

不需要写返回值类型

最小原型js方法：

不需要写属性

function test(a,b){

            }

传值是必须有触发

function test(a,b){

            }
test();//触发

没有规定的返回值属性，return什么类型他就输出什么类型这样可以省略声明属性

也可以省略方法名

<body>
        <div onclick = "method(10,5)" style="height: 100px; width: 100px;background-color: aqua;"></div>

        <script>
            function test(a,b){
                console.log(a + b);
                return true;
            }
            var method = function(a,b){
                console.log(a*b);
                return true;
            }
        </script>
    </body>

js对象导航：JSON:接到一个对象然后就用

<body>
        <div onclick = "obj.foo("sdvdbhj")" style="height: 100px; width: 100px;background-color: aqua;"></div>

        <script>
            var obj = {
                age : 13,
                gender : "男",
                name : "哈哈哈",
                foo : function(a){
                    alert(a);
                },//设置一个foo对象此时foo属性的值是一个方法

            };
            // console.log(obj);

            function test(a,b){
                console.log(a + b);
                return true;
            }
        </script>
    </body>

写一个练习，做一个按钮点三次一下没反应，点三次以上输出点击次数，点几次输出数字就是几：

<body>
        <div style="height: 100px; width: 100px;background-color: aqua;"></div>
        <input type="button" value="test" onclick="foo()"/>
        <script>
                var a = 1;
            function foo(){
                if(a <= 3){
                }else{
                    alert(a);
                }
                a++;
            }
        </script>
</body>

文档流的模型就是树形模型

document：

取数据：

.html:

<script>
            var containner  = document.getElementById("content")
            console.log(containner);
            //console.log(containner.style);查询出css的层级样式表
            console.log(containner.getAttribute("style"))
            //变成字符串
           containner.setAttribute("style", "background-color : red ");
            //改变属性将style属性改为background-color
           containner.setAttribute("class" ,"second");
            //通过改变class类来切换数据
</script>

.css：

/* #content{
    height: 100px; 
    width: 100px;
    background-color: aqua;
} */

.first{
    height: 100px;
    width: 100px;
    background-color: red;
}
.second{
    height: 100px;
    width: 100px;
    background-color: blue;
}

给现在的节点里面创造一个新节点不删除原有内容

.js:

var containner  = document.getElementById("content");
console.log(containner);
console.log(containner.getAttribute("style"));
containner.setAttribute("class" ,"second");
// console.log(containner.innerHTML);
// containner.innerHTML = "<div> bhasvjdsv </div>";//不能跨行写输出bhasvjdsv
containner.innerText = "<div> bhasvjdsv </div>";//""全部输出
var temp = document.createElement("span");
temp.setAttribute("style","color : yellow");
temp.innerText = "仍会仍您看";
containner.append(temp);//将数据串联

.html:

<body>
        <div id="content" class="first">
            <span style="color: black;">苏打水是案发报辅导班功能概</span>
        </div>
</body>    
        <script src="../js/jstest.js">

        </script>

.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="../css/Main.css"/>
        <link rel="stylesheet" href="../css/jstest.css"/>
    </head>
    <body>
        <!-- <div onclick = "test(3,4)" style="height: 100px; width: 100px;background-color: aqua;"></div> -->
<!--    <div onclick = "method(10,5)" style="height: 100px; width: 100px;background-color: aqua;"></div> -->        
<!--         <div onclick = "obj.foo("sdvdbhj")" style="height: 100px; width: 100px;background-color: aqua;"></div> -->
        <div id="content" class="first">
            <span style="color: black;">苏打水是案发报辅导班功能概</span>
        </div>
        <input type="button" value="test" onclick="foo()"/>

        <script>
            // alert('1');//阻塞式的操作
            // window.document.write("")//写入，坠在当前文档流的最后，尽量不用
            // console.log('shgdsvsdy');
            // var a = 3;
            // var arr = [];
            // arr.push(true);
            // arr.push("guo");
            // arr.push(123);
            // arr.push([124,456,888,"false",false]);
            // // console.log(arr);

            // var obj = {
            //     age : 13,
            //     gender : "男",
            //     name : "哈哈哈",
            //     foo : function(a){
            //         alert(a);
            //     },//设置一个foo对象此时foo属性的值是一个方法//3
            // };
            // // console.log(obj.age);

            // var str = "Hello HTML World";

            // function test(a,b){
            //     console.log(a + b);
            //     return true;
            // }//1
            // var method = function(a,b){
            //     console.log(a*b);
            //     return true;
            // }//2

            // var a = 1;
            // function foo(){
            //     if(a <= 3){
            //     }else{
            //         alert(a);
            //     }
            //     a++;
            // }
            </script>
    </body>
        </body>    
        <script src="../js/jstest.js">

        </script>

</html>

.css:

/* #content{
    height: 100px; 
    width: 100px;
    background-color: aqua;
} */

.first{
    height: 100px;
    width: 100px;
    background-color: red;
}
.second{
    height: 100px;
    width: 100px;
    background-color: blue;
}

鼠标悬停在哪里弹出来一个颜色块，不悬停不出来

.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="../css/Main.css"/>
        <link rel="stylesheet" href="../css/jstest.css"/>
    </head>
    <body>
        <div id="content" class="first" style="float: left;" onmouseenter="foo()" onmouseout="test()">
            <span style="color: black;">苏打水是案发报辅导班功能概</span>
        </div>
        <div id="nextcontent"class="first" style="float : left;background-color: red; display:block;"></div>
    </body>    
        <script src="../js/jstest.js"></script>
</html>

.js:

function foo(){
    // console.log("nihao")
    var next = document.getElementById("nextcontent");
    next.setAttribute("style","float : left;background-color: red; display:block;")
}

function test(){
    var next = document.getElementById("nextcontent");
        next.setAttribute("style","float : left;background-color: red; display:none;")

}

自动跳转：

在.js中写入：

window.open("http://www.baidu.com");//bom浏览器选项

设置一个开关按钮点击跳转网页：

.html:

<body>
        <div id="content" class="first" style="float: left;" onmouseenter="foo()" onmouseout="test()">
            <span style="color: black;">苏打水是案发报辅导班功能概</span>
        </div>
        <div id="nextContent"class="first" style="float : left;background-color: red; display:block;"></div>
    </body>

        <input type="button" value="打开" onclick="tempopen()"/>
        </body>    
        <script src="../js/jstest.js"></script>

.js:

function tempopen(){
    window.open("http://www.baidu.com");
    //window.close();
}

将这个页面的东西传到另一个页面(参数传递)：

方法一from：

.js:

console.log(window.location.href);
var t = window.location.href;
var params = t.split("?")[1];
params = params.split("&");
for(var i = 0; i , params.length;i++){
    var key = params[i].split("=")[0];
    var value = params[i].split("=")[1];
    console.log(key + ":" + value);
}

.html:

<body>
        <a href="jstest.html?name = myy & password=123456">走你</a>
    </body>

点击走你：

正常跳转

方法二to:

IPC进程间通讯

在同一个域里面的页面都是相通的共享的

cookie：用于与后台传输数据

传输一from：

from.html:

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button onclick="setCookie()">走你~</button>
    </body>

    <script>

        function setCookie(){
            console.log(document.cookie);//拿内容
            document.cookie = "user=hahaha";//加入数据，特殊字符只能一个一个的加
            document.cookie = "pass=888";//不会覆盖，会在后面加入
        }
    </script>
</html>

传输二to：

to.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    </body>
    <script>
        var sto = window.localStorage;
        console.log(sto.getItem("name"));
    </script>
</html>

from.html:

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <button onclick="setLs()">走你~</button>
    </body>

    <script>

        function setCookie(){
            console.log(document.cookie);//拿内容
            document.cookie = "user=hahaha";//加入数据，特殊字符只能一个一个的加
            document.cookie = "pass=888";//不会覆盖，会在后面加入
        }
        function setLs(){
            // console.log(window.localStorage);
            var sto = window.localStorage;
            sto.setItem("name","hahah");
        }
    </script>
</html>