amusing Jquery
回顾：
<p f="ssss" value="ceshi">pppp</p> <div>DIV <a href="#">点击</a> </div> <div class="ssss test">DIV2</div> <input type="text" value="inpute"> <input type="checkbox" value="12"> <script src="jquery-3.2.1.js"></script> <script> //重新赋值 $(".test").html("<h1>hello</h1>") //class 为test的标签为h1 的hello cons.log($("div").html());//取html标签 cons.log($("div").val()); //取div 的值 cons.log($("div").text()); $("test").val("inpute");//<input type="text" value="inpute"> $(":checkbox").val("inpute");//<input type="text" value="inpute"> var $name = $("p").val("ceshi");//针对的是固有属性的val，自定义的值无效，无法赋值 $("."+$name) </script>
jquery 文档操作：
内部插入：1、append 2、prepend
外部插入： 3、after 4、before 5、empty 6、remove
other : click clone
append 在DIV 后面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<p>我是p标签</p>
</div>
<button id="add">add</button>
<script src="jquery-3.2.1.js"></script>
<script>
//内部插入
//$("").append(content) -----$(
$("#add").click(function () {
$("div").append("<h1>hello</h1>");
});
</script>
</body>
</html>
在DIV前面：prepend
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<p>我是p标签</p>
</div>
<button id="preadd">preadd</button>
<script src="jquery-3.2.1.js"></script>
<script>
//内部插入
//$("").append(content) -----$(
$("#preadd").click(function () {
$("div").prepend("<h3>prepend</h3>")
})
</script>
</body>
</html>
after: 在某个标签后面插入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<p>我是p标签</p>
</div>
<button id="after">after</button>
<script src="jquery-3.2.1.js"></script>
<script>
$("#after").click(function () {
$("div").after("<h1>after</h1>")
})
</script>
</body>
</html>
befer :在某个之前：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<p>我是p标签</p>
</div>
<button id="before">before</button>
<script src="jquery-3.2.1.js"></script>
<script>
$("#before").click(function () {
$("div").before("<h1>before</h1>")
})
</script>
</body>
</html>
empty: 标签存在
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<p>我是p标签</p>
</div>
<button id="empty">empty</button>
<script src="jquery-3.2.1.js"></script>
<script>
$("#empty").click(function () {
$("div").empty()//标签还在
});
</script>
</body>
</html>
remove：标签也被删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<p>我是p标签</p>
</div>
<button id="remove">remove</button>
<script src="jquery-3.2.1.js"></script>
<script>
$("#remove").click(function () {
$("div").remove()//标签也删除掉
})
</script>
</body>
</html>
appendTo: 子节点插入到父节点里面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<p>我是p标签</p>
</div>
<button id="appendto">appendto</button>
<script src="jquery-3.2.1.js"></script>
<script>
//子节点插入到 父节点里面
$("#appendto").click(function () {
var $ele=$("<p>appendto</p>");
$ele.appendTo("div")
})
</script>
</body>
</html>
clone应用：
+号可以在下方加一个input 框； 减号可以删除input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box">
<div class="item">
<input type="button" value="+">
<input type="text">
</div>
<script src="jquery-3.2.1.js">
</script>
<script>
$(":button").click(function () {
var $clone=$(this).parent().clone();
console.log($clone);
$clone.children(":button").val("-").attr("onclick","removeA(this)");
$('.box').append($clone);
});
function removeA(self) { //removeA 与系统中remove方法区分，不然会冲突
$(self).parent().remove();
};
</script>
</div>
</body>
</html>
jquery 循环实现：
两种循环：
each
//jquery的循环实现：两种方式 arr=[123,456,"hello"]; obj={"name":"egon","age":22}; //$.each(arr,function{}) //循环一叫each $.each(arr,function (i,j) { console.log(i);//索引 console.log(j);//值 }); console.log('---------'); $.each(obj,function (i,j) { console.log(i);//key console.log(j);//value });
each
$("ul li").each(function () {
if ($(this).hasClass("item")){
console.log($(this).text()) //打印出li class为item的文本
}
});
一些特效：
显示、隐藏：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>docker box </p>
<img src="docker.jpg" alt="" width="500px" height="700px">
<button id="show">display显示</button>
<button id="hide">hid</button>
<button id="toggle">toggle</button>
<script src="jquery-3.2.1.js"></script>
<script>
//标签对象.事件(function(){})
//$("#show").click(function () {
// alert(123)
//})
//显示隐藏
$("#hide").click(function () {
//$("p").hide(1000)
$("p").hide(1000,function () {
alert("哈哈")
//回调函数，当某一个动作执行完成之后调用的函数，自动调用的函数
})
});
$("#show").click(function () {
$("P").show()
})
$("#hide").click(function () {
$("img").hide(1000)
})
$("#show").click(function () {
$("img").show(1000)
})
$("#toggle").click(function () {
$("img").toggle(1000) //综合show 和hide
})
//动态
</script>
</body>
</html>
淡入淡出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#con{
width: 200px;
height:200px;
background-color: peachpuff;
}
</style>
</head>
<body>
<p>docker box </p>
<img src="docker.jpg" alt="" width="200px" height="200px">
<button id="fadeIn">fadeIn</button>
<button id="fadOut">fadOut</button>
<button id="fadtoggle">fadtoggle</button>
<button id="fadto">fadto</button>
<div id="con">滑动效果</div>
<script src="jquery-3.2.1.js"></script>
<script>
$("#fadeIn").click(function () {
$("#con").fadeIn(1000)
})
$("#fadOut").click(function () {
$("#con").fadeOut(1000)
})
$("#fadtoggle").click(function () {
$("#con").fadeToggle(1000) //自动淡入淡出
})
$("#fadto").click(function () {
$("#con").fadeTo(1000,0.4) //透明度的值
})
//淡入淡出:隐藏与显示有了一个透明度渐变的效果，应用替换removeClass("hide")
</script>
</body>
</html>
滑动效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#con{
line-height: 80px;
background-color: aqua;
text-align: center;
}
</style>
</head>
<body>
<p>docker box </p>
<img src="docker.jpg" alt="" width="200px" height="200px">
<button id="slidDown">slidDown</button>
<button id="slidUp">slideUp</button>
<button id="toggle">toggle</button>
<div id="con">滑动效果</div>
<script src="jquery-3.2.1.js"></script>
<script>
$("#slidDown").click(function () {
$("#con").slideDown()
})
$("#slidUp").click(function () {
$("#con").slideUp()
})
$("#toggle").click(function () {
$("#con").slideToggle()
})
</script>
</body>
</html>
浙公网安备 33010602011771号