【Js内置String对象 自定义对象 DOM操作 常见事件编程 正则表达式 前端常见页面跳转方式】

---

一、js内置String对象

常用方法：

	var a="hell-o";
	a.charAt(index);		获得指定下标的字符
	a.valueof(） 获得字符串的原始值
	a.concat(字符串） 	在字符串后面追加内容
	a.fontcolor（颜色） 设置字体颜色
	a.substring(startindex,endindex)		截取指定下标字符串
	a.split("-").   分割字符串为字符串数组
	
	注意:当调用valueof方法使用 == 比较new出来的两个string对象的值时,会跳过地址,只比较原始值

代码如下(示例):

<script>
string str1=new string("hello");
string str2=new string("hello");
document.write((str1 == str2)+"<br/>") //运行结果:false
document.write((str1.valueof() == str2.valueof())+"<br/>")//运行结果true
</script>

二、j s自定义对象

1.类似于java有参构造

语法：
创建
function 对象类型（属性1，属性2…){
this.成员属性1=属性1；
this.成员属性2=属性2；
…
this.成员方=function(参数1，参数2…){
方法体
}
}
调用
var 对象名=new 对象类型（属性值1，属性值2…）;
对象名.属性1；
对象名.成员方法（实参1，实参2…）；
代码如下（示例）：

<script>
function Person(name,age,gender){
	this.name=name;
	this.age=age;
	this.gender=gender;
	this.play=function(toy){
		document.write(name+"play"+toy);
	}
}
var p=new Person(“poppy”,23,"female");
document.write("name:"+p.name+",age:"+p.age+",gender:"+p.gender+"<br />");
p.play("plane-model")
/*
运行结果:
name:poppy,age:23,gender:female
poppy play plane-model
*/
</script>

2.类似于java无参构造

语法：
创建对象
function 对象类型（）{}
var 对象名=new 对象类型（）；
添加属性方法
对象名.属性名=属性值
对象名.方法名=function(参数1，参数2){
方法体
}
调用
对象名.属性名；
对象名.方法名（实参1，实参2…）;

代码如下（示例）：

<script>
	function Person2(){}
	var p2=new Person2();
	p2.name="poppy";
	p2.age=18;
	p2.learn=function(type){
		document.write(p2.name+"&nbsp;learn"+type)
	}
	p2.learn("javaEE");
</script>

3.使用Object对象（代表所有j s对象）

语法：
创建
var 对象名=new Objecy(); 类似于java向下转型

		添加属性方法
		对象名.属性名=属性值；
		对象名.方法名=function(参数1，参数2...){ 方法体}
		
		调用
		对象名.属性名；
		对象名.方法名（实参1，实参2...）;

<script>
var p3=new Object();
	p3.name="poppy";
	p3.age=20;
	p3.learn=function(type){
		document.write(p3.name+"&nbsp;learn"+type)
	}
	p3.learn("javascript");
</script>

4.字面值方式：“Json数据格式”

语法：创建对象,添加属性方法同时进行

	 简单格式
	var  对象名={
	属性名1：属性值1，属性名2:属性值2,方法名1:function(参数1，参数2...){方法体}
	};
	
	调用
	对象名.属性名；
	对象名.方法名（实参1，实参2...）

<script>
var p3={
			"name":"kiki",
			"play":function(toy){
			document.write(p3.name+"play"+toy)
				}
			};
			p3.play("bear");
</script>

Json复杂格式
var 对象名[
				{属性名1:属性值1,属性名2:属性值2,方法名1:function(参数1,参数2...){方法体}...},
				{属性名1:属性值1,属性名2:属性值2,方法名1:function(参数1,参数2...){方法体}...},
				{属性名1:属性值1,属性名2:属性值2,方法名1:function(参数1,参数2...){方法体}...}
				...
				]
	调用:对象名[下标].属性名;
			对象名[下标].方法名(实参1,实参2...)

<script>
var students=[
				{"name":"kiki","age":18,"learning":function(language){document.write(this.name+" learning "+language+"<br/>")}},
				{"name":"poppy","age":23,"play":function(toy){document.write(this.name+" play "+toy+"<br/>")}},
				{"name":"byte","age":20,"eating":function(food){document.write(this.name+" eat "+food+"<br/>")}}
					]
	students[0].learning("english");
	students[1].play("bear");
	students[2].eating("fish");

/*
运行结果:
kiki learning english
poppy play bear
byte eat fish
*/
</script>	

第三方解析方式:jsonlib , gson , fastJson , Springmvc的jackson的这些jar包
应用场景:
后端将 list – 转为–>json
后端将 Map – 转为–>json
后端将 实体对象 – 转为–>json
学习网站推荐:layui – 学习–示例数据表格
后端管理:通过数据表格,对用户\对商品\对订单的增删改查

三、js中DOM操作

1.什么是DOM？其核心思想是什么？

1) DOM(document object model):基于文档对象模型编程

		浏览器在解析html文档时,js引擎会将网页中的所有标签封装为标签对象,形成一种树状结构,可以使用一些方法获取标签对象,并改变其特有属性值

2) 核心思想：获取元素对象（标签对象），并改变标签对象的属性

3) 应用场景：

	 				点击图片进行切换
					给标签设置文本内容

2.获取标签对象方式

1)标签对象简介

		标签对象又称节点对象:浏览器在解析html网页文档时,,会被js引擎封装成标签对象/节点对象,形成一种树状结构

2)获取标签对象作用

		通过标签对象,来改变该标签对象中的一些特有属性,来达到js的某种效果
		parentNode:父节点(父标签对象)
		firstChild:第一个子节点对象
		lastChild:最后一个子节点对象
		nextSibling:下一个兄弟节点
		previousSibling:前一个兄弟节点

3）常用获取标签对象的4种方式

1）通过id属性值获取(id值必须唯一)

		语法:
		var 标签对象名 = document.getElementById("id属性值");

2）通过class属性值获取

		var 标签对象数组名 = document.getElementsByClassName("class属性值");
		var 标签对象名 = document.getElementsByClassName("class属性值")[标签对象对应下标];

3）通过标签名获取

		var 标签对象数组名 = document.getElementsTayName("标签名");
		var 标签对象名 = document.getElementsByTagName("class属性值")[标签对象对应下标];

4）通过name属性值获取

		var 标签对象数组名 = document.getElementByName("name属性值");
		var 标签对象名 = document.getElementsByName("class属性值")[标签对象对应下标];
	
		解释说明:document代表当前整个html文档

四、常见的事件编程

1)点击事件

οnclick=“触发事件函数”; //单击触发

οndblclick=“触发事件函数”; //双击触发

2)焦点事件

unblur=“触发事件函数”; //取消焦点触发

οnfοcus=“触发事件函数”; //获取焦点触发

3)选项卡发生变化事件(select标签中使用)

οnchange=“触发事件函数”; //选项卡发生变化时触发

4)鼠标经过事件

οnmοuseοver=“触发事件函数”; //鼠标经过时触发

5)鼠标移出事件

οnmοuseοut=“触发事件函数”; //鼠标移出时触发

6)页面加载完事件(body标签中使用)

οnlοad=“触发事件函数”; //body页面全部加载完后触发

7)表单提交事件

οnsubmit=“return 触发事件函数”; //form表单提交时触发(注意此时触发事件函数需要返回的时boolean值)

使用匿名对象方式编写触发事件函数

	语法:
			以单击事件为例
			document.getElementById("id属性值").onclick=function(){触发事件代码}	

<body onload="totalload()">
<input type="button" id="btn"/>
</body>
<script>
	function totalload(){
		document.getElementById("btn").onclick=function(){
		alert("body页面加载完,点击事件被触发了")
		}	
}
</script>

其他事件编程也可以使用匿名对象方式编写

五、正则表达式

1)数量词相关

+ * ?

		例:x为任意字符
			x+  : 代表x字符出现一次或者多次
			x*  :代表x字符出现0次或者多次
			x?  :代表x字符出现0次或者1次

2)范围相关

	x(n):代表x字符出现n次
	x(n,):代表x字符至少出现n次
	x(n,m):代表x字符至少出现n次,不多于m次

3)匹配字符相关

	[0-9]
	[a-z]
	[a-zA-Z0-9_]

六、前端常见页面跳转方式

1)a标签

		<a href="页面地址"></a>

2) 通过window对象下的location对象的href属性

	window.location.href("页面地址");                  (重新载入一个新的地址,此处window可以省略不写)

3)通过window对象下的open属性

	window.open("新页面地址","打开方式--是否新窗口打开")

七、其他

不同的英文字符串，hashcode值不一样（中文简体字符串与中文繁体字符串可能会相同）
span(行内标签)：主要做提示用
url:统一资源定位符

与poppy一起学习

了解j d k8的jvm内存 , jdk10之后jvm有变化

事件编程中的触发事件使用匿名对象方式编写

温馨提示:建议使用2019.1.4idea版本

默写

1什么是Js的dom

	dom全称document object model,是一种基于文档对象模型的编程
	在解析html标签时,浏览器的js引擎会将每一个标签,分装为标签对象/元素对象/节点对象,形成树状结构,使用一些方法获取标签对象,改变其他有属性值!

2获取标签对象,通过document方法有几种方式,列举

	共计4种
	1)通过id获取
		var 标签对象名=document.getElementById("id属性值");
	2)通过class获取所有同名class的标签对象
		var 标签对象数组名=document.getElementsByClassName("class属性值");
		
	3)通过标签名获取所有同名标签的对象
		var 标签对象数组名=document.getElementsByTayName("标签名");
	4)通过name获取所有name属性值相同的标签对象
		var 标签对象数组名=document.getElementsByName("name属性值");

3获取焦点和失去焦点事件,选项卡发生变化的事件,列举

	获取焦点:onfocus

代码如下(示例):

<body>
<font>用户名:</font>
<input type="text" placeholder="请输入用户名" name="username" id="userid" onfocus="spanusername()"/>
<span id="spanid"></span>
</body>
<script>
	function spanusername(){
	var username=document.getElementById("userid").value;
	var span=document.getElementById("spanid");
	span.innerHTML=username;
	}
</script>

	失去焦点:onblur
代码如下(示例):

	选项卡发生变化:onchange
代码如下(示例):

<body>
	<select id="selid" onchange="" >
		<option value="蔬菜" >请选择</option>
		<option value="蔬菜" >蔬菜</option>
		<option value="水果">水果</option>
		<option value="鲜花">鲜花</option>
	</select>
	<select id="selid2">

	</select>
</body>
<script>
var typename=document.getElementById("selid").value;

</script>

4表单标签中onsubmit事件只的是什么?

	onsubmit="return j监听事件函数名()" 事件是指表单是否提交成功
	监听事件会返回boolean值,true提交成功,false提交失败

5js中自定义对象有哪些方式

	共计4中方式
	1)类似于Java有参构造
		语法;function 对象类型(属性1,属性2...){
			this.成员属性1=属性1;
			this.成员属性2=属性2;
			...
			this.成员方法1=function(参数1,参数2...){
					js方法体代码
			}
			...
		}
		
			var 对象名=new 对象类型(属性值1,属性值2...);
		调用:
			对象名.成员属性名1;
			对象名.成员属性名2;
			对象名.成员方法(实参1,实参2...);
	2)类似于java无参构造
		语法:function 对象类型(){}
		var 对象名= new 对象类型();
		对象名.属性名1=属性值1;
		对象名.方法名1=function(参数1,参数2...){
			js方法代码
		}
		调用:
		对象名.属性名1;
		对象名.方法名1(实参1,实参2...)
3)通过object对象(代表所有对象模板)
	var 对象名=new Object();
	对象名.属性名1=属性值1;
	对象名.方法1=function(参数1,参数2...){
		js方法体
	}
		调用:
		对象名.属性名1;
		对象名.方法1(实参1,实参2...)	;
4)通过字面量值的方式,Json(轻量级数据交互格式---速度非常快)
	简单格式的Json
	var 对象名={
				"属性名1":属性值1,
				"属性名2":属性值2,
				"方法名1":function(参数1,参数2...){js方法体}
				}

		 对象名.属性名1;
		 对象名.方法名1(实参1,实参2...)

复杂的Json格式
var 对象数组名 =[
			{
				"属性名1":属性值1,
				"属性名2":属性值2,
				"方法名1":function(参数1,参数2...){js方法体}},
				
				
			{	"属性名1":属性值1,
				"属性名2":属性值2,
				"方法名1":function(参数1,参数2...){js方法体}},
				
			{	"属性名1":属性值1,
				"属性名2":属性值2,
				"方法名1":function(参数1,参数2...){js方法体}}
			];
	调用:
	对象数组名[下标].属性名;
	对象数组名[下标].方法名;