DOM:document operation model 文档操作模型
每个标签都是一个对象。
直接查找
var obj = document.getElementById('i1')
间接查找
文件内容操作:
innerText 仅文本
innerHTML 全内容
obj1.value
input value获取当前标签中的值
select 获取选中的value值
.selectedIndex
textarea value获取当前标签中的值
搜索框的示例
<body>
<div style="width: 600px;margin: 0 auto;">
<input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字"/>
<input type="text" placeholder="请输入关键字" />
div>
<script>
// 焦点移入,清空值
function Focus(){
var tag = document.getElementById('i1');
var val = tag.value;
if(val == "请输入关键字"){
tag.value = "";
}
}
// 焦点移出,添加值
function Blur(){
var tag = document.getElementById('i1');
var val = tag.value;
if(val.length ==0){
tag.value = "请输入关键字";
}
}
script>
body>
className // 样式,返回字符串 classList // 样式,返回数组 classList.add() // 添加样式 classList.remove() // 移出样式
obj.style.fontSize = '16px'; obj.style.backgroundColor = 'red'; obj.style.color = "red"
setAttribute(key,value) // 设置标签属性
removeAttribute(key) // 移除标签属性
attributes // 获取所有标签属性
getAttribute(key) // 获取指定标签属性
<body>
<input type="button" onclick="AddEle1();" value="+" />
<input type="button" onclick="AddEle2();" value="+" />
<div id="i1">
<p><input type="text" />p>
div>
<script>
// 第一种添加方式:字符串形式
function AddEle1(){
// 创建一个标签
// 将标签添加到i1里面
var tag = "";
// 注意:第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag);
}
// 第二种添加方式:对象的方式
function AddEle2(){
// 创建一个标签
// 将标签添加到i1里面
var tag = document.createElement('input');
tag.setAttribute('type', 'text');
tag.style.fontSize = '16px';
tag.style.color = 'red';
var p = document.createElement('p');
p.appendChild(tag);
document.getElementById('i1').appendChild(p);
}
script>
body>
默认情况下:只有多行文本textarea、下拉框select 和input 标签可以数据提交到后台。
通过DOM任何标签都可提交表单。
<body>
<form id="f1" action="http://blog.csdn.net/fgf00">
<input type="text" />
<input type="submit" value="提交1" />
<a onclick="submitForm();">提交2a>
form>
<script>
function submitForm(){
document.getElementById("f1").submit()
}
script>
body>
console.log // 输出框
alert // 弹出框
confirm // 确认框
// URL和刷新
location.href // 获取当前URL
location.href = "url" // 设置URL 重定向
location.reload() // 重新加载,刷新
// 定时器
setInterval // 多次定时器
clearInterval // 清除多次定时器
setTimeout // 单次定时器
clearTimeout // 清除单次定时器
浏览器console日志中,看运行输出信息
<body>
<form id="f1" action="http://www.oldboyedu.com">
<input type="text" />
<input type="submit" value="提交1" />
<a onclick="submitForm();">提交2a>
form>
<script>
function submitForm(){
//document.getElementById('f1').submit()
//alert(123);
var v = confirm('真的要提交吗?');
console.log(v);
// v 鼠标点击确定、取消的返回值。
}
// 定时器,一直执行
var obj = setInterval(function(){
console.log(1);
clearInterval(obj); // 清除定时器
}, 1000);
// 定时器,只执行一次
setTimeout(function () {
console.log('timeout');
},15000);
script>
body>
<body>
<div id="status">div>
<input type="button" value="删除" onclick="DeleteEle();" />
<script>
function DeleteEle(){
document.getElementById('status').innerText = "已删除";
setTimeout(function () {
document.getElementById('status').innerText = "";
}, 3000);
}
script>
body>
onclick,onblur,onfocus
<body>
<table border="1" width="300px">
<tr onmouseover="t1(0);" onmouseout="t2(0);"><td>1td><td>2td><td>2td>tr>
<tr onmouseover="t1(1);" onmouseout="t2(1);"><td>1td><td>2td><td>2td>tr>
<tr onmouseover="t1(2);" onmouseout="t2(2);"><td>1td><td>2td><td>2td>tr>
table>
<script>
function t1(n){
var myTrs = document.getElementsByTagName("tr")[n];
// console.log(myTrs);
myTrs.style.backgroundColor = "red";
}
function t2(n){
var myTrs = document.getElementsByTagName("tr")[n];
myTrs.style.backgroundColor = "";
}
script>
body>
<body>
<table id="i1" border="1" width="300px">
<tr><td>1td><td>2td><td>2td>tr>
<tr><td>1td><td>2td><td>2td>tr>
<tr><td>1td><td>2td><td>2td>tr>
table>
<script>
var myTrs = document.getElementsByTagName("tr");
var len = myTrs.length;
for(var i=0;ifunction(){
// 谁调用这个函数,this指向谁
this.style.backgroundColor = "red";
};
myTrs[i].onmouseout = function(){
this.style.backgroundColor = "";
}
}
script>
body>
a. 第一种绑定方式:直接标签绑定
<input id='i1' type='button' onclick='ClickOn(this)'>
function ClickOn(ths){
// ths(形参) 当前点击的标签
}
b. 第二种绑定方式:先获取Dom对象,然后进行绑定
<input id='i1' type='button' >
document.getElementById('i1').onclick = function(){
// this 代指当前点击的标签
}
注意this这里不要乱用,两种绑定方式不同,this传入的时候也是不同的
c. 第三种绑定方式:同时绑定多个事件
<script>
var mydiv = document.getElementById("i1");
mydiv.addEventListener('click',function(){console.log('aaa'),false});
mydiv.addEventListener('click',function(){console.log('bbb'),false});
script>
鼠标点击,同时执行以上两个,操作。第三个参数:默认就是false,false:冒泡模型;true:捕捉模型
var myTrs = document.getElementsByTagName("tr");
var len = myTrs.length;
for(var i=0;i// i=0,i=1,i=2
myTrs[i].onmouseover = function(){
this.style.backgroundColor = "red";
// myTrs[i].style.backgroundColor = "red";
// 为什么这里必须用this,不能用myTrs[i]? 因为作用域不同,js是以函数作为作用域的
};
}
转载请务必保留此出处:http://blog.csdn.net/fgf00/article/details/53402114
关于css、js,可以搜索“CSS参考手册”、“W3cschool手册”、“JavaScript 中CSS属性对照表”
Sublime Text 工具使用介绍:
emmet插件
输入感叹号”!”,之后按tab建
快速生成表格,3行3列
table>tr*3>td*3 # 输入后,按tab键
table.test#test>tr*3>td*3 # 按tab,生成class="test" id="test"
table>tr*3>td*3>{fgf} # 往td里面写内容
table>tr*3>td*3>{fgf$} # fgf1、fgf1、fgf3
其他快捷操作
html:5
html:4s
可以搜索其他emmet插件使用方法