前端学习之jquery
一 属性操作
html()：
console.log($("div").html());
$(".test").html("<h1>hello</h1>"); 拿到的是标签 test():
console.log($("div").text());
$(".test").text("<h1>hello</h1>"); 整个纯文本
val():val针对的是固有属性value
console.log($(":text").val());
console.log($(":checkbox").val());
console.log($(":button").val())//val针对的是固有属性value
tab切换案例：
<style>
*{
margin: 0;
padding: 0;
} .outer{
width: 80%;
margin: 0 auto; } .nav li{
float: left;
list-style: none;
width: 100px;
height: 40px;
background-color: #6AA1EA;
text-align: center;
line-height: 40px;
border-right: 2px solid green;
} .content{
width: 306px;
height: 400px;
background-color: #99cc99;
margin-top: 40px; } ul .active{
background-color: #99aecb;
} .hide{
display: none;
}
</style> </head>
<body> <div class="outer">
<ul class="nav">
<li f="con1" class="active">菜单一</li>
<li f="con2">菜单二</li>
<li f="con3">菜单三</li>
</ul> <div class="content">
<div class="con1">111</div>
<div class="con2 hide">222</div>
<div class="con3 hide">333</div>
</div> </div> <script src="jquery-3.2.1.js"></script>
<script>
var outer=document.getElementsByClassName("outer")[0];
var lis=outer.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onclick=function () { $(this).addClass("active").siblings().removeClass("active"); var $name=$(this).attr("f"); $("."+$name).removeClass("hide").siblings().addClass("hide")
} } </script>
tab切换案例
二 jquery循环方式
方法一：
//$.each(arr,funtion(){}) //循环语法
arr=[123,456,"hello"];
obj={"name":"egon","age":22};
$.each(arr,function (i,j) {
console.log(i,j)
})
$.each(obj,function (i,j) {
console.log(i,j)
}) 方法二：
$().each(function () {
})
<ul>
<li>111</li>
<li class="item">222</li>
<li>333</li>
</ul>
$("ul li").each(function () {
console.log($(this))
if ($(this).hasClass("item")){
alert($(this).text())
}
})
table正反选示例：
<body> <h1>表格示例</h1>
<button>全选</button>
<button>反选</button>
<button>取消</button>
<hr> <table border="2px">
<tr>
<td><input type="checkbox" class="item"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" class="item"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr> </table> <script src="jquery-3.2.1.js"></script>
<script>
var eles=document.getElementsByTagName("button");
// var inps=document.getElementsByClassName("item");
for(var i=0;i<eles.length;i++){
eles[i].onclick=function () {
if (this.innerText=="全选"){
// for(var j=0;j<inps.length;j++){
// inps[j].checked=true
// }
$(":checkbox").prop("checked",true);
}
else if (this.innerText=="取消"){
$(":checkbox").prop("checked",false);
}
else{
$(":checkbox").each(function () {
$(this).prop("checked",!$(this).prop("checked")); //最新优化
// if ($(this).prop("checked")){
// $(this).prop("checked",false)
// }
// else {
// $(this).prop("checked",true)
// }
})
}
}
} </script> </body>
table 正反选示例
三 动画效果
hide()与show()隐藏与显示
<p>hello</p>
<img src="top.jpg" width="400px" height="200px">
<button id="hide">隐藏</button>
<button id="=show">显示</button>
<button id="toggle">切换</button> <script src="jquery-3.2.1.js"></script> <script> //用于切换备选元素的 hide()与show()方法。
// 标签对象.事件(function(){})
$("#hide").click(function () {
$("img").hide(1000); });
$("#show").click(function () {
$("img").show(1000);
}); $("#toggle").click(function () {
$("img").toggle(1000);
}) </script>
滑动效果：
slideDown() slideUp() slideToggle()
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#con{
line-height: 80px;
background-color: #015e98;
} </style>
</head>
<body> <div id="con">滑动效果</div> <button id="slideDown">slideDown</button>
<button id="slideUp">slideUp</button>
<button id="toggle">toggle</button> <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").slideToggle(1000)
})
</script> </script>
</body>
淡入淡出透明度：
fadeIn() fadeout()
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#con{
height: 200px;
width: 200px;
background-color:#ccecef;
}
</style> </head>
<body> <div id="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(1000,0.4) //透明度
}) </script>
回调函数：当某一个动作执行完成之后自动触发的函数
四 文档操作
内部插入：
(append) ( prepend) //父节点添加子节点
<script>
$("button").click(function () {
$("div").append("<h1>hello</h1>");//插入的位置不一样 一个在后面
$("div").prepend("<h1>hi</h1>"); //一个在前面插入
})
</script>
（appendTo）（perpendTo） //子节点插入父节点
<script>
$("button").click(function () {
var $ele=$("<p>hello</p>");
$ele.appendTo("div") //子节点插入父节点
$ele.prependTo("div")//
});
</script>
外部插入：兄弟之间插入
after（） before()
$("div").after("<p>pppppp</p>");
$("div").before("<p>pppppp</p>")insertAfter（） insertBefore（）
var $ele=$("<p>hello</p>");
// $ele.insertAfter("div")
$ele.insertBefore("div")替换replaceWith()
$("div").replaceWith("<h1>egon</h1>") 删除
//$("div").empty() //清空文本内容
$("div").remove() //清空整个标签复制（克隆）
<div class="box">
<div class="item">
<input type="button" value="+">
<input type="text">
</div>
</div> <script src="jquery-3.2.1.js"></script>
<script>
$(":button").click(function () {
//var $clone=$(".box .item").clone(); //1变2 2变4
var $clone=$(this).parent().clone();
$clone.children(":button").val("-").attr("onclick","removeA(this)");
$clone.children();
$(".box").append($clone)
});
function removeA(self) {
console.log($(self).parent());
$(self).parent().remove()
}
</script>