JavaScript高级

最新推荐文章于 2022-10-31 18:59:08 发布
最新推荐文章于 2022-10-31 18:59:08 发布
阅读量301 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42390340/article/details/108449216
版权

文章目录

今日内容：

  • BOM：
  • DOM：
  • 事件

一、DOM简单学习（为了满足案例要求）

1、功能

控制html文档的内容。

* 获取页面标签(元素)对象：Element
	* document.getElementById("id值"):通过元素的id获取元素对象

* 操作Element对象：
	1. 修改属性值：
		1. 明确获取的对象是哪一个？
		2. 查看API文档，找其中有哪些属性可以设置
	2. 修改标签体内容：
		* 属性：innerHTML
		1. 获取元素对象
		2. 使用innerHTML属性修改标签体内容

二、事件简单学习

* 功能： 某些组件被执行了某些操作后，触发某些代码的执行。
	* 造句：  xxx被xxx,我就xxx
		* 我方水晶被摧毁后，我就责备对友。
		* 敌方水晶被摧毁后，我就夸奖自己。

* 如何绑定事件
	1. 直接在html标签上，指定事件的属性(操作)，属性值就是js代码
		1. 事件：onclick--- 单击事件

	2. 通过js获取元素对象，指定事件属性，设置一个函数

	* 代码：
		<body>
			<img id="light" src="img/off.gif"  onclick="fun();">
			<img id="light2" src="img/off.gif">
			
			<script>
			    function fun(){
			        alert('我被点了');
			        alert('我又被点了');
			    }
			
			    function fun2(){
			        alert('咋老点我？');
			    }
			
			    //1.获取light2对象
			    var light2 = document.getElementById("light2");
			    //2.绑定事件
			    light2.onclick = fun2;
			
			
			</script>
		</body>

案例1：电灯开关

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>电灯开关</title>

</head>
<body>

<img id="light" src="img/off.gif">

<script>
    /*
        分析：
            1.获取图片对象
            2.绑定单击事件
            3.每次点击切换图片
                * 规则：
                    * 如果灯是开的 on,切换图片为 off
                    * 如果灯是关的 off,切换图片为 on
                * 使用标记flag来完成

     */

    //1.获取图片对象
    var light = document.getElementById("light");

    var flag = false;//代表灯是灭的。 off图片

    //2.绑定单击事件
    light.onclick = function(){
        if(flag){//判断如果灯是开的，则灭掉
            light.src = "img/off.gif";
            flag = false;

        }else{
            //如果灯是灭的，则打开

            light.src = "img/on.gif";
            flag = true;
        }


    }
    
</script>
</body>
</html>

三、BOM:

1. 概念：Browser Object Model 浏览器对象模型

将浏览器的各个组成部分封装成对象。

2. 组成：

Window：窗口对象

Navigator：浏览器对象

Screen：显示器屏幕对象

History：历史记录对象

Location：地址栏对象

3. Window：窗口对象

（1）方法

① 与弹出框有关的方法：

  1. alert()显示带有一段消息和一个确认按钮的警告框。
  2. confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
    * 如果用户点击确定按钮，则方法返回true
    * 如果用户点击取消按钮，则方法返回false
  3. prompt() 显示可提示用户输入的对话框。
    * 返回值：获取用户输入的值

在这里插入图片描述

② 与打开关闭有关的方法：

  1. close()：关闭浏览器窗口。（谁调用我 ，我关谁）
  2. open()：打开一个新的浏览器窗口（返回新的Window对象）
<body>
    <input type="button" id="openBtn" value="打开新窗口" />
    <input type="button" id="closeBtn" value="关闭新窗口" />
    <script>
        //获取openBtn对象
        var openBtn = document.getElementById("openBtn");
        //定义新打开的窗口
        var newWindow;

        //点击按钮事件
        openBtn.onclick = function(){
            //window.open("http://www.baidu.com");
             newWindow = open("http://www.baidu.com");//打开新窗口百度，并赋值newWindow
        }

        //获取closeBtn对象
        var closeBtn = document.getElementById("closeBtn");
        closeBtn.onclick = function(){//响应事件
            newWindow.close();//关闭百度窗口
        }
    </script>
</body>

③ 与定时器有关的方式

  1. setTimeout() 在指定的毫秒数后调用函数或计算表达式。
    参数1：js代码或者方法对象
    参数2：毫秒值
    返回值：唯一标识，用于取消定时器

  2. clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

  3. setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。

  4. clearInterval() 取消由 setInterval() 设置的 timeout。

<script>
    /*
        一次性定时器，两秒之后执行第一个参数的，语句或者函数。
    */
    // setTimeout("document.write('setTimeout()')",2000);
    // setTimeout("fun();",2000);
    var timeoutid = setTimeout(fun,2000);
    clearTimeout(timeoutid);//关闭一次性定时器
    function fun() {
        document.write("setTimeOut!!!");
    }
    
    /*
        循环定时器，每隔三秒执行一次
    */
    var intervalid = setInterval(fun,3000);
    clearInterval(intervalid)//关闭循环定时器
</script>
案例2：轮播图
<body>
    <img src="img/banner_1.jpg" id="imgId" width="100%">

    <script>
    	/*
          分析：
              1.在页面上使用img标签展示图片
              2.定义一个方法，修改图片对象的src属性
              3.定义一个定时器，每隔3秒调用方法一次。
         */
    
        //1.修改图片的src
        var number = 1;
        function fun() {
            number++;
            //判断数字是否大于3
            if (number>3){
                number=1;
            }
            var img = document.getElementById("imgId");
            img.src = "img/banner_"+number+".jpg";
        }
        //2.定义计时器
        setInterval(fun,1500);
    </script>

</body>

（2）属性

  1. 获取其他BOM对象：
    history
    location
    Navigator
    Screen
  2. 获取DOM对象
    document

（3）特点

  • Window对象不需要创建可以直接使用 window使用。 window.方法名();
  • window引用可以省略。 方法名();
 <script>
     //两个相等
     window.document.write("123");
     document.write("456");
 </script>

4. Location：地址栏对象

（1）创建(获取)：window.location / location

（2）方法：reload() 重新加载当前文档。刷新

（3）属性：href 设置或返回完整的 URL。

<body>
    <input type="button" id="btn" value="刷新"><hr>
    <input type="button" id="btn2" value="去百度">
    <script>
        //1.reload()方法，定义一个按钮，点击刷新当前页面
        //1.1获取按钮
        var btn = document.getElementById("btn");
        //1.2绑定单击事件
        btn.onclick = function(){
            //1.3.刷新页面
            location.reload();
        }

        /**
         * location：href属性
         */
        //1.获取ref:http://localhost:63342/JavaScript02/price.html?_ijt=pglc7avglfik69cq43q7tjuval
        // document.write(location.href);

        //2.设置href：点击按钮访问百度
        //2.1获取按钮btn1
        btn2 = document.getElementById("btn2");
        //2.2设置点击响应事件
        btn2.onclick = function () {
            //2.3去访问百度
            location.href = "https://www.baidu.com";
        }
    </script>
</body>
案例3：自动跳转首页
<body>
    <p><span id="time">5</span>秒之后，自动跳转首页···</p>
    <script>
        /*
         分析：
           1.显示页面效果  <p>
           2.倒计时读秒效果实现
               2.1 定义一个方法，获取span标签，修改span标签体内容，时间--
               2.2 定义一个定时器，1秒执行一次该方法
           3.在方法中判断时间如果<= 0 ，则跳转到首页
         */

        var seconed = 5;
        //定义一个方法，获取span标签，修改span标签体的内容，时间--
        function fun() {
            seconed--;
            //判断时间<=0，跳转
            if (seconed<=0){
                location.href = "https://www.baidu.com";
            }
            var time = document.getElementById("time");
            time.innerText = seconed;
        }
        //设置定时器，1s执行一次该方法
        setInterval(fun,1000);
    </script>
</body>

5. History：历史记录对象

（1）创建(获取)：window.history / history

（2）方法：

  1. back() 加载 history 列表中的前一个 URL。
  2. forward() 加载 history 列表中的下一个 URL。
  3. go(参数) 加载 history 列表中的某个具体页面。
    参数正数：前进几个历史记录
    参数负数：后退几个历史记录

（3）属性： length 返回当前窗口历史列表中的 URL 数量。

<body>
	<input id="btn" value="获取历史记录个数" type="button"><hr>
    <a href="09_History对象2.html" >09_History对象2.html</a><hr>
    <input id="btn2" value="前进到09" type="button">

    <script>
        //获取历史记录个数
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            document.write(history.length);
        }
        //点击前进
        var btn2 = document.getElementById("btn2");
        btn2.onclick = function(){
            document.write(history.forward());
        }
    </script>

    <!--09_History对象2.html-->
    <input type="button" id="back" value="后退">
    <script>
        //1.获取按钮
        var back = document.getElementById("back");
        //2.绑定单机事件
        back.onclick = function() {
            //后退
            //history.back();
            history.go(-1);
        }
    </script>
</body>

四、DOM

1、概念： Document Object Model 文档对象模型

将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。
在这里插入图片描述

在这里插入图片描述

2、W3C DOM 标准被分为 3 个不同的部分：

（1）核心 DOM

针对任何结构化文档的标准模型
Document：文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment:注释对象
Node：节点对象，其他5个的父对象

（2) XML DOM ：针对 XML 文档的标准模型
（3) HTML DOM ：针对 HTML 文档的标准模型

3、核心DOM模型：

（1）Document：文档对象

① 创建(获取)：在html dom模型中可以使用window对象来获取

window.document/ document

② 方法：

1. 获取Element对象：
	getElementById()	： 
		根据id属性值获取元素对象。id属性值一般唯一
	getElementsByTagName()：
	 	根据元素名称获取元素对象们。返回值是一个数组
	getElementsByClassName():
	 	根据Class属性值获取元素对象们。返回值是一个数组
	getElementsByName(): 
	 	根据name属性值获取元素对象们。返回值是一个数组
2. 创建其他DOM对象：
	createAttribute(name)
  	createComment()
  	createElement()
  	createTextNode()

代码演示

    <div id="div1">div1</div>
    <div id="div2">div2</div>

    <div id="div3">div3</div>

    <div class="cls1">div4</div>
    <div class="cls1">div5</div>

    <input type="text" name="username">
    
<script>
    let ids = window.document.getElementById("div1");
    document.write(ids.innerText);//div1

    var divs = document.getElementsByTagName("div");
    document.write("divs"+divs.length);//5

    var classs = document.getElementsByClassName("cls1");
    document.write("classs"+classs.length);//2

    var username = document.getElementsByName("username");
    document.write("name"+username.length+"<br>");//1

    var p = document.createElement("p");
    document.write(p);
        
</script>
（2）Element：元素对象

1、获取/创建：通过document来获取和创建
2、方法：

  • removeAttribute()：删除属性
  • setAttribute()：设置属性
<body>
    <a>点我试一试</a>
    <input type="button" value="设置属性" id="set_btn">
    <input type="button" value="删除属性" id="remove_btn">

    <script>
        //获取a对象
        let setbtn = document.getElementById("set_btn");
        setbtn.onclick = function(){
            var aname = document.getElementsByTagName("a")[0];
            aname.setAttribute("href","http://www.baidu.com");
        }

        let removebtn = document.getElementById("remove_btn");
        removebtn.onclick = function(){
            var aname = document.getElementsByTagName("a")[0];
            aname.removeAttribute("href");
        }
    </script>
</body>
（3）Node：节点对象，其他5个的父对象

① 特点：所有dom对象都可以被认为是一个节点
② 方法：CRUD dom树

  • appendChild()：向节点的子节点列表的结尾添加新的子节点。
  • removeChild() ：删除（并返回）当前节点的指定子节点。
  • replaceChild()：用新节点替换一个子节点。

③ 属性：parentNode 返回节点的父节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>
    <style>
        div{border: 1px solid red; }
        #div1{ width: 200px;height: 200px; }
        #div2{width: 100px;height: 100px;}
        #div3{width: 100px;height: 100px;}
    </style>

</head>
<body>
    <div id="div1"><div id="div2">div2</div></div>
    <!--
        超链接功能：
        1.可以被点击：样式
        2.点击后跳转到href指定的url
    
        需求：保留1功能，去掉2功能
        实现：href="javascript:void(0);"
    -->
    
    <a href="javascript:void(0);" id="del">删除子节点</a>
    <a href="javascript:void(0);" id="add">添加子节点</a>
    <!--<input type="button" id="del" value="删除子节点">-->
    
<script>
    //1.获取超链接
    var element_a = document.getElementById("del");
    //2.绑定单击事件
    element_a.onclick = function(){
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.removeChild(div2);
    }

    //1.获取超链接
    var element_add = document.getElementById("add");
    //2.绑定单击事件
    element_add.onclick = function(){
        var div1 = document.getElementById("div1");
       //给div1添加子节点
        //创建div节点
        var div3 = document.createElement("div");
        div3.setAttribute("id","div3");

        div1.appendChild(div3);
    }

    
    var div2 = document.getElementById("div2");
    var div1 = div2.parentNode;
    document.write(div1);// [object HTMLDivElement]

</script>
</body>
</html>

4、HTML DOM

（1）标签体的设置和获取：innerHTML

<body>
    <input type="button" id="btn" value="开始">
    <div>div</div>

<script>
    document.getElementById("btn").onclick = function () {
        var div = document.getElementsByTagName("div")[0];
        // alert(div.innerHTML);//div
        // div.innerHTML = "<input type = 'text'>";//修改内容
        div.innerHTML += "<input type = 'text'>"//追加内容
    }
</script>
</body>

（2）使用html元素对象的属性

（3）控制元素样式

  • ① 使用元素的style属性来设置
<body>
    <div id="div1">div</div>
//点击div改变样式
    <script>

         var div = document.getElementById("div1");
         div.onclick = function(){
             div.style.border = "1px solid red";
             div.style.width = "500px";
             //font-size---->fontSize
             div.style.fontSize="80px";
         }
    </script>
</body>
  • ② 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
//需求：点击div,切换c1,c2样式
<style type="text/css">
    .c1{
        border: 1px solid red;
        width: 200px;height: 200px;
    }
    .c2{
        border: 1px solid red;
        width: 400px;height: 400px;
    }

</style>
<body>
    <div id="div1">div</div>

    <script>
        var i = 1;
         var div = document.getElementById("div1");
         div.onclick = function(){
             if (i++%2==0){
                 div.className = "c1";
             }else{
                 div.className = "c2";
             }

         }
    </script>
</body>

五、事件监听机制

1、概念

某些组件被执行了某些操作后，触发某些代码的执行。

  • 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
  • 事件源：组件。如： 按钮 文本输入框…
  • 监听器：代码。
  • 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。

2、常见的事件

  1. 点击事件：
    1. onclick：单击事件
    2. ondblclick：双击事件

  2. 焦点事件
    1. onblur：失去焦点（一般用于表单校验）
    2. onfocus:元素获得焦点。

  3. 加载事件：
    1. onload：一张页面或一幅图像完成加载。

  4. 鼠标事件：
    1. onmousedown 鼠标按钮被按下。
    - 定义方法时，定义一个形参，接受event对象。
    - event对象的button属性可以获取鼠标按钮键被点击了。
    -
    2. onmouseup 鼠标按键被松开。
    3. onmousemove 鼠标走了。
    4. onmouseover 鼠标来了。
    5. onmouseout 鼠标从某元素移开。

  5. 键盘事件：
    1. onkeydown 某个键盘按键被按下。
    2. onkeyup 某个键盘按键被松开。
    3. onkeypress 某个键盘按键被按下并松开。

  6. 选择和改变
    1. onchange 域的内容被改变。
    2. onselect 文本被选中。

  7. 表单事件：
    1. onsubmit 确认按钮被点击。
    2. onreset 重置按钮被点击。

常见事件代码演示

<body>
<script>


    // 2. 焦点事件
    //      1. onblur：失去焦点（一般用于表单校验）
	// 	    2. onfocus:元素获得焦点。
    document.getElementById("username").onblur = function () {
        alert("失去焦点！！");
    }
    document.getElementById("username").onfocus = function () {
        alert("获得焦点！！");
    }




    // 3.加载完成事件（一般是等html页面加载完成，触发其他js事件）
    //      onload：一张页面或一幅图像完成加载。
    window.onload = function () {
        // alert(" `onload`：一张页面或一幅图像完成加载。")

        //2.失去焦点了
        document.getElementById("username").onblur = function () {
            alert("获得焦点！！");
        }

        //4.1绑定鼠标事件
        document.getElementById("username").onmouseover = function () {
            alert("鼠标来了！！！")
        }
        //4.2绑定鼠标事件
        document.getElementById("username").onmousemove = function () {
            alert("鼠标走了！！！")
        }
        //4.3鼠标点击事件
        document.getElementById("username").onmousedown = function (event) {
            //* 定义方法时，定义一个形参，接受event对象。
            //* event对象的button属性可以获取鼠标按钮键被点击了。
            alert("鼠标点击了"+event.button+"键")//鼠标点击事件从左到右0，1，2
        }

        //5.1某个键盘按键被按下
        document.getElementById("username").onkeydown = function (event) {
            //* 定义方法时，定义一个形参，接受event对象。
            //* event对象的keyCode属性可以获取键盘某个按键。
            if (event.key=="Enter"){
                alert("按键按了:"+event.key)
            }
            if (event.key=="b"){
                alert("按键按了:"+event.key)
            }
        }

        //	6.1 选择和改变：
        //	onchange域的内容被改变时触发。
        document.getElementById("username").onchange = function () {
                alert("内容改变了");
        }
        document.getElementById("city").onchange = function () {
            alert("内容改变了");
        }
        //7.1 表单提交事件
        // onsubmit:确认按钮被点击。
        document.getElementById("form") .onsubmit = function(){
            //校验用户名格式是否正确
            var flag =false;
            //返回false : 阻止表单提交
            return flag;
        }

        //1.1 点击事件
        function checkForm(){
            //校验用户名格式是否正确
            var flag =true;
            //返回false : 阻止表单提交
            return flag;
        }


    }//</onload>事件
    /*
        onclick内部
        function fun() {
            return checkForm();
        }
    */

</script>


<form action="#" id="form" onclick="return checkForm();">

    <input type="text" id="username" name="username">
    <select id="city">
        <option>北京</option>
        <option>深圳</option>
        <option>西安</option>
        <option>上海</option>
    </select>

    <input type="submit" value="提交">

</form>
</body>
案例4：动态删除表格
案例5：表格全选
案例6：表单校验

在这里插入图片描述

<script>
    /*
        分析：
            1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。
                如果都为true，则监听器方法返回true
                如果有一个为false，则监听器方法返回false

            2.定义一些方法分别校验各个表单项。
            3.给各个表单项绑定onblur事件。
     */

    //页面加载完成，触发事件
    window.onload = function(){
        
        //1.给表单绑定onsubmit事件(点击表submit触发事件)
        document.getElementById("form").onsubmit = function(){
            //调用用户校验方法   chekUsername();
            //调用密码校验方法   chekPassword();
            //当两个都返回true时，返回true，提交表单

            return checkUsername() && checkPassword();
        }
        //给用户名和密码框分别绑定离焦事件
        document.getElementById("username").onblur = checkUsername;
        document.getElementById("password").onblur = checkPassword;


    }

    //校验用户名
    function checkUsername(){
        //1.获取用户名的值
        var username = document.getElementById("username").value;
        //2.定义正则表达式
        var reg_username = /^\w{6,12}$/;
        //3.判断值是否符合正则的规则
        var flag = reg_username.test(username);
        //4.提示信息
        var s_username = document.getElementById("s_username");

        if(flag){
            //提示绿色对勾
            s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
        }else{
            //提示红色用户名有误
            s_username.innerHTML = "用户名格式有误";
        }
        return flag;
    }

    //校验密码
    function checkPassword(){
        //1.获取用户名的值
        var password = document.getElementById("password").value;
        //2.定义正则表达式
        var reg_password = /^\w{6,12}$/;
        //3.判断值是否符合正则的规则
        var flag = reg_password.test(password);
        //4.提示信息
        var s_password = document.getElementById("s_password");

        if(flag){
            //提示绿色对勾
            s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
        }else{
            //提示红色用户名有误
            s_password.innerHTML = "密码格式有误";
        }
        return flag;
    }
</script>

<!--定义表单 form-->
  <form action="#" id="form" method="get">
      <table>
          <tr>
              <td class="td_left"><label for="username">用户名</label></td>
              <td class="td_right">
                  <input type="text" name="username" id="username" placeholder="请输入用户名">
                  <span id="s_username" class="error"></span>
              </td>
          </tr>

          <tr>
              <td class="td_left"><label for="password">密码</label></td>
              <td class="td_right">
                  <input type="password" name="password" id="password" placeholder="请输入密码">
                  <span id="s_password" class="error"></span>
              </td>
          </tr>

          <tr>
              <td class="td_left"><label for="email">Email</label></td>
              <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
          </tr>
          
          <tr>
              <td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td>
          </tr>
      </table>

  </form>
strongsix
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
关于动态修改script标签的src的值引发的一些思考
Focus-Fe
05-10 4317
前言：   最近在逛各家UED博客的时候，在w3ctech上看到的这个Topic的文章，个人感觉还是不错的，决定转换为自己的实践知识。   正文：   首先我这边先抛出几个结论性的东东：       来自w3c的HTML4标准   如果src属性没有被设置，就执行script标签内的脚本内容；如果src有一个URL的值，则忽略script标签的脚本内容，而是去请求指定的URL...
java web项目启动进入首页的配置方式（包含过滤跳转首页实现）
weixin_34260991的博客
11-27 4496
本文为博主原创，未经允许不得转载：       项目启动成功，进入首页的方式，我们往往在web.xml 中通过以下的方式默认进入跳转首页， &lt;welcome-file-list&gt; &lt;welcome-file&gt;index.jsp&lt;/welcome-file&gt; &lt;/welcome-file-list&gt; 在项目启动成功之后，在浏...
java 标签样式怎么改_javasript改变HTML样式放在head标签实现不了的问题
weixin_39643865的博客
02-28 82
1、主要是先加载和后加载的区别。如果JavaScript脚本写在head标签里面，那么需要用window.onload起到一个延迟加载的作用。2、实例：你要写在head里实现可以这样写。举个例子：a:不能实现HTML>style样式varmychar=document.getElementById("con");mychar.style.color="red";mychar.style....
关于script标签，我们应该知道的
大菜鸟的博客
02-26 1810
一、静态标签 1、&amp;lt;script&amp;gt;标签按照它们出现的顺序被执行，不管是script代码块还是script外链，都遵循先出现先执行的原则。这意味着如果你的网站有很慢的脚本在页面较前部分被加载，你的网页加载就会被显著拖慢。这也意味着后加载的脚本可以依赖先加载的脚本； 2、页面元素在它之前的所有脚本都加载完毕之前是不会执行渲染的，由此大段script代码可以引起页面加载卡顿； 3、当一个 &amp;...
JavaWeb学习笔记——javascript
MCC
12-17 1万+
javascript基本语法script标签引入js代码变量比较运算逻辑运算数组函数第一种方式第二种方式隐式参数arguments自定义对象{ }形式Object形式事件onload静态注册动态注册onclickonbluronchange静态绑定动态绑定onsubmitDOM对象getElementById()getElementByNamegetElementByTagNamedom对象的属性正则表达式 基本语法 script标签 alert()：警告框函数，传入的参数是警告框内要显示的信息 <!
JavaScript 高级
404-NotFound的博客
09-04 230
JS最初的目的：解决用户与服务器之间的交互问题 js: 是一门脚本语言。不用编译，直接执行 是一门解释性语言。遇到一行就执行一行。 是弱类型语言。 定义变量都用var 是基于对象语言。没有面向对象的三大特性：继承 封装 多...
javascript高级程序设计
最新发布
06-02
"JavaScript高级程序设计"是一本深入探讨JavaScript编程语言的书籍，旨在帮助读者掌握JS的各个方面，适合自学者进行系统学习。以下是对书中的主要知识点的详细阐述： 1. JavaScript简介： JavaScript是一种广泛...
javascript高级教程.pdf
05-26
《JavaScript高级教程》这本书深入探讨了这一动态语言的核心概念和技术，旨在帮助开发者提升技能，掌握JavaScript的高级用法。 首先，JavaScript是一种解释型的、基于原型的、动态类型的脚本语言。这意味着它不需要...
Javascript高级教程
10-17
在"JavaScript高级教程"中，我们将深入探讨其API（应用程序编程接口）的使用，以及如何结合这些工具来构建复杂的web前端应用。 首先，JavaScript API是浏览器提供的一系列预定义函数和对象，允许开发者与浏览器进行...
用JAVASCRIPT实现主页打开自动弹出一个窗口页 [转]
wenzi_li的专栏
01-22 389
用JAVASCRIPT实现主页打开自动弹出一个窗口页 来源：蓝色理想 window.open(’http://www.blueidea.com’,null,’height=200,width=400,status=yes,toolbar=no,menubar=no,location=no’); 语法： oNewWindow = window . open ( sURL , sName , s...
java登录界面全屏显示_用 JavaScript实现打开全屏显示窗口
weixin_28820113的博客
02-26 371
//其中default.htm默认已经存在function intro(){if((navigator.appVersion.indexOf("Mac")!=-1)&&(navigator.userAgent.indexOf("MSIE")!=-1)&&(parseInt(navigator.appVersion)=4)){skip()}else{popup()}}...
JavaScript 教程 （详细 全面）
热门推荐
梁辰兴的博客
10-31 7万+
JavaScript（简称“JS”）是当前最流行、应用最广泛的客户端脚本语言，用来在网页中添加一些动态效果与交互功能，在 Web 开发领域有着举足轻重的地位。HTML 用来定义网页的内容，例如标题、正文、图像等；CSS 用来控制网页的外观，例如颜色、字体、背景等；JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。JavaScript 诞生于 1995 年，几乎是和互联网同时出现；
谈谈JavaScript和Java
进阶的阿毛
08-18 2万+
刚接触JavaScript时，还认为JavaScript和Java有什么联系。其实呢，JavaScript和Java没有一点联系，真要说有什么关系就是老婆和老婆饼的关系吧。下面介绍一下他们有什么不同。 JavaScript Java 语言类型 弱语言类型 强语言类型 声明变量 声明变量不用规定类型，类型由内容决定,使用时可以为变量赋不同类型值...
使用FFmpeg来批量生成单图+单音频的一图流视频
m
07-22 3194
需求因为时不时会在B站上分享一些游戏BGM合集，拿到多个音频文件之后要先选一张好看的图片，然后逐个音频地与这张图片合成一个静态的视频，这个过程用视频编辑软件来操作的话非常地重复、费事，故考虑使用FFmpeg来转换合成并实现批量操作。...
用ffmpeg制作动态一图流音乐视频
cuoban的学习空间
06-05 3170
前有gif动图一图流，这回是一图+一循环效果+一动态频谱的稍复杂一图流。假设我要制作一个尺寸为854x480的一般视频，所需工具是Sonic Candle + ffmpeg。 1. 用Sonic Candle生成音乐频谱视频，帧率12，宽854，高300，背景黑色，前景白色，取名speq.mp4，然后用ffmpeg的"-an"把默认编码的128k音频去掉，以备塞入高音质音频。 2. 找一段视频素材...
数据说明，Java和JavaScript已成人们最喜爱的编程语言
xiaoxijing的博客
11-19 1万+
在网络购物和无线支付越来越普遍的今天，IT已不再是一个神秘的行业，会编程语言也已不再是程序员的专利，越来越多的人出于兴趣或是为了这个行业的高薪而纷纷接触编程语言。有数据表明，Java和JavaScript已经连续多年年成为人们最喜爱的编程语言。本文，就跟着我一起来看看Java和JavaScript到底有多受欢迎！ 2018年全球最高薪编程语言排行榜 世界上最大的编程相关书籍出版商Packt Pu...
javascript语言精髓与编程实践_最新消息！JavaScript超越Java成为最受欢迎的编程语言...
weixin_39882271的博客
12-26 1622
【CNMO新闻】HackerRank公司于近日发布了2019年度开发者技能报告，该报告的调查对象是7.1万名来自一百多个国家的软件开发者。现在每一个产业都需要软件开发者，因此对技术人才的抢夺是非常激烈的。HackerRank发布这份报告的目的是为了帮助开发者找到合适的工作以及公司获得自己所需的人才。JavaScriptHackerRank在问卷中询问了开发者们所掌握的编程语言以及他们想要学习的语言...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值