周帆
今天上的自习课,所以往后将js重新翻看了一天,其实还是有很多东西没有领悟完全,总之多看几遍笔记加深印象吧
同理,笔记贴上
bom(游览器对象模型)总结:
所有的游览器都有5个对象:
window:窗口
location:定位信息(地址栏)
history:历史
window对象详解:
如果文档包含跨国家(frame或者iframe标签)游览器会为HTML文档创建一个window对象
并未每个框架创建一个额外的window对象
常用的属性:
通过window对象可以获得其他四个对象
window.location 等价于 location
......
常用的方法:
消息框
alert("......") 警告框
confirm("你确定要删除嘛") 确定框 返回值为boolean
pormpt ("请输入你的名字") 输入框 返回值为你输入的值
定时器
两种四个 就不用在重复写了
setInterval(showAD,400);不加引号不加括号
setInterval("showAD()",400);加了引号加括号
打开和关闭
open(url)
close()
///////////////////////////////////////////////////////////////
location:定位信息
常用属性:
href:获取或者设置当前页面的url(定位信息)
location.href:获取url
location.href = "..." 设置url 相当于a标签
history 历史
back()后退
forward()前进
★go(int)
go(-1)相当于back();
go(1)相当于forward
/////////////////////////////////////////////////////////////////////
提交表单的技术分析
事件 提交事件onsubmit
文本框是去焦点 onblur
////////////////////////////////////////////////////////////////////
事件总结:
常见事件
焦点事件:★
onfocus
onblur
表单事件★
onsubmit
onchange:改变
页面加载事件★
onload
鼠标事件
ondblclic:双击
onmousedown:按下
onmouseup:弹起
onmousemove:移动
onmouseover:悬停
onmouseout:移出
键盘事件
onkeydown:按下
onkeyup:弹起
onkeypress:按住
/////////////////////
绑定事件
两种方式
/////////////////////////
了解
阻止默认事件发生
组织事件传播
////////////////////////////
隔行换色
贴上代码
var arr = document.getElementsByClassName("itemSelect");
if(object.checked==true){
for(var i = 0;i<arr.length;i++){
arr[i].checked=true;
}
} else {
for(var i = 0;i<arr.length;i++){
arr[i].checked=false;
}
}
//////////////////////////////////
dom(文档对象模型)
当游览器接收到html代码的时候,游览器会将所有代码装载进内存形成一个数(document)树
节点(Node)
文档节点 document
元素节点 element
属性节点 attribute
文本节点 text
获取节点:
通过document可以获取其他节点
常用方法:
document.getElementById("id值");
通过标签名获得一个或者多个元素
document.getElementsByTagName("标签名字")
document.getElementsByClassName("class属性名")
document.getElementByName("name属性的值")
设置和获取节点的value属性
dom对象.value;获取
dom对象.value = "";设置
设置和获取节点的标签体
dom对象.innerHTML:获取
dom对象.innerHTML ="":设置
设置和获取style属性:
dom对象.style.属性;获取节点的指定style中的值
dom对象.style.属性 = "";设置
设置和获取属性:
dom对象.属性
///////////////////////////////////////////////////
对于htmldom的操作若遭js或者htmldom查不到 去查找xml dom对象
关于文档的操作 在 xml dom 的document中
关于元素的操作 在 xml dom 的element中
appendChild(dom对象):在一个元素下添加孩子(子节点)
下拉框的案例代码实现
function leftOne() {
var arr = document.getElementById("left").options;
var selectR = document.getElementById("right");
for(var i = 0; i < arr.length; i++) {
if(arr[i].selected == true) {
selectR.appendChild(arr[i]);
break;
}
}
}
function leftOther() {
var arr = document.getElementById("left").options;
for(var i = 0; i < arr.length; i++) {
if(arr[i].selected == true) {
document.getElementById("right").appendChild(arr[i]);
i--;
}
}
}
function leftAll() {
var arr = document.getElementById("left").options;
for(var i = 0; i < arr.length; i++) {
document.getElementById("right").appendChild(arr[i]);
i--;
}
}
右移就行了,左移和右移原理一样
注意:我们可以使用select元素上的multiple属性来设置下拉框可以多选
true为可以,false为不可以.
////////////////////////////////////////////////////
省市联动案例
数组
语法:
new Array();长度为0
new Array(size);自定义长度
new Array(e1,e2,e3.....);指定元素
非官方的定义格式
var arr = ["aa","bb"];
常用属性:
length
注意:
数组的长度可以变的
数组可以存放任何值
常用方法:
存放值:对内容的操作
pop():弹 最后一个
push():插入 最后一个
shift():删除第一个
unshift():插入到首位
打印字符
jion(分隔符) 将数组按照指定的分割符打印
拼接:
concat()
排序:
sort()
反转:
reverse()
//////////////////////////////////////////////////
引用类型总结
原始类型中的string number boolean 都是伪对象,可以调用相应的方法.
Array:数组
String:字符串
常用方法
substring(startu,end);[)你懂
substr(start,size):从指定索引位置开始截取字符 截取size个
charAt(index) 返回指定字符
indexOf("") 返回指定字符串的索引位置
replace() 替换
split() 切割
Boolean:布尔值
new Boolean(值|变量);
Boolean(值|变量)
非0数字 非空字符串 非空对象 转成true
Number:数值
new Number();
Number("2")
null====>0
false====>0 true=====>1
字符串数字=======>该字符串对应的数字
其他全为NaN!!!!!
Date:时间
new Date();
常用方法:
toLocalString();
RegExp:正则表达式
语法:
直接量语法 /^正则表达式$/参数
new RegExp("/^正则表达式$/")
new RegExp("/^正则表达式$/","参数")
参数
i:忽略大小写
g:全局变量
常用方法
test() 返回一个boolean
Math:数学运算类
Math.常量|方法
全局:全局变量
★
decodeURI:解码
encodeURI:编码
Number():强制转换成数字
String():转换成字符串
parseInt();尝试转换成整数
parseFloat();尝试转换成小数
eval 计算js字符串 并把它作为脚本代码执行
//////////////////////////////////////////////////////
dom(★)
获取元素的方法(4个) document
操作元素的属性 dom对象.属性
引用类型:
array
string
substring
全局变量
编码两个
强制转换两个
尝试转换两个
eval()解析字符串形式的js代码
Math
总结结束~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
|
|