jquery追加元素
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>
浙公网安备 33010602011771号
