一、标签的修改
1.追加
①在标签的内容追加：
1.1 a.append(b) 把b追加到a内容的后面
1.2 a.prepend(b) 把b追加到a内容的前面
②在标签的同级追加：
2.1 a.before(b) 把b追加到a的同级之前
2.2 a.after(b) 把b追加到a的同级之后
<style>
.warp{
width: 100px;
height: 100px;
border: 1px solid pink;
margin: 0px auto ;
}
.bigwarp{
width: 200px;
height: 200px;
border: 2px solid blue;
margin: 0px auto;
padding-top: 40px;
box-sizing: border-box;
}
.con{
text-align: center;
}
</style>
<body>
<div class="bigwarp">
<div class="warp"></div>
<p class="con">标签的追加</p>
</div>
</body>
<script>
var owarp=document.getElementsByClassName('warp');
var ocon=document.getElementsByClassName('con');
owarp[0].append(ocon[0]);
//owarp[0].preappend(ocon[0]);
//owarp[0].before(ocon[0]);
//owarp[0].after(ocon[0]);
</script>
2.删除：a.remove() 删除a标签
owarp.remove();
3.创建：document.createElement('标签名')
var tag=document.createElement('div');
二、事件
1.鼠标事件
① 鼠标移入：$('css选择器').mouseenter/mouseover(function(){.....})
$('div').eq(0).mouseenter(function(){
$('div').eq(0).css('background','blue');
})
② 鼠标移出：$('css选择器').mouseleave/mouseout(function(){.....})
$('div').eq(0).mouseleave(function(){
$('div').eq(0).css('background','pink');
})
③ 鼠标点击
3.1 单击：$('css选择器').click(function(){.....})
$('div').eq(0).click(function(){
$('div').eq(0).css('background','black');
})
3.2 双击：$('css选择器').dblclick(function(){.....})
$('div').eq(0).dblclick(function(){
$('div').eq(0).css('height',100+'px');
})
④ 鼠标悬停：$('css选择器').hover(function(){.....},function(){......})
第一个匿名函数代表鼠标移入要执行的代码；
第二个匿名函数代表鼠标移出要执行的代码。
$('div').eq(0).hover(function(){
$('div').eq(0).css('background','blue');
},function(){
$('div').eq(0).css('background','pink');
})
⑤ 鼠标移动并按下：$('css选择器').mousedowm(function(){.....})
$('.btn').eq(0).mousedown(function(){
$('.btn').eq(0).css('background','black');
})
⑥ 鼠标移动并松开：$('css选择器').mouseup(function(){.....})
$('.btn').eq(0).mouseup(function(){
$('.btn').eq(0).css('background','black');
})
⑦注意事项
7.1 mouseenter和mouseleave是一对配对的鼠标移入移出事件，mouseover和mouseout是另外一对配对的鼠标移入移出事件
7.2 鼠标的移入和移出事件建议配对使用，不建议交叉使用
7.3 鼠标的移入和移出事件建议使用mouseenter和mouseleave，因为使用mouseover和mouseout时，点击父级的时间同时会触发子级的时事件
2.表单事件
①聚集焦点：$('css选择器').focus(function(){......})
$("input").focus(function(){
$("input").css('height',100+'px');
});
②失去焦点：$('css选择器').blur(function(){......})
$("input").blur(function(){
$("input").css('width',100+'px');
});
③ 表单提交：$('css选择器').submit(function(){......})
$("form").submit(function(){
alert("提交");
});
表单有默认的提交事件，可以通过 event.preventDefault()阻止
$("form").submit(function(){
event.preventDefault();
alert("阻止提交");
});
④ 表单改变：$('css选择器').change(function(){......})
$("input").change(function(){
alert("文本已被修改");
});
要注意
4.1 当用于 select 元素时，change 事件会在选择某个选项时发生。
4.2 当用于 text field 或 text area 时，change 事件会在元素失去焦点时发生。
3.键盘事件
① 键盘按下：$('css选择器').keydown/keypress(function(){.....})
var i=0;
$("input").keypress(function(){
$("span").text(i+=1);
});
注意：keypress 事件与 keydown 事件类似都是代表当按钮被按下时发生该事件。然而，keypress 事件不会触发所有的键（比如 ALT、CTRL、SHIFT、ESC）。
② 键盘松开:$('css选择器').keyup(function(){.....})
$("input").keyup(function(){
$("input").css("background-color","pink");
});
4.窗口或文档事件
① 加载事件：$('css选择器').load(function(){......})
注意：
1.1 load() 方法在 jQuery 版本 1.8 中[已废弃]
1.2 该事件适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架）以及 window 对象。
1.3 根据不同的浏览器（Firefox 和 IE），如果图像已被缓存，则也许不会触发 load 事件。
$("img").load(function(){
alert("图片已载入");
});
② 调整窗口大小：$('css选择器').resize(function(){......})
$(window).resize(function(){
$('span').text(x+=1);
});
③ 窗口滚动：$('css选择器').scroll(function(){......})
$("div").scroll(function(){
$("span").text(x+=1);
});
综合上述的知识点，本次给出发布微博的案例
1.HTML结构
<body>
<div id="warp">
<textarea id="inp" placeholder="请输入内容"></textarea>
<br>
<button id="bot" onclick="send()">发布微博</button>
</div>
<ul id="box">
<li>我的第一条微博
<span onclick="del(this)">x</span>
<p>2017年9月23日 11时56分25秒 星期6</p>
</li>
<li>我的第二条微博
<span onclick="del(this)">x</span>
<p>2019年10月3日 13时16分45秒 星期1</p>
</li>
</ul>
</body>
2.CSS样式
*{
margin: 0px;
padding: 0px;
list-style: none;
}
body{
background-color: #C2CDE1
}
div{
width: 600px;
height: 200px;
border-radius: 5px;
margin: 30px auto;
text-align: center;
background: white;
}
#bot{
margin: 15px -486px 10px 0px;
background: #FF8140;
color:white;
border: none;
border-radius: 3px;
width: 70px;
height: 28px;
}
#inp{
width: 555px;
height:100px;
margin-top: 30px;
outline: none;
}
ul li{
width: 560px;
height: 80px;
padding: 20px;
border-radius: 5px;
margin: 10px auto;
background: white;
position: relative;
}
span{
position: absolute;
right: 15px;
top: 15px;
}
p{
margin-top: 50px;
color: #CFCCCC;
font-size: 12px;
}
③ jQuery事件
//时间函数
function timer(){
var timer=new Date();
return timer.getFullYear()+'年'+(timer.getMonth()+1)+'月'+timer.getDate()+'日'+timer.getHours();+'时'+timer.getMinutes()+'分'+timer.getSeconds()+'秒'+'星期'+timer.getDay();
}
//发布内容
function send(){
if(inp.value==''){
alert('请输入内容后在发表')
}else{
var tag=$('<li>'+inp.value+'<span onclick="del(this)">x</span>'+'<p>'+timer()+'</p>'+'</li>');
$('#box').prepend(tag);
inp.value='';
}
}
//删除微博
function del(a){
if(confirm('确认要删除微博吗？')){
$(a).parent().remove();
}
}
发布微博.gif
网友评论