一、样式操作
1、JQ中的样式类
somenode.addClass();// 添加指定的CSS类名。
somenode.removeClass();// 移除指定的CSS类名。
somenode.hasClass();// 判断样式存不存在
somenode.toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
somenode.className 获取所有样式类名(字符串)
somenode.classList 获取所有样式类名(数组)
somenode.classList.remove("cls") 删除指定类
somenode.classList.add("cls") 添加类
somenode.classList.contains("cls") 存在返回true，否则返回false
somenode.classList.toggle("cls") 存在就删除(返回false)，不存在则添加(返回true)
JS中的class操作
2、CSS
somenode.css("属性","值")
示例：
$("p").css("color", "red"); //将所有p标签的字体设置为红色
$("p").css({"height": "300px","width":"300px"}); // 同时设置多个属性值
somenode.style.color="red"
JS中DOM操作
二、位置操作
somenode.offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
somenode.position()// 获取匹配元素相对父元素的偏移
somenode.scrollTop()// 获取匹配元素相对滚动条顶部的偏移或设置偏移量
somenode.scrollLeft()// 获取匹配元素相对滚动条左侧的偏移或设置偏移量
注意：
.offset()是检索一个元素相对于文档（document）的当前位置。
.position()是相对于父级元素的位移。
只有position不能设置偏移量。
其他三个都可以设置：
不写参数时：获取值
写参数时：设置值
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.c1 {
position: relative;
left: 100px;
height: 100px;
width: 100px;
background-color: red;
}
.c2 {
position: absolute;
left: 100px;
height: 100px;
width: 100px;
background-color: green;
}
</style>
</head>
<body>
<div class="c1">
<div class="c2"></div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</body>
</html>
HTML代码
操作示例：
// 获取匹配元素在当前窗口的相对偏移
$(".c1").offset(); // {top: 0, left: 100}
$(".c2").offset(); // {top: 0, left: 200}
// 获取匹配元素相对父元素的偏移
$(".c2").position(); //{top: 0, left: 100}
// 给获取的匹配元素设置相对于当前窗口的偏移量
$(".c2").offset({top:100,left:200});
三、尺寸
somenode.height() // 内容的高度
somenode.width() // 内容的宽度
somenode.innerHeight() // 内容的高度+padding
somenode.innerWidth() // 内容的宽度+padding
somenode.outerHeight() // 内容的高度+padding+border
somenode.outerWidth() // 内容的宽度+padding+border
四、文本操作
1、获取(设置)HTML代码
somenode.html() // 获取匹配元素的html内容
somenode.html("内容") // 设置匹配元素的html内容
2、获取(设置)文本值
somenode.text()// 获取匹配元素的内容
somenode.text("内容")// 设置匹配元素的内容
获取内容
somenode.innerHTML;
somenode.innerText;
设置内容
somenode.innerHTML = "内容";
somenode.innerText = "内容";
对比JS
3、value值：适用于表单的input、select、textarea
somenode.val() // 获取当前值
somenode.val("值") // 设置匹配元素的值
somenode.val(["值1", "值2"]) // 设置多选的checkbox、多选select的值
somenode.value // 获取值
somenode.setAttribute("value","值") // 设置值
对比JS
注意：获取表单的text、checkbox、radio、select等值用val()，而获取普通标签的文本内容用text()
4、例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
《春晓》
<p>
春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。
</p>
</div>
<input type="text" id="i1">
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="doublecolorball">双色球
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</body>
</html>
HTML代码
操作示例：
$("#d1").text(); // 只输出内容
$("#d1").html(); // 标签和内容都输出
$("#d1").text("<a href="www.baidu.com">百度</a>"); // 设置值，标签也设置成字符串
$("#d1").html("<a href="www.baidu.com">百度</a>"); // 设置值，标签就会形成标签
$("#i1").val() // 获取文本框的内容
五、属性操作
1、获取文本类属性
somenode.attr("属性名") // 返回匹配元素的属性值
somenode.attr("属性名", "值") // 为匹配元素设置一个属性值
somenode.attr({k1: v1, k2:v2}) // 为匹配元素设置多个属性值
somenode.removeAttr("属性名") // 从匹配的元素中删除一个属性
JS属性(attribute)操作
语法：
为某节点增加一个属性
somenode.setAttribute("属性名","值");
获取这个属性值
somenode.getAttribute("属性名");
删除属性
somenode.removeAttribute("属性名");
对比JS
2、获取表单里的属性(checkbox、select和radio的属性)
somenode.prop("属性名") // 获取属性
somenode.removeProp("属性名") // 移除属性
注意：
在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。
为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")
3、示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="d1" title="属性示例" name="例子">div</div>
<input type="checkbox" id="i1" checked="checked" value="a">
<input type="radio" value="b">
</body>
</html>
HTML代码
操作示例：
$("#d1").attr("title"); // "属性示例"
$("#d1").attr("name"); // "例子"
$("#d1").attr("name","嘿嘿嘿");
$("#d1").attr("name"); //"嘿嘿嘿"
$("#d1").removeAttr("name");
$(":checkbox[value='a']").prop("checked"); // true
$(":radio[value='b']").prop("checked", true);
4、attr和prop区别
prop和attr的区别：
attr全称attribute(属性)
prop全称property(属性)
虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，
可以认为attr是显式的，而prop是隐式的。即你选中的时候，标签才会有这个属性，比如checked，当你在多选按钮中选中了某个按钮，
那个按钮就自动会设置checked属性。
比如：
<input type="checkbox" id="i1" value="1">
$("#i1").attr("checked") // undefined
$("#i1").prop("checked") // false
可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。
如果换成下面的代码：
<input type="checkbox" id="i1" value="1" checked>
$("#i1").attr("checked") // checked
$("#i1").prop("checked") // true
这已经可以证明attr的局限性，它的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。
再看一下针对自定义属性，attr和prop的区别：
<input type="checkbox" checked id="i1" value="1" me="自定义属性">
$("#i1").attr("me") // "自定义属性"
$("#i1").prop("me") // undefined
可以看到prop不支持获取标签的自定义属性。
总结
1.对于标签上有的能看到的属性和自定义属性都用attr
2.对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
六、文档处理(jQuery中没有创建节点的方法)
1、元素内部(A,B代表的都是节点)
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
注意：append也可以直接追加HTML代码
$("div").append("<button class="c1">点我</button>");
添加到指定元素内部的前面
$(A).prepend($(B))// 把B前置到A
$(A).prependTo($(B))// 把A前置到B
2、元素外部
添加到指定元素外部的后面
$(A).after($(B))// 把B放到A的后面
$(A).insertAfter($(B))// 把A放到B的后面
添加到指定元素外部的前面
$(A).before($(B))// 把B放到A的前面
$(A).insertBefore($(B))// 把A放到B的前面
3、删除
移除和清空元素
$(A).remove() // 从DOM中删除所有匹配的元素(所有都删除HTML，连带标签也删除)
$(A).empty() // 删除匹配的元素集合中所有的子节点(只删除内容Text，不删除标签)
<div id="d1">
嘿嘿嘿
</div>
$("#d1").remove(); // 把div标签和嘿嘿嘿都删除了
$("#d1").empty(); // 只删除嘿嘿嘿，div标签没有删除了
注意：JS中操作节点都是基于父节点操作的
1.添加节点(子节点)
追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)；
把增加的节点放到某个节点的前边。
somenode.insertBefore(newnode,某个节点);
示例1：
//创建节点
var pEle = document.createElement("p");
//先找一个父节点
var dEle = document.getElementById("d");
//把子节点追加到父节点
dEle.appendChild(pEle);
示例2：
//创建节点
var pEle = document.createElement("p");
//先找一个父节点
var dEle = document.getElementById("d");
//父节点里面的某个节点
var d1 = document.getElementById('d1');
//把子节点放到d1这个节点前面
dEle.insertBefore(pEle,d1);
2.删除节点
语法：
获得要删除的元素，通过父元素调用该方法删除
somenode.removeChild(要删除的节点)
示例：
//先找一个父节点
var dEle = document.getElementById("d");
//找到父节点里面想要删除的子节点
var d1 = document.getElementById('d1');
//删除子节点
dEle.removeChild(d1);
3.替换节点
语法：
somenode.replaceChild(newnode, 某个节点);
示例：
//创建节点
var pEle = document.createElement("p");
//先找一个父节点
var dEle = document.getElementById("d");
//父节点里面的某个节点
var d1 = document.getElementById('d1');
//用新建的节点替换d1
dEle.replaceChild(pEle,d1);
对比JS
4、替换
$(A).replaceWith($(B))
$(B).replaceAll($(A))
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1"></div>
<hr>
<div id="d2">
<p>嘿嘿嘿！</p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</body>
</html>
HTML代码
操作示例：
var aEle = document.createElement('a');
aEle.innerText = "百度";
aEle.href = "www.baidu.com";
$("p").replaceWith(aEle); // 用新建的a节点替换所有的p标签
var aEle = document.createElement('a');
aEle.innerText = "百度";
aEle.href = "www.baidu.com";
$(aEle).replaceAll($("p")); // 用新建的a节点替换所有的p标签
5、克隆
$(A).clone() // 不加参数true，克隆标签但不克隆标签带的事件
$(A).clone(true) // 加参数true，克隆标签且克隆标签带的事件
七、示例
1、返回顶部
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>返回顶部示例</title>
<style type="text/css">
.content {
height: 3000px;
}
.btn {
height: 50px;
width: 50px;
position: fixed;
right:15px;
bottom:15px;
}
.hide {
display:none;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="content">
<p>渡远荆门外，来从楚国游。</p>
<p>山随平野尽，江入大荒流。</p>
<p>月下飞天镜，云生结海楼。</p>
<p>仍怜故乡水，万里送行舟。</p>
</div>
<div id="b1" class="btn hide">
<button type="button" id="b2" style="background-color: blueviolet">返回顶部</button>
</div>
<script type="text/javascript">
// window是DOM对象，所以用$()把它转成JQ对象，scroll是滚动事件的关键字
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#b1").removeClass('hide');
}else{
$("#b1").addClass('hide');
}
});
$("#b2").on("click",function () {
$(window).scrollTop(0);
})
</script>
</body>
</html>
返回顶部按钮
2、登录验证
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>登录示例</title>
</head>
<body>
<form action="">
<p>
<label>用户名
<input type="text" name="username">
</label>
<span style="color: red;"></span>
</p>
<p>
<label>密码
<input type="password" name="password">
</label>
<span style="color: red;"></span>
</p>
<p>
<button id="login" type="button">登陆</button>
</p>
</form>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// 给登陆按钮，绑定点击事件
$("#login").click(function () {
// 1. 找到所有需要判断的input输入框
var $inputEles = $("label>input");
// 2. for循环依次做判断input是否为空
for (var i=0;i<$inputEles.length;i++){
var $inputEle = $($inputEles[i]); // $(DOM对象) --> jQuery对象
if(!$inputEle.val().trim()){
// 获取label的值
var tem = $inputEle.parent().text().trim();
$inputEle.parent().next().text(tem+"不能为空");
}
}
});
// 给获取用户输入的input框绑定事件
var $inputEles = $("label>input");
for (var j=0;j<$inputEles.length;j++){
$inputEles[j].onfocus = function () {
$(this).parent().next().text('');
}
}
</script>
</body>
</html>
登录验证
3、全选反选取消
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>全选反选取消</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<button type="button" id="all">全选</button>
<button type="button" id="reverse">反选</button>
<button type="button" id="cancel">取消</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>小明</td>
<td>看美女</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>小红</td>
<td>化妆</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>小花</td>
<td>跳舞</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
// jQuery绑定事件方法
// 全选，把所有checkbox的checked设置为true
$("#all").click(function(){
$(":checkbox").prop("checked",true);
});
// 取消，把所有checkbox的checked设置为false
$("#cancel").on("click",function(){
$(":checkbox").prop("checked",false);
});
// 反选，先查看checkbox的状态，再把状态设置为相反的
$("#reverse").click(function () {
var $checkbox = $(":checkbox");
for (var i=0;i<$checkbox.length;i++){
// 获取状态
var static = $($checkbox[i]).prop("checked");
// 状态设置为反
$($checkbox[i]).prop("checked",!static);
}
});
</script>
</body>
</html>
全选反选取消
4、克隆
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>克隆示例</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<button type="button" class="copy">想要复制自己吗，点击吧</button>
<script type="text/javascript">
$(".copy").click(function () {
$(this).clone(true).insertAfter(this);
})
</script>
</body>
</html>
克隆
