jquery第二篇
1 操作元素（属性，css，文档处理）
--------------------------属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();
attr和prop的区别：
attr对自定义属性使用
prop对固有属性使用
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
val更改固有属性的值
------------------------文档处理
（1）创建一个标签对象
$(“<p>”)
（2）内部插入
$("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo");
<div>
<p>PPP</p>
</div>
<button> add</button>
</body>
<script src="jquery-3.2.1.js"></script>
<script>
$("button").click(function () {
$("div").append("<h1>hello</h1>")##插入在标签的后面
$("div").prepend ("<h1>hello</h1>")##插入在标签的上面
var $ele=$("<p>hello</p>")//创建一个新的标签
$ele.appendTo("div")##在div中插入新标签，新标签在原始标签后面
});
</script>
（3） 外部插入
$("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo");
（4） 替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>")；
（5） 删除
$("").empty()##清除自己的子集
$("").remove([expr])##完全清除
（6） 复制
$("").clone([Even[,deepEven]])
2 JQ的循环实现
方式一：
格式 $.each(arr,funtion(){})
arr=[15,99,"hello"];
$.each(arr,function (i,j) {
//console.log(i);下标
// console.log(j);值
});
方式二：
格式 $("tr").each(function(){
console.log($(this).html())
})
$("table :checkbox").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
if ($(this).prop("checked")){
$(this).prop("checked",false)
}else {$(this).prop("checked",true) }
3 实现效果
1.动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>hello world</p>
<button id="show">显示</button>
<button id="hide">隐藏</button>
<button id="toggle">toggle</button>
<img src="doe.jpeg">
</body>
<script src="jquery-3.2.1.js"></script>
<script>
//标签对象.事件（function(){}）
// $("#show").click(function () {
// alert(123)
// })
// $("#hide").click(function () {
// $("p").hide(1000)
// });
// $("#show").click(function () {
// $("p").show(1000)
// })
$("#show").click(function () {
$("img").show(1000)
});
$("#hide").click(function () {
$("img").hide(1000)
});
$("#toggle").click(function () {
$("img").toggle(1000)
});
//回调函数：当某一个动作执行完成之后自动触发的函数
</script>
</html>
2 滑动效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#con{
line-height: 80px;
background-color: darkblue;
color: #cccccc;
text-align: center;
}
</style>
</head>
<body>
<button id="slideDown">slideDown</button>
<button id="slideUp">slideUp</button>
<button id="toggle">toggle</button>
<div id="con">滑动效果</div>
</body>
<script src="jquery-3.2.1.js"></script>
<script>
$("#slideDown").click(function () {
$("#con").slideDown(1000)
});
$("#slideUp").click(function () {
$("#con").slideUp(1000)
});
$("#toggle").click(function () {
$("#con").toggle(1000)
});
</script>
</html>
3 淡入淡出效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.con{
width: 200px;
height: 200px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="con"></div>
<button id="fadeIn">fadeIn</button>
<button id="fadeOut">fadeOut</button>
<button id="fadeToggle">fadeToggle</button>
<button id="fadeTo">fadeTo</button>
<script src="jquery-3.2.1.js"></script>
<script>
$("#fadeIn").click(function () {
$(".con").fadeIn(2000)
});
$("#fadeOut").click(function () {
$(".con").fadeOut(2000)
});
$("#fadeToggle").click(function () {
$(".con").fadeToggle(2000)
});
$("#fadeTo").click(function () {
$(".con").fadeTo(2000,0.4)
})
</script>
</body>
</html>
