主要内容:
1.jQuery的文档操作
2.
1.jQuery的文档操作
1.1插入操作
//语法: 父元素.append(子元素) //解释:追加某元素,在父元素中添加的子元素.子元素可以为: stirng | element（js对象） | jquery元素
代码示例
<title>Title</title>
</head>
<body>
<input type="text">
<button id="append">追加</button>
<ul class="comment">
<li>倚天屠龙记</li>
</ul>
<script src="./libs/jquery-3.3.1.js"></script>
<script>
$(function(){
//追加字符串
$('.comment').append('<li id="item">张无忌</li>')
$("#item").click(function(){
alert($(this).text());
});
//追加js对象
var li = document.createElement("li")
li.innerText = "谢逊";
$(".comment").append(li);
//如果是jquery对象,相当于移动操作
setTimeout(function(){
$(".comment").append($("li").eq(0));
},2000);
$("<li>周芷若</li>").appendTo(".comment").click(function(){
alert($(this).html())
})
})
</script>
(1) 前置插入
// 语法: 父.prepend(子) 子.prepenTo(父)
<script src="./libs/jquery-3.3.1.js"></script> <script> $(function(){ //前置追加 $("#prepend").click(function(){ //获取content值 let content = $('input[type=text]').val(); $('.comment').prepend(`<li>${content}</li>`); //两种添加方式 //$(`<li>${content}</li>`).prependTo('.comment'); }) }) </script>
(2)后置追加
<script src="./libs/jquery-3.3.1.js"></script>
<script>
//后置追加
$("#append").click(function(){
let content = $("input[type=Text]").val();
if(!content){
return;
}
$('.comment').append(`<li>${content}</li>`);
})
</script>
(3)兄弟追加(后)
目标兄弟.after(要插入的兄弟)
要插入的兄弟.inertAfter(目标兄弟)
<script src="./libs/jquery-3.3.1.js"></script> <script> $("#after").click(function(){ let content = $('input[type=text]').val(); //第一种写法 $("#item").after(`<li>${content}</li>`); //第二种写法 $(`<li>${content}</li>`).insertAfter("#item") }) </script>
(4)兄弟追加(前)
//语法 目标兄弟.before(要插入的兄弟) 要插入的兄弟.inertBefore(目标兄弟)
1.2删除和清空
//删除 $(seletor).remove();//删除整个标签 事件也删除 $(seletor).detach()//删除整个标签 事件保留 //清空 $(seletor).empty(); $(seletor).html(''); $(seletor).text('');
删除代码
<script src="./libs/jquery-3.3.1.js"></script> <script> $("#del").click(function(){ alert(1); //remove()删除,表示整个标签都删除(事件也删除) // $("ul").remove(); var jbtn = $(this).remove(); $(".comment #item").append(jbtn) }); //detach 删除标签,事件不删除 $("#detach").click(function(){ alert(1); var jbtn = $(this).detach(); console.log(jbtn); $('.comment #item').append(jbtn) })
清空代码
<script src="./libs/jquery-3.3.1.js"></script> <script> $(function(){ //清空父级元素的子内容 $('#empty').click(function(){ // $(".comment").empty(); // $(".comment").html(""); $(".comment").text(""); }) }) </script>
1.3 替换
<script src="./libs/jquery-3.3.1.js"></script> <script> $(function(){ $("#replace").click(function(){ $(".comment li a ").replaceWith('<span>1</span>') }) }) </script>
2.事件
(1)常见事件
- ondblclick
- onmouseover
- onmouseout
- onmouseenter
- onmouseleave
- onload
- onresize
- onscroll
- onfocus
- onblur
- oninput
(2)事件监听
- 事件捕获
- 处于目标阶段
- 事件冒泡阶段
oDiv.onclick = function(){}; 等价于 //false 表示没有捕获阶段 处于目标 冒泡 oDiv.addEventLister('click',function(){},false);
事件流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件流</title>
<script>
window.onload = function () {
var oBtn = document.getElementById('btn');
//1
document.addEventListener('click', function () {
console.log('document处于事件捕获阶段');
}, true);
//2
document.documentElement.addEventListener('click', function () {
console.log('html处于事件捕获阶段');
}, true);
//3
document.body.addEventListener('click', function () {
console.log('body处于事件捕获阶段');
}, true);
//4
oBtn.addEventListener('click', function () {
console.log('btn处于事件捕获阶段');
}, true);
//4
oBtn.addEventListener('click', function () {
console.log('btn处于事件冒泡阶段');
}, false);
//5 false 表示冒泡
document.body.addEventListener('click', function () {
console.log('body处于事件冒泡阶段');
}, false);
// //6
document.documentElement.addEventListener('click', function () {
console.log('html处于事件冒泡阶段');
}, false);
//7
document.addEventListener('click', function () {
console.log('document处于事件冒泡阶段');
}, false);
};
</script>
</head>
<body>
<a href="javascript:void(0);" id="btn">按钮</a>
</body>
</html>
(3)数据驱动视图
(4)事件对象
每个事件都会默认有个event对象
e.target 事件目标对象 e.keycode 键码 e.stopPropogation();//阻止默认事件
-
-
dblclick 双击事件
-
mouseover 鼠标移入事件(鼠标穿过被选元素或被选元素的子元素会触发)
-
mouseout
-
mouseenter(常用)进入事件(鼠标只穿过被选元素会触发事件)
-
mouseleave
-
mousedown 鼠标按下
-
mouseup 鼠标弹起