本文介绍了jQuery中用于元素操作的方法，包括内部和外部添加元素、删除元素、克隆、查找祖先和后代元素、兄弟元素方法以及结构过滤等。详细阐述了各方法的作用、语法和应用场景，如append、prepend、remove、clone、parent、siblings等，还涵盖了addBack和end方法的使用。
一、常用方法-scrollLeft()-scrollTop()
<style>
div{
width: 100px;
height: 100px;
border: solid 1px;
overflow: scroll;
}
body{
height: 3000px;
}
</style>
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<div>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</div>
<!--
方法：
scrollLeft()
scrollTop()
作用：获取和设置页面向左和向上滚动的距离。
-->
<script>
//js原生代码获得和设置滚动的距离
/*var div = document.querySelector("div");
div.onscroll = function () {
if(div.scrollTop > 100){
div.scrollTop = 0;
}
}*/
//给整个页面添加滚动事件
/*window.onscroll = function () {
var obj = document.documentElement || document.body;
if(obj.scrollTop > 1000)
obj.scrollTop = 0;
}*/
//使用jQuery实现上述的功能
var $div = $("div");
$div.scroll(function () {
if($div.scrollTop() > 100){
$div.scrollTop(0);
}
});
二、jQuery创建元素对象
jQuery创建元素对象的方式：
方式-1：
(
"
<
标
签
名
>
"
)
方
式
−
2
：
("<标签名>") 方式-2：
("<标签名>")方式−2：("<头标签名 属性…>内容<尾标签名>")
<script src="js/jquery-1.12.4.js"></script>
<script>
//使用js创建一个div，并设置内容。
var div = document.createElement ("div");
// setDiv(div);
//jQuery创建对象的方式
//方式-1
var $div = $("<div>");
// setDiv ($div[0]);
//方式-2
var $div = $("<div title='title' id='box'>helloworld</div>");
setDiv ($div[0]);
function setDiv(div) {
div.style.width = "200px";
div.style.height = "200px";
div.style.backgroundColor = "red";
// div.innerHTML = "hello";
document.body.appendChild (div);
}
</script>
三、jQuery方法-内部添加元素的方法
jQuery 容器内部添加元素对象的方法：
1：append:
作用：对当前容器尾部追加实参的内容。
语法：jQuery容器.append(jQuery对象 | 标签字符串);
2：appendTo：
作用：当前对象追加到实参容器的尾部。
语法：jQuery对象.appendTo(jQuery容器对象 | 标签字符串)
注意：上述两个方法具有移动元素的特性。
<script src="js/jquery-1.12.4.js"></script>
<ul>
<li>111111</li>
<li>2222222</li>
<li id="li3">33333333</li>
<li>44444444</li>
<li>555555555</li>
</ul>
<script>
//ul 尾部追加元素
var $li = $("<li>I am the new li</li>");
//append
$("ul").append($li);
$("ul").append("<li>I am the second new li</li>");
//将下标是1的li移动至末尾。
$("ul").append($("ul li:eq(1)"));
//appendTo
$("#li3").appendTo($("ul"));
$li.appendTo("ul");
</script>
四、jQuery方法-外部添加元素的方法
jQuery方法：外部添加元素。
1：after：
作用：当前元素后面插入指定的元素。
语法：jQuery对象.after(待插入对象)
2：insertAfter：
作用：当前元素插入到指定元素的后面。
语法：待插入对象.insertAfter(jQuery对象)
3：before：
作用：当前元素前面插入指定的元素。
语法：jQuery对象.before(待插入对象)
4：insertBefore：
作用：当前元素插入到指定元素的前面。
语法：待插入对象.insertBefore(jQuery对象)
注意：append、appendTo、after、insertAfter、before、insertBefore
都具有移动元素的效果。
<ul>
<li>1111</li>
<li>2222</li>
<li id="li3">3333</li>
<li>4444</li>
<li id="li5">55555</li>
</ul>
<script src="js/jquery-1.12.4.js"></script>
<script>
//li3后插入一个新的li
var $li = $("<li>I am the new li</li>");
$("#li3").after($li);
$("#li3").after("<li>I am the second new li</li>");
//将新创建的li添加到li5的后面
$li.insertAfter($("#li5"));
</script>
五、jQuery方法-删除元素
元素删除的方法：
1：empty()
作用：清空一个元素内部的所有的内容。只留下元素的标签和属性。
语法：要清空的对象.empty()
2：remove()
作用：删除当前对象，
如果当前对象是一个集合，可以通过实参传入选择器来删除容器中指定的内容
注意：删除之后的对象的绑定的事件。被一并删除。
<ul id="box">
<!--I am the comments-->
<li>111111111</li>
<li>2222222222</li>
<li id="li3">3333333333</li>
<li class="sty">444444444</li>
<li>555555</li>
<li>66666666</li>
你好
</ul>
<script src="js/jquery-1.12.4.js"></script>
<script>
//清空ul
// $(document).click(function () {
// $("ul").empty();
// });
//删除整个ul
// $(document).click(function () {
// $("ul").remove();
// });
//删除容器中的某一个li
$ (document).click (function () {
//删除id 是li3的ul 删除不成功 no ok
// $("ul").remove("#li3");
//删除所有的li中的id是li3
// $("li").remove("#li3");
//删除多个选择器选择的内容。ok
// $("li").remove("#li3,.sty");
//自己删除自己
// $ ("#li3").remove ();
});
$ ("#li3").click (function () {
console.log ("hello");
});
//删除之后再添加回来，事件是否还在？事件丢失。
$ ("#li3").remove ().appendTo ("ul");
</script>
六、jQuery方法-克隆
克隆方法：clone(布尔值)
作用：克隆当前对象。
语法：jQuery对象.clone()
参数：是布尔值，如果是true，意味着连事件一并克隆，false，事件不克隆。
<style>
div{
width: 200px;
height: 200px;
background-color: orange;
border: solid 1px;
text-align: center;
line-height: 200px;
font-size: 50px;
}
</style>
</head>
<body>
<div>
<span>
hello
</span>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
var $div = $("div");
$div.click(function () {
//this js的原生对象。
console.log ($(this).html());
});
$div.clone(true).appendTo($(document.body));
</script>
七、jQuery方法-祖先元素方法
获取祖先元素的方法：
1：parent():获得当前元素的直接的父节点对象。
2：parents(): 获得当前元素的所有的父节点对象。
3: parentsUntil(截止元素)：获得当前元素和实参元素之间的所有的父节点对象。
不包含自己。不包含截止元素。
<body>
<div id="red">
<div id="green">
<div id="blue">
</div>
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
//获得 id blue的父节点对象
console.log ($("#blue").parent()[0]);
console.log ("--------------")
//blue的所有的父节点对象
var $parents = $("#blue").parents();
for (let i = 0; i < $parents.length; i++) {
console.log ($parents[i]);
}
console.log ("--------------")
//获得blue和body之间的所有的父节点对象
var $parents = $("#blue").parentsUntil($(document.documentElement));
for (let i = 0; i < $parents.length; i++) {
console.log ($parents[i]);
}
</script>
八、jQuery方法-后代元素法
后代元素的方法：
1：children(): 当前元素的所有的子元素对象。
2：find(参数)： 从当前元素中查找满足参数的子元素。
参数可以是任意的选择器。进行内容的过滤。
<body>
<div id="red">
<div id="green">
<div id="blue">
</div>
</div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<p id="p1"></p>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
//获得所有的red的子元素。
var $red = $("#red");
//所有的子元素
// var children = $red.children();
//满足条件的。
var children = $red.children("#green");
for (let i = 0; i < children.length; i++) {
console.log (children[i])
}
//find
var spans = $red.find("span,#p1");
for (let i = 0; i < spans.length; i++) {
console.log (spans[i])
}
</script>
九、jQuery方法-兄弟元素法
兄弟元素方法
1:siblings(): 当前元素的所有的兄弟元素节点。
2：next(): 当前元素的下一个兄弟节点。
3: nextAll(): 当前元素的后面的所有的兄弟节点。
4: nextUntil(截止元素)：当前元素和截止元素之间的所有的兄弟节点。
两头都不包含。
5: prev(): 当前元素的上一个兄弟元素。
6：prevAll(): 当前元素的前面的所有的兄弟元素。
7：prevUntil(截止元素)：当前元素和截止元素之间的所有的兄弟节点。
<ul>
<li>11111111</li>
<li>222222222</li>
<li id="li3">3333333333</li>
<li>4444444444</li>
<li>5555555555</li>
<li id="li6">6666666666</li>
</ul>
<script src="js/jquery-1.12.4.js"></script>
<script>
//获得li3的所有的兄弟节点
var siblings = $ ("#li3").siblings ();
for (let i = 0; i < siblings.length; i++) {
console.log (siblings[i]);
}
console.log ("------------")
//获得第5个li节点
console.log ($ ("#li3").next ().next ()[0]);
console.log ("------------")
//li3后面的所有的兄弟节点
$ ("#li3").nextAll ();
console.log ("------------")
var until = $ ("#li3").nextUntil ("#li6");
for (let i = 0; i < until.length; i++) {
console.log (until[i]);
}
console.log ("------------")
//获得第一个li
console.log ($ ("#li3").prev ().prev ()[0]);
</script>
十、jQuery方法-结构过滤方法
结构过滤的方法：下面的方法是对一个结果集进行过滤，返回过滤后的结果。
1：first(): 获得结果集中的第一个元素。
2：last(): 获得结果集中的最后一个元素。
3：eq(index): 获得结果集中下标是index的元素。下标从0开始。
4：filter(过滤参数)：使用实参的内容对结果集进行过滤，参数一般就是选择器。
过滤参数可以是多个选择器。使用逗号分开。
<ul>
<li>11111111</li>
<li>222222222</li>
<li id="li3">3333333333</li>
<li>4444444444</li>
<li class="sty">5555555555</li>
<li id="li6">6666666666</li>
</ul>
<script src="js/jquery-1.12.4.js"></script>
<script>
var $lis = $("li");
//获得所有的li中的一个
$lis.first().css("backgroundColor","red");
//获得所有的li中的最后一个
$lis.last().css("backgroundColor","blue");
//获得所有的li中的第n个
$lis.eq(3).css("backgroundColor","orange");
//获得满足过滤的所有的li中的部分。
$lis.filter(".sty,#li6").css("backgroundColor","green");
</script>
十一、addBack-end方法
addBack():
作用：将产生当前结果集的对象追加到当前结果集的末尾。
end()
作用：返回链式调用结构的最后一次变化的调用对象。
end()方法的调用者在链式结构中的前面的最后的一个调用者，该调用者对象必须和end()方法的调用者不同。
<ul>
<li>1111111</li>
<li>22222222222</li>
<li id="li3">3333333333</li>
<li>444444444</li>
<li>5555555555</li>
</ul>
<script src="js/jquery-1.12.4.js"></script>
<script>
//addBack()
// $("#li3").nextAll().addBack().css("background-color","red");
//end()
$("#li3").next().next().end().css("background-color","red");
</script>
十二、练习-1
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 400px;
height: 200px;
margin: 100px auto;
}
ul {
list-style: none;
}
li {
float: left;
width: 100px;
height: 100px;
border: 1px solid #ccc;
background-color: #eee;
font-size: 72px;
text-align: center;
line-height: 100px;
opacity: 0.5;
}
.red {
color: red;
border-color: red;
opacity: 1;
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
//给每个li添加mouseover事件
$ ("li")
.mouseover (function () {
//给当前对象this添加样式
$ (this).addClass ("red");
})
.mouseout (function () {
$ (this).removeClass ("red");
});
</script>
十三、练习-王者荣耀相册
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#wrap {
width: 690px;
margin: 50px auto;
}
h2 {
text-align: center;
margin: 20px auto;
color: #2f2f65;
}
ul {
list-style: none;
overflow: hidden;
}
li {
float: left;
margin-right: 10px;
}
ul li:last-of-type {
margin-right: 0;
}
li img {
width: 130px;
opacity: 0.5;
}
ul li:first-of-type img {
opacity: 1;
}
#show {
height: 300px;
overflow: hidden;
margin: 10px 0;
}
#show img {
width: 690px;
}
#content {
font-size: 14px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<h2>王者荣耀相册</h2>
<div id="title">
<ul>
<li><img src="imgs/1.jpg" alt="图1:韩信"></li>
<li><img src="imgs/2.jpg" alt="图2:刘邦"></li>
<li><img src="imgs/3.jpg" alt="图3:露娜"></li>
<li><img src="imgs/4.jpg" alt="图4:兰陵王"></li>
<li><img src="imgs/5.jpg" alt="图5:武则天"></li>
</ul>
</div>
<div id="show"><img src="imgs/1.jpg" alt=""></div>
<div id="content">图1：韩信</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
//给每个li添加鼠标移入事件。获得当前缩略图的属性，将获得的属性设置到大图和名称的位置。
$("ul img")
.mouseover(function () {
//获得属性
var srcAttr = $(this).attr("src");
var nameAttr = $(this).attr("alt");
//设置属性
$("div>img").attr("src",srcAttr);
$("#content").html(nameAttr);
//设置为不透明
$(this).css("opacity","1");
})
.mouseout(function () {
$(this).css("opacity","0.5");
});
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
