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+" 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+" 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方法体}}
];
调用:
对象数组名[下标].属性名;
对象数组名[下标].方法名;