js_内置对象(跟着宝哥学java：ee之js)：js内置对象、windows对象、location对象、history对象、document对象、document对象实现crud增删改查
js_内置对象(跟着宝哥学java：ee之js)：js内置对象、windows对象、location对象、history对象、document对象、document对象实现crud增删改查
·
1 浏览器内置对象
内置对象：浏览器加载页面成功后自动创建的一系列对象
这些对象js可以直接使用 用于实现其页面动态效果
浏览器内置对象：浏览器通过内部解析html的程序
html解析：dom解析 document object model
把文档本身及其所有的元素解析成对象 这些有关系的对象形成dom树
2 DHTML
动态的html:::Dynamic HTML
DHTML由：html+css+js+dom解析
html语言提供标签 封装数据
css语言提供属性 控制样式
js语言提供对象的逻辑判断 实现元素的动态效果
dom技术：把html标签解析为对象
html+css+js：：前段三剑客
ajax=DHTML+ActiveXObject对象
注意：内置对象的使用查询：dhtml的api
class Student{}
class Person{}
class Teacher{
//属性
int age=41;
String name="苗天宝";
//集合
float[] scores;
List friends;
List StudentList;
//事件
onXxxx;
//方法
void show(){}
void add(){}
//对象
Person mather;
Person wife;
}
3 window
<body>
<input type="button" value="测试moveBy" onclick="test01MoveBy()"/><br/><!--给按钮注册点击事件-->
<input type="button" value="测试moveTo" onclick="test01MoveTo()"/><br/>
<hr/>
<input type="button" value="测试setTimeout" onclick="test02SetTimeout()"/><br/>
<input type="button" value="测试setInterval" onclick="test02SetInterval()"/><br/>
<input type="button" value="测试ClearTimeout" onclick="test02ClearTimeout()"/><br/>
<input type="button" value="测试ClearInterval" onclick="test02ClearInterval()"/><br/>
<hr/>
<input type="button" value="测试open" onclick="test03Open1()"/><br/>
<input type="button" value="测试close" onclick="test03Close()"/><br/>
<script type="text/javascript">
/*
window对象：：：窗口
注意：window可以省略
属性：
screenLeft: 获取窗口距左的位置
screenTop: 获取窗口距上的位置
方法：
1：弹出框
window.alert( [sMessage])：只有确定按钮
bConfirmed = window.confirm([sMessage])：有确定和取消按钮 可以获取其选择
vTextData = window.prompt( [sMessage] [, sDefaultValue])：可以获取客户的输入 第二个参数是制定默认值
2：移动：浏览器兼容性很差
window.moveBy(iX, iY)：按指定增量移动
window.moveTo(iX, iY)：移动到指定位置
3：延迟执行、取消执行
window.clearInterval(iIntervalID):取消setInterval的延迟执行
window.clearTimeout(iTimeoutID):取消setTimeout的延迟执行
iTimerID = window.setInterval(vCode, iMilliSeconds [, sLanguage])：每iMilliSeconds后执行一次vCode
iTimerID = window.setTimeout(vCode, iMilliSeconds [, sLanguage])：等待iMilliSeconds后执行一次vCode
4：打开和关闭窗口
window.close()
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])
事件：
1 ： onload 文档加载成功
练习：抽奖
*/
//属性
//alert(window.screenLeft+":::"+screenTop);
//1：弹出框
//alert("window.alert");
//var b=window.confirm("window.confirm::1+1=2?");
//alert("b="+b);
//var v=window.prompt( "window.prompt 你几岁了?","19");
//alert("v他输入的结果是："+v);
function test01MoveBy(){
window.moveBy(100,100);
}
function test01MoveTo(){
window.moveTo(300,300);
}
var id1,id2;
function test02SetTimeout(){
id1=window.setTimeout(test,3000);
}
function test02SetInterval(){
id2=window.setInterval(test,3000);
}
function test02ClearTimeout(){
window.clearTimeout(id1);
}
function test02ClearInterval(){
window.clearInterval(id2);
}
function test(){
alert('你好！'+new Date().getTime());
}
function test03Open1(){
window.open("广告.html",null,"height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
}
function test03Close(){
window.close();
}
window.onload=function(){//文档加载成功事件
var but1=document.getElementById("but1");
alert(but1.value);
}
</script>
<input type="button" value="没有注册事件的按钮" id="but1"/><br/>
</body>
- 广告.html
<h1>跟着宝哥学java</h1>
<input type="button" value="测试close" onclick="test03Close()"/><br/>
<input type="button" value="测试moveTo" onclick="test03MoveTo()"/><br/>
<input type="button" value="测试moveBy" onclick="test03MoveBy()"/><br/>
<script type="text/javascript">
function test03Close(){
window.close();
}
function test03MoveTo(){
window.moveTo(100,300);
}
function test03MoveBy(){
for(var i=0;i<10000;i++){
if(i%100==0){
window.moveBy(0,50);
window.moveBy(50,0);
window.moveBy(0,-50);
window.moveBy(-50,0);
}
}
}
window.onload=function(){
window.setInterval(change,1000);
}
function change(){
var x=parseInt(Math.random()*1000);
var y=parseInt(Math.random()*800);
window.moveTo(x,y);
}
</script>
4 location
<html>
<head>
<title>js04location内置对象</title>
<meta charset="utf-8"/>
<!--等等三秒 跳转到百度-->
<!--
<meta http-equiv="refresh" content="3;url=http://www.baidu.com" />
-->
<style type="text/css">
table{
width:900px;
/*border:1px solid blue;*/
margin:10px auto;
border-collapse:collapse;/*合并相邻单元格之间的边框*/
}
td{
font-size:24px;
padding:10px;
border:1px solid blue;
}
</style>
</head>
<body>
<input type="button" value="测试location:href属性" onclick="test01LocationHref()"/><br/><!--给按钮注册点击事件-->
<input type="button" value="测试location:reload方法" onclick="test01LocationReload()"/><br/>
<script type="text/javascript">
/*
location:地址栏
属性：href:获取和设置地址栏的url
方法：reload:重新加载页面
*/
function test01LocationHref(){
//alert("当前窗口的资源路径：url="+window.location.href);
location.href="http://www.baidu.com";
}
function test01LocationReload(){
location.reload();
}
/*
//等等三秒 跳转到百度
window.οnlοad=function(){
window.setTimeout("location.href='http://www.baidu.com';",3000);
}
*/
</script>
</body>
</html>
5 history
<input type="button" value="测试history" onclick="test01History()"/><br/><!--给按钮注册点击事件-->
<script type="text/javascript">
/*
history:访问历史
属性：length
方法： go(-1)
back()
*/
function test01History(){
//alert("历史记录的长度："+history.length);
//history.go(-1);//等价于点击后退
history.back();
}
</script>
6 document的查询
<html>
<head>
<title>js04document</title>
<meta charset="utf-8"/>
<style type="text/css">
table{
width:900px;
/*border:1px solid blue;*/
margin:10px auto;
border-collapse:collapse;/*合并相邻单元格之间的边框*/
}
td{
font-size:24px;
padding:10px;
border:1px solid blue;
}
.cla1{
border:1px solid blue;
color:red;
}
.cla2{
background:#aaaaaa;
}
</style>
</head>
<body>
<div id="div1">
<!--注释：1-->
名字：<input type="text" name="name" id="text1"/><br/>
年龄：<input type="text" name="age"/><br/>
爱好：篮球<input type="checkbox" name="enjoy" value="lq"/>｜
足球<input type="checkbox" name="enjoy" value="zq"/>｜
排球<input type="checkbox" name="enjoy" value="pq"/>｜
台球<input type="checkbox" name="enjoy" value="tq"/><br/>
省份：<select name="province">
<option value="hn">河南</option>
<option value="hb">河北</option>
<option value="nm">内蒙</option>
<option value="xj">新疆</option>
</select><br/>
<!--注释：2-->
<span id="span1" title="t1"><b>span1</b></span><br/>
<span id="span2" title="t2">span2222</span><br/>
<span id="span3" title="t3" class="cla1" style="font-size:20px;">span33333333</span><br/>
</div>
<input type="button" value="测试document的获取" onclick="test01Get();"/><br/>
<script type="text/javascript">
/*
Dom解析：
Document接口：文档
Elemenet接口：标签
Attribute借口：属性
Text接口： 文本
Content接口：注释
Node接口：是以上接口的父接口
获取相关的方法：
document对象：oElement = document.getElementById(sIDValue)：根据id获取一个
document对象：collObjects = document.getElementsByName(sNameValue)：根据name属性获取一个集合
document对象：collObjects = object.getElementsByTagName(sTagName)：根据标签名获取一个集合
Element对象属性：attributes 属性集合
id 属性id
className 属性class
value 属性value
innerText 获取和设置文本内容
innerHTML 获取和设置内部html代码
parentNode 获取直接父标签
childNodes 只获取所有的直接子元素对象(标签+文本+注释)
children 只获取所有的直接子标签对象
style.xxxx 获取和设置标签的样式xxxx属性
Attribute对象属性：name 属性名
value 属性值
*/
function test01Get(){
//获取<input type="text" name="name" id="text1"/>
var otext=document.getElementById("text1");//通过id获取
otext=document.getElementsByTagName("input")[0];//通过标签名获取
otext=document.getElementsByName("name")[0];//通过name属性获取：：只有表单属性
//alert(otext);//[object HTMLInputElement]
//研究完dhtml的api：标签有那些属性 一般对象就有那些属性
//alert(otext);
//alert(otext.value);
otext.value="你好";
//获取使用属性
var attrArr=otext.attributes;
for(var i=0;i<attrArr.length;i++){
//alert("属性："+attrArr[i].name+"="+attrArr[i].value);
}
//获取<span id="span1" title="t1">span1</span><br/>
var ospan1=document.getElementById("span1");
//alert(ospan1.title);
ospan1.innerHTML="呵呵呵".bold().fontsize(7).fontcolor("red");
//alert("文本内容："+ospan1.innerText);
//alert("内部html代码："+ospan1.innerHTML);
//获取其父亲标签
//alert(ospan1.parentNode.id);
var odiv1=document.getElementById("div1");
//获取所有的子标签
var childArr=odiv1.childNodes;
childArr=odiv1.children;
for(var i=0;i<childArr.length;i++){
//alert(childArr[i]);
}
//获取<span id="span3" title="t3" class="cla1">span33333333</span><br/> 的样式
var ospan3=document.getElementById("span3");
ospan3.className="cla2";//设置class值
alert(ospan3.className);//获取class值
//获取和设置样式属性的值
alert(ospan3.style.fontSize);
ospan3.style.fontSize="30px";
ospan3.style.color="#ff00ff";
}
//1 写一个页面 有个span:实时显示当前时间 和 过年倒计时
//2 计算器的js实现完成
</script>
</body>
</html>
7 document的增删改
<html>
<head>
<title>js04document</title>
<meta charset="utf-8"/>
<style type="text/css">
.cla1{
border:1px solid blue;
color:red;
}
.cla2{
background:#aaaaaa;
}
.cla0{
border:1px solid red;
background:#aaaaaa;
}
div{
border:1px solid blue;
margin:10px auto;
width:1000px;
padding:10px;
}
</style>
</head>
<body>
<div id="div1" class="cla0" style="font-size:30px;color:red;font-weight:bold;">
<!--注释：1-->
名字：<input type="text" name="name" id="text1"/><br/>
年龄：<input type="text" name="age"/><br/>
爱好：篮球<input type="checkbox" name="enjoy" value="lq"/>｜
足球<input type="checkbox" name="enjoy" value="zq"/>｜
排球<input type="checkbox" name="enjoy" value="pq"/>｜
台球<input type="checkbox" name="enjoy" value="tq"/><br/>
省份：<select name="province">
<option value="hn">河南</option>
<option value="hb">河北</option>
<option value="nm">内蒙</option>
<option value="xj">新疆</option>
</select><br/>
<!--注释：2-->
<span id="span1" title="t1"><b>span1</b></span><br/>
<span id="span2" title="t2">span2222</span><br/>
<span id="span3" title="t3" class="cla1" style="font-size:20px;">span33333333</span><br/>
</div>
<div id="div2">
<font color="red" class="cla1">font标签的文本内容</font> 呵呵呵
</div>
<input type="button" value="测试document的获取" onclick="test01Get();"/><br/>
<input type="button" value="测试document的添加" onclick="test02Add();"/><br/>
<input type="button" value="测试document的修改" onclick="test03Update();"/><br/>
<input type="button" value="测试document的删除" onclick="test04Delete();"/><br/>
<script type="text/javascript">
/*
Dom解析：
Document接口：文档
Elemenet接口：标签
Attribute借口：属性
Text接口： 文本
Content接口：注释
Node接口：是以上接口的父接口
获取相关：
document对象：oElement = document.getElementById(sIDValue)：根据id获取一个
document对象：collObjects = document.getElementsByName(sNameValue)：根据name属性获取集合
document对象：collObjects = object.getElementsByTagName(sTagName)：根据标签名获取集合
Elemenet对象：collObjects = object.getElementsByTagName(sTagName)：根据标签名取子标签集合
Element对象方法：vAttrValue = object.getAttribute(sAttrName);
Element对象属性：attributes 属性集合
id 属性id
className 属性class
value 属性value
innerText 获取和设置文本内容
innerHTML 获取和设置内部html代码
parentNode 获取直接父标签
childNodes 只获取所有的直接子元素对象(标签+文本+注释)
children 只获取所有的直接子标签对象
style.xxxx 获取和设置标签的样式xxxx属性
Attribute对象属性：name 属性名
value 属性值
添加相关：
Document对象的方法：oElement = document.createElement(sTag) 创建标签
Element对象的方法：oElement = object.appendChild(oNode) 当前标签添加子标签
Element对象的方法：object.setAttribute(sName, vValue [, iFlags]) 添加和修改属性
修改相关：
Element对象的方法：object.setAttribute(sName, vValue [, iFlags]) 添加和修改属性
Element对象属性：
innerText 获取和设置文本内容
innerHTML 获取和设置内部html代码
style.xxxx 获取和设置标签的样式xxxx属性
删除相关：
Elemenet对象的方法：bSuccess = object.removeAttribute(sName);删除属性
Elemenet对象的方法：oRemove = object.removeChild(oNode); 删除子标签
*/
function test04Delete(){
//删除 <div id="div1">
var odiv1= document.getElementById("div1");
//odiv1.parentNode.removeChild(odiv1);
//清空 <div id="div1">
//odiv1.innerHTML="";
//删除属性class:<div id="div1" class="cla0">
//odiv1.removeAttribute("class");
//删除<div id="div1" class="cla0">的所有内部样式
odiv1.removeAttribute("style");
//删除指定样式：font-size:30px
//odiv1.style.fontSize="16px";
}
function test03Update(){
//更改：age+1
var oname=document.getElementsByName("age")[0];
var age=oname.value;
if(!age){//js中任意数据都可以作为boolean:::null NaN 0 "" undefined
age=0;
}
oname.value=++age;
//更改<div id="div2">中的font标签的文本内容
//先获取div2
var odiv2= document.getElementById("div2");
//在获取其唯一的font子标签
var ofont=odiv2.getElementsByTagName("font")[0];
//alert(ofont.innerText);
ofont.innerText="新的内容";
//更改属性：<font color="red" class="cla1">为cla0
//ofont.className="cla0";
ofont.setAttribute("class","cla0");
//更改样式
odiv2.style.backgroundColor="#aa00ff";
}
function test02Add(){
//在 <div id="div1">中添加一个<input type="text" name="score" id="text2" class="cla0"/>
var odiv1= document.getElementById("div1");
//创建标签
var otext2=document.createElement("input");
//设置属性
otext2.setAttribute("type","text");
otext2.setAttribute("name","score");
otext2.setAttribute("id","text2");
otext2.setAttribute("class","cla0");
otext2.setAttribute("value","22.5");
//otext2.type="text";
//otext2.name="score";
//otext2.id="test2";
//otext2.value="11.0";
//otext2.className="cla0";
//子标签添加到父标签下
odiv1.appendChild(otext2);
//在<div id="div2">中添加一个按钮标签<input type="button" value="按钮1号" id="but1"/>
var odiv2= document.getElementById("div2");
odiv2.innerHTML=odiv2.innerHTML+"<BR/><input type='button' value='按钮1号' id='but1'/>";
}
function test01Get(){
//获取<input type="text" name="name" id="text1"/>
var otext=document.getElementById("text1");//通过id获取
otext=document.getElementsByTagName("input")[0];//通过标签名获取
otext=document.getElementsByName("name")[0];//通过name属性获取：：只有表单属性
//alert(otext);//[object HTMLInputElement]
//研究完dhtml的api：标签有那些属性 一般对象就有那些属性
//alert(otext);
//alert(otext.value);
otext.value="你好";
//获取使用属性
var attrArr=otext.attributes;
for(var i=0;i<attrArr.length;i++){
//alert("属性："+attrArr[i].name+"="+attrArr[i].value);
}
//获取<span id="span1" title="t1">span1</span><br/>
var ospan1=document.getElementById("span1");
//alert(ospan1.title);
ospan1.innerHTML="呵呵呵".bold().fontsize(7).fontcolor("red");
//alert("文本内容："+ospan1.innerText);
//alert("内部html代码："+ospan1.innerHTML);
//获取其父亲标签
//alert(ospan1.parentNode.id);
var odiv1=document.getElementById("div1");
//获取所有的子标签
var childArr=odiv1.childNodes;
childArr=odiv1.children;
for(var i=0;i<childArr.length;i++){
//alert(childArr[i]);
}
//获取<span id="span3" title="t3" class="cla1">span33333333</span><br/> 的样式
var ospan3=document.getElementById("span3");
ospan3.className="cla2";//设置class值
alert(ospan3.className);//获取class值
//获取和设置样式属性的值
alert(ospan3.style.fontSize);
ospan3.style.fontSize="30px";
ospan3.style.color="#ff00ff";
}
</script>
</body>
</html>
欢迎加入北京社区
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)