web前端基础- 07 JS基础

最新推荐文章于 2023-04-17 13:52:03 发布

shandy_liunian

最新推荐文章于 2023-04-17 13:52:03 发布

阅读量148

点赞数

文章标签： web前端基础

本文链接：https://blog.csdn.net/shandy_liunian/article/details/102468376

版权

一、JS介绍

JavaScript是为了实现网页交互而设计的客户端语言。最初是为了实现表单验证功能而设计的。

其主要有以下三部分组成：

核心 EcmaScript
浏览器对象模型(BOM) broswer object model
文档对象模型(DOM) Document object model

1.1 JS的引入

内嵌式
在头部标签内直接写入如下语句：

       <script type="text/javascript">
	           // Js事件
	           // 弹出警告框
	           alert("hello world");
	           // 浏览器内写入文字,会解析h1标签，将<h1></h1>翻译为一级标题标签
	           document.write("<h1>hello</h1>")
	           // 如果要显示"<h1></h1>"，则将<替换为&lt;，将>替换为&gt;
	           document.write("&lt;h1&gt;hello&lt;/h1&gt;")
       </script>

外联式
新建一个单独的Js文件，存放Js事件
在头部标签内引入外部Js事件

  <script type="text/javascript" src=".js文件相对路径"></script>

注意事项：

text/javascript声明当前script标签中文本的类型
所有的js事件都写在script标签内，且以分号表示语句结束
可以编写多个script标签，多个script标签顺序执行
外联式引入Js事件时，script标签内不编写任何Js事件（因为不会执行这部分代码）

1.2 Js 基础数据类型及变量标识符

js基础数据类型
主要有以下几个：
数字类型number(包括整型和浮点型)---------100,3.32
字符串string-----------“hello”,‘world’
布尔类型boolean----------True False
特殊字符类型 null----空 undefined------未声明

js 变量
通过关键字var 来声明变量并给变量赋值

  <script type="text/javascript">
         //声明一个变量dog 并给其赋值为小黄
          var dog = "小黄"；
         // 修改dog的值
          dog = "小红"
        // 定义多个变量
        var  a = 1,b = 2;

3. js 标识符命名规则

a.只能由字母、数字、下划线、$组成
b.不能由数字开头
c.区分大小写
d.标识符建议见名知意
e. js是一门弱语言

<script type="text/javascript">
    	var age = 18;
    	//弹出结果为number
    	alert(typeof age);
    	age = "hello";
    	//弹出结果为string
  		alert(typeof age);
</script>

1.3 js-BOM

BOM是浏览器对象模型，浏览器可以通过调用系统对话框向用户展示信息。
系统提供了三个函数，可以完成对话框的操作

		 <script type="text/javascript">
		    	window.alert("hello");
		    	// 确认框，点击确定返回值为true，点击取消返回值为false
		    	window.confirm("请确认yes or no");
		    	// 输入框，第一个参数为输入提示信息，第二个为输入框的默认值
		    	window.prompt("请输入用户名","aaa");
		    </script>

1.4 js-DOM

DOM是文档对象模型，DOM的作用对象是整个html文件，利用js-DOM可以设置html各个标签的页面行为。

 <script type="text/javascript">
	//获取id为div1的div元素，返回值为object
	var oDiv = document.getElementById('div1');
	alert(typeof oDiv);  	
</script>

问题：
以上代码获取到的是null

原因：
因为代码从上往下执行，还没有加载出BOM元素(html代码)就执行script代码(DOM)

解决方法：
1.script放置body后面(但语法规范script要放在head标签中)
2.window.onload = function(){//在页面加载完成以后执行的函
数}

DOM可以获取的html节点有以下三个：

元素节点
属性节点 title=“属性值”
文本节点内容

1.4.1 通过标签名称获得html元素

<script type="text/javascript">
	window.onload = function(){
       	//获取标签名称为li的所有节点
	    var Lis = document.getElementsByTagName('li');
	    alert(Lis.length); 

	    // 获取第一个div中的所有li标签
	    var oDiv = document.getElementsByTagName('div');
	    var uli = oDiv[0].getElementsByTagName('li');
	    alert(uli.length);

	    // 获取li标签中的内容
	    for(var i=0;i<uli.length;i++){
	    	alert(uli[i].innerHTML);
	    }
	}
</script>

1.4.2 通过标签属性获得html元素

1.通过id属性获得html元素

      <script type="text/javascript">
      		windows.onload = function(){
           	//获取id为div1的div元素，返回值为object
			    var oDiv = document.getElementById('div1');
			    alert(typeof oDiv); 
			    //获得某元素对象的属性
			    //获取元素名称
			    alert(oDiv.tagName);
			    //获取元素内容
			    alert(oDiv.innerHTML);
			    //获取元素类名
			    alert(oDiv.className);
			    //获取元素样式,只能获得行内样式
			    alert(oDiv.style.width);
			    alert(oDiv.style.backgroundColor);
			    //自己定义元素的属性，第一个参数为属性名，第二个参数为属性值
			    oDiv.setAttribute("xxx","yyy");
			    //获取元素的属性值
			    alert(oDiv.getAttribute("class"));
      		} 	
    </script>

2.通过class属性获得标签属性

<script type="text/javascript">
	window.onload = function(){
       

	   // 获取某个类的所有标签
	    var uli = document.getElementsByClassName('li1');
	    alert(uli.length);

	    // 获取li标签中的内容
	    for(var i=0;i<uli.length;i++){
	    	alert(uli[i].innerHTML);
	    }
	}
</script>

<body>
	<div id="div1" class="country">
		<li class="li1">美国</li>
		<li>英国</li>
		<li class="li1">中国</li>
	</div>

	<div class="money">
		<li class="li1">美元</li>
		<li>欧元</li>
		<li class="li1">人民币</li>
	</div>
	
</body>

3.通过name属性获得html元素

<script type="text/javascript">
	window.onload = function(){
	   // 获取name="habit"的所有标签
	    var habit = document.getElementsByName('habit');
	    alert(habit.length);
	}
</script>

<body>
	<form action="">
		<label for="">用户名：</label>
		<input type="text" placeholder="用户名" name="uname">
		<br>
		<label for="">密&nbsp;&nbsp;&nbsp;码：</label>
		<input type="password" placeholder="xxxx" name="passwd">
		<br>
		<label for="">爱&nbsp;&nbsp;&nbsp;好</label>
		<input type="checkbox" name="habit" value="0">唱歌
		<input type="checkbox" name="habit" value="1">跳舞
		<input type="checkbox" name="habit" value="2">打篮球
		<button>提交</button>
	</form>
</body>

4.通过父节点获取所有的子元素

<script type="text/javascript">
	window.onload = function(){
       
	    var oDiv = document.getElementById('div1');

	    // 获得所有的子节点
	    var divchild = oDiv.childNodes;

	    // 子节点 = htmlnode + textnode
	    alert(divchild.length);

	    // 获取字节点中的内容
	    for(var i=0;i<divchild.length;i++){
	    	alert(divchild[i].innerHTML);
	    }

	    // 获取div元素第一个节点-->text node
	    alert(oDiv.firstChild);

	    // 获取div元素的最后一个节点
	    alert(oDiv.lastChild);
	}
</script>

<body>
	<div id="div1" class="country">
		<li class="li1">美国</li>
		<li>英国</li>
		<li class="li1">中国</li>
	</div>
	
	<div class="money">
		<li class="li1">美元</li>
		<li>欧元</li>
		<li class="li1">人民币</li>
	</div>	
</body>

二、js事件

js事件是用来获取事件的详细信息，如鼠标位置、键盘按
键等。

主要分为：鼠标事件、键盘事件、表单事件

2.1 鼠标事件

<script>
	window.onload=function(){
			var oDiv = document.getElementById("test");

			// onclick 鼠标单击事件  按下+松开
			oDiv.onclick = function(){
				console.log("onclick")
			}

			// onmouseover 鼠标移入事件

			oDiv.onmouseover = function(){
				this.style.backgroundColor="yellow";
			}

			// onmouseout 鼠标移出事件
			oDiv.onmouseout = function(){
				this.style.backgroundColor="pink";
			}

			// onmousemove 鼠标移动时触发

			oDiv.onmousemove = function(){
				this.style.backgroundColor="blue";
			}

			// onmousedown 按下鼠标按钮时触发
			oDiv.onmousedown = function(){
				this.style.backgroundColor="green";
				console.log("onmousedown")
			}

			// onmouseup 鼠标松开
			oDiv.onmouseup = function(){
				this.style.backgroundColor="black";
				console.log("onmouseup")
			}

		}
	</script>

<body>
	<div id="test" style="background-color: pink;width:200px;height:200px;"></div>
</body>

2.2 鼠标事件属性

<script>
	window.onload = function(){
		oDiv = document.getElementById("test");

		oDiv.onclick = function(e){

			// 鼠标所在位置距离可见区域的左边距和上边距的距离，包括margin宽度
			// 106 123
			console.log(e.clientX,e.clientY)

			// 鼠标所在位置距离实际页面区域左边距和上边距的距离，包括margin宽度
			// 106 1875
			console.log(e.pageX,e.pageY)

			// 鼠标所在位置距离事件源区域左边距和上边距的距离，不包括margin宽度
			// 98 1867
			console.log(e.offsetX,e.offsetY)
		}


	}
</script>

<body>
	<div id="test" style="background-color: red;width: 200px;height: 2000px;"></div>
</body>

画板案例

<style>
	div{
		background-color: yellow;
		border: 1px solid #CECECE;
		width: 500px;
		height: 500px;
	}
</style>

<script>
	window.onload = function(){
		odiv = document.getElementsByTagName("div")[0];
		ospan = odiv.children[0];

		odiv.onmousemove = function(e){
			var x = e.clientX;
			var y = e.clientY;
			ospan.innerHTML = x + "," + y + "px";
		}

		odiv.onmouseout = function(){
			ospan.innerHTML = ''
		}
	}
</script>

<div>
	<span></span>
</div>

2.3 表单事件

<script>
	window.onload = function(){

		var oForm = document.getElementsByTagName("form")[0];
		var oInput = document.getElementsByTagName("input");


		// onsubmit 表单提交事件
		oForm.onsubmit = function(){
			console.log("submit");

			// 阻止浏览器默认的表单跳转行为
			return false;
		}

		// 表单聚焦事件
		oInput[0].onfocus = function(){
			console.log("focus");
		}

		// 输入框失焦事件
		oInput[0].onblur = function(){
			console.log("blur");
		}

		// 输入框内容改变 + 失去焦点
		oInput[0].onchange = function(){
			console.log("change");
		}
	}
	
</script>

<form action="">
	<input type="text">
	<input type="submit">
</form>

2.4 键盘事件

<script>
		window.onload = function(){

			// 键盘按下字符键（不包括shift、enter等）触发
			document.onkeypress = function(){
				console.log("keypress")
			}

			// 键盘按下任意键触发
			document.onkeydown = function(){
				console.log("keydown")
			}

			// 松开键盘触发
			document.onkeyup = function(){
				console.log("keyup")
			}

			document.onkeydown = function(e){

				// 判断当前按下的键是否为alt或者shift,ctrl-->true false
				console.log(e.altKey,e.shiftKey,e.ctrlKey)

				// 输出当前按下键对应的编码
				console.log(e.keyCode)
			}
		}
</script>

留言板案例

<style>
	#test{
		width: 300px;
		height: 400px;
		border: 1px solid #CECECE;
	}
</style>
<script>
	window.onload = function(){
		 var oDiv = document.getElementById("test");
		 var oInput = document.getElementsByTagName("input");

		 oInput[1].onclick = function(){
		 	oDiv.innerHTML += oInput[0].value + "<br>";
		 } 
		 oInput[0].onfocus = function(){
		 	oInput[0].value = "";
		 }

		 // 键盘按下enter键，发送数据

		 oInput[0].onkeydown = function(e){
		 	if(e.keyCode==13){
		 		oDiv.innerHTML += oInput[0].value + "<br>";
		 	}
		 }

	}
</script>

<body>
<div id="test"></div>
<div>
	<input type="text" value="">
	<input type="button" value="发送">
</div>
</body>

三、封装函数

将上述案例中重复使用的代码

oDiv.innerHTML += oInput[0].value + "<br>";

封装为一个函数

function htmltext(){
	oDiv.innerHTML += oInput[0].value + "<br>";
 }
		 
oInput[1].onclick = htmltext; 

oInput[0].onkeydown = function(e){
	if(e.keyCode==13){
		 	htmltext();
	}
 }

四、阻止浏览器默认行为

<script>
	window.onload = function(){
		var olink = document.getElementsByTagName("a")[0];
		olink.onclick = function(e){
			console.log("aaaa");

			// 1-阻止页面跳转
			// return false;

			// 2-阻止页面跳转
			// e.preventDefault();

			// 3-阻止页面跳转
			e.returnValue = false;
		}

		// 阻止右键弹出菜单
		document.oncontextmenu = function(){
			return false;
		}
	}
<script>

<body>
<a href="">链接</a>
</body>

shandy_liunian

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端基础- 07 JS基础

一、JS介绍JavaScript是为了实现网页交互而设计的客户端语言。最初是为了实现表单验证功能而设计的。其主要有以下三部分组成：核心 EcmaScript浏览器对象模型(BOM) broswer object model文档对象模型(DOM) Document object model1.1 JS的引入内嵌式在头部标签内直接写入如下语句： <scrip...
复制链接

扫一扫