js 操作css 的属性
语法：
document.getElementById("id").style.属性="值"
属性:就是css中属性 css属性有"-" 例如:backgroud-color
若有"-" 只需要将"-"删除,后面第一个字母变大写即可。
//给标签添加css样式 通过js操作
// 只需要获得标签 然后再通过元素的style属性进行设置就行
- 注意:
只要是window对象的属性和方法,可以把window省略
window.onload 等价于 onload
window.setInterval() 等价于 setInterval()
window 对象有onload的方法可以直接使用
code example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="给css添加样式" onclick="doClick()" />
<div id="div_id"></div>
</body>
<script>
// window的onload的使用
window.onload = function(){
alert("onload 的简单使用");
}
function doClick(){
//给标签添加css样式 通过js操作
// 只需要获得标签 然后再通过元素的style属性进行设置就行
var obj = document.getElementById("div_id").style;
obj.backgroundColor = "#fff000";
obj.width = "100px";
obj.height = "100px";
obj.border = "1px";
}
</script>
</html>
window对象模型
js的组成:
- ECMAScript(语法)
- BOM(浏览器对象模型)
- DOM(文档对象模型)
bom:
1 window:浏览器打开的窗口
2 location:定位信息 (地 址栏)
3 history:历史
4 Navigator（浏览器的版本等相关信息 几乎很少用）
5 Screen（获得屏幕等相关信息 几乎很少用
dom:
1 document(使用最多)
2 element
3 attributate
4 event
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
作者：1246771571@qq.com
时间：2018-10-28
描述： js结构总结
js的组成:
ECMAScript(语法)
BOM(浏览器对象模型)
DOM(文档对象模型)
一 bom的总结：所有的浏览器都有5个对象
1 window:浏览器打开的窗口
2 location:定位信息 (地 址栏)
3 history:历史
4 Navigator（浏览器的版本等相关信息 几乎很少用）
5 Screen（获得屏幕等相关信息 几乎很少用）
注意：通过window可以获取其他的四个对象（因为一个window窗口包含了地址栏历史信息等等）
1 window对象的相关方法
消息框
alert("...."):警告框
confirm("你确定要删除吗?"):确定框 返回值:boolean
prompt("请输入您的姓名"):输入框 返回值:你输入的内容
定时器
设置定时器
setInterval(code,毫秒数):周期执行
setTimeout(code,毫秒数):延迟多长事件后 只执行一次.
例如:
setInterval(showAd,4000);
serInterval("showAd()",4000);
清除定时器
clearInterval(id):
clearTimeout(id):
打开和关闭
open(url):打开 （参数页面的url）
close():关闭
二 dom 文件对象模型
document
element
attributate
event
-->
</body>
<script>
// 1 消息相关的方法
// window 对象相关方法的练习
window.alert("警告对话框");// 原始写法 window可以省略
window.confirm("确认对话框");//有返回值 返回值为布尔类型
//根据你点击的对话框的确认或者取消 返回不同的布尔值
window.prompt("请输入：");// 输入框 返回值为 你输入的值
// 注意含有返回值时 可以动过var 然后打印测试
// 2 定时的略 上个文件已经写过
// 3 关闭打开窗口
//window.open("js操作css样式.html");
// window.close(); 关闭窗口
</script>
</html>
loaction 与history的用法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="设置页面的url" id="setting_url"/>
<!--
作者：1246771571@qq.com
时间：2018-10-28
描述：
history 历史信息
history:历史
back();后退
forward():向前
★go(int)
go(-1) 相当于 back()
go(1) 相当于 forward()使用就行了
一般记住go()的
-->
</body>
<script>
/*
location:定位信息
常用属性:
href:获取或者设置当前页面的url(定位信息)
location.href; 获取url
location.href="...";设置url 相当于 a标签
* */
alert("当前的页面信息"+location.href);
// 设置页面的url
document.getElementById("setting_url").onclick = function(){
location.href = "http://www.baidu.com";
}
</script>
</html>
事件焦点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
作者：1246771571@qq.com
时间：2018-10-28
描述：元素的事件
onfocus 获得焦点
onblur失去焦点
事件总结:
常见的事件:
焦点事件:★
onfocus
onblur
表单事件:★
onsubmit
onchange 改变 (下拉选中)
页面加载事件:★
onload
鼠标事件(掌握)
onclick
鼠标事件(了解)
ondblclick:双击
onmousedown:按下
onmouserup:弹起
onmousemove:移动
onmouserover:悬停
onmouserout:移出
键盘事件(理解)
onkeydown:按下
onkeyup:弹起
onkeypress:按住
////////////
绑定事件:
方式1:
元素的事件属性
方式2:
派发事件
了解
阻止默认事件的发生
阻止事件传播
-->
请输入：<input type="text" onfocus="dofocus()" onblur="doblur()"/>
</body>
<script>
function dofocus(){
alert("获得焦点");
}
function doblur(){
alert("失去焦点");
}
</script>
</html>
dom 获取元素
1 根据id 获得元素
document.getElementById()
2 根据 标签获得元素
document. getElementByTagName() 返回数组
3 获得一类标签（返回数组）
document.getElementsByClassName():需要给标签添加class属性
document.getElementsByName():需要给标签添加name属性
dom 分析
dom(文档对象模型)
当浏览器接受到html代码的时候,浏览器会将所有的代码装载到内存中,形成一棵树(document树)
节点(Node)
文档节点 document
元素节点 element
属性节点 attribute
文本节点 text
获取节点:
通过document可以获取其他节点:
常用方法:
document.getElementById("id值"):获取一个特定的元素document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)
document.getElementsByClassName("class属性的值"):通过class属性获取一类元素(多个)
document.getElementsByName("name属性的值"):通过name属性获取一类元素(多个)
设置获取获取节点的value属性
dom对象.value;获取
dom对象.value="";设置
设置或者获取节点的标签体
dom对象.innerHTML;获取
dom对象.innerHTML="";设置
获取或者设置style属性
dom对象.style.属性;获取
dom对象.style.属性="";设置
获取或者设置属性
dom对象.属性
js补充
数组:
语法:
new Array();//长度为0
new Array(size);//指定长度的
new Array(e1,e2..);//指定元素
非官方
var arr4=["aa","bb"];
常用属性:
length
注意:
数组是可变的
数组可以存放任意值
常用方法:(了解)
存放值:对内容的操作
pop():弹 最后一个
push():插入 到最后
shift():删除第一个
unshift():插入到首位
打印数组:
join(分隔符):将数组里的元素按照指定的分隔符打印
拼接数组:
concat():连接两个或更多的数组，并返回结果。
对结构的操作:
sort();排序
reverse();反转
引用类型总结:
原始类型中的String Number Boolean都是伪对象,可以调用相应的方法
Array:数组
String:
语法:
new String(值|变量);//返回一个对象
String(值|变量);//返回原始类型
常用方法:
substring(start,end):[start,end)
substr(start,size):从索引为指定的值开始向后截取几个
charAt(index):返回在指定位置的字符。
indexOf(""):返回字符串所在索引
replace():替换
split():切割
常用属性:length
Boolean:
语法:
new Boolean(值|变量);
Boolean(值|变量);
非0数字 非空字符串 非空对象 转成true
Number
语法:
new Number(值|变量);
Number(值|变量);
注意:
null====>0
fale====>0 true====>1
字符串的数字=====>对应的数字
其他的NaN
Date:
new Date();
常用方法:
toLocalString()
RegExp:正则表达式
语法:
直接量语法 /正则表达式/参数
直接量语法 /正则表达式/
new RegExp("正则表达式")
new RegExp("正则表达式","参数")
参数:
i:忽略大小写
g:全局
常用方法:
test() :返回值为boolean
Math:
Math.常量|方法
Math.PI
Math.random() [0,1)
全局:
★
decodeURI() 解码某个编码的 URI。
encodeURI() 把字符串编码为 URI。
Number():强制转换成数字
String():转成字符串
parseInt():尝试转换成整数
parseFloat():尝试转换成小数
eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。
网友评论