---恢复内容开始---
1. jquery的属性操作
$().attr(属性名) 取值
$().attr(属性名,属性值) 赋值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> </head> <body> <p class="c1" id="1" egon="sb">我是谁</p> </body> </html>
//针对checked select标签
$().prop(属性名)
$().prop(属性名,属性值)
2. jquery的values操作
$().val() 取值
$().val("aaaa") 赋值
$().val(“”) 清空操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> </head> <body> <input type="text" class="c1" value="222"> <script> $(".c1").val() </script> </body> </html>
3. jquery的each循环
jquery有两种循环方式:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> </head> <body> <div class="outer"> <p>111</p> <p>222</p> <p>333</p> </div> <script> //jquery两种循环方式,第一种 // var arr=[111,222,333,444] // $.each(arr,function (i,j) { // console.log(i,j) // }) // var info={"name":"egon","age":23} // $.each(info,function (i,j) { // console.log(i,j) // }) //第二种方式 $(".outer p").each(function () { console.log($(this).html()) }) </script> </body> </html>
4. jquery的表格正反选操作
全选 取消 反选:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
</head>
<body>
<button class="select_all">全选</button>
<button class="quxiao">取消</button>
<button class="fanxuan">反选</button>
<hr>
<table border="1">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>班级</td>
<td>选择</td>
</tr>
<tr>
<td>张三</td>
<td>22</td>
<td>1</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>李四</td>
<td>23</td>
<td>2</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>王五</td>
<td>24</td>
<td>3</td>
<td><input type="checkbox"></td>
</tr>
</table>
<script>
$(".select_all").click(function () {
$(":checkbox").prop("checked",true)
})
$(".quxiao").click(function () {
$(":checkbox").prop("checked",false)
})
$(".fanxuan").click(function () {
$(":checkbox").each(function () {
// if ($(this).prop("checked")){
// $(this).prop("checked",false)
// }
// else{
// $(this).prop("checked",true)
// }
$(this).prop("checked",!$(this).prop("checked"))
})
})
</script>
</body>
</html>
5. jquery的css样式操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> </head> <body> <p class="c1">this is a p</p> <p id="3">this is a p</p> <script> // $("#3").css("color","red") // $(".c1").css("color","red") $("#3").click(function () { $(this).css("color","red") }) </script> </body> </html>
6. jquery事件委派
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> <button>add</button> <script src="jquery-3.2.1.js"></script> <script> // $("ul li").click(function () { // alert($(this).html()) // }) // $("button").click(function () { // $("ul").append("<li>444</li>") // }) $("ul").on("click","li",function () { alert($(this).html()) }); $("button").click(function () { $("ul").append("<li>444</li>") }); </script> </body> </html>
7. jquery的节点操作
每一个标签对象(Dom对象)都是一个节点对象
jquery对象都是一个数组
Dom对象转jquery对象: $(Dom对象)
jquery对象转Dom对象: $(aaa)[0]
创建标签,删除标签,清空标签内容,替换标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.2.1.js"></script>
<style>
.c1{
600px;
height: 600px;
background-color: #6fff3b;
}
</style>
</head>
<body>
<div class="c1">
<h4>hello word</h4>
</div>
<p id="p1">111</p>
<p>222</p>
<button class="add">add</button>
<button class="del">delete</button>
<button class="replace">replace</button>
<script>
$(".add").click(function () {
//定义要插入的标签对象
var $img=$("<img>")
// console.log($img[0])
$img.attr("src","2.jpg")
//添加到指定节点中
// $(".c1").append($img)
// $img.appendTo(".c1")
$(".c1").after($img)
})
$(".del").click(function () {
//删除节点 删除整个节点
// $(".c1 h4").remove()
//清空节点 清空的标签内容
$(".c1").empty()
})
//替换节点
$(".replace").click(function () {
var $img=$("<img>")
$img.attr("src","2.jpg")
$("#p1").replaceWith($img)
})
</script>
</body>
</html>
克隆节点(需要做一个实例)
var $copy=$(".c1").clone() console.log($copy[0])
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> </head> <body> <div class="style_box"> <div class="item"> <button class="add">+</button><input type="text"> </div> </div> <script> $(".item .add").click(function () { var $clone=$(this).parent().clone() $clone.children(".add").html("-").attr("class","del") $(".style_box").append($clone) }) $(".style_box").on("click",".del",function () { console.log($(this)[0]) $(this).parent().remove() }) </script> </body> </html>
8. jquery表格的增删改查
9. juqery的动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> </head> <body> <div class="c1"> <div class="c2"> <p>111</p> <p>222</p> <p>333</p> </div> </div> <button class="xianshi">显示</button> <button class="yincang">隐藏</button> <button class="qiehuan">切换</button> <script> //快速显示与隐藏 // $(".xianshi").click(function () { // $(".c1").show() // }) // $(".yincang").click(function () { // $(".c1").hide() // }) //1秒之内显示与隐藏 // $(".xianshi").click(function () { // $(".c1").show(1000) 时间单位为ms // }) // $(".yincang").click(function () { // $(".c1").hide(1000) // }) //使用上下拉的方式显示与隐藏 // $(".xianshi").click(function () { // $(".c2").slideDown() // }) // $(".yincang").click(function () { // $(".c2").slideUp() // }) $(".xianshi").click(function () { $(".c1").fadeIn(2000) }) $(".yincang").click(function () { $(".c1").fadeOut(2000) }) //切换 $(".qiehuan").click(function () { // $(".c1").fadeToggle(2000) $(".c1").fadeTo(2000,0.8) //指定时间与透明度 }) </script> </body> </html>
10. jquery的css操作
offset: 以当前窗口为参数照的偏移量。
postion:以一定位的父亲标签的偏移量。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> <style> *{ margin: 0; } .c1{ 50px; height: 50px; background-color: #FF0000; } .c2{ 50px; height: 50px; background-color: #E36E18; } .c3{ position: relative; } </style> </head> <body> <div class="c1">1111</div> <div class="c3"><div class="c2"></div></div> <script> //获取偏移量 console.log($(".c1").offset().left) console.log($(".c1").offset().top) //设置偏移量 $(".c2").offset({top:200,left:200}) //相对于父亲的偏移量 console.log($(".c2").position().top) console.log($(".c2").position().left) </script> </body> </html>
11. jquery的返回顶部实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> <style> *{ margin: 0; } .c1{ 100%; height: 3000px; background-color: #9d9d9d; } .c2{ 100px; height: 50px; background-color: #2aabd2; color: #FF0000; text-align: center; line-height: 50px; position: fixed; bottom: 10px; right: 10px; } .hide{ display: none; } </style> </head> <body> <div class="c1"> <div class="c2 hide">返回顶部</div> <h1>我是谁</h1> </div> <script> $(".c2").click(function () { $(window).scrollTop(0) //可以设置参数为200,返回到距离顶部200px的位置, }) //监控事件为scroll $(window).scroll(function () { if ($(window).scrollTop()>400){ $(".c2").show() } else{ $(".c2").hide() } }) </script> </body> </html>
11. boostrap的使用
栅格系统
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.css"> <style> .row div { border: solid 1px; } .container div { border: solid 1px; } .container-fluid div { border: solid 1px; } </style> </head> <body> <div class="row"> <div class="col-md-6">111</div> <div class="col-md-6">111</div> <div class="col-md-1">111</div> <div class="col-md-1">111</div> <div class="col-md-1">111</div> <div class="col-md-1">111</div> <div class="col-md-1">111</div> <div class="col-md-1">111</div> <div class="col-md-1">111</div> <div class="col-md-1">111</div> <div class="col-md-1">111</div> <div class="col-md-1">111</div> <!--//列偏移--> <!--<div class="col-md-5 col-md-offset-3">111</div>--> <!--//嵌套列 把8个栅格再分成12份。--> <!--<div class="col-md-8">--> <!--<div class="col-md-4">222</div>--> <!--<div class="col-md-4">333</div>--> <!--</div>--> </div> <!--//两边会有边距,并且居中--> <!--<div class="container">--> <!--<div class="col-md-6">111</div>--> <!--<div class="col-md-6">111</div>--> <!--<div class="col-md-1">111</div>--> <!--<div class="col-md-1">111</div>--> <!--<div class="col-md-1">111</div>--> <!--<div class="col-md-1">111</div>--> <!--<div class="col-md-1">111</div>--> <!--<div class="col-md-1">111</div>--> <!--<div class="col-md-1">111</div>--> <!--<div class="col-md-1">111</div>--> <!--<div class="col-md-1">111</div>--> <!--<div class="col-md-1">111</div>--> <!--<div class="col-md-1">111</div>--> <!--</div>--> </body> </html>
12. jquery的模态对话框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> <style> .backend{ 100%; height: 3000px; background-color: #aaffaa; } * { margin: 0; } .shade{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #9d9d9d; opacity: 0.8; } .model{ position: fixed; left:400px; top: 100px; 600px; height: 300px; background-color: white; } .hide{ display: none; } </style> </head> <body> <div class="backend"> <button class="add">注册</button> </div> <div class="shade hide"></div> <div class="model hide"> <h3>添加学生信息:</h3> <form action=""> <p>姓名 <input type="text"></p> <p>年龄 <input type="text"></p> <p>班级 <input type="text"></p> <input type="button" value="submit" id="subBtn"> </form> </div> <script> $(".add").click(function () { $(".model").removeClass("hide") $(".shade").removeClass("hide") }) $("#subBtn").click(function () { $(".model").addClass("hide") $(".shade").addClass("hide") }) </script> </body> </html>