JavaScript的String 对象
charAt(index):获取指定索引处的字符
concat(str) :字符串拼接功能
substring(beginIndex,endIndex):截取,从指定位置开始截取到指定位置接收(不包含endIndex,而是endIndex-1)
其他功能
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript内置对象title>
<script>
//在Js中如何创建字符串对象
//var 对象名 = new String("字符串") ;
var s1 = new String("hello") ;
var s2 = new String("hello") ;
document.write((s1==s2)+"
") ; //比较是两个对象的地址值是否相同,false
//js中的valueof()比较的是两个js对象的原始值是否相同
document.write((s1.valueOf() == s2.valueOf())+"
") ;
document.write("
") ;
//Js中创建对象String,简写格式就直接 字符串常量赋值给变量
var s3 = "hello张三" ;
var s4 = "hello张三" ;
document.write((s3==s4)+"
") ;
document.write("
") ;
//常用的方法在js中
var str = "helloworldJavaEE" ;
//charAt(index):获取指定索引处的字符
document.write("指定索引处的字符为："+str.charAt(4)+"
") ;
//concat 方法（String）:字符串拼接功能
document.write("字符串拼接后为："+str.concat("豆三岁")+"
") ;
//fontcolor 方法:给字符串颜色标记 ("参数英文单词或者#xxxxxx")
document.write("字符串颜色为："+str.fontcolor("greenyellow")+"
") ;
//substring(start, end):截取功能 跟Java中的String一样
document.write("截取后的字符串为："+str.substring(5,10)+"
") ;
//split 方法:拆分,分割,获取到的字符串数组
var str2 = "JavaEE-PhP-Go-R-C-C++" ;
var strArray = str2.split("-") ;
//遍历 for-in语句
for(var i in strArray){
document.write(strArray[i]+" ");
}
script>
head>
<body>
body>
html>
使用js这种方式如何定义Person对象 ,还需要使用Js创建Person对象;
四种方式
1)类似于Java中有参构造
2)类似于Java中的无参构造
3)使用Object对象(代表所有js对象)
4)字面值的方式: "Json数据格式" (后期的重点)
DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript自定义对象title>
<script type="text/javascript">
/* 方式一 */
function student01(id,name,age){
this.id = id;
this.name = name;
this.age = age;
this.work = function(workName){
document.write(this.name + "的工作是：" + workName + "
")
}
}
var stu01 = new student01(183010207,"豆三岁",22);
document.write("学号：" + stu01.id + "，姓名：" + stu01.name + "，年龄：" + stu01.age + "
");
stu01.work("学习");
document.write("
")
/* 方式二 */
function student02(){}
var stu02 = new student02();
stu02.id = 183010201
stu02.name = "柠柠融";
stu02.age = 21
stu02.live = function(liveStyle){
document.write(stu02.name + "的生活方式是：" + liveStyle)
}
document.write("学号：" + stu02.id + "，姓名：" + stu02.name + "，年龄：" + stu02.age + "
");
stu02.live("睡觉");
document.write("
")
/* 方式三 */
var stu03 = new Object();
stu03.id = 183010202
stu03.name = "豆小宝贝";
stu03.age = 18
stu03.likeWomanPeople = function(lover){
document.write(stu03.name + "喜欢的人是：" + lover)
}
document.write("学号：" + stu03.id + "，姓名：" + stu03.name + "，年龄：" + stu03.age + "
");
stu03.likeWomanPeople("赵大宝贝");
document.write("
")
/* 方式四 */
var stu04 = {
"id" : 183010203,
"name" : "赵大宝贝",
"age" : 18,
"likeManPeople":function(lover){
document.write(stu04.name + "喜欢的人是：" + lover) ;
}
}
document.write("学号：" + stu04.id + "，姓名：" + stu04.name + "，年龄：" + stu04.age + "
");
stu04.likeManPeople("豆小宝贝");
document.write("
")
script>
head>
<body>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>json_复杂类型title>
<script>
//复杂格式
//var 对象名 = [{},{},{}...] 描述类似数组或者集合
var students =
[
{"name":"高圆圆","age":42,"gender":"女","address":"西安市"},
{"name":"王宝强","age":35,"gender":"男","address":"北京市"},
{"name":"文章","age":32,"gender":"男","address":"渭南市"},
{"name":"姚笛","age":25,"gender":"女","address":"西安市"}
] ;
//json对象[索引值].key 获取对应value值
document.write(students[0].address+"
") ;
document.write(students[1].address+"
") ;
document.write(students[2].address+"
") ;
document.write(students[3].address+"
") ;
//第三方解析方式:jsonlib,gson,fastJson,Springmvc的jackson这些jar包
//后端将List---->json
//后端Map----Json
//后端实体----Json {"username":"xx","password":"xxx"}
script>
head>
<body>
body>
html>
什么是DOM,核心思想 :获取元素对象(标签对象),改变标签对象属性
举例:
img src属性
input type="text" value属性
div/span常见的标签都有 innerHTML或者innerText属性
....
推荐的方式: (原生Js)
使用document的方法来获取标签对象
document.getElementById("id属性值") ; 推荐
document.getElementsByClassName("所有的同名的class属性值")
JavaEE中有一种技术:dom4j ---- dom for java
就是后期处理xml文件读取使用dom4j(基于面向对象编程思想)
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通过docuement方法获取标签对象title>
head>
<body>
用户名:<input type="text" id="username"
class="cl_username" name="name"
placeholder="请输入用户名" onblur="getUserName()" />
body>
<script>
//2)事件监听器:编写一个函数
function getUserName(){
//alert("触发了失去焦点事件了") ;
//方式1:在标签中给定id属性值,必须唯一 (推荐)
//document.getElementById("id属性值") 获取标签对象
var username = document.getElementById("username") ;
//方式2:docuement.getElementsByClassName("class属性值") ; 获取的标签对象列表
//var username = document.getElementsByClassName("cl_username")[0] ;
//方式3:docuement.getElementsByName("name属性值") ;//获取的标签对象列表
//var username = document.getElementsByName("name")[0] ;
//方式4:通过标签名称获取标签对象
//docuement.getElementsByTagName("同名的标签名称") ; //返回的标签对象列表
//var username = document.getElementsByTagName("input")[0] ;
//标签对象获取value属性:内容可以获取到
alert(username.value) ;
}
script>
html>
| 事件名称 | 描述 |
|---|---|
| onchangr | HTML 元素内容改变 |
| onclick | 用户点击 HTML 元素 |
| ondbclick | 用户双击 HTML 元素 |
| onmouseover | 用户将鼠标移入一个HTML元素中 |
| onmousemove | 用户在一个HTML元素上移动鼠标 |
| onmousemove | 用户从一个HTML元素上移开鼠标 |
| onmousemove | 键盘 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
| onsubmit | 表单提交 |
| onfocus | 获取焦点 |
| onblur | 失去焦点 |
| onchange | 选项卡发生变化 |
点击相关的
单击事件 (重点)
双击事件
焦点事件 (重点)
获取焦点 onfocus
失去焦点 onblur
选项卡发生变化的事件 (重点) onchange
select标签 下拉菜单
option 下拉选项
鼠标经过事件
鼠标移出事件
页面载入事件 (重点)
onload:在body中用,表示页面的body内容加载完毕触发的函数
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<input type="button" name="" id="" value="点击一下" onclick="textButton()"/><br />
<input type="button" name="" id="" value="双击一下" ondblclick="textDBbutton()"/><br />
<select onchange="testChange()" id="testChangProvince">
<option value="请选择">请选择option>
<option value="陕西省">陕西省option>
<option value="山西省">山西省option>
<option value="广东省">广东省option>
select>
<select id="city">
select>
body>
<script type="text/javascript">
//单击事件
function textButton(){
location.href="text_button点击事件.html";
}
//双击事件
function textDBbutton(){
location.href="text_button点击事件.html";
}
//选项卡事件
function testChange(){
var testchangprovince = document.getElementById("testChangProvince").value;
var city = document.getElementById("city");
city.innerHTML = "";
if(testchangprovince == "陕西省"){
var arr = ["西安市", "咸阳市", "宝鸡市", "延安市", "榆林市", "渭南市", "商洛市", "安康市", "汉中市"];
for(var i = 0; i < arr.length; i++){
city.innerHTML += "+arr[i]+"";
}
}
if(testchangprovince == "山西省"){
//太原、大同、朔州、忻州、阳泉、吕梁、晋中、长治、晋城、临汾、运城
var arr = ["太原市", "大同市", "朔州市", "忻州市", "阳泉市", "吕梁市", "晋中市", "长治市", "晋城市", "临汾市", "运城市"];
for(var i = 0; i < arr.length; i++){
city.innerHTML += "+arr[i]+"";
}
}
if(testchangprovince == "广东省"){
//广州、深圳、佛山、东莞、中山、珠海、江门、肇庆、惠州、汕头、潮州、揭阳、汕尾、湛江、茂名、阳江、云浮、韶关、清远、梅州、河源
var arr = ["广州市", "深圳市", "佛山市", "东莞市", "中山市", "珠海市", "江门市", "肇庆市", "惠州市", "汕头市", "潮州市",
"揭阳市", "汕尾市", "湛江市", "茂名市", "阳江市", "云浮市", "韶关市", "清远市", "梅州市", "河源市"];
for(var i = 0; i < arr.length; i++){
city.innerHTML += "+arr[i]+"";
}
}
}
script>
html>
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body onload="init()">
<input type="button" value="点我试试" id="btn" /><br/>
<div id="div1" onmouseover="testMouseOver()" onmouseout="testOut()">
<img src="img/2.jpg" width="100%" height="100%" />
div>
body>
<script>
//页面载入事件
function init(){
document.getElementById("btn").onclick=function(){
alert("点击事件触发了") ;
}
}
//鼠标移出事件
function testOut(){
alert("触发鼠标移出事件") ;
}
function openHtml(){
location.href="01.html" ;
}
//鼠标经过事件
function testMouseOver(){
//setTimeout("任务函数()",毫秒值) ; 经过这个毫秒值之后执行一次任务
setTimeout("openHtml()",3000);
}
script>
html>
正则表达式:js引擎是能够识别这些语法
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)匹配字符相关的
X[a-z] :X字符可以是a-z中任何的一个小写字母字符
X[0-9] :x字符是一个数字字符
X[A-Za-z0-9_]:X字符可以是任意的大小字母均可或者数字或者_
正则表达式:有一个函数 test("接收用户输入的文本框的内容字符串")匹配是否成功
创建一个正则规则:var 正则对象名 = /书写正则语法/ ; 不完全匹配 (会出现安全漏洞!)
正则对象名.test(字符串),true,匹配成功,false,失败!
在Java语言中和在javascript中,如果要完全匹配,必须加入边界匹配器
^:以....开头
$:以...结尾
var 正则表达式对象 = /^ 正则语法 $/ ;
//创建正则对象
//var reg = /[0-9]{2}/ ;
var reg = /^[0-9]{2} $/
//创建一个字符串
var str = "asd12mns" ;
if(reg.test(str)){
alert("条件成立");
}else{
alert("条件不成立") ;
}
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript的表单校验title>
head>
<body>
<form action="server.html" method="get" onsubmit=" return checkAll()">
用户名:<input type="text" id="username" placeholder="请输入用户名" onblur="checkUserName()" /><span id="userTip">span><br/>
密 码:<input type="password" id="pwd" placeholder="请输入密码" onblur="checkPwd()" /><span id="pwdTip">span><br/>
确认密码:<input type="password" id="repwd" placeholder="两次密码一致" onblur="checkRepwd()" /><span id="repwdTip">span><br/>
邮 箱:<input type="text" id="email" placeholder="请输入邮箱" onblur="checkEmail()" /><span id="emailTip">span><br/>
<input type="submit" value="注册" />
form>
body>
<script>
//校验用户名
function checkUserName(){
//1)获取 用户名的内容 (id="username"的input标签对象同时获取内容)
var username = document.getElementById("username").value ;
//2)定义用户名的正则规则:用户名:4-14位的数字或者字母(不区分大小写)组成
var reg = /^[A-Za-z0-9]{4,14}$/ ;
//3)获取 id="userTip"的span标签对象
var span = document.getElementById("userTip") ;
//4)正则表达式校验用户名的内容 username
if(reg.test(username)){
//成立
span.innerHTML = "√".fontcolor("green") ;
return true ;
}else{
//不成立
span.innerHTML = "×".fontcolor("red") ;
return false ;
}
}
//校验密码
function checkPwd(){
//1)获取密码输入框的内容 dom *** 作
var pwd = document.getElementById("pwd").value;
//2)密码正则:6-10位的数字或者英文大小字母组成
var reg = /^[A-Za-z0-9]{6,10}$/
//3)获取id="pwdTip"所在的span标签对象
var span = document.getElementById("pwdTip") ;
//4)正则校验
if(reg.test(pwd)){
//成立
span.innerHTML = "密码格式满足".fontcolor("green") ;
return true ;
}else{
//不成立
span.innerHTML = "不符合格式".fontcolor("red") ;
return false ;
}
}
//校验确认密码
function checkRepwd(){
//1)获取密码框的内容
var pwd = document.getElementById("pwd").value;
//2)获取当前确认密码框的内容
var repwd = document.getElementById("repwd").value ;
//3)获取id="repwdTip" 所在的span标签对象
var span = document.getElementById("repwdTip") ;
//4)判断
if(pwd == repwd){
//成立
span.innerHTML = "两次密码一致".fontcolor("green") ;
return true ;
}else{
//不成立
span.innerHTML = "两次密码不一致".fontcolor("red") ;
return false ;
}
}
//校验邮箱
function checkEmail(){
//1)获取邮箱的内容
var email = document.getElementById("email").value ;
//2) 邮箱的正则:数字或者字母@数字或者字母.com/.cn/.com.cn
var reg = /^[A-Za-z0-9]+@[A-Za-z0-9]+(\.[a-z]{2,3}){1,2}$/
//3)获取id="emailTip"的span标签对象
var span = document.getElementById("emailTip") ;
//4)校验
if(reg.test(email)){
//成立
span.innerHTML="邮箱格式正确".fontcolor("green") ;
return true ;
}else{
//不成立
span.innerHTML="不满足格式,重新输入".fontcolor("red") ;
return false ;
}
}
//将所有的表单项的都满足条件,才能提交
function checkAll(){
if(checkUserName() && checkPwd() && checkRepwd() && checkEmail()){
return true ;
}else{
return false ;
}
}
script>
html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）