jquery追加元素
阿新 • • 發佈：2022-05-15
JQ追加元素：
<body>
<ul>
<li>大淵</li>
<li>二淵</li>
<li>小淵</li>
</ul>
<script src="./jquery/jquery.min.js"></script>
<script>
/*
在JQuery建立一個元素
$("html元素")
比如:
$("<li></li>")
$("<div>我是一個div</div>")
*/
let li = $("<li></li>")
li.html("充話費送的")
/*
追加一個元素
父元素.append("新的子元素");
比如:
$("ul").append(li); //li是新建立的
追加的位置是在父元素的末尾
*/
// $("ul").append(li)
/* 追加還有另外一個寫法 to
新的子元素.appendTo("父元素")
li.appendTo("父元素") //li是新建立的
比如:
li.appendTo($("ul"))
*/
// li.appendTo($("ul"))
/*
prepend
追加到最前面
父元素.preprend(新的兒子)
比如:
$("ul").prepend(li)
*/
// $("ul").prepend(li)
// prependTo
/*
新的子元素.prependTo("父元素")
比如:
li.prependTo($("ul"))
*/
li.prependTo($("ul"))
</script>
</body>
JQ追加相鄰的元素：
<body>
<ul>
<li>大淵</li>
<li id="ey">二淵</li>
<li>三淵</li>
</ul>
<script src="./jquery/jquery.min.js"></script>
<script>
/* 建立li標籤 */
let li = $("<li>垃圾桶撿來的</li>")
//新增哥哥 before
// 比如: 標籤.before("新的哥哥")
// $("#ey").before(li)
//還有另外一種寫法
// 比如: 新的哥哥.insertBefore(標籤)
// li.insertBefore("#ey")
//新增弟弟 after
// 比如:標籤.after(新的弟弟)
// $("#ey").after(li)
// 還有另外一種寫法
// 比如:新的弟弟.insertAfter("哥哥")
li.insertAfter($("#ey"))
</script>
</body>
JQ克隆和修改：
<body>
<ul>
<li>1</li>
<li id="e">2</li>
<li>3</li>
</ul>
<script src="./jquery/jquery.min.js"></script>
<script>
/*
replaceWith
老元素.replaceWith(新元素)
*/
//建立一個p標籤
// let li = $("<p>我要替換你</p>")
// $("div").replaceWith(li)
/*
replaceAll
新元素.replaceAll(老元素)
*/
// li.replaceAll($("div"))
/* 克隆一
let newElement = 元素.clone()
*/
//克隆
$("#e").click(function(){
window.alert("我是一個事件")
})
//這種克隆沒有事件
// let newClone = $("#e").clone()
// console.log(newClone);
//克隆完了,扔到ul的最後面
// $("ul").append(newClone)
/*
克隆二
元素.clone(true) //表示把事件也給克隆了
*/
let newClone1 = $("#e").clone(true)
$("ul").append(newClone1)
</script>
</body>
JQ清空和刪除標籤：
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script src="./jquery/jquery.min.js"></script>
<script>
/* 刪除標籤有兩種
empty(); //空的意思
remove(); //移出
*/
/*
刪除標籤裡面的內容
*/
// $("body").empty();
// $("ul").empty();
/*
幹掉這個標籤
*/
// $("body").remove();
// $("ul").remove();
</script>
</body>
JQ操作尺寸：
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
padding: 100px;
margin: 200px;
border: 50px solid red;
background-color: springgreen;
}
</style>
</head>
<body>
<div>我是一個div</div>
<script src="./jquery/jquery.min.js"></script>
<script>
/*
讀寫取盒子的寬和高
width和height 沒有引數是獲取,一個引數是設定
*/
// $("div").width(80)
// $("div").height(100)
// console.log(typeof $("div").width());
// console.log($("div").width());
// console.log($("div").height());
/* 獲取內容+內邊距 */
// innerHeight 內容+內邊距的高
// innerWidth 內容+內邊距的寬 注意:不能設定
// console.log($("div").innerHeight());
// console.log($("div").innerWidth());
/* 獲取內容+內邊距+邊框 */
// outerHeight
// outerWidth
// console.log($("div").outerHeight());
// console.log($("div").outerWidth());
/* 獲取內容+內邊距+邊框+外邊距 */
// outerHeight(true)
// outerWidth(true)
// console.log($("div").outerHeight(true));
// console.log($("div").outerWidth(true));
</script>
</body>
JQ操作元素的位置：
<style>
*{
padding: 0;
margin: 0;
}
body{
height: 2000px;
width: 2000px;
}
div{
width: 200px;
height: 200px;
margin: 100px;
padding: 100px;
border: 10px solid red;
/* position: fixed; */
/* position: relative; */
/* position: absolute;
top: 150px;
left: 150px; */
}
</style>
</head>
<body>
<div>我是一個div</div>
<script src="./jquery/jquery.min.js"></script>
<script>
// scroll 滾動事件
$(window).scroll(function(){
/*
$("div").offset() 讀取到的是一個物件
top
left
*/
// $("div").offset({top:111,left:111}) //可以設定設定的時候,傳的是一個物件
// console.log($("div").offset()); //瀏覽器的文件流來計算位置的 讀取到的就是left,top值和定位沒有關係
//定位
// console.log($("div").position());
// 不計算當前的視窗
// scrollTop
// console.log($(window).scrollTop());
// console.log($(window).scrollLeft());
})
</script>
</body>
jq滑鼠跟隨：
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 150px;
border: 5px solid #000;
margin: 50px auto;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.box p{
width: 100px;
height: 100px;
}
img{
width: 100%;
height: 100%;
display: block;
}
span{
width: 200px;
height: 200px;
display: none;
position: relative;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<p><img src="./img/1.png" alt=""></p>
<p><img src="./img/2.png" alt=""></p>
<p><img src="./img/3.png" alt=""></p>
</div>
<span>
<img src="./img/1.png" alt="">
</span>
<script src="./jquery/jquery.min.js"></script>
<script>
/*
1.滑鼠移入到img當中,顯示span
2.顯示的是我放入的那個標籤上面的那個圖片
想辦法獲取到那個圖片
$(".box p").find("img").attr("src")
將我們獲取到那張圖片放入到span裡面的img裡面去
3.獲取滑鼠的座標
pageX ☆
cliantX
offsetX
將我的座標通過offset設定span的top和left值
*/
$(".box p").hover(function(){
/* 滑鼠移入的時候,需要顯示span */
// window.alert("滑鼠移入了")
$("span").show(10);
},function(){
$("span").hide(10);
// window.alert("滑鼠移出了")
}).mousemove(function(e){
// console.log($(this).find('img').attr("src"));
$("span img").attr("src",$(this).find('img').attr("src"))
// console.log("pageX",e.pageX,e.pageY);
// console.log("clientX",e.clientX,e.clientY);
// console.log("offsetX",e.offsetX,e.offsetY);
$("span").offset({top:e.pageY+10,left:e.pageX+10})
})
</script>
</body>
jq通訊錄：
<body>
<ul>
<li>
我的祖宗
<ol>
<li>文政</li>
<li>文徹</li>
<li>文民</li>
</ol>
</li>
<li>
我的同事
<ol>
<li>馬雲</li>
<li>馬化騰</li>
<li>馬冬梅</li>
</ol>
</li>
<li>
我的小弟
<ol>
<li>普京</li>
<li>澤連斯基</li>
<li>陳錦</li>
</ol>
</li>
</ul>
<script src="./jquery/jquery.min.js"></script>
<script>
//1.預設的情況下隱藏ol li
$("ol>li").hide();
$("ul>li").click(function(){
/* 點選顯示的this下面的ol li */
$(this).find("ol>li").toggle(500)
$(this).siblings().find("ol>li").hide(500);
})
</script>
</body>