操作元素(属性，css，文档处理)
1.属性操作
常用的包括下面几类：
--------------------------属性 $("").attr(); $("").removeAttr(); $("").prop(); $("").removeProp(); --------------------------CSS类 $("").addClass(class|fn) $("").removeClass([class|fn]) --------------------------HTML代码/文本/值 $("").html([val|fn]) $("").text([val|fn]) $("").val([val|fn|arr]) --------------------------- $("").css("color","red")
下面是一段html示例：
Title
是否可见
是否可见
uuuuu
ppppp
我们添加js代码，看看都是什么效果：
结果打印是：false，说明这个hasClass是用来判断div标签是否存在传入的属性，返回的是一个布尔值，这个很像我们python类里面的hasattr方法。
console.log($("div").attr("con"));
结果打印是：c1，可见attr可以用来获取传入属性对应的值。
$("div").attr("con","c2");
console.log($("div").attr("con"));
结果打印是：c2，可见attr还可以用来修改传入属性的值，主要参数的顺序，第一个是属性，第二个是新的值。
console.log($(":checkbox:first").attr("checked"));
console.log($(":checkbox:last").attr("checked"));
console.log($(":checkbox:first").prop("checked"));
console.log($(":checkbox:last").prop("checked"));
结果打印如下图：
这里就要注意了：
我们再试一下prop获取自定义的属性会怎样：
console.log($("div").prop("con"));
console.log($("div").prop("class"));
打印的结果是：undefined和div1，所以自定义的属性我们还是要用attr。下面再看一下HTML代码/文本/值：
console.log($("#id1").html());
console.log($("#id1").text());
html()和text()的区别和js里面一样，打印的分别是uuuuu
ppppp
、uuuuu ppppp。而val()是用来获取固有属性的：console.log($(":text").val());
打印的结果是123，也可以传入参数：$(":text").val("789")
利用上面的这个特点，我们可以实现一个简单的正反选和模态对话框：
Title
| 666 | 666 | 666 | |
| 666 | 666 | 666 | |
| 666 | 666 | 666 |
Title
2.文档处理
下面是jQuery对于HTML文档的处理，首先写一段简单的HTML示例：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div class="c1">
<p>PPPp>
div>
<button>addbutton>
<script src="jquery-3.4.0.js">script>
<script>
$("button").click(function () {
var $ele=$("");
$ele.html("HELLO WORLD!");
$ele.css("color","red");
})
script>
body>
html>
目的是点击按钮，能操作我们定义的h1标签，接下来，就是各种文档操作，也就是增删改：
1.内部插入
//$(".c1").append($ele);
//$ele.appendTo(".c1");
//$(".c1").prepend($ele);
$ele.prependTo(".c1");
这四种都是内部插入的方法，前面两个是在标签下面下入，后面两个是在标签上面插入。
2.外部插入
$(".c1").after($ele);
$ele.insertAfter(".c1");
$(".c1").before($ele);
$ele.insertBefore(".c1");
这四种是外部插入的方法，看结果和内部插入一样，但是看HTML源码的差别：
两个h1标签的位置不同，左边是外部插入，右边的是内部插入。
3.替换
$("p").replaceWith($ele)
上面说的都是增加，改也很简单，直接把p标签替换成我们的h1就是这样。
4.删除与清空
$(".c1").empty()
$(".c1").remove()
这两个也是一样，看结果也是一样，还是要从html代码去分析：
左边是remove，直接把c1也删除了，右边是empty，还保留着div标签。
5.复制
var $ele2= $(".c1").clone();
$(".c1").after($ele2)
把div标签复制后，外部插入到下边，这样简单地插入会成倍的增加div标签的数量。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div class="outer">
<div class="item">
<button onclick="add(this)">+button>
<input type="text">
div>
div>
<script src="jquery-3.4.0.js">script>
<script>
// 不加this，复制的是所有的class名字一样的，所以会越来越多
// function add(self) {
// var $clone_obj =$(self).parent().clone();
// $('.outer').append($clone_obj);
// }
function add(self) {
var $clone_obj =$(self).parent().clone();
$clone_obj.children('button').text('-').attr('onclick','remove_obj(this)');
$('.outer').append($clone_obj);
}
function remove_obj(self) {
$(self).parent().remove()
}
script>
body>
html>
3.CSS操作
CSS
$("").css(name|pro|[,val|fn])
位置
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
尺寸
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
1.offset
offset()是相对于视口的偏移量，下面在一段HTML代码中具体体现。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
*{
margin: 0px;
padding: 0px;
}
.div1,.div2{
width: 200px;
height: 100px;
}
.div1{
border: 5px solid rebeccapurple;
padding: 20px;
margin: 5px 10px;
background-color: antiquewhite;
}
.div2{
background-color: rebeccapurple;
}
/*.outer{*/
/*position: relative;*/
/*}*/
style>
head>
<body>
<div class="div1">div>
<div class="outer">
<div class="div2">div>
div>
body>
html>
添加下面这段js代码：
console.log($(".div1").offset().top);
console.log($(".div1").offset().left);
console.log($(".div2").offset().top);
console.log($(".div2").offset().left);
结果分别是：5、10、160、0，所以可以很清晰的理解是offset()相对于视口的左上角的像素值。
2.position
同样，在上面HTML实例的基础上，添加下面这段js代码：
console.log($(".div1").position().top);
console.log($(".div1").position().left);
console.log($(".div2").position().top);
console.log($(".div2").position().left);
结果是0、0、160、0，看看下面这个图就明白了：
position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离。
offset()始终返回相对于浏览器文档的距离，它会忽略外层元素。
所以，我们把outer的css样式添加position: relative;最后的结果就变成了0、0、0、0。
3.尺寸
添加如下js代码：
//console.log($(".div1").height("300px")); console.log($(".div1").innerHeight()); console.log($(".div1").outerHeight()); console.log($(".div1").outerHeight(true));
结果分别是，140、150、160，区别就在于要不要加上margin和padding。
4.scrollTop
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
*{
margin-left: 0;
margin-top: 0;
}
.div1,.div2{
height: 1000px;
width: 100%;
}
.div1{
background-color: #84a42b;
}
.div2{
background-color: #ccdcef;
}
.div3{
position: fixed;
bottom: 20px;
right: 10px;
width: 100px;
height: 50px;
background-color: #2459a2;
color: crimson;
line-height: 50px;
text-align: center;
}
.hide{
display: none;
}
style>
head>
<body>
<div class="div1">div>
<div class="div2">div>
<div class="div3 hide" onclick="gotop()">返回顶部div>
<script src="jquery-3.4.0.js">script>
<script>
//监听滚动条
window.onscroll=function(){
console.log($(window).scrollTop());
if($(window).scrollTop()>300){
$(".div3").removeClass("hide");
}
else {
$(".div3").addClass("hide");
}
};
function gotop() {
$(window).scrollTop(0)
};
script>
body>
html>