JavaScript基础语法(包含DOM,document等)

标识符
(1)可以有字母,数字,_,$
(2)标识符不能以数字开头
(3)不能是js中的关键字或保留字
一般首字母小写,每个单词的开头字母大写,其余小写

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--js代码一旦用于引入外部文件,就不能再编写代码了,即使编写了也会被浏览器忽略-->
		<script type="text/javascript" src="绝对路径"></script> 
		
		<script type="text/javascrit">
			alert("内部js代码");
			document.write("jfs");
			console.log(""hello);
		</script>
		
	</head>
	<body>
		<button onclick="alert('kahd');">djs</button>
		<a href="javascript:alert('jskjdh');">sd</a>
		<a href="javascript:;">kahd</a>
	</body>
</html>

JS中六种数据类型:
String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined 未定义
Object 对象(object为引用数据类型,其余都为基本数据类型)

var str="hello";
var x=1;

typeof 变量:检查一个变量的类型
Number.MAX_VALUE:表示数字的最大值;1.7976931348623157e+308
如果使用Number表示的数字超过了最大值,则会返回Infinity,表示正无穷-Infinity表示负无穷; 使用typeof检查Infinity会返回Number
NaN是一个特殊的数字,表示Not a Number;使用typeof检查NaN会返回Number
Number.MIN_VALUE大于0的最小值 5e-324
在JS中整数的运算基本可以保证精确;如果进行浮点元素,可能得到一个不精确的结果

Null类型的值只有一个,就是null;使用typeof检查一个null值时,会返回object

Undefined类型的值只有一个,就是undefined;当声明一个变量,但是并不给变量赋值时,它的值就是undefined;使用typeof检查undefined返回undefined

强制数据类型转换
将某数据类型转换为String:
方式一:调用被转换数据类型的toString()方法
该方法不会影响到原变量的数类型,会将转换的结果返回
注意:null和undefined没有toString()方法
方式二:调用String()函数,并将被转换的数据类型作为参数传递给函数;
使用String()函数强制类型转换时,Number和Boolean实际上就是调用的toString()方法,

将数据类型转换为Number
方式一:使用Number()函数
字符串–>数字:如果是纯数字的字符串,则直接将其转换为数字;
如果字符串中有非数字的内容,则转换为NaN;
如果字符串是一个空串或全是空格的字符串,则转换为0;
布尔–>数字:true转成1;false转成0
Null–>数字:转成0
undefined转成数字: 转成NaN
方式二:parseInt():把一个字符串中有效的整数内容转换为一个整数
parseFloat():把一个字符串转换为一个浮点数
如果对非String使用这两个函数,会先将其转换为String然后在操作
以0x开头,表示16进制的数;以0开头,表示8进制的数;
以0b开头表示2进制的数,但这种方式不是所有浏览器都支持

转换为Boolean
使用Boolean()方法;
数字–>布尔:除了0和NaN,其余都是true
字符串–>布尔:除了空串,其余都为true
null和undefined都会转换为false

算术运算符:当对非Number类型(和String加法除外)的值进行运算,会将这些值转换为Number然后在运算;任何值和NaN做运算都得NaN
如果对两个字符串做加法运算,会拼接在一起;任何值和字符串做加法运算,都需将它转换为字符串,然后在拼串

负号/正号对非Number类型的值,会将其先转换为Number,然后在运算

对非布尔值进行取反操作,则会将其转换为布尔值,再取反
对非布尔值进行与/或运算时,
先将其转换为布尔值,然后再运算,并且返回原值
true&&true:则返回后一个值
false&&true:返回false的原值
false&&false:返回前面的值
true||true:返回第一个的值
即:与运算:如果第一个值为true,必然返回第二个值;如果第一个值为false,则直接返回第一个值
或运算:如果第一个值为true,则直接返回第一个值;如果第一个值为false,则返回第二个值

对于非数值进行比较时,会将其转换为数字,在进行比较;
任何值和NaN做任何比较结果都是false
当两个字符串进行比较时,不会转换为数字,比较的是字符编码

NaN不和任何值相等,包括它本身;undefined==null --》true

==和!=如果类型不同,会做类型转换;

===和! ==不会做类型转换

prompt()可以弹出一个提示框,该提示框会带有一个文本框,用户可以在文本框中输入一段文字,该函数需要一个字符串作为参数,该字符串会作为提示框的提示文字,用户输入的内容将会作为函数的返回值返回,

	var score=prompt("请输入成绩");
	alert(score);

对象的分类:内建对象,宿主对象(由JS运行环境提供的对象),自定义对象

JS中的变量都是保存在栈内存中的;基本数据类型数据的值直接是在栈内存中存储的,值与值之间是独立存在的,修改一个变量不会影响其它变量;
对象是保存在堆内存中的,创建一个新的对象,就会在堆内存中开辟出一个新的空间,而变量保存的是对象的内存地址(对象引用),如果两个变量保存的是同一个变量引用,当通过一个变量修改属性时,另一个变量也会受到影响;

使用对象字面量创建一个对象
var obj={};
使用对象字面量 ,可以在创建对象时直接指定对象中的属性
{属性名:属性值,属性名:属性值}

使用函数声明来创建一个函数 :
function 函数名 ([形参1,形参2…]){
}

使用函数表达式来创建一个函数:
var 函数名=function([形参1,形参2…]){
}
调用函数时解析器不会检查实参的类型,也不会检查实参的数量,多余实参不会被赋值,如果实参的数量少于形参的数量,则没有对应实参的形参将是undefined

实参/返回值可以是任意的数据类型,也可以是一个对象,也可以是一个函数

for(var 变量 in 对象){
}
for…in语句对象中有几个属性,循环体就会执行几次

作用域:
全局作用域:(1)直接编写在script标签中的JS代码,都在全局作用域;
(2)全局作用在页面打开时创建,关闭时销毁
(3)在全局作用域中有一个全局对象window,它代表的是一个浏览器的窗口,它由浏览器创建,可以直接使用
(4)在全局作用域中,创建的变量都会作为window对象的属性保存
(5)全局作用域中的变量都是全局变量,在页面的任一部分都可以访问到

	var a=1;
	console.log(window.a);

使用var关键字声明的变量,会在所有的代码执行之前被声明;没有var,则不会变量声明提前
函数的声明提前:使用函数声明形式创建的函数,它会在所有的代码执行之前就被创建;使用函数表达式创建的函数,不会被声明提前,所以不能再声明前调用

函数作用域:(1)调用函数时创建函数作用域,函数执行完以后,函数作用域销毁
(2)每调用一次函数就会创建一个新的函数作用域,它们之间是互相独立的
(3)在函数作用域中可以访问到全局作用域的变量,在全局作用域中无法访问到函数作用域的变量
(4)当在函数作用域操作一个变量时,它会先在自身作用域中寻找,如果有就直接使用,如果没有则向上一级级作用域中寻找,直到找到全局作用域,如果全局作用域中依然没有找到,则会报错RefrenceError
(5)在函数中要访问全局变量可以使用window对象

this:指向的是一个对象,这个对象我们称为函数执行的上下文对象
根据函数的调用方式的不同,this会指向不同的对象:
以函数的形式调用时,this永远都是window
以方法的形式调用是,this就是调用方法的那个对象

使用工厂方法创建对象:

	function A(name,age,gender){
		var obj=new Object();
		obj.name=age;
		obj.age=age;
		obj.gender=gender;
		obj.sayName=function(){
				alert(this.name);
		};
		return obj;
	}
	var obj1=A("zganghs",15,"男");

使用工厂方法创建的对象,使用到构造函数都是Object,创建的所有对象都是Object类型,导致无法区分不同类型的对象。

构造函数:习惯上首字母大写
构造函数和普通函数的区别就是调用方式不同:普通函数直接调用,而构造函数需要使用new关键字来调用

	function Person(name,age,gender){
		this.name=name;
		this.age=age;
		this.gender=gender;
		//this.sayName=function(){
		//	alert(this.name);
		//};
		this.sayName=fun;
	}
	function fun(){			//将sayName方法在全局作用域中定义
		alert(this.name);
	}
	var per=new Person("jsh",15,"男");
	console.log(per instanceof Person);

使用instanceof可以检查一个对象是否是一个类的实例;
语法: 对象 instanceof 构造函数

原型 prototype:我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype;这个属性对应着一个对象,这个对象就是我们所谓的原型对象。
如果函数作为普通函数调用,prototype没有任何作用;
当函数通过构造函数调用时,它所创建的对象中都会有一个隐含的属性,指向该函数的原型对象,我们可以通过_proto_来访问该属性;
原型对象就相当于一个公共区域,所有同一个类的实例都可以访问到这个原型对象,我们可以将对象中共有的内容统一设置到原型对象中。
当我们访问对象的一个属性或方法时,它会先在对象自身中寻找,如果有直接使用,如果没有则会去原型对象中寻找,如果原型对象中有,则使用,没有则去原型的原型中去找,知道找到Object对象的原型,Object对象的原型没有原型,如果在Object中依然没有找到,则返回undefined
创建构造函数时,可以将这些对象共有的属性和方法,统一添加到构造函数的原型对象中,这样不用分别为每一个对象添加,也不会影响到全局作用域,就可使每个对象都具有属性和方法。

	function MyClass(){
	}
	MyClass.prototype.a=1; //向原型中添加属性a
	var mc=new MyClass();
	console.log(mc._proto_==MyClass.prototype);  //true
	console.log("a" in mc);

使用in检查对象中是否含有某个属性,如果对象中没有单原型中有,也会返回true

当一个对象没有任何的变量或属性对它进行引用,此时我们将永远无法操作该对象,这种对象就是一个垃圾,在JS中拥有自动的垃圾回收机制,会自动将这些垃圾对象从内存中销毁,我们不需要也不能进行垃圾回收操作,我们需要做的只是将不再需要使用的对象设置为null即可;

//创建数组
 var arr=new Array();
 var arr=new Array(1,2,3); //使用构造函数创建数组时,可以同时添加函数
 var arr=[];
 //使用字面量创建数组时,可以在创建时就指定数组中的元素       
 var arr=[1,2,3];

数组中的元素可以是任意数据类型,也可以是对象,函数。
push():该方法可以向数组的末尾添加一个或多个元素,并返回数组的新的长度,将要添加的元素作为方法的参数传递
pop():用于删除数组的最后一个元素,并将被删除的元素作为返回值返回
unshift():向数组开头添加一个或多个元素,并返回新的数组长度
shift():可以删除数组的第一个元素,并将删除的元素作为返回值返回

forEach()方法需要一个函数作为参数,像这种函数有我们创建但不是由我们调用的,称为回调函数。数组中有几个元素函数就执行几次,每次执行时,浏览器会将遍历到的元素以实参的形式传递进来,我们可以定义形参来读取这些内容。
浏览器会在回调函数中传递三个参数:
第一个参数:当前正在遍历的元素
第二个参数:当前正在遍历的元素的索引
第三个参数:正在遍历的数组
forEach只支持IE8以上的浏览器

	var arr=["",""];
	arr.forEach(function(value){
		console.log("a="+a);
	});  
	var result=arr.slice(0,2);//取得第一个和第二个元素

slice():用来从数组中提取指定元素,该方法不会改变原数组
参数:截取开始的位置的索引,包含开始索引;截取结束位置的索引,不包含结束索引。第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
索引可以传递一个复制,如果传递负值,则会从后往前计算

splice():用于删除数组中的指定元素,会影响到原数组,会将指定元素从原数组中删除,并将删除元素作为返回值返回
参数:第一个表示删除位置的索引;第二个表示删除的数量;第三个及以后:可以传递一些新的元素,这些元素将会自动插入到删除的开始位置索引前边

concat()可连接两头各会多个数组,并将新的数组返回,该方法不会对原数组产生影响

	var result =arr.concat(arr1,arr2,"jhg"): //arr,arr1,arr2均为数组
	arr.join("@-");

join():可将数组转换为字符串;该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回
在join()中可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符,
如果不指定连接符,则默认使用,作为连接符
·
reverse():该方法用来反转数组,该方法会直接修改原数组
sort():可用来对数组的元素进行排序,也会影响原数组

call()和apply():这两个方法都是函数对象的方法,需要通过函数对象来调用
当对函数调用这两个方法时,都会调用函数执行
在调用call(),apply()时可将一个对象指定为第一个参数,此时这个对象将会成为函数执行时的this

	function fun(){
	}
    fun.apply();

在调用函数时,浏览器每次都会传递两个隐含的参数:函数的上下文对象this;封装实参的对象arguments。
arguments是一个类数组对象,它可以通过索引来操作数据,也可以获取长度,在调用函数时,我们所传递的实参都会在arguments中保存
arguments.length可用来获取实参长度,arguments有一个属性callee,这个属性对应一个函数对象,就是当前正在执行的函数的对象

Data对象:如果使用构造函数创建一个Data对象,则会封装为当前代码执行的时间
创建一个指定的时间对象,需在构造函数中传递一个表示时间的字符串作为参数;日期的格式月份/日/年 时:分:秒

	var a=new Date();
	var a=new Date("12/05/2020  12:5:17");      

Math:和其它对象不同,它不是一个构造函数,不用创建对象,它属于一个工具类

JS中提供了三个包装类,通过这三个包装类可将基本数据类型转换为对象
String():可将基本数据类型的字符串转换为String对象
Number():可将基本类型的数字转换为Number对象
Boolean():可将基本数据类型的布尔值转换为Boolean对象
·
正则表达式用于定义一些字符串的规则,计算机可根据正则表达式,来检查一个字符串是否符合规则,获取将字符串中符合规则的内容提取出来

   //创建正则表达式的对象
   //var 变量=new  RegExp("正则表达式","匹配模式");
	var reg=new RegExp("a"); //这个正则表达式可以检查一个字符串中是否含有a
	匹配模式的值可以是:“i”忽略大小写,“g”全局匹配模式

正则表达式的方法:test()可用来检查一个字符串是否符合正则表达式的规则,如果符合则返回true,否则false

使用字面量来创建正则表达式:

	//var 变量=/正则表达式/匹配模式
	var reg=/a/i;
    reg=/a|b/;  // |表示或的意思
    //[ab]==a|b     [a-z]任意小写字母 
	reg=/a[bd]c/;  //字符串中是否含有abc或adc
	reg=/[^ab]/;  //[^]除了
	console.log(reg.test("abc"));

split():可将一个字符串拆分为一个数组

	var str="1ag4h5k";
	var result=str.split(/[a-z]/);  //根据任意字母来将字符串拆分

search()搜索字符串中是否含有指定内容
如果搜索到指定内容,则返回第一次出现的索引,如果没有搜索返回-1,它可以接受一个正则表达式作为参数

match():可根据正则表达式,从一个字符串中将符合条件的内容提取出来
默认情况下match只会找到第一个符合要求的内容,找到以后就停止检索,我们可设置正则表达式为全局匹配模式,这样会匹配到所有的内容
match()会将匹配到的内容封装到一个数组中返回

replace():可以将字符串中指定内容替换为新的内容;默认只会替换第一个
参数 :1.被替换的内容;2.新的内容

	var str="1fw4g25sh6h7";
	result=str.replace(/[a-z]/gi,"@");

通过量词可以设置一个内容出现的次数,量词只对它前边的一个内容起作用
{n}正好出现几次
{1,n}表示1-n次
{m,}m次以上

	reg=/ab{1,2}/
	/^a/ 表示以a开头
	/a$/表示以a结尾

检查一个字符串中是否有.
.表示任意字符,在正则表达式中使用\作为转义字符,.表示.

\w:任意字母,数字,_
\W:除了字母,数字_
\d:任意数字
\D:除了任意数字
\s:空格
\S:除了空格
\b:单词边界
\B:除了单词边界

	reg=/\bchina\b/;

DOM
查询:

	<body>
		<button id="btn">按钮</button>
		<script type="text/javascript">
		//获取按钮对象
			var btn=document.getElementById("btn");
			//为按钮的对应事件绑定处理函数的形式来响应事件,当事件触发时,其对应的函数将会被调用
			btn.onclick=function(){
				alert("ksdh");
			};
		</script>
	</body>     






<head>
	//onload事件会在整个页面加载完成后才触发
	//为window绑定一个onload事件,该事件对应的响应函数将会在页面加载完成后执行,确保代码执行时所有的DOM对象已经加载完毕 
	window.onload=function(){
		var btn=document.getElementById("btn");
		btn.onclick=function(){
				alert("ksdh");
			};
	};
</head>
<body>
	<button id="btn">按钮</button>
</body>           

获取元素节点:通过document对象调用
getElementById()通过id属性获取一个元素节点对象
getElementsByTagName():通过标签名获取一组元素节点对象
getElementsByName():通过name属性获取一组元素节点对象
innerHTML通过这个属性可以获取到元素内部的HTML代码 ,对于自结束标签没有意义,如果需要读取元素节点属性,直接用元素.属性名;注意:class属性不能采用这种方式,读取class属性时需使用元素.className
innerText:该属性可获得元素内部的文本内容

获取元素节点的子节点:通过具体的元素节点调用
getElementsByTagName():返回当前节点的指定标签名后代节点
childNodes:表示当前节点的所有子节点;childNodes属性会获取包括文本节点在内的所有节点,DOM标签间的空白也会当成文本节点
children:获取当前元素的所有子元素
firstChild:表示当前节点的第一个子节点
firstElementChild:获取当前元素的第一个子元素,IE8及以下不支持
lastChild:表示当前节点的最后一个节点

获取父节点和兄弟节点:通过具体的节点调用
parentNode:表示当前节点的父节点
previousSibling:表示当前节点的前一个兄弟节点,IE8及以下不支持
previousElementSibling获取前一个兄弟元素
nextSibling:表示当前节点的后一个兄弟

在事件响应函数中响应函数是给谁绑定的this就是指谁

	var body=document.body;  //它保存的是body的引用
	var html=document.documentElement;    //保存的是html根标签
	var all=document.all;		//代表页面中所有内容
	var div=document.querySelector("");  //需要一个选择器的字符串作为参数,可根据一个CSS选择器来查询一个元素节点对象

document.createElement()可用于创建一个元素节点对象,它需要一个标签名作为参数,将会根据该标签名创建元素节点对象,并将创建好的对象作为返回值返回
document.createTextNode()可用来创建一个文本节点对象,需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回
appendChild():向一个父节点中添加一个新的子节点,
用法:父节点.appendChild(子节点)
insertBefore():可在指定的子节点前插入新的子节点
用法:父节点.insertBefore(新节点,旧节点)
replaceChild():可使用指定的子节点替换已有的子节点
用法:父节点.replaceChild(新节点,旧节点)
removeChild():可删除一个子节点
用法:父节点.removeChild(子节点 )

confirm()用于弹出一个带有确认和取消按钮的提示框,需要一个字符串作为参数,该字符串将会作为提示文字显示出来,如果用户点击确认则会返回true,点击取消则会返回false

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值