Web前端之JQuery
1. JQuery简介
学习文档：https://jquery.cuishifeng.cn/
［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。 ［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! ［3］ 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 ［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。 ［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择
2. JQuery对象
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
$("#test").html()
意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
var $variable = jQuery 对象
var variable = DOM 对象
$variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML
jquery的基础语法 $(selector).action()
3. 选择器
1. 基本选择器
$("*") $("#id") $(".class") $("element") $(".class,p,div")
通配符 id class 标签 多元素
2. 层级选择器
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
后代 子代 紧邻 兄弟
3. 过滤筛选器
$(".c1:first").css("color",'red') 第一个class为c1的标签
$(".c1:last").css("color",'blue') 最后一个class为c1的标签
$(".c1:eq(3)").css("color",'red') 索引为3的class为c1的标签
$(".c1:gt(1)").css("color",'red') 索引大于1的class为c1的标签
4. 属性选择器
$("[egon='dog'][alex]").css("color",'red') 将egon=dog并且属性为alex的标签修改样式
5. 表单选择器
$("[type='text']").val("hello")
$(":text").val("hello")
4. 筛选器
1. 过滤筛选器
$(".c1").eq(3).css("color",'red')
$(".c1").first()
$("#d1").hasclass("test") id为d1的标签是否包含class为test,有为true,没有false
2. 查找筛选器
1. 查询子标签
$("div").children(".test") 找子代
$("div").find(".test") 找后代
2. 向下查找兄弟标签
$(".test").next() 下一个兄弟
$(".test").nextAll() 后面所有的兄弟
$(".test").nextUntil("#p6") 后面所有的兄弟直到p6
3. 向上查找兄弟标签
$(".test").prev() 上一个兄弟
$(".test").prevAll() 上面所有的兄弟
$(".test").prevUntil("#p6") 后面所有的兄弟直到p6
4. 查找所有兄弟标签
$("div").siblings()
5. 查找父标签
$(".test").parent() 找父亲
$(".test").parents() 找祖上
$(".test").parentUntil(".outer") 找祖上直到.outer名称的标签（不包含.outer）
5. 属性操作
1. 文本操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<p class="p1">P1</p>
<p class="p1">P2</p>
<p class="p1">P3</p>
<p class="p1">p4</p>
<script>
// DOM对象转为Jquery对象 $(DOM对象)
$("p").click(function () {
console.log($(this));
// 取值操作
//alert($(this).html());
//alert($(this).text())
// 赋值操作
$(this).html("<a href=''>hello</a>")
//$(this).text("<a>hello</a>")
})
</script>
</body>
</html>
2. 属性操作
1. attr设置
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>PPPP</p>
<script src="jquery-3.1.1.js"></script>
<script>
$("p").attr("class","c1"); \\赋值
console.log($("p").attr("class")) \\取值
</script>
</body>
</html>
2. prop设置
对于HTML元素本身自带的固有属性，在处理时，使用prop方法，如：input的checked
3. val设置
用于设置元素的value,常用的有value的标签，如：input, select,textarea
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<p class="int1"><input type="text" >猴子</p>
<script>
$(".int1 input").val("1111"); //赋值
console.log($(".int1 input").val()); //取值
</script>
</body>
</html>
3. class属性操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>PPPP</p>
<script src="jquery-3.1.1.js"></script>
<script>
$("p").attr("class","c1");
$("p").addClass("c2"); \\添加class
$("p").removeClass("c1"); \\删除class
console.log($("p").attr("class"));
</script>
</body>
</html>
6. 事件
1. 事件绑定
1. 方式一
juqery对象.事件( function(){})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<button>add</button>
<script>
$("li").click(function () {
alert($(this).text());
})
</script>
</body>
</html>
2. 方式二
juqery对象.on(事件,选择器,function() {})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<button>add</button>
<script>
$("button").click(function () {
var $li=$("<li>");
$li.html("444")
$("ul").append($li);
})
$("ul").on("click","li",function () {
alert($(this).text());
})
$("ul").on()
</script>
</body>
</html>
2. 事件委派
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<button>add</button>
<script>
$("button").click(function () {
var $li=$("<li>");
$li.html("444")
$("ul").append($li);
})
$("ul").on("click","li",function () {
alert($(this).text());
})
</script>
</body>
</html>
7. 循环方式
1. $.each(obj,fn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<p>111</p>
<p>222</p>
<p>333</p>
<script>
var bumen={"name":"yangjianbo","age":18,"xinzi":"10000000"}
$.each(bumen,function (i,v) {
console.log(i,v)
})
</script>
</body>
</html>
2. $("").each(fn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<p>111</p>
<p>222</p>
<p>333</p>
<script>
$("p").each(function () {
console.log($(this).html());
})
</script>
</body>
</html>
8. 节点操作
1. 创建节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
<style>
.c1{
width: 300px;
height: 300px;
border: solid red 2px;
}
</style>
</head>
<body>
<div class="c1">
<h3>hello world</h3>
</div>
<hr>
<button>add</button>
<script>
$("button").click(function () {
var $biaoqian=$("<h3>"); //创建节点
$biaoqian.html("猴子牛逼"); //为节点赋值
})
</script>
</body>
</html>
2. 添加节点
1. 标签内部插入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
<style>
.c1{
width: 300px;
height: 300px;
border: solid red 2px;
}
</style>
</head>
<body>
<div class="c1">
<h3>hello world</h3>
</div>
<hr>
<button>add</button>
<script>
$("button").click(function () {
var $biaoqian=$("<h3>");
$biaoqian.html("猴子牛逼");
//$(".c1").append($biaoqian); //在父节点中的最后添加子节点(兄弟节点的最后)
//$biaoqian.appendTo($(".c1")); //把子节点添加到父节点中的最后(兄弟节点的最后)
//$(".c1").prepend($biaoqian); //在父节点中的第一位添加子节点
$biaoqian.prependTo($(".c1")); //把子节点添加到父节点中的第一位
})
</script>
</body>
</html>
2. 标签外部插入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
<style>
.c1{
width: 300px;
height: 300px;
border: solid red 2px;
}
</style>
</head>
<body>
<div class="c1">
<h3>hello world</h3>
</div>
<hr>
<button>add</button>
<script>
$("button").click(function () {
var $biaoqian=$("<h3>");
$biaoqian.html("猴子牛逼");
//$(".c1").after($biaoqian); //div后面插入
//$(".c1").before($biaoqian); //div前面插入
//$($biaoqian).insertAfter($(".c1")); //div后面插入
$($biaoqian).insertBefore($(".c1")); //div前面插入
})
</script>
</body>
</html>
3. 删除节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
<style>
.c1{
width: 300px;
height: 300px;
border: solid red 2px;
}
</style>
</head>
<body>
<div class="c1">
<h3>hello world</h3>
</div>
<hr>
<button>del</button>
<script>
$("button").click(function () {
$(".c1").remove(); //删除c1
$(".c1").empty(); //清空c1
})
</script>
</body>
</html>
4. 替换节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
<style>
.c1{
width: 300px;
height: 300px;
border: solid red 2px;
}
</style>
</head>
<body>
<div class="c1">
<h3 class="c2">hello world</h3>
</div>
<hr>
<button>tihuan</button>
<script>
$("button").click(function () {
var $biaoqian=$("<h3>");
$biaoqian.html("猴子牛逼");
$(".c2").replaceWith($biaoqian);
})
</script>
</body>
</html>
5. 克隆节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
<style>
.c1{
width: 300px;
height: 300px;
border: solid red 2px;
}
</style>
</head>
<body>
<div class="c1">
<h3 class="c2">hello world</h3>
</div>
<hr>
<button>add</button>
<script>
$("button").click(function () {
var $item=$(".c2").clone();
$(".c1").append($item);
})
</script>
</body>
</html>
9. 动画效果
1. 显示与隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
<style>
.c1{
width: 300px;
height: 300px;
border: solid red 2px;
}
</style>
</head>
<body>
<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">切换</button>
<script>
$("#hide").click(function () {
$("p").hide(1000);
})
$("#show").click(function () {
$("p").show(1000);
})
$("#toggle").click(function () {
$("p").toggle(1000);
})
</script>
</body>
</html>
2. 滑动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
<style>
#content{
text-align: center;
background-color: lightblue;
border:solid 1px red;
display: none;
padding: 50px;
}
</style>
</head>
<body>
<div id="slideDown">出现</div>
<div id="slideUp">隐藏</div>
<div id="slideToggle">toggle</div>
<div id="content">helloworld</div>
<script>
$("#slideDown").click(function () {
$("#content").slideDown(1000);
})
$("#slideUp").click(function () {
$("#content").slideUp(1000);
})
$("#slideToggle").click(function () {
$("#content").slideToggle(1000);
})
</script>
</body>
</html>
3. 淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
<style>
#content{
text-align: center;
background-color: lightblue;
border:solid 1px red;
display: none;
padding: 50px;
}
</style>
</head>
<body>
<button id="in">fadein</button>
<button id="out">fadeout</button>
<button id="toggle">fadetoggle</button>
<button id="fadeto">fadeto</button>
<div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>
<script>
$(document).ready(function () {
$("#in").click(function () {
$("#id1").fadeIn(1000);
})
$("#out").click(function () {
$("#id1").fadeOut(1000);
})
$("#toggle").click(function () {
$("#id1").toggle(1000);
})
$("#fadeto").click(function () {
$("#id1").fadeTo(1000,0.2); //颜色渐变为原来的0.2
})
})
</script>
</body>
</html>
10. CSS操作
1. 位置操作
1. offset()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: rebeccapurple;
}
.box2{
width: 200px;
height: 200px;
background-color: darkcyan;
}
.parent_box{
position: relative;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="parent_box">
<div class="box2"></div>
</div>
<p></p>
<script src="jquery-3.1.1.js"></script>
<script>
var $position=$(".box2").position();
var $left=$position.left;
var $top=$position.top;
$("p").text("TOP:"+$top+"LEFT"+$left)
</script>
</body>
</html>
2. postion()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.c2{
width: 200px;
height: 200px;
background-color: antiquewhite;
}
.c1{
width: 200px;
height: 200px;
background-color: #2459a2;
}
.outer{
width: 400px;
height: 400px;
background-color: red;
position: relative;
}
</style>
</head>
<body>
<div class="c2"></div>
<div class="outer">
<div class="c1"></div>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
// offset方法的参照物是可视窗口
console.log($(".c1").offset()); // 偏移量对象
console.log($(".c1").offset().top); // 偏移量对象
console.log($(".c1").offset().left); // 偏移量对象
// postion方法的参照物是父元素
console.log($(".c1").position());
console.log($(".c1").position().top);
console.log($(".c1").position().left);
// var top1=100
$("button").click(function () {
$(".c1").offset({"top":100,left:200})
})
</script>
</body>
</html>
2. 尺寸操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
}
.c1,.c2,.c3{
width: 200px;
height: 200px;
background-color: wheat;
padding: 50px;
border: 5px solid rebeccapurple;
margin: 50px;
display: inline-block;
}
</style>
</head>
<body>
<span class="c1">1</span>
<span class="c2">2</span>
<span class="c3">3</span>
<p></p>
<script src="jquery-3.1.1.js"></script>
<script>
var $height=$(".c2").height(); //盒子的高度
var $innerHeight=$(".c2").innerHeight(); //盒子的高度+内边距
var $outerHeight=$(".c2").outerHeight(); //盒子的高度+内边距+边框宽度
var $margin=$(".c2").outerHeight(true); //盒子的高度+内边距+边框宽度+外边距
$("p").text($height+"---"+$innerHeight+"-----"+$outerHeight+"-------"+$margin)
</script>
</body>
</html>
11. 例子
1. 左侧菜单实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.left{
width: 20%;
height: 500px;
float: left;
background-color: wheat;
}
.right{
float: left;
width: 80%;
height: 500px;
background-color: lightgray;
}
.title{
text-align: center;
line-height: 40px;
background-color: #0e90d2;
color: white;
}
.item{
padding: 10px;
}
.hide{
display: none;
}
</style>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<div class="outer">
<div class="left">
<div class="item">
<div class="title">菜单一</div>
<ul class="con">
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</div>
<div class="item">
<div class="title">菜单二</div>
<ul class="con hide">
<li>222</li>
<li>222</li>
<li>222</li>
</ul>
</div>
<div class="item">
<div class="title">菜单三</div>
<ul class="con hide">
<li>333</li>
<li>333</li>
<li>333</li>
</ul>
</div>
</div>
<div class="right"></div>
</div>
<script>
$(".title").click(function () {
$(this).siblings(".con").removeClass("hide");
$(this).parent().siblings().children(".con").addClass("hide");
})
</script>
</body>
</html>
2. 表单正反选示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<button class="select_all">全选</button>
<button class="cancel">取消</button>
<button class="select_reverse">反选</button>
<p class="int1"><input type="checkbox" >猴子</p>
<p class="int1"><input type="checkbox" >老马</p>
<p class="int1"><input type="checkbox" >阿坤</p>
<script>
$(".select_all").click(function () {
$(".int1 input").prop("checked",true);
})
$(".cancel").click(function () {
$(".int1 input").prop("checked",false);
})
$(".select_reverse").click(function () {
$(".int1 input").each(function () {
if ($(this).prop("checked")) {
$(this).prop("checked",false);
}
else {
$(this).prop("checked",true);
}
// $(this).prop("checked",!$(this).prop("checked")); 更简单的语句
})
})
</script>
</body>
</html>
3. 克隆例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
<style>
.c1{
width: 300px;
height: 300px;
border: solid red 2px;
}
</style>
</head>
<body>
<div class="outer">
<div class="item">
<button class="add">+</button>
<input type="text">
</div>
</div>
<script>
$(".add").click(function () {
var $item=$(this).parent().clone();
$item.children().first().html("-").attr("class","del_ele");
$(".outer").append($item);
})
$(".outer").on("click",".item .del_ele",function () { //事件委派
$(this).parent().remove()
})
</script>
</body>
</html>
4. tab切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
*{
margin: 0;
padding: 0;
}
.tab_outer{
margin: 20px auto;
width: 60%;
}
.menu{
background-color: #cccccc;
/*border: 1px solid red;*/
line-height: 40px;
text-align: center;
}
.menu li{
display: inline-block;
margin-left: 14px;
padding:5px 20px;
}
.menu a{
border-right: 1px solid red;
padding: 11px;
}
.content{
background-color: tan;
border: 1px solid green;
height: 300px;
}
.hide{
display: none;
}
.current{
background-color: #2868c8;
color: white;
border-top: solid 2px rebeccapurple;
}
</style>
</head>
<body>
<div class="tab_outer">
<ul class="menu">
<li egon="c1" class="current">菜单一</li>
<li egon="c2" >菜单二</li>
<li egon="c3">菜单三</li>
</ul>
<div class="content">
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
</body>
<script src="jquery-3.1.1.js"></script>
<script>
$(".menu li").click(function () {
$(this).addClass("current").siblings().removeClass("current")
var index=$(this).attr("egon");
$("#"+index).removeClass("hide").siblings().addClass("hide")
})
</script>
</html>
5. 返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.returnTop{
height: 60px;
width: 100px;
background-color: peru;
position: fixed;
right: 0;
bottom: 0;
color: white;
line-height: 60px;
text-align: center;
}
.div1{
background-color: wheat;
font-size: 5px;
overflow: auto;
width: 500px;
height: 200px;
}
.div2{
background-color: darkgrey;
height: 2400px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="div1 div">
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
<h1>hello</h1>
</div>
<div class="div2 div"></div>
<div class="returnTop hide">返回顶部</div>
<script src="jquery-3.1.1.js"></script>
<script>
$(window).scroll(function(){
var current=$(window).scrollTop();
console.log(current);
if (current>100){
$(".returnTop").removeClass("hide")
}
else {
$(".returnTop").addClass("hide")
}
});
$(".returnTop").click(function(){
$(window).scrollTop(0)
});
</script>
</body>
</html>
一往无前虎山行，拨开云雾见光明
浙公网安备 33010602011771号