前端知识概述 4-javascript高级

最新推荐文章于 2025-04-29 16:28:41 发布

AdamCafe

最新推荐文章于 2025-04-29 16:28:41 发布

阅读量208

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识文章标签：前端知识概述

本文链接：https://blog.youkuaiyun.com/AdamCafe/article/details/89504537

前端知识专栏收录该内容

5 篇文章

订阅专栏

本文深入解析JavaScript全局函数、BOM、DOM操作及CSS样式控制，通过实例演示定时器、页面跳转、表单验证等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

内容

1 js全局函数
2 BOM 
3 DOM
4 js操作css样式

js的全局函数

特点：直接可以在之间使用方法不需要对象调用

1.parseInt() 将字符串转成number类型   只取整数  截取首字母之前的内容
2.parseFloat() 将字符串转成number类型 取全部包含小数  截取首字母之前的内容
3.isNaN()  判断是不是 不是一个数值  不是一个数字 对吗？  true:不是数字   false：是数字
4.encodeURI() 可以将字符串转化成utf-8编码格式 （一串字符）
5.decodeURI() 可以将utf-8编码格式转换成字符串

BOM（浏览器对象模型）

概述

BOM：浏览器对象模型

JS把浏览器划分成了多个对象这些多个对象都可以帮助我们去操作浏览器

window 浏览器窗体对象 js提供专门操作浏览器窗口的

location 浏览器地址栏对象 js提供专门操作浏览器地址栏的

history 历史记录对象 js提供专门操作浏览器历史记录的

window 浏览器窗体对象API

特点：只要是window的方法和属性，window对象名都可以省略

操作提示框的方法：

1.alert() 弹出框
2.confirm(参数) 确认取消框
3.prompt(参数)  输入信息框

操作定时器的方法：

1.setinterval(函数名, 间隔毫秒数)    定时器  按照周期循环执行
2.setTimeout(函数名, 间隔毫秒数)     定时器  只执行一次
3.clearInterval(定时器)		   清除setInterval方法定时器效果
4.clearTimeout(计时器)		       清除setTimeout方法定时器效果

location浏览器地址栏对象API

特点：操作浏览器的地址栏

操作浏览器地址栏的方法：

1.href属性  
	不设值：获取当前页面地址栏地址
	设值：替换当前页面的地址栏地址

2.reload() 刷新当前页面

history 历史记录对象

特点：操作已经形成的历史记录

操作历史记录的方法：

1.forward() 类似于浏览器上前进按钮
2.back() 类似于浏览器上后退按钮
3.go()  正数或负数，go(1)相当于forward()，go(-1)相当于back()

DOM（文档对象模型）

概述

DOM 文档对象模型

js把整个html文档划分成了多个对象这些多个对象都可以帮我们操作html元素标签

document文档对象：代表的是整个html文档页面可以通过这个对象获取html页面上的任何元素标签

为什么能够代表整个html文档：

一个html文件被浏览器加载的时候，会在内存中形成一个dom树，这个dom树就是有多个标签层级组成的，而这整个dom树就是document对象，所以我们可以通过document对象访问所有的 HTML 标签元素（节点）

获取元素标签(节点)的方法

1.document.getElementById("id名")	         通过id属性获取       获取的是唯一的元素
2.document.getElementsByName("name名")        通过name属性获取     获取的是一组标签 返回的是数组
3.document.getElementsByTagName ("标签名")    通过标签名获取        获取的是一组标签 返回的是数组
4.document.getElementsByClassName("class名")  通过class属性获取    获取的是一组标签 返回的是数组

获取/设置元素标签(节点)内容的方法

元素标签.innerHTML
不设值：获取标签体内容 
设值：设置标签体内容

元素标签.innerText
不设置：获取标签文本内容    
设值：设置标签文本内容

结合学习的api做一个小DEMO：根据条件获取元素并设置内容（绑定事件的第二种方式）

案例练习

案例1：会动的时钟

  <title>会动的时钟</title>
    <script>
        /*
        * 1 设置一个定时器，1秒中执行一个方法
        * 2 在方法中获取当前时间
        * 3 获取h2标签将当前时间覆盖
        * */
    </script>

    <script>
        var time;
        onload=function(){

            changeTime();

            //1 设置一个定时器，1秒中执行一个方法
            time=setInterval(changeTime,1000);

            // 为停止按钮做点击事件
            document.getElementById("stop").onclick=function(){
                // 清空定时器
                clearInterval(time);
            }

            // 为开始按钮做点击事件
            document.getElementById("start").onclick=function(){
                // 再次创建定时器调用changeTime
                time=setInterval(changeTime,1000);
            }

        }

        // 获取时间
        function changeTime(){
            //2 在方法中获取当前时间
            var time=new Date().toLocaleString();
            //3 获取h2标签将当前时间覆盖
            var h2=document.getElementById("h2");
            h2.innerText=time;
        }
    </script>


</head>
<body>
        <h2 id="h2"></h2>
        <input type="button" value="stop" id="stop"/>
        <input type="button" value="start" id="start"/>
</body>
</html>

案例2：5秒页面跳转

 <title>5秒倒计时</title>
    <!--
        1 设置定时器  1秒钟执行一次方法
        2 方法中：获取h2标签覆盖内容

    -->
    <script>
        var index=4;

        onload=function(){
            //1 设置定时器  1秒钟执行一次方法
            setInterval(tobaidu,1000);
        }

        function tobaidu(){
            //2 方法中：获取h2标签覆盖内容
            var h2=document.getElementById("h2");
            h2.innerText="页面将在"+index+"秒钟自动跳转百度...";
            // 自减
            index--;
            if(index==0){
                location.href="http://www.baidu.com";
            }
        }

    </script>

</head>
<body>
        <h2 id="h2">页面将在5秒钟自动跳转百度...</h2>

</body>
</html>

案例3：全选全不选

 <title>全选/全不选案例</title>
    <!--  复选框的全选和全不选
    1 最下面的复选框做点击事件触发方法
    2 在方法中：
             1 获取最下面的复选框的checked
             2 获取上面的所有复选框
             3 让上面的所有复选框的checked等于最下面的复选框的checked
    -->
    <script>
        onload=function(){
            // 1 最下面的复选框做点击事件触发方法
            document.getElementById("all").onclick=function(){
                //2 获取最下面的复选框的checked
                var flg=this.checked;
                // 3 获取上面所有的复选框
                var arr=document.getElementsByName("item");
                for(var i=0;i<arr.length;i++){
                    arr[i].checked=flg;
                }
            }

            //取反
            document.getElementById("reverse").onclick=function(){
                // 获取上面所有的复选框
                var arr=document.getElementsByName("item");
                for(var i=0;i<arr.length;i++){
                   // 拿到每一个让checked值取反
                    var flg=arr[i].checked;
                    arr[i].checked=!flg;
                }
            }

            // 结账
            document.getElementById("total").onclick=function(){
                var count=0;
                // 1 获取上面所有的复选框
                var arr=document.getElementsByName("item");
                //2 判断哪些复选框被选中
                for(var i=0;i<arr.length;i++){
                   if(arr[i].checked){
                       //3 获取选中复选框value属性进行累加
                       var money=arr[i].value;  //200 //800
                       count=count+parseInt(money);
                   }
                }
                //4 将累加的值写入到span元素标签里
                document.getElementById("result").innerText=count+"元";

            }
        }
    </script>

</head>

<body>
        <h3>商品价格列表</h3>
        <input type="checkbox" name="item" value="1500" /> 山地自行车1500<br />
        <input type="checkbox" name="item" value="200" /> 时尚女装200<br />
        <input type="checkbox" name="item" value="3000" /> 笔记本电脑3000元<br />
        <input type="checkbox" name="item" value="800" /> 情侣手表800<br />
        <input type="checkbox" name="item" value="2000" /> 桑塔纳2000<br />
        <hr/>

        <input type="checkbox" id="all"  />全选/全不选 &nbsp;
        <input type="button" id="reverse"  value=" 反 选 "/>&nbsp;
        <input type="button" value=" 结 账 "  id="total"/>&nbsp;   <span id="result"></span>
</body>

</html>

案例4：省市级联

<title>省市级联</title>
   	<!--
   	1 为省的下拉框做事件，只要事件一触发就执行方法
   	2 在方法中：
   			1 获取选中的省去配置对应的市
   			2 获取市的下拉框，将匹配到的市数据添加进去即可

   	-->

	<script>
		// 定义好所有省的市数据
        var arr1=["顺义区","昌平区","海淀区","朝阳区"]; //北京  0
        var arr2=["邯郸","石家庄","保定","秦皇岛"];  //河北     1
        var arr3=["济南","青岛","淄博","烟台"]; //山东  		   2
        var arr4=["洛阳","郑州","开封","安阳"]; //河南  		   3

		var city=[arr1,arr2,arr3,arr4];
		onload=function(){
		    document.getElementById("provinceId").onchange=function () {
		        // 先清空市的下拉框内容
                var cityId=document.getElementById("cityId");
                cityId.innerHTML="<option>‐‐请选择市‐‐</option>";
				// 获取到选中的省
				var value=this.value;  //0
				// 要去匹配对应的市
				var citys=city[value];
				// 遍历循环
				for(var i=0;i<citys.length;i++){
				    //获取市的下拉框，将匹配到的市数据添加进去即可
                    cityId.innerHTML+="<option>"+citys[i]+"</option>";
				}
            }
		}

	</script>

</head>
<body>
	<select id="provinceId">
			<option>‐请选择‐</option>
			<option value="0">北京</option>
			<option value="1">河北</option>
			<option value="2">山东</option>
			<option value="3">河南</option>
	</select>


	<select id="cityId">
			<option>‐‐请选择市‐‐</option>

	</select>
</body>
</html>

</html>

js对CSS样式进行操作

需求：以前使用css样式美化页面的时候都是写死在html中的，那能不能使用js动态的去设置标签的样式

第一种：元素.style.样式名称=值；

第二种：需要添加class属性名自己去类选择器中设置样式元素.className=类选择器名

案例练习

案例5：隔行换色并且鼠标移动换色

 <title>隔行换色</title>
	<script>
		/*
		* 1 获取所有的tr
		* 2 循环遍历所有tr判断哪些是偶数哪些是奇数
		* 3 使用js操作标签的css样式设置背景颜色
		* */

		onload=function(){
		    //1 获取所有的tr
			var trarr=document.getElementsByTagName("tr");
			//2 循环遍历所有tr判断哪些是偶数哪些是奇数
			for(var i=1;i<trarr.length;i++){  //tr tr tr tr
			    if(i%2==0){//偶数
                    //3 使用js操作标签的css样式设置背景颜色
					trarr[i].style.backgroundColor="red";
				} else {
                    trarr[i].style.backgroundColor="green";
				}

			// 设置4个tr的鼠标移入和移除
                var color;
			    trarr[i].onmouseover=function () {
				 // 纪录下颜色
                 color=this.style.backgroundColor;
				 //改变颜色
				 this.style.backgroundColor="yellow";
             }

			trarr[i].onmouseout=function () {
                //改变颜色
                this.style.backgroundColor=color;
			}


            }
		}

	</script>
    
</head>
<body>
<table id="tab1" border="1" width="800" align="center">
	<tr>
		<th>分类ID</th>
		<th>分类名称</th>
		<th>分类描述</th>
		<th>操作</th>
	</tr>

	<tr>
		<td>1</td>
		<td>手机数码</td>
		<td>手机数码类商品</td>
		<td><a href="">修改</a>|<a href="">删除</a></td>
	</tr>

	<tr>
		<td>2</td>
		<td>电脑办公</td>
		<td>电脑办公类商品</td>
		<td><a href="">修改</a>|<a href="">删除</a></td>
	</tr>

	<tr>
		<td>3</td>
		<td>鞋靴箱包</td>
		<td>鞋靴箱包类商品</td>
		<td><a href="">修改</a>|<a href="">删除</a></td>
	</tr>

	<tr>
		<td>4</td>
		<td>家居饰品</td>
		<td>家居饰品类商品</td>
		<td><a href="">修改</a>|<a href="">删除</a></td>
	</tr>
</table>
</body>

</html>

案例6：校验表单（正则表达式表单校验）

<title>验证注册页面</title>
    <style type="text/css">
                               body {
                                   margin: 0;
                                   padding: 0;
                                   font-size: 12px;
                                   line-height: 20px;
                               }

        .main {
            width: 525px;
            margin-left: auto;
            margin-right: auto;
        }

        .hr_1 {
            font-size: 14px;
            font-weight: bold;
            color: #3275c3;
            height: 35px;
            border-bottom-width: 2px;
            border-bottom-style: solid;
            border-bottom-color: #3275c3;
            vertical-align: bottom;
            padding-left: 12px;
        }

        .left {
            text-align: right;
            width: 80px;
            height: 25px;
            padding-right: 5px;
        }

        .center {
            width: 280px;
        }

        .in {
            width: 130px;
            height: 16px;
            border: solid 1px #79abea;
        }

        .red {
            color: #cc0000;
            font-weight: bold;
        }

        div {
            color: #F00;
        }
    </style>
    <script type="text/javascript">
        function regist(){
            // 用户名
            var user=document.getElementById("user");
            if(user.value==""){   //user.value.length==0
                document.getElementById("span1").innerHTML="<font color='red'>用户名不能为空</font>";
                // 表单不能提交
                return false;
            }else{
                document.getElementById("span1").innerHTML="";
            }
            // 密码
            var pwd=document.getElementById("pwd");
            if(pwd.value==""){
                document.getElementById("span2").innerHTML="<font color='red'>密码不能为空</font>";
                return false;
            }else if(pwd.value.length<6){
                document.getElementById("span2").innerHTML="<font color='red'>密码长度不能小于6位</font>";
                return false;
            }else{
                document.getElementById("span2").innerHTML="";
            }
            // 确认密码
            var repwd=document.getElementById("repwd");
            if(repwd.value!=pwd.value){
                document.getElementById("span3").innerHTML="<font color='red'>2次密码输入不一致</font>";
                return false;
            }else {
                document.getElementById("span3").innerHTML="";
            }
            // 邮箱
            var email=document.getElementById("email");
            // 找一个邮箱的正则格式
            var rg=/^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/;
            if(rg.test(email.value)==false){
                document.getElementById("span4").innerHTML="<font color='red'>邮箱格式匹配不正确</font>";
                return false;
            }else{
                document.getElementById("span4").innerHTML="";
            }
            // 电话号码
            var mobile=document.getElementById("mobile");
            var rg=/^1[34578]\d{9}$/;
            if(rg.test(mobile.value)==false){
                document.getElementById("span5").innerHTML="<font color='red'>电话号码的格式不正确</font>";
                return false;
            }else{
                document.getElementById("span5").innerHTML="";
            }

            // 表单提交
            return true;
        }
    </script>
</head>

<body>

<form action="09-案例1(会动的时钟).html" method="get" id="myform"  onsubmit="return regist()">
    <table class="main" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td><img src="img/logo.jpg" alt="logo"/><img src="img/banner.jpg" alt="banner"/></td>
        </tr>
        <tr>
            <td class="hr_1">新用户注册</td>
        </tr>
        <tr>
            <td style="height:10px;"></td>
        </tr>
        <tr>
            <td>
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <!-- 不能为空 -->
                        <td class="left">用户名：</td>
                        <td class="center">
                            <input id="user" name="user" type="text" class="in"/>
                            <span id="span1"></span>
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能为空， 输入长度不能小于6个字符 -->
                        <td class="left">密码：</td>
                        <td class="center">
                            <input id="pwd" name="pwd" type="password" class="in"/>
                            <span id="span2"></span>
                        </td>
                    </tr>
                    <tr>
                        <!-- 与密码相同 -->
                        <td class="left">确认密码：</td>
                        <td class="center">
                            <input id="repwd" name="repwd" type="password" class="in"/>
                            <span id="span3"></span>
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能为空， 邮箱格式要正确 -->
                        <td class="left">电子邮箱：</td>
                        <td class="center">
                            <input id="email" name="email" type="text" class="in"/>
                            <span id="span4"></span>
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能为空， 使用正则表达式自定义校验规则,1开头，11位全是数字 -->
                        <td class="left">手机号码：</td>
                        <td class="center">
                            <input id="mobile" name="mobile" type="text" class="in"/>
                            <span id="span5"></span>
                        </td>
                    </tr>
                    <tr>
                        <!-- 不能为空， 要正确的日期格式 -->
                        <td class="left">生日：</td>
                        <td class="center">
                            <input id="birth" name="birth" type="text" class="in"/>
                        </td>
                    </tr>
                    <tr>
                        <td class="left">&nbsp;</td>
                        <td class="center">
                            <input name="" type="image" src="img/register.jpg"/>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</form>
</body>
</html>