javascript知识

最新推荐文章于 2024-03-24 20:16:44 发布
最新推荐文章于 2024-03-24 20:16:44 发布
阅读量814 收藏 2
点赞数
分类专栏： django 文章标签： javascript 前端 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43635902/article/details/122871558
版权

Javascript

一、简介

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。

1. js是一个脚本语言，解释型语言 （编程语言）
2. 可以使用浏览器来解释执行js的代码
3. javascript与java语言没有直接联系，javascript借用了java的名气

JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。

# 不需要背，理解即可
1. 以前不使用js的时候，有一个用户的登录操作，用户输入了用户和密码，点击“登录”是直接将用户名和密码提交给服务器，服务器来验证用户名和密码是否正确。 问题：不管用户输入的用户名是否规范都直接提交给服务器，所有的验证操作都交给了服务器。 

2. 有了js后，就可以在将用户名和密码提交给服务器前，做一些验证（长度是否合法.）,验证成功之后再提交给服务器，否则不允许提交给服务器，目的：缓解服务器压力

JavaScript 是因特网上最流行的脚本语言。

JavaScript是一种轻量级、解释性、脚本编程语言，可以执行在所有现代浏览器中。

学习目标：JavaScript语法，将JavaScript运用在HTML中定制交互行为，定制前端逻辑

二、第一个程序

1、初识Javascript
<html>
<head>
	<title>学习HTML基本语法</title>
	<script type="text/javascript">
		//警告弹窗
		alert('Hello World');
		//向开发者工具的console中输出日志
		console.log('日志内容')
	</script>
    
</head>
<body>
	...
</body>
</html>
  • HTML 的 <script>标签用于把 JavaScript代码 插入 HTML 中；
  • script标签可以出现在html的head或body位置，一般常放在head中；
  • 也可以引入外部的js文件 <script src="myScript.js"></script>
# 总结：
1. 在html中使用js的几种方式：
	(1) 在head标签，添加script标签，在标签的内部添加js的代码即可
	(2) 引入外部的js文件  <script src="myScript.js"></script>
	(3) 在body中添加script标签
其中第一种方式和第三种的区别：
	在head中添加script，是在页面显示前就执行js的代码
	在body中添加script，是在页面显示后才执行js的代码

如果没有特殊原因，还是将js代码写在head中
2、注释
  • 单行注释 //
  • 多行注释 /* … */

三、变量和数据类型

1、变量

js是弱类型语言，所以在定义变量时不需要指定类型，直接用let关键字定义即可。

var/let x=5; 
var y=6;
var z=x+y; 
console.log(z);
2、数据类型

字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。

2.1 字符串

声明字符串

var carname = "Volvo XC60";
console.log(carname)

大小写转换

var lower = carname.toLowerCase()
console.log(lower)
var upper = carname.toUpperCase()
console.log(upper)

分隔字符串

var r = carname.split(' ')
console.log(r)
console.log(r[1])
2.2 数字

JavaScript不区分整数类型和浮点类型 。

var age = 18;var price = 10.99;var a = 3;console.log(typeof age)console.log(typeof price)  //=> number
2.3 布尔
var y = true;console.log(y);
2.4 数组
var arr = [2,4,6,8,22];for (var i = 0;i<arr.length;i++) {	console.log(arr[i]);}arr[5] = 40;   //在下标为5的位置添加40console.log(arr.length);  // => 6arr.push(30) console.log(arr)
2.5 Object对象

如下两种创建方式，方式一不建议使用，方式二的创建方式更轻便，建议使用

//方式一：var obj = new Object();obj.name="Mr_lee";obj.age=18;obj.sayHi=function(){ //为对象添加方法			console.log("hi~")		  }//方式二： var obj2={name:'Mr_lee',age:18,sayHi:function(){console.log("hi~");}}//使用console.log(obj.name)console.log(obj2.name)obj.sayHi()obj2.sayHi()# js中没有字典类型，字典类型实际在js中称为对象 object
2.6 日期类型
var a = new Date() //当前系统时间var b = new Date(2018,5,28,10,9,10) // year month day hour minute second ,月份从0开始var b = new Date(2018,5,28)a.getFullYear();a.getMonth(); //月份，一月是0a.getDate(); a.getDay(); //一周的第几天 周日是0a.getHours();a.getMinutes();a.getSeconds();a.getTime();
2.7 特殊类型
  • undefined：未赋值的变量的默认值 var a;alert(a)
  • NaN:not a number, 比如 b = “sf”/2; b的值就是NaN
  • null:用于置空变量，不是默认值，需要手动赋值 var a=“sdf”; a=null;alert(a)

四、Math对象

Math 对象用于执行数学任务。

Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。

var x = Math.PI; // 返回PIvar y = Math.sqrt(16); // 返回16的平方根
1、Math对象属性
属性描述
E返回算术常量 e，即自然对数的底数（约等于2.718）。
LN2返回 2 的自然对数（约等于0.693）。
LN10返回 10 的自然对数（约等于2.302）。
LOG2E返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E返回以 10 为底的 e 的对数（约等于0.434）。
PI返回圆周率（约等于3.14159）。
SQRT1_2返回 2 的平方根的倒数（约等于 0.707）。
SQRT2返回 2 的平方根（约等于 1.414）。
2、Math对象方法
方法描述
abs(x)返回 x 的绝对值。
acos(x)返回 x 的反余弦值。
asin(x)返回 x 的反正弦值。
atan(x)以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)对数进行上舍入。
cos(x)返回数的余弦。
exp(x)返回 Ex 的指数。
floor(x)对 x 进行下舍入。
log(x)返回数的自然对数（底为e）。
max(x,y,z,…,n)返回 x,y,z,…,n 中的最高值。
min(x,y,z,…,n)返回 x,y,z,…,n中的最低值。
pow(x,y)返回 x 的 y 次幂。
random()返回 0 ~ 1 之间的随机数。
round(x)把数四舍五入为最接近的整数。
sin(x)返回数的正弦。
sqrt(x)返回数的平方根。
tan(x)返回角的正切。

五、运算符

  • 算数运算符（+ - * / % ++ --）
  • 比较运算符（> >= < <= == != === !==）
  • 逻辑运算符（&& || !）
  • 赋值运算符（= += -= *= /= %= ）
  • 字符串连接运算符（+）
  • 三元运算符（? :）
1、算数运算符

自增运算符 :

var x = 3;console.log( x++ );// 输出 3console.log( x );// 输出 4var y = 3;console.log( ++y );// 输出 4console.log( y );// 输出 4

自减运算符

var x = 3;console.log( x-- );// 输出 3console.log( x );// 输出 2var y = 3;console.log( --y );// 输出 2console.log( y );// 输出 2
2、比较运算符
  • === 两个运算数的值相等并且类型相同时，结果为true。
  • !== 两个运算数的值不等或者类型不同时，结果为true。
3、逻辑运算符
4、赋值运算符
5、字符串连接运算符
var str1 = "Hello";var str2 = "Word";var str3 = str1 + str2;console.log(str3);
6、三元运算符

表达式一?表达式二 :表达式三 判断表达式一是否为真，为真取表达式一的值，否则取表达式二的值

var a = 10;var b = 5;var c = a > b ? a : b;console.log(c);

# 类型转换        var n = "123"        console.log(Number(n))        console.log(parseInt("564"))        console.log(parseFloat("564.13"))        console.log(String(1234))

六、流程控制

1、条件语句

条件语句就是指通过判断指定的计算结果，来决定是执行还是跳过指定的语句块。

JavaScript提供了两种条件语句：if else语句和switch case语句。

1.1 if语句
var num = 5;if( num < 10 ){  console.log( num );}
1.2 if else语句
var score = 68;if( score < 60 ){  console.log("不及格");}else{  console.log("及格");}
1.3 else if语句
var score = 68;if( score > 90 ){  console.log("优秀");}else if( score >= 80 ){  console.log("良好");}else{  console.log("一般");}
1.4 switch case语句（python中没有）
var num = 2;switch( num ){  case 1:	  console.log("查询余额"); 	 break;  case 2: 	 console.log("在线充值"); 	 break;  default: 	 console.log("转人工服务");}
2、循环语句

循环语句是一系列反复执行到复合特定条件的语句。

2.1 for语句
for( var i = 1; i < 10; i++ ){  for( var j = 1; j <= i; j++ ){ 	 //console.log(i + "*" + j + "=" + (i*j));      document.write(i + " * " + j + " = " + i*j + "&nbsp;&nbsp;")  }}
2.2 while语句
var num = 0;while( num < 10 ){  console.log( num );  num = num + 1;}
2.3 do…while语句
var num = 0;do{  console.log( num );  num = num + 1;}while( num < 10 );

# do..while 与 while的区别：1. while循环是先判断条件，再执行循环体代码2. do..while是先执行循环体，再判断条件，循环体的代码至少被执行一次
3、break和continue
  • break语句是中断语句，用于终止循环语句或开关语句。
for( var i = 0; i < 10; i++ ){  if( i == 5 ){	  break;  }  console.log( i );}
  • continue语句是连续语句，用于重新开始while、do while和for语句。
for( var i = 0; i < 10; i++ ){  if( i == 5 ){ 	 continue;  }  console.log( i );}

七、函数

1、基本语法
function 方法名(参数1,参数2){		...		return ...}

function fn(){  console.log("this is function");}fn();
2、匿名函数
var fn = function(a,b){ //定义匿名函数，并赋值给一个变量			alert(a+" -- "+b)		}fn(18,"Mr_lee") //调用

八、事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。

1、事件注册、绑定

事件注册：定义函数myClick , 并在标签的事件中调用方法：οnclick=“myClick()”

function myClick(){	alert("我被点击了！")}<input type="button"  onclick="myClick();"  value="click_me"/>
2、可用事件
事件名事件描述
onclick鼠标点击时触发 一般给按钮绑定
ondblclick鼠标双击时触发
onfocus元素获得焦点时触发 输入框
onblur元素失去焦点时触发 输入框
onchange用户改变域的内容 单选、多选、下拉框
onmouseover、onmouseenter鼠标被移动到某个元素上（触发一次）
onmousemove鼠标在元素内部移动时，不断触发
onmouseout、onmouseleave鼠标从元素移开
onkeydown键盘某个键被按下 输入框
onkeypress键盘的键被按下或按住
onkeyup键盘的键被松开
onload用于body标签，页面加载完毕时触发一次
3、event对象

在触发的事件的函数里面我们会接收到一个event对象,通过该对象我们需要的一些参数,比如说我们需要知道此事件作用到谁身上了,就可以通过event的属性target来获取到 。

<script>  	function myClick(a){ //a = 接收事件对象 ，从οnclick="myClick(event);"中传来		alert("button clicked~")		console.log(a)		console.log(a.type) //事件类型		console.log(a.clientX) //事件触发x坐标		console.log(a.clientY) //事件触发x坐标		console.log(a.target)  //事件源-触发事件的标签		console.log(a.target.value) //获取事件源的属性值	}</script><input type="button" οnclick="myClick(event);" value="click_me"/>
4、事件冒泡

一个标签触发事件后，事件会向上传递给自己的父标签，然后父标签的父标签…

 function div_click() { 	console.log('div_click') } function btn_click(e) { 	console.log('btn_click') 	e.stopPropagation()        //阻断事件向上传递 } <div οnclick="div_click()" style="width: 300px;height: 200px; background-color: blue;"> 	<input type="button" value="点击" οnclick="btn_click(event)"> </div>

事件的冒泡，不会因为事件源没有该事件，而不冒泡；也不会因为某个中间的父标签没有该事件而停止冒泡。

注意：当父元素和子元素都有某一个事件，且需要独立执行时，冒泡会使得事件同时执行，所以需要防止。

5、常用技巧
5.1 超链接

为超链接注册单击事件，需要阻止其href （javascript:void(0)）

function myClick(){	console.log('go go go')}<a href="javascript:void(0)" onclick="myClick()">go</a>
5.2 form表单

form表单提交前，如果需要处理其他逻辑

先将提交按钮改为普通按钮，然后在按钮事件中手动提交表单。即可实现灵活的表单控制！

function myClick() { 	....逻辑处理... 	document.forms[0].submit();//手动获取from，并提交 } <form action="http:www.baidu.com" method="get">	 <input type="button" name="" value="提交" onclick="myClick()"></form>
5.3 this 当前元素
function myClick(a)   // a=this，当前触发事件的元素{ 	console.log(a)} <input type="button" name="" value="提交" onclick="myClick(this)">
6、另外的事件注册方式（Dom）

基于编程的事件注册，语法如下：

<head>	<title>学习Javascript</title>	<script type="text/javascript">		var button = document.getElementById('btn')  //获得标签		button.onclick = function()                  //注册事件		{			console.log('注册成功')		}	</script></head><body>	<form action="http:www.baidu.com" method="get">		 <input type="button" id="btn" value="提交">	</form></body>

如上语法，则使得html逻辑和js逻辑的耦合降到最低！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TXGeuRup-1644507825601)(Javascript .assets/1566386566663.png)]

**原因：**标签还未出现，就去为标签注册事件！！

解决方案： onload或者 script后置

//解决方案1：onload事件function onload9(){//load事件的handler，整个的页面加载完毕后执行  //1.获取按钮  var btn9 = document.getElementById("btn");  //2.注册事件  btn9.οnclick=function(){    alert("clicked~~~");  }}...<body οnlοad="onload9();">  <!--注册onload事件-->  	....	<input type="button" id="btn" value="提交"></input>

//解决方案2：script后置<form action="http://www.baidu.com" method="get">  <input type="text" name="usermae"/><br/>  <input type="text" name="password"/><br/>  <input type="button" value="提交" id="btn"/></form><script type="text/javascript">  //1.获取按钮  var btn115 = document.getElementById("btn");	//2.注册事件  btn115.οnclick=function(){    console.log('form submit');    document.forms[0].submit();  }</script>

# 总结# 给标签绑定事件有两种方式：1. 直接在开始标签中，添加事件属性<button οnclick="f()">点击</button> 进行事件的绑定2. 使用编程的方式，事件的绑定不写在开始标签中，解耦合	body中只写标签，不绑定事件 <button>点击<button>	在script标签中，先获取标签，再给标签的事件属性赋值-匿名函数	注意：使用第二种方式绑定事件，需要将script脚本代码后置 或 给body加一个onload事件 然后再将事件绑定的代码写在onload的事件对应的函数中

九、DOM

DOM是文档对象模型，BOM是浏览器对象模型，前者是浏览器（可看成容器）内的内容进行操作,而后者是对浏览器本身进行操作

1、DOM简介

HTML DOM （文档对象模型）：当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

DOM HTML æ ‘

​ HTML DOM 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

牛刀小试： 改变div的背景色

<div style="background-color: red; margin:0 auto; width: 500px;height: 300px;" id="div_1"></div><script type="text/javascript">	var element = document.getElementById("div_1");	element.onmouseover = function ()	{	 	element.style.backgroundColor = "blue"	}	element.onmouseout = function ()	{	 	element.style.backgroundColor = "red"	}</script>
2、查找HTML元素

通常，通过 JavaScript，需要操作 HTML 元素。 因此必须首先找到该元素。有四种方法来：

  • 通过 id 找到 HTML 元素 document.getElementById()
  • 通过标签名找到 HTML 元素 document.getElementsByTagName()
  • 通过类名找到 HTML 元素 document.getElementsByClassName()
  • 通过name属性值找到 HTML 元素 document.getElementsByName()
<div style="background-color: red; margin:0 auto; width: 500px;height: 300px;" id="div_1" class="div_class" name="div_name"></div><script type="text/javascript">	var element = document.getElementById("div_1");            //通过id获取	console.log(element) 	element = document.getElementsByTagName("div")[0];         //通过标签名获取（复数）	console.log(element)	element = document.getElementsByClassName("div_class")[0]; //通过标类名获取（复数）	console.log(element)	element = document.getElementsByName("div_name")[0];       //通过name属性值获取（复数）	console.log(element)</script>

标签层级属性：

  • children 获得所有子标签
  • parentNode 获得父标签
  • previousElementSibling 获得上一个兄弟标签
  • nextElementSibling 获得下一个兄弟标签
<div style="background-color: red; margin:0 auto; width: 500px;height: 300px;" id="div_1">	<p id="p1">谁谓伤心画不成，画人心逐世人情。 </p>	<p id="p2">君看六幅南朝事，老木寒云满故城。 </p></div><input type="button" value="点我" onclick="myClick()">    <script type="text/javascript">	function myClick()	{		var element = document.getElementById("div_1");            //通过id获取		console.log(element)		var list = element.children;		for(var i = 0;i<list.length;i++){			var pe = list[i];			pe.style.color = 'white';           //将文字颜色改为白色		}	}</script>
3、修改HTML
3.1 修改标签内容
双标签中间的内容

element.innerHTML = xxx

<div id="div_1">为中华之崛起而读书。</div><input type="button" value="点我" onclick="myClick()"><script type="text/javascript">	function myClick()	{		var element = document.getElementById("div_1");     	 		element.innerHTML = "读一本好书，就如同和一个高尚的人在交谈。"	}</script>
3.2 修改标签基本属性
<input type="button" value="点我" onclick="myClick()" id="btn_1"><script type="text/javascript">	var yes = true;	function myClick()	{		var element = document.getElementById("btn_1");     	 		if (yes) {			element.value = "别点了"			yes = false;		}else {			element.value = "点我"			yes = true;		}	}</script>

ele.value="new_value"; //多用于设置文本框的显示内容ele.name="new_name"; //修改name属性值ele.href="new_href"; //可用于修改a标签的链接地址ele.src="new_src"; //可用于修改img标签的图片......ele.checked=true/false;//适用于radio-button 和 checkbox标签ele.selected=true/false;//适用于select内的option标签、ele.disabled=true/false;//禁用标签，多用于按钮
3.3 修改样式属性
ele.style.height="50px"; //单独修改标签的某一项css属性.ele.style.backgroundColor="#abcdef";//单独修改标签的某一项css属性. 修改的属性为‘background-color’t.style.display = "none"        # 隐藏标签t.style.display = "inlineblock" # 显示标签
4、删除和新增标签
4.1 删除标签
  • removeChild(child) 删除指定的子标签
  • remove() 删除自身
<div id="div_1">	<p>谁谓伤心画不成，画人心逐世人情。</p>	<p>君看六幅南朝事，老木寒云满故城。</p></div><input type="button" value="点我" onclick="myClick()"><script type="text/javascript">	function myClick(){	var element = document.getElementById("div_1");	var p1 = element.children[0];	element.removeChild(p1)}
4.2 新增标签
  • document.createElement(标签名) 创建新标签
  • document.createTextNode(内容) 创建标签内容
  • ele.appendChild(标签) 追加子标签
  • ele.insertBefore(新的子标签，指定的子标签) 插入指定标签到ele标签中
<input type="button" value="点我" onclick="myClick()"><script type="text/javascript">function myClick(){	var para = document.createElement("p")	var text = document.createTextNode("鸟三顾而后飞，人三思而后行。")	para.appendChild(text)	document.getElementsByTagName("body")[0].appendChild(para)}</script>

十、BOM

1、简介
1.1 概念

BOM 是 Browser Object Model，浏览器对象模型。

BOM提供了独立于内容 而与浏览器窗口进行交互的对象；

由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；

BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；

1.2 学什么

我们将学到与浏览器窗口交互的一些对象，例如可以移动、调整浏览器大小的window对象，可以用于导航的location对象与history对象，可以获取浏览器、操作系统与用户屏幕信息的navigator与screen对象，可以使用document作为访问HTML文档的入口，管理框架的frames对象等。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BeN1gW49-1644507825603)(Javascript .assets/BOM.gif)]

2、Window对象

Window 对象是 JavaScript 层级中的顶层对象。

Window 对象代表一个浏览器窗口或一个框架

  • window.alert(“警告”) 警告框
  • window.confirm(“xxx”) 确认框，根据用户的选择，返回bool值
var y = window.confirm("提示消息：是否删除xxx")if (y) {	console.log('...')}
  • window.prompt(“xxx”) 提示框，收集用户的输入
var txt = window.prompt("请输入")console.log(txt);
  • window.onload = function(){ …} 注册onload事件
3、History对象（了解）
  • window.history.forward() 在浏览历史里前进一步
  • window.history.back() 在浏览历史里后退一步
4、Screen对象
  • window.screen.width 屏幕宽度
  • window.screen.height 屏幕高度
5、Navigator对象
  • window.navigator.appVersion 浏览器版本
6、Location对象
  • window.location.href 载入页面–当前载入页面的完整UR
window.location.href = "http://www.baidu.com"
7、Document对象
  • document.getElement…(…) 选择标签
  • document.forms[0] 选择文档中的form
  • document.write(“hello”) == 向文档中写入内容，会覆盖所有之前的 (了解)

补充：

  • 计时器

    • var id1 = setInterval(function(){...},1000) ; 每1000毫秒执行一次function，返回事件的id

    • var id2 = setTimeout(function(){...},1000); 1000毫秒后仅执行一次function，返回事件的id

    • clearTimeout(id2); 移除事件

    • clearInterval(id1); 移除事件

      如何在网页上显示当前时间？

  • 引入外部的js文件

    <script src="xx.js"></script>
橘 长
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript知识点
03-15
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本...
jquery click事件传参
热门推荐
淘淘小窝
11-03 3万+
click()函数用于为每个匹配元素的click事件绑定处理函数。该函数也可用于触发click事件。 click事件就是鼠标按钮单击事件。此外，你还可以额外传递给事件处理函数一些数据。 此外，你可以为同一元素多次调用该函数，从而绑定多个事件处理函数。触发click事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。 要删除通过click()绑定的事件，请使用unb
JavaScript 学习笔记 p97 - 100
draltracy的博客
06-06 140
// 定义一个函数，用来为指定元素绑定单击响应函数 // 参数： idStr 绑定单机响应函数的对象的 ID 属性值;fun 事件的回调函数，单击元素时，该函数将会被触发 function myClick (idStr, fun) { var btn = document.getElementById (idStr); btn.onclick = fun; } //...
JavaScript基础知识汇总【全！】
最新发布
2301_79206800的博客
03-24 891
var 变量名 = 值;// var:关键字// 变量名(标识符): 变量名由字母、数字、下划线和$组成且不能以*数字*开头,变量名不能使用关键字。中文是合法的标识符, 可以用作变量名。// 声明变量而没给赋值, 默认是undefined, undefined 是一个特殊的值, 表示‘无意义’。// 如果变量赋值的时候忘了写var 关键字, 这条语句也是有效的;// 但是不写var 不利于表达意图, 而且容易不知不觉的创建全局变量, 所以建议使用var声明变量。
javascript点击函数总结及函数代理
a_little_nine的博客
06-04 2515
HTML代码规范 HTML整体 （1）文件应以<!DOCTYPE…>首行顶格开始，<!DOCTYPE> 声明位于文档中的最前面的位置，处于 标签之前。<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。推荐使用。 （2）必须在head元素内部的meta标签内声明文档的字符编码charset, 如：，这句代码告诉浏览器应该此HTML文件使用的字符集是什么，如果不加此行代码，那么在浏览器中可能显示为乱码。 （3）t
Danmo的学习之路（JavaScript基础_下）
DanmoSAMA的博客~
12-20 440
DOM 简介 事件：用户和浏览器之间的交互行为，比如：点击按钮，鼠标移动、关闭窗口。 JavaScript 事件参考手册 获取对象 <button id="btn">我是一个按钮</button> <script type="text/javascript"> //获取按钮对象 var btn = document.getElementById("btn"); //修改按钮的文字 btn.innerHTML = "I'm Button"; 触发事
React 父组件将函数传给子组件|子组件通过函数将数据传给父组件
qq_43256552的博客
06-10 468
React父子组件间通信;React在组件中使用事件处理函数；React父组件将函数传给子组件；React子组件将数据传给父组件
JavaScript 知识图谱
03-26
JavaScript 知识图谱
JavaScript知识点一
07-15
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态...
javascript知识点收藏
10-31
javascript知识点收藏
js最常用的click事件3种方法
yuyexiaohan的博客
08-05 9925
js最常用的click事件3种方法 转载自：https://www.cnblogs.com/liaohongwei/p/9717511.html 1. onclick=name() <!DOCTYPE html> <html leng="en"> <head> <meta charset="utf-8"> &l...
Javascript中点击（click）事件的3种写法
weixin_42017221的博客
02-09 777
消除事件：btn.οnclick=null;
JavaScript编写Web脚本最佳实现
weixin_30448685的博客
05-18 306
最近在看JavaScript DOM 编程艺术，总结一下JavaScript编写Web脚本的规范与实现，对于实现有以下几点要求： 平稳退化：确保网页在没有JavaScript下也能正常运行 分离JavaScript：把网页内容与结构与JavaScript行为完全分离 向后兼容：当JavaScript使用新的API时老版本的浏览器正常运行 提升性能：让JavaScript执行...
JS常见事件
莉兹Liz的博客
10-30 309
JS常见事件 1.点击事件 onclick：单击事件 ondblclick：双击事件 2.焦点事件 obclur：失去焦点 onfocus：获取焦点 3.加载事件 onload：一张页面或一幅图像完成加载 4.鼠标事件 onmousedown：鼠标按下 onmouseup：鼠标松开 onmousemove：鼠标移动 onmouseover：鼠标移到某元素上 onmouseout：鼠标...
js中的单机和双击事件
wyqwilliam的博客
12-11 822
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js的声明</title> <script type="text/javascript"> // function myJs(){ // alert("这里是测试JS的声...
JS单击事件
qq_35354139的博客
07-29 1979
JS单击事件
js中click事件，事件名(函数名)不能为click，myclick,onclick等保留名称
qq_34057640的博客
10-27 3533
菜鸟教程(runoob.com) function onclick(){ alert(11) } function myclick(){ alter(11) } function dianji(){   alert(11) } 此时只有dianji()函数名时才能触发
从零开始学前端 - 33. JS事件详解
qq_39506551的博客
10-14 272
从零开始学前端 - 33. JS事件详解 三、事件流 3.1 事件冒泡 3.2 事件捕获 四、事件对象 五、事件委托 事件流指的就是事件发生的执行顺序，`DOM2级事件` 规定的事件流包括三个阶段：**事件捕获阶段**、**处于目标阶段** 和 **事件冒泡阶段**。首先开始的是事件捕获阶段，可以在这一阶段对事件进行拦截和限制。然后实际的目标接收到事件，最后开始的是事件冒泡阶段，一般我们都是在这个阶段对事件做相应的处理。
使用js实现单机按钮，让他改变颜色
szhszhszhszhszhs的博客
04-14 1268
按钮1按钮2按钮3按钮4按钮5按钮
JavaScript知识体系
07-14
JavaScript知识体系涵盖了以下几个主要方面： 1. 基础语法和数据类型：包括变量、常量、运算符、控制流等基本语法和基本数据类型（如数字、字符串、布尔值等）的使用。 2. 数据结构：了解和使用数组、对象、集合、...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值