前端知识——DOM、jQuery
DOM
查找：
直接查找
间接查找
--getElementById
--getElementsByTagName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="w1" type="test" value="请输入关键字" onfocus="HH();" onblur="NN();"/>
<script>
function HH() {
var tag=document.getElementById("w1");
if(tag.value=="请输入关键字"){
tag.value="";
}
}
function NN() {
var tag=document.getElementById("w1");
var val=tag.value;
if (val.trim().length == 0){
tag.value = "请输入关键字";
}
}
</script>
</body>
</html>
操作：
值
innerText
innerHtml
value
class：
className
classList.add
classList.remove
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none !important;
}
.shade{
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
/*background-color: black;*/
/*opacity: 0.6;*/
background-color: rgba(0,0,0,.6);
z-index: 1000;
}
.modal{
height: 200px;
width: 400px;
background-color: white;
position: fixed;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -100px;
z-index: 1001;
}
</style>
</head>
<body>
<div style="height: 2000px;background-color: #dddddd">
<input type="button" value="点我" onclick="RR();"/>
</div>
<div id="shade" class="shade hide"></div>
<div id="modal" class="modal hide">
<a href="javascript:void (0)" onclick="HH();">取消</a>
</div>
<script>
function RR() {
var t1=document.getElementById("shade");
var t2=document.getElementById("modal");
t1.classList.remove("hide");
t2.classList.remove("hide");
}
function HH() {
var t1=document.getElementById("shade");
var t2=document.getElementById("modal");
t1.classList.add("hide");
t2.classList.add("hide");
}
</script>
</body>
</html>
样式：
<input type='text' style="color:red;font-size:40px;"/>
tag = .....
tag.style.color = 'red';
tag.style.fontSize = '40px';
属性：
<input id='i1' name='n1' wwwzzzccc='aa' type='text' style="color:red;font-size:40px;"/>
setAttribute
getAttribute
removeAttribute
===>
tabObj.checked = true
===>jQuery:操作数据，prop(checked,true)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="Checkall()"/>
<input type="button" value="取消" onclick="Cancleall()"/>
<input type="button" value="反选" onclick="Reverseall()"/>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>用户</th>
<th>密码</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"/></td>
<td>1</td>
<td>11</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>2</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>3</td>
<td>33</td>
</tr>
</tbody>
</table>
<script>
function Checkall() {
var tb=document.getElementById("tb");
var trs=tb.children;
for (var i=0;i<trs.length;i++){
var current_tr = trs[i];
var ck = current_tr.firstElementChild.firstElementChild;
ck.setAttribute('checked','checked');
}
}
function Cancleall() {
var tb=document.getElementById("tb");
var trs=tb.children;
for (var i=0;i<trs.length;i++){
var current_tr = trs[i];
var ck = current_tr.firstElementChild.firstElementChild;
ck.removeAttribute('checked');
}
}
function Reverseall() {
var tb=document.getElementById("tb");
var trs=tb.children;
for (var i=0;i<trs.length;i++){
var current_tr=trs[i];
var ck=current_tr.firstElementChild.firstElementChild;
if(ck.checked){
ck.checked = false;
}else{
ck.checked = true;
}
}
}
</script>
</body>
</html>
标签：
创建标签：
字符串
对象
将标签添加到HTML中
字符串形式的标签：
p1.insertAdjacentHTML('beforeEnd',tag);
对象形式的标签：
p1.insertAdjacentElement('afterBegin',document.createElement('p')) xxx.insertBefore(tag,xxx[1])
点赞：
创建标签，定时器（大小，位置，透明度）
1、this，当前触发事件的标签
2、createElement
3、appendChild
4、setInterval创建定时器 clearInterval删除定时器
5、removeChild删除子标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
padding: 50px;
position: relative;
}
</style>
</head>
<body>
<div class="item" style="background-color: #00AA88">
<a onclick="Cli(this)">
赞1
</a>
</div>
<div class="item" style="background-color: #00b3ee">
<a onclick="Cli(this)">
赞2
</a>
</div>
<div class="item" style="background-color: #00CCFF">
<a onclick="Cli(this)">
赞3
</a>
</div>
<div class="item" style="background-color: #721c15">
<a onclick="Cli(this)">
赞4
</a>
</div>
<script>
function Cli(ths) {
var top=49;
var left=71;
var op=1;
var fontSize=18;
var tag= document.createElement('span');
tag.innerText="+1";
tag.style.position="absolute";
tag.style.top=top+"px";
tag.style.left=left+"px";
tag.style.opacity=op;
tag.style.fontSize=fontSize+"px";
ths.parentElement.appendChild(tag);
var interval=setInterval(function () {
top -=10;
left +=10;
op -=0.2;
fontSize +=5
tag.style.top=top+"px";
tag.style.left=left+"px";
tag.style.opacity=op;
tag.style.fontSize=fontSize+"px";
if (op <= 0.2){
clearInterval(interval);
ths.parentElement.removeChild(tag);
}
},50)
}
</script>
</body>
</html>
定时器
setTimeOut,
clearTimeout
setInterval
clearInter
事件：
1、this，当前触发事件的标签
2、全局事件绑定 window.onKeyDown = function(){}
3、event，包含事件相关内容
4、默认事件
自定义优先：a,form
默认优先：checkbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
position: fixed;
bottom: 20px;
right: 20px;
color: red;
}
.hide{
display: none;
}
</style>
</head>
<body onscroll="BTS();">
<div style="height: 2000px;background-color: #dddddd"></div>
<div id="back" class="back hide" onclick="backTop();">回到顶部</div>
<script>
function backTop() {
document.body.scrollTop=0
}
function BTS() {
var s=document.body.scrollTop;
var t=document.getElementById("back");
if (s>=100){
t.classList.remove('hide');
}else {
t.classList.add('hide');
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="http://www.baidu.com">
<input typs="test" id="username"/>
<input type="submit" value="提交" onclick="return BB();"/>
</form>
<script>
function BB() {
var user=document.getElementById('username');
if(user.value.length > 0){
return true;
}else {
alert("123");
return false;
}
}
</script>
</body>
</html>
jQuery
模块
Dom和JavaScript
1.12.. --> ...
2.x --> IE9
查找：
选择器
id选择器
标签选择器
类选择器
组合
层级 #i1 .c1
$('input:eq(1),#i1 .item')
筛选器
$('#i1').find('.item') $('#i1').eq(1)
操作：
CSS
属性
$('#i1').html() # 获取html内容
$('#i1').html("<span>123</span>") # 设置html内容
text()
val()
文本操作
事件：
- 优化
1、如何使用jQuery绑定
2、当文档加载完毕后，自动执行 $(function(){ ... });
3、延迟绑定
4、return false;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.menu{
width: 200px;
height: 600px;
border: 1px solid #dddddd;
overflow: auto;
}
.menu .item .title{
height: 40px;
line-height: 40px;
background-color: #2459a2;
color: white;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<div class="title" onclick="ShowMenu(this);">菜单一</div>
<div class="body">
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
</div>
</div>
<div class="item">
<div class="title" onclick="ShowMenu(this);">菜单二</div>
<div class="body hide">
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
</div>
</div>
<div class="item">
<div class="title" onclick="ShowMenu(this);">菜单三</div>
<div class="body hide">
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
function ShowMenu(ths) {
$(ths).next().removeClass('hide');
$(ths).parent().siblings().find('.body').addClass('hide');
}
</script>
</body>
</html>
