2019.08.03(day04)
dom编程:
查询:
-通过id查询
-通过name查询
-通过标签名查询
-通过表单名查询
根据id查询
document.getElementById("");
通过id查询返回元素节点,
在整个html文档中搜索id
只找到第一个id,返回元素
如果id错误,返回null
根据层次查询节点:
-parentNode
遵循文档的上下文层次结构,查找单个父节点
比如:
<table id="tblid">
<tr>
<td id="tdid"></td>
<td></td>
</tr>
</table>
var td_ele=document.getElementById("tdid");
var tr_ele=td_ele.parentNode;
var table_ele=td_ele.parentNode.parentNode; -childNodes
遵循文档的上下文层次结构,查找多个子节点
比如:上面的例子
var td_ele=document.getElementById("tdid");
//获取当前td对象的所有兄弟
var tds_ele=td_ele.parentNode.childNodes;
//获取当前td的父亲,和所有叔叔节点
var trs_ele=td_ele.parentNode.parentNode.childNodes;根据标签名查询节点:
getElementsByTagName("标签名");
从当前对象往下寻找符合标签名的所有元素对象
返回结果是一个数组
标签名错误,返回长度为0,
比如:
<table id="tblid">
<tr>
<td id="tdid"></td>
<td></td>
</tr>
</table>
var table_ele=document.getElementById("tblid");
var trs_ele=table_ele.getElementsByTagName("tr");根据name属性查询节点
document.getElementsByName("元素的name属性值");
注意:不是所有的元素节点都有name属性
根据document.表单名字.表单控间名
docuemnt.forms[数字].表单控件名
创建元素节点:
document.createElement(元素节点名);
返回结果是创建的节点对象
创建文本节点:
document.createTextNode("文本信息");
返回结果是一个文本节点对象
添加新节点:
parentNode.appendChild(newNode);
追加newNode节点到父节点的所有子节点的最后.
parentNode.insertBefore(newNode,refNode);
把newNode插入到refNode的前面
newNode和refNode是兄弟关系
删除节点:
node.removeChild(childNode)
删除node节点下的childNode的节点对象
定位节点:
parentNode.firstChild;第一个子节点
parentNode.lastChild;最后一个子节点
js的神奇之处:
自定义对象:是一种特殊的数据类型,由属性和方法封装而成
属性:与对象有关的的值 对象名.属性名 div_ele.id="divid";
方法:指对象可以执行的行为或可以完成的功能
对象名.方法名();创建js的自定义对象:
1.直接创建对象
比如:
function testObject(){
var personObj=new Object();
//添加属性
personObj.name="zhangsan";
personObj.age=30;
//添加方法
personObj.say=function(){
alert("hello");
}
//使用新添加的方法和属性
personObj.say();
alert(personObj.name+" "+personObj.age);
}2.使用构造函数创建对象
比如:
function Person(n,a,ad){
//定义name和age属性
this.name=n;
this.age=a;
this.address=ad;
//定义方法showInfo
this.showInfo=function(){
alert(this.name+" "+this.age);
};
//定义方法showAddreds
this.showAddress=introAddress;
}
function introAddress(){
alert(this.address);
}
//是由构造函数创建的对象
function testOject1(){
var p=new Person("zhangsan",30,"beijing");
alert(p.age);
p.showInfo();
p.showAddress();
var p=new Person("lisi",20,"shanghai");
alert(p.age);
p.showInfo();
p.showAddress();
}
使用json创建对象
json(javaScript Object Notation) 是一个轻量级的数据交换格式
json的说明:
用{}代表对象
用[]代表数组
使用名/值的方式定义,名和值之间用 : 间隔
名称需要使用""引起来
多对定义之间使用 , 间隔了多少个月
字符串的属性值用 "" 引起来
比如:
var jsonObj={"name":"张三","age":30,"address":"北京"};
alert(jsonObj.name);
alert(jsonObj.age);
alert(jsonObj.address);
js中的事件处理:
事件:指页面元素状态改变,用户在操作鼠标或键盘时触发的动作
触发的动作:
鼠标事件: onclick 单击
ondblclick 双击
onmousedown 鼠标左键按下
onmouseup 鼠标左键抬起
onmouseover 鼠标划过(进入)
onmouseout 鼠标移出
onmousemove 鼠标在范围内移动
键盘事件: onkeydown 键盘按下
onkeypress 键盘按下/按住
onkeyup 键盘抬起
状态改变事件:
onblur 焦点失去
onfocus 焦点获取
onsubmit 表单提交
onchange 内容改变
onselect 文本被选定
onload 窗体完成加载
onunload 用户退出页面
所有的事件原理都设计模式中的"监听者设计模式";
event对象:是js的内置对象
任何事件触发后将会产生一个event对象
event对象记录事件发生时的鼠标位置,键盘按键状态
和触发对象等信息
获取event对象和使用event对象获得相关信息,单击的位置
触发的对象
function ff(e){
alert(e.clientX+":"+e.clientY);
//e.srcElement,ie浏览器
//e.target,firefox浏览器
var obj=e.srcElement||e.target;
alert(obj.nodeName);
}
<div onclick="ff(event)">event对象测试</div>事件的冒泡机制:
function cancelBubble(e){
alert("input button");
//取消冒泡:
if(e.stopPropagation){
//火狐和谷歌浏览器的取消冒泡
e.stopPropagation();
}else{
//ie浏览器的取消冒泡
e.cancelBubble=true;
}
}
{"name":"张三","age":30,"address":"北京","students":[{"name":"name1","age":20},{"name":"name2","age":20},{"name":"name3","age":20}]}
{
"name": "张三",
"age": 30,
"address": "北京",
"students": [
{
"name": "name1",
"age": 20
},
{
"name": "name2",
"age": 20
},
{
"name": "name\"",
"age": 20
}
]
}
[
{
"id": 1, getId() setId()
"userAddress": "chaoyang", getUserAddress() setUserAddress
"userName": "zhangsan",
"userPassword": "zs"
},
{
"id": 2,
"userAddress": "chaoyang",
"userName": "lisi",
"userPassword": "ls"
},
{
"id": 3,
"userAddress": "chaoyang",
"userName": "wangwu",
"userPassword": "ww"
},
{
"id": 4,
"userAddress": "chaoyang",
"userName": "zhaoliu",
"userPassword": "zl"
},
{
"id": 5,
"userAddress": "chaoyang",
"userName": "tianqi",
"userPassword": "tq"
}
]
1.了解熟悉json数据格式
a.用键值对表达数据
b.{键值对,键值对,键值对...} json对象
c.[{}...,[]...] json数组
d.json数据中可以包含 json数据,json数组,数字,字符串,布尔
e.json对象和json数组可以做合理的嵌套2.java对象和json数据的相互转换:
借助第三方工具来实现相互转换
阿里巴巴 fastjson
国外 json-lib
具体的参见testfastjson项目
testjsonlib项目
3.javascript中的json对象和json字符串相互转换
即,如何用js操作json数据
<html>
<head>
<title>用js操作json数据</title>
<meta charset="UTF-8"/>
<script src="json.js" ></script>
<script>
//访问json简单对象
function f1(){
var obj={"name":"zhangsan","age":20};
alert(obj.name+" "+obj.age);
}
//访问json复杂对象
function f2(){
var obj={
"name":"zhangsan",
"age":20,
"address":{
"city":"beijing",
"street":"杨庄大街",
"building":"首钢实训楼"
}
};
alert(obj.name+" "+obj.age+" "+obj.address.building);
}
//访问简单josn数组
function f3(){
var arr=[
{
"name":"zhangsan",
"age":20
},
{
"name":"lisi",
"age":21
}
];
alert(arr[1].name);
}
//访问复杂的json数组
function f4(){
var arr={
"name":"zhangsan",
"age":20,
"friends":[
{
"name":"wangwu",
"age":20
},
{
"name":"zhaoliu",
"age":21
}
]
};
alert(arr.name+" "+arr.friends[1].name);
}
//把json字符串转换成javascript的json对象
//eval函数方式转换(不推荐)
function f5(){
//这个str不是json数据,是一个json的字符串
var str='{"name":"zhagnsan","age":20}';
var obj=eval（"("+str+")");
alert(obj.name);
}
//javascript原生写法(浏览器版本不能太低)json串-->json对象
function f6(){
var str='{"name":"zhagnsan","age":20}';
var obj=JSON.parse(str);
alert(obj.name);
}
//第三方工具(josn.js)json字符串-->json对象
function f7(){
var str='{"name":"zhagnsan","age":20}';
var obj=str.parseJSON();
alert(obj.name);
}
function f8(){
var str='[{"name":"zhangsan","age":20},{"name":"wangwu","age":30}]';
var obj=str.parseJSON();
alert(obj[1].name);
}
//json对象-->json字符串
function f9(){
var obj={"name":"zhangsan","age":20};
var str=JSON.stringify(obj);
alert(str);
}
</script>
</head>
<body>
<a href="javascript:f1();">访问简单json数据</a><br />
<a href="javascript:f2();">访问复杂json数据</a><br />
<a href="javascript:f3();">访问简单json数据(数组)</a><br />
<a href="javascript:f4();">访问复杂json数据(数组)</a><br />
<a href="javascript:f5();">eval函数方式转换(不推荐)</a><br />
<a href="javascript:f6();">js原生写法(浏览器版本不能太低)json字符串-->json对象</a><br />
<a href="javascript:f7();">第三方工具(josn.js)json字符串-->json对象</a><br />
<a href="javascript:f8();">第三方工具(josn.js)json字符串-->json对象</a><br />
<a href="javascript:f9();">json对象-->json字符串</a><br />
</body>
</html>
