一．简介
二．寻找元素
1.选择器
1.1 基本选择器
$(“*”):选择所有标签
$(“#idname”):选择id=idname的标签
$(“#classname”):选择class=classname的标签
$(“#TagName”):选择Tag=TagName的标签
$(“.classname,p,div”):选择class=classname,p及div的所有标签
该部分代码块如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="p1">这是P标签1</p>
<div id="d1">welcome to jQuery
<div class="outer">这是div标签外围1
<div class="inner">这是div标签内部</div>
<p>这是P标签2</p>
</div>
</div>
<span class="outer">这是span标签</span>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
// $("p").css("color","red"); //对所有的P标签进行操作(tagname)
// $("*").css("color","green"); //对所有的标签进行操作(*)
// $("#d1").css("color","yellow"); //对id="d1"的标签进行操作(#idname)
$(".outer,#p1,span").css("color","pink"); //对classname="outer",id="p1",tagname="span"的所有标签进行操作
</script>
</html>1.2 层级选择器
$(".inner p")：calssname="inner"标签内的所有p标签 $(".inner>p"):calssname="inner"标签内的所有p标签
$(".inner+p"):calssname="inner"标签下方相邻的p标签
$(".inner~p"):calssname="inner"标签下方所有的p标签(仅要求下方即可，可以不相邻)
该部分实例代码块如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="p1">这是P标签1</p>
<div id="d1">welcome to jQuery
<div class="outer">这是div标签外围1
<p>这是P标签2</p>
<div class="inner">这是div标签内部
<p>这是P标签31</p>
<p>这是P标签32</p>
</div>
<p>这是P标签4</p>
<span class="outer">这是span标签1</span>
<p>这是P标签5</p>
</div>
<p>这是P标签5</p>
</div>
<span class="outer">这是span标签</span>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
// $(".inner p").css("color","red") //对calssname="inner"标签下的所有p标签进行操作
// $(".inner>p").css("color","red") //对calssname="inner"标签下的所有p标签进行操作
// $(".inner+p").css("color","red") //对calssname="inner"标签下方相邻的p标签进行操作
$(".inner~p").css("color","red") //对calssname="inner"标签下方所有的p标签(仅要求下方即可，可以不相邻)进行操作
</script>
</html>1.3 基本筛选器
$(ele:frist):第1个ele标签
$(ele:eq(n)):第N个ele标签
$(ele:last):最后1个ele标签
$("li:even"):对排序为基数的li标签进行操作
$("li:odd"):对排序为偶数的li标签进行操作
$("li:gt(2)"):对大于第二个(不包含第2个)的li标签(排序从0开始)进行操作
$("li:lt(2)"):对小于第二个(不包含第2个)的li标签(排序从0开始)进行操作
该部分代码块如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul type="circle">
<li>第一个li标签</li>
<li>第二个li标签</li>
<li>第三个li标签</li>
<li>第四个li标签</li>
<li>第五个li标签</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
// $("li:first").css("color","red") //对第一个li标签进行操作
// $("li:eq(3)").css("color","green") //对第三个li标签进行操作
// $("li:last").css("color","pink") //对最后一个li标签进行操作
// $("li:even").css("color","green") //对排序为基数的li标签进行操作
// $("li:odd").css("color","red") //对排序为偶数的li标签进行操作
// $("li:gt(2)").css("color","red") //对大于第二个(不包含第2个)的li标签(排序从0开始)进行操作
// $("li:lt(2)").css("color","green") //对小于第二个(不包含第2个)的li标签(排序从0开始)进行操作
</script>
</body>
</html>1.4属性选择器
$(“[class=’classname’][id=’idname’]”)：选择class=’classname’且id=’idname’的标签进行操作；
代码块如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul type="circle">
<li id="l1" class="l">第一个li标签</li>
<li id="l2" class="l">第二个li标签</li>
<li>第三个li标签</li>
<li>第四个li标签</li>
<li>第五个li标签</li>
</ul>
<script src="jquery-3.3.1.js"></script>
<script>
$("[class='l'][id='l2']").css("color","red") //对class='l'且id='l2'的标签进行操作
</script>
</body>
</html>1.5 表单选择器
$(“:type”):其中type的值为text/checkbox/radio的任意一种，对type=’text’的input标签进行操作；
代码块如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text"> 111
<input type="checkbox"> 222
<input type="radio"> 333
<input type="text"> 444
<script src="jquery-3.3.1.js"></script>
<script>
$(":text").css("width","300px")
$(":checkbox").css("width","200px")
$(":radio").css("height","50px")
</script>
</body>
</html>2.筛选器
常见的筛选器如下:
$(".outer p").hasClass("pp") //判断class='outer'下的class='pp'的p标签是否存在，返回结果为布尔值
$(".outer").eq(2).css("color","red")//操作第二个class='outer'的标签
$(".outer").children("p").css("color","green") //class='outer'内的第一个p标签
$(".outer").find("p").css("color","red") //class='outer'内的所有p标签
//next向下
$(".inner1").next("p").css("color","red") //class='inner1'下方(与其同级别)其与其相邻的第1个p标签
$(".inner1").nextAll("p").css("color","red") //class='inner1'下方(与其同级别)的所有p标签
$(".inner1").nextUntil(".p53").css("color","red") //class='inner1'下方(与其同级别)的直到class='p53'(不包含p53)的所有p标签
//prev向上
$(".inner2").prev().css("color","red") //class='inner2'上方(与其同级别)其与其相邻的第1个标签
$(".inner2").prevAll().css("color","red") //class='inner2'上方(与其同级别)的所有标签
$(".inner2").prevUntil("#u1").css("color","red") //class='inner2'上方(与其同级别)的直到id='u1'(不包含u1)的所有p标签
//parent向外
$(".pp").parent().css("color","red") //对class='pp'的第一级父级标签进行操作
$(".pp").parents().css("color","red") //对class='pp'的所有父级标签进行操作,默认直到HTML的最外层html标签
$(".pp").parentsUntil("#d1").css("color","red") //对class='pp'的直到id='d1'(不包含d1这一层)的所有父级标签进行操作
//兄弟标签
$(".pp").siblings().css("color","red") //对class='pp'所有兄弟标签(即:与.pp同级的所有标签)进行操作
代码块如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="p1">这是P标签1</p>
<div id="d1">welcome to jQuery
<div class="outer">这是div标签外围1
<p>这是P标签2</p>
<div class="inner1">这是div标签内部
<p class="pp">这是P标签31</p>
<p>这是P标签32</p>
</div>
<u id="u1">这是下划线</u>
<span class="outer">这是span标签1</span>
<p>这是P标签4</p>
<span class="outer2">这是span标签2</span>
<p>这是P标签51</p>
<div class="inner2">这是div标签内部2
<p>这是P标签321</p>
<p>这是P标签322</p>
</div>
<p>这是P标签52</p>
<p class="p53">这是P标签53</p>
<p>这是P标签54</p>
</div>
<p>这是P标签6</p>
</div>
<span class="outer">这是span标签</span>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
// $(".outer p").hasClass("pp") //判断class='outer'下的class='pp'的p标签是否存在，返回结果为布尔值
// $(".outer").eq(2).css("color","red") //操作第二个class='outer'的标签
// $(".outer").children("p").css("color","green") //class='outer'内的第一个p标签
// $(".outer").find("p").css("color","red") //class='outer'内的所有p标签
//next向下
// $(".inner1").next("p").css("color","red") //class='inner1'下方(与其同级别)其与其相邻的第1个p标签
// $(".inner1").nextAll("p").css("color","red") //class='inner1'下方(与其同级别)的所有p标签
// $(".inner1").nextUntil(".p53").css("color","red") //class='inner1'下方(与其同级别)的直到class='p53'(不包含p53)的所有p标签
//prev向上
// $(".inner2").prev().css("color","red") //class='inner2'上方(与其同级别)其与其相邻的第1个标签
// $(".inner2").prevAll().css("color","red") //class='inner2'上方(与其同级别)的所有标签
// $(".inner2").prevUntil("#u1").css("color","red") //class='inner2'上方(与其同级别)的直到id='u1'(不包含u1)的所有p标签
//parent向外
// $(".pp").parent().css("color","red") //对class='pp'的第一级父级标签进行操作
// $(".pp").parents().css("color","red") //对class='pp'的所有父级标签进行操作,默认直到HTML的最外层html标签
// $(".pp").parentsUntil("#d1").css("color","red") //对class='pp'的直到id='d1'(不包含d1这一层)的所有父级标签进行操作
//兄弟标签
// $(".pp").siblings().css("color","red") //对class='pp'所有兄弟标签(即:与.pp同级的所有标签)进行操作
</script>
</html>三．jQuery其他操作
1.属性
$(":checkbox:first").attr("custome") //attr()一个值是进行查询属性值
$(":checkbox:first").attr("myclass","test") //attr()一个值是进行查询属性值，两个值是进行赋值
$(":checkbox:first").prop("custome") //prop()一个值是进行查询属性值
$(":checkbox:first").prop("class","myclss") //prop()一个值是进行查询属性值，两个值是进行赋值
实例代码块：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="checkbox" checked="checked">男
<input type="checkbox" custome="myself">女
</div>
<script src="jquery-3.3.1.js"></script>
<script>
//attr方法既可操作元素自带的属性又可操作元素自定义的属性
// console.log($(":checkbox:first").attr("custome"))
// console.log($(":checkbox:last").attr("custome"))
// console.log($(":checkbox:first").attr("myclass","test")) //attr()一个值是进行查询属性值，两个值是进行赋值
//prop方法只能操作元素自带的属性
// console.log($(":checkbox:first").prop("custome"))
// console.log($(":checkbox:last").prop("custome"))
// console.log($(":checkbox:first").prop("class","myclss")) //prop()一个值是进行查询属性值，两个值是进行赋值
// console.log($(":checkbox:first").hasClass("myclss"))
//attr方法既可操作元素自带的属性又可操作元素自定义的属性
// console.log($(":checkbox:first").removeAttr("custome"))
// console.log($(":checkbox:last").removeAttr("custome"))
//prop方法只能操作元素自带的属性
// console.log($(":checkbox:first").removeProp("custome"))
// console.log($(":checkbox:last").removeProp("custome"))
</script>
</body>
</html>2 操作class的值
$(":checkbox:first").addClass(classname);//addClass(classname) 增加class
$(":checkbox:first").removeClass(classname);//removeClass(classname) 增加class
示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="checkbox" checked="checked" class="input1">男
<input type="checkbox" custome="myself">女
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$(":checkbox:first").addClass("input2");//addClass(classname) 增加class
console.log($(":checkbox:first").hasClass("input2"))
$(":checkbox:first").removeClass("input2");//removeClass(classname) 增加class
console.log($(":checkbox:first").hasClass("input2"))
</script>
</body>
</html>3.操作HTML代码/文本/值
$(":checkbox:first").html() //获取html的代码(不带自身标签,但是包含div的文本及子标签下的所有html内容)
$(".d1").text() //获取text的内容(不带div标签,包含div及子标签下的所有文本)
$(".d1").html("newhtml")) //设置(更改整个div下的)html的代码(不带div标签,但是带div下的所有子标签)
$(".d1").text("newtxet")) //设置(更改)整个div下的text的代码(不带div标签,但是带div下的所有子标签)
$(":text").val() //获取input的value值。注意:只能用于获取再带value属性的值
$(":text").val("newvalue") //获取input的value值。注意:只能用于获取再带value属性的值
实例代码块如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div class="d1">
这个div标签
<p value="p">保险业务</p>
<input type="text" value="input">
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
// $(":checkbox:first").html() //获取html的代码(不带自身标签,但是包含div的文本及子标签下的所有html内容)
// console.log($(".d1").html())
// $(":checkbox:first").text() //获取html的代码(带自身标签)
// console.log($(".d1").text()) //获取text的内容(不带div标签,包含div及子标签下的所有文本)
// $(".d1").html("newhtml")) //设置(更改整个div下的)html的代码(不带div标签,但是带div下的所有子标签)
// console.log($(".d1").html("<h2>hhh</h2>"))
// $(".d1").text("newtxet")) //设置(更改)整个div下的text的代码(不带div标签,但是带div下的所有子标签)
// console.log($(".d1").text("<h2>hhh</h2>"))
// $(":text").val() //获取input的value值。注意:只能用于获取再带value属性的值
// console.log($(":text").val())
// console.log($("p").val()) //因为p标签中不是自带的value属性，所以无法通过val()方法获取对应的value值
// $(":text").val("newvalue") //获取input的value值。注意:只能用于获取再带value属性的值
$(":text").val("newinput") //设置input标签的value值为newinput
console.log($(":text").val())
</script>
</body>
</html>4.Css样式操作
$("#d1").css("color","red") //单个css样式设置
//$("#d1").css({"color":"red","background-color":"pink"}) //多个css样式设置
实例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<div class="d1">
这个div标签
<p value="p">保险业务</p>
<input type="text" value="input">
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$("#d1").css("color","red") //单个css样式设置
//$("#d1").css({"color":"red","background-color":"pink"}) //多个css样式设置
</script>
</body>
</html>5.jQuery循环方式
三种循环方法，1.js的for循环语法；2.$.each(callbackobj,function(形参x,形参2))，其中形参1的值是遍历对象的索引，形参2的值是索引对应的值;3.$.elements.each(),其中$.elements表示元素集合；
实例代码块如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<p>p标签1</p>
<p>p标签2</p>
<p>p标签3</p>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
arr=["aaa",222,"ccc"]
//方式一,js的for循环方式
for(i=0;i<arr.length;i++){
$("p").eq(i).html(arr[i]);
}
//方式二,jQuery的$.each()函数,其中each(callbackobj,function(x,y)),callbackobj为要遍历的对象,function(x,y)函数为固定格式,形参x,y分别表示遍历对象的索引和索引对应的值
$.each(arr,function (a,b) {
console.log(a);
console.log(b);
})
//jQuery的$.elements.each()函数
$("p").each(function () {
// $(this) //集合循环的每个对象
console.log($(this).html())
})
</script>
</html>5.1循环的一个应用(全选/反选/取消)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table{
background-color: lemonchiffon;
text-align: center;
}
td{
width: 100px;
}
</style>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td><input class="check" type="checkbox"></td>
<td>玫瑰</td>
<td>杜鹃</td>
</tr>
<tr>
<td><input class="check" type="checkbox"></td>
<td>白菜</td>
<td>西红柿</td>
</tr>
<tr>
<td > <input class="check" type="checkbox"></td>
<td>苹果</td>
<td>香梨</td>
</tr>
<tr>
<td><button onclick="selectAll()">全选</button></td>
<td><button onclick="reserve()">反选</button></td>
<td><button onclick="cancel()" >取消</button></td>
</tr>
</table>
<script src="jquery-3.3.1.js"></script>
<script>
function selectAll(){
$(".check").each(function () {
$(".check").prop("checked",true)
})
}
function reserve() {
$(".check").each(function () {
if($(this).prop("checked")){
$(this).prop("checked",false)
}
else {
$(this).prop("checked",false)
}
})
}
function cancel(){
$(".check").each(function () {
$(".check").prop("checked",false)
})
}
</script>
</body>
</html>四．jQuery文档处理
1.内部文档插入
append()的用法，作用:在父标签下添加一个子标签
appendTo()的用法，作用:将子标签添加到父标签下
prepend(),用法:将标签添加到指定标签的前面
prepend(),用法:将标签添加到指定标签的前面
实例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="inner">
<p>这个是P标签</p>
</div>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
//定义一个变量，并创建一个标签赋值给该变量
var $eleh2= $("<h2>这是append的h2标签</h2>")
//append()的用法，作用:在父标签下添加一个子标签
$(".inner").append($eleh2);
var $eleh3= $("<h3>这是appendTo的h3标签</h3>")
//appendTo()的用法，作用:将子标签添加到父标签下
$eleh3.appendTo(".inner")
var $eleh4 = $("<h4>这是prepend的h4标签</h4>")
//prepend(),用法:将标签添加到指定标签的前面
$(".inner").prepend($eleh4)
var $eleh5 = $("<h5>这是prependTo的h5标签</h5>")
//prepend(),用法:将标签添加到指定标签的前面
$eleh5.prependTo(".inner")
</script>
</html>2.外部插入
after()用法:例如:A.after(B),将标签B插入到A标签之后
insertAfter()用法:例如:B.insertAfter(A),将标签B插入到A标签之后
before()用法:例如:A.before(B),将标签B插入到A标签之前
insertAfter()用法:例如:B.insertAfter(A),将标签B插入到A标签之前
实例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="inner">
<p>这个是P标签</p>
</div>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
var $eleh2= $("<h2>这是after的h2标签</h2>")
//after()用法:例如:A.after(B),将标签B插入到A标签之后
$(".inner").after($eleh2)
var $eleh3= $("<h2>这是insertAfter的h2标签</h2>")
//insertAfter()用法:例如:B.insertAfter(A),将标签B插入到A标签之后
$eleh3.insertAfter(".inner")
var $eleh4= $("<h4>这是before的h2标签</h4>")
//before()用法:例如:A.before(B),将标签B插入到A标签之前
$(".inner").before($eleh4)
var $eleh5= $("<h2>这是insertAfter的h5标签</h2>")
//insertAfter()用法:例如:B.insertAfter(A),将标签B插入到A标签之前
$eleh5.insertBefore(".inner")
</script>
</html>3.替换
replaceWith()用法:例如:B.replaceWith(A),将标签B替换成标签A
实例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="inner">
<p>这个是P标签</p>
</div>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
//替换
var $eleh5= $("<h2>这是insertAfter的h5标签</h2>")
//replaceWith()用法:例如:B.replaceWith(A),将标签B替换成标签A
$("p").replaceWith($eleh5)
</script>
</html>4.清空/删除
$("p").empty(); //只会清空标签中的内容，不会删除标签本身
$("p").remove() //会删除整个标签本身(包含标签内部的内容)
实例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="inner">
<p>这个是P标签</p>
</div>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
//清空、删除
$("p").empty(); //只会清空标签中的内容，不会删除标签本身
$("p").remove() //会删除整个标签本身(包含标签内部的内容)
</script>
</html>5.复制
$("p").clone() //clone()用法:A.clone()复制一次A标签
五．Css操作
1.Css样式操作
1.1$("#d1").css("color","red") //单个css样式设置
1.2$("#d1").css({"color":"red","background-color":"pink"}) //多个css样式设置
实例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<div class="d1">
这个div标签
<p value="p">保险业务</p>
<input type="text" value="input">
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$("#d1").css("color","red") //单个css样式设置
//$("#d1").css({"color":"red","background-color":"pink"}) //多个css样式设置
</script>
</body>
</html>2.位置
2.1 offset()是相对于视口(浏览器窗口)的距离
2.2 position()是相对于进行了定位的父级容器的距离,所有标签的默认定位均是浏览器视口
示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
color: red;
}
.d1{
width: 200px;
height: 200px;
background-color: aquamarine;
}
.d2{
width: 100px;
height: 100px;
background-color: fuchsia;
}
.inner{
position: absolute;
}
</style>
</head>
<body>
<div class="outer">
<div class="d1"></div>
<div class="inner">
<div class="d2"></div>
</div>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
//offset()是相对于视口(浏览器窗口)的距离
//$(".d1").html("top="+$(".d1").offset().top+";left="+$(".d1").offset().left) //相对于视口(浏览器窗口)的距离
// $(".d2").html("top="+$(".d2").offset().top+";left="+$(".d2").offset().left) //相对于视口(浏览器窗口)的距离
//position()是相对于进行了定位的父级容器的距离,所有标签的默认定位均是浏览器视口
//$(".d1").html("top="+$(".d1").position().top+";left="+$(".d1").position().left)
//d1父级是outer,outer未进行定位所以默认选用浏览器来进行计算位置
//$(".d2").html("top="+$(".d2").position().top+";left="+$(".d2").position().left)
//d2父类是inner,inner进行绝对定位，所以d2的位置是相对于inner来进行计算的
</script>
</html>2.3 $(window).scrollTop():滚动条滚动离顶部的距离
$(window).scrollTop(num):设置滚动条滚动离顶部的距离等于num(单位px)
实例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.d1,.d2{
width: 100%;
height: 800px;
}
.d1{
width: 2000px;
overflow: scroll;
background-color: lavenderblush;
}
.d2{
background-color: darkgoldenrod;
}
.returntop{
width: 80px;
height: 30px;
background-color: lemonchiffon;
color: indianred;
text-align: center;
line-height: 30px;
font-size: 10px;
position: fixed;
bottom: 20px;
right: 20px;
}
.returnleft{
width: 80px;
height: 30px;
background-color: lemonchiffon;
color: indianred;
text-align: center;
line-height: 30px;
font-size: 10px;
position: fixed;
top: 20px;
right: 50px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<div class="d1">
</div>
<div class="returnleft hide">返回左部</div>
<div class="d2"></div>
<div class="returntop hide">返回顶部</div>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
//window.onscroll 通过window对象的onscroll来监听
window.onscroll = function () {
if($(window).scrollTop()>500){
$(".returntop").removeClass("hide")
}
else if($(window).scrollTop()<=500){
$(".returntop").addClass("hide")
}
}
//window.onscroll 通过window对象的onscroll来监听
//注意:两个监听事件,以后一个时间为主
window.onscroll = function () {
if($(window).scrollLeft()>500){
console.log(">100")
$(".returnleft").removeClass("hide")
}
else{
console.log("<=100")
$(".returnleft").addClass("hide")
}
}
$(".returntop").click(function () {
$(".d1").scrollTop(0);
})
$(".returnleft").click(function () {
$(window).scrollLeft(0);
})
</script>
</html>3.尺寸
3.1 height()/width():指内容区的高宽,不包含padding和margin区域
3.2 innerHeight()/innerHeight():指包含padding区域的高宽
3.3 outerHeight()/outerWidth():指包含padding区域的高宽
3.4 outerHeight(true)/outerWidth(true):指带true参数则包含padding和margin区域的高宽
实例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
color: red;
}
.d1{
width: 200px;
height: 200px;
background-color: aquamarine;
margin: 10px;
padding: 5px;
}
.d2{
width: 100px;
height: 100px;
background-color: fuchsia;
}
.inner{
position: absolute;
}
</style>
</head>
<body>
<div class="outer">
<div class="d1"></div>
<div class="inner">
<div class="d2"></div>
</div>
</div>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
$(".d1").html("height="+$(".d1").height()+";width="+$(".d1").width()) //height()/width():指内容区的高宽,不包含padding和margin区域
$(".d1").html("innerHeight="+$(".d1").innerHeight()+";innerWidth="+$(".d1").innerWidth()) //innerHeight()/innerHeight():指包含padding区域的高宽
$(".d1").html("outerHeight="+$(".d1").outerHeight()+";outerWidth="+$(".d1").outerWidth()) //outerHeight()/outerWidth():指包含padding区域的高宽
$(".d1").html("outerHeight="+$(".d1").outerHeight(true)+";outerWidth="+$(".d1").outerWidth(true)) //outerHeight(true)/outerWidth(true):指带true参数则包含padding和margin区域的高宽</script>
</html>六．事件
1.事件绑定方式
1.1格式:格式:$("").bind("event",function()){function body}
注意:同一个标签绑定了先后绑定了2个事件，则按jquery代码先后顺序执行这2个事件
1.2事件解除绑定方式
格式:$("").unbind("event")
代码块如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>aaa</li>
<li class="b">bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
//需求:给所有的li标签绑定点击(click)事件，点击后弹框提示
//格式:$("").bind("event",function()){function body}
$("ul li").bind("click",function () {
alert("bind click event");
})
//给第3个li标签解除绑定事件
//格式:$("").unbind("event")
$("ul li").eq(2).unbind("click")
//同一个标签绑定了先后绑定了2个事件，则按jquery代码先后顺序执行这2个事件
$("ul li").eq(3).bind("click",function () {
alert("3333");
})
</script>
</html>2.事件委托
需求:给所有的li标签绑定点击(click)事件，点击后弹框提示,并且点击addli是添加一个li标签;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>aaa</li>
<li class="b">bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
<button class="add">addli</button>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
//需求:给所有的li标签绑定点击(click)事件，点击后弹框提示,并且点击addli是添加一个li标签
$("ul li").bind("click",function () {
alert("999牌感冒灵");
})
$(".add").bind("click",function () {
var $ele = $("<li>");
var len = $("li").length;
$ele.html(len+1);
$("ul").append($ele);
})
</script>
</html>此时发现，后面添加的li标签的点击事件不再进行弹框提示，那么如何解决该问题呢？
我们使用另外一种方式解决.格式:
$("").on("event",[elementsselector],[data],function()){function body}
代码块如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>aaa</li>
<li class="b">bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
<button class="add">addli</button>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
//需求:给所有的li标签绑定点击(click)事件，点击后弹框提示,并且点击addli是添加一个li标签
// $("ul li").bind("click",function () {
// alert("999牌感冒灵");
// }) //该方法，后增的li标签点击事件不能进行弹框提示
$(".add").bind("click",function () {
var $ele = $("<li>");
var len = $("li").length;
$ele.html(len+1);
$("ul").append($ele);
})
//此时发现，后面添加的li标签的点击事件不再进行弹框提示，那么如何解决该问题呢？我们使用另外一种方式解决
//格式:$(" ").on("event",[elementsselector],[data],function()){}
$("ul").bind("click","li",function () {
alert("999牌感冒灵");
})
</script>
</html>3.事件绑定与事件委托的区别
事件绑定(bind)和事件委托(on)在处理上并不相同，事件绑定是先找到要触发事件的元素(标签)，直接进行事件绑定(也就是说事先已经拿到了所有的需要绑定的元素)；而事件委托是先找到触发事件元素的父级，相当于临时绑定，只有当触发时才发进行绑定(也就是说事先没有指定哪些元素可以触发事件，在后期可变化)。所以，事件委托可以实现2中的需求而事件绑定则不行。
4.事件准备
我们知道，js代码是加载一行执行一行，如果把JavaScript代码放在document之前，则会发生找到元素而不能正确执行JavaScript代码，达不到理想中的效果。在jQuery中也一样，为了解决该问题，JavaScript中使用了load方法，在jQuery中使用read方法。
格式1:$(document).ready(function () {
等待document加载完成才执行的代码块
}
格式2:$(function () {
等待document加载完成才执行的代码块
})
实例代码如下:(改写2中的代码块)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
<script>
//需求:给所有的li标签绑定点击(click)事件，点击后弹框提示,并且点击addli是添加一个li标签
$(document).ready(function () {
$(".add").bind("click",function () {
var $ele = $("<li>");
var len = $("li").length;
$ele.html(len+1);
$("ul").append($ele);
})
$("ul").bind("click","li",function () {
alert("999牌感冒灵");
})
})
</script>
</head>
<body>
<ul>
<li>aaa</li>
<li class="b">bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
<button class="add">addli</button>
</body>
</html>5.事件委托中data参数的使用
事件委托格式:
$("").on("event",[elementsselector],[data],function()){function body}
作用:将data中的参数传给function函数使用
实例代码块如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
data = {name:"张三",age:"22"}
function showinfo(event){
alert(event.data.name+";"+event.data.age);
}
$("li").on("click",data,showinfo)
})
</script>
</head>
<body>
<ul>
<li>aaa</li>
<li class="b">bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
<button class="add">addli</button>
</body>
</html>七．jQuery动画效果
1.切换效果
$().show(time) 效果显示函数time单位为毫秒，可不带时间,不带时间则快速展示
$().hide(time) 效果隐藏函数time单位为毫秒，可不带时间,不带时间则快速隐藏
$().toggle(time) 效果切换函数time单位为毫秒，可不带时间,不带时间则快速切换(切换是指当前为显示状态的则变成隐藏效果，当前为隐藏状态的则变成显示效果)
代码块如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(window).ready(function () {
$(".b1").click(function () {
//$().show(time) 效果显示函数time单位为毫秒，可不带时间,不带时间则快速展示
$("img").show(1000);
})
$(".b2").click(function () {
//$().hide(time) 效果隐藏函数time单位为毫秒，可不带时间,不带时间则快速隐藏
$("img").hide(1000);
})
$(".b3").click(function () {
//$().toggle(time) 效果切换函数time单位为毫秒，可不带时间,不带时间则快速切换(切换是指当前为显示状态的则变成隐藏效果，当前为隐藏状态的则变成显示效果)
$("img").toggle(1000);
})
})
</script>
</head>
<body>
<div>
<img src="bfff64c7.jpg" title="None">
</div>
<button class="b1">显示</button>
<button class="b2">隐藏</button>
<button class="b3">切换</button>
</body>
</html>2.滑动效果
与切换效果类似，三个对应的函数分别为：$().slideDown();$().slideUp();$().slideToggle();
实例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(window).ready(function () {
$(".b1").click(function () {
//$().slideDown(time) 效果显示函数time单位为毫秒，可不带时间,不带时间则快速展示
$("img").slideDown(1000);
})
$(".b2").click(function () {
//$().slideUp(time) 效果隐藏函数time单位为毫秒，可不带时间,不带时间则快速隐藏
$("img").slideUp(1000);
})
$(".b3").click(function () {
//$().slideToggle(time) 效果切换函数time单位为毫秒，可不带时间,不带时间则快速切换(切换是指当前为显示状态的则变成隐藏效果，当前为隐藏状态的则变成显示效果)
$("img").slideToggle(1000);
})
})
</script>
</head>
<body>
<div>
<img src="bfff64c7.jpg" title="None">
</div>
<button class="b1">显示</button>
<button class="b2">隐藏</button>
<button class="b3">切换</button>
</body>
</html>3.淡入淡出
根据更改透明度来展示或隐藏元素
$().fadeIn(time) 效果淡出(显示,透明值为1)函数time单位为毫秒，可不带时间,不带时间则快速淡化展示
$().fadeOut(time) 效果淡入(隐藏,透明值为0)函数time单位为毫秒，可不带时间,不带时间则快速淡化隐藏
$().fadeToggle(time) 淡入淡出效果切换函数,time单位为毫秒，可不带时间,不带时间则快速切换(切换是指当前为显示状态的则淡化变成隐藏效果，当前为隐藏状态的则淡化变成显示效果)
$().fadeTo(time,pram) 效果切换到指定效果函数,time单位为毫秒(必须带)，pram为设置淡入淡出最终的透明值(必须带),(该函数是将当前状态切换到设定的透明度效果状态)
实例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(window).ready(function () {
$(".b1").click(function () {
//$().fadeIn(time) 效果淡出(显示,透明值为1)函数time单位为毫秒，可不带时间,不带时间则快速淡化展示
$("img").fadeIn(1000);
})
$(".b2").click(function () {
//$().fadeOut(time) 效果淡入(隐藏,透明值为0)函数time单位为毫秒，可不带时间,不带时间则快速淡化隐藏
$("img").fadeOut(1000);
})
$(".b3").click(function () {
//$().fadeToggle(time) 淡入淡出效果切换函数,time单位为毫秒，可不带时间,不带时间则快速切换(切换是指当前为显示状态的则淡化变成隐藏效果，当前为隐藏状态的则淡化变成显示效果)
$("img").fadeToggle(1000);
})
$(".b4").click(function () {
//$().fadeTo(time,pram) 效果切换到指定效果函数,time单位为毫秒(必须带)，pram为设置淡入淡出最终的透明值(必须带),(该函数是将当前状态切换到设定的透明度效果状态)
$("img").fadeTo(1000,0.3);
})
})
</script>
</head>
<body>
<div>
<img src="bfff64c7.jpg" title="None">
</div>
<button class="b1">显示</button>
<button class="b2">隐藏</button>
<button class="b3">切换</button>
<button class="b4">特定切换</button>
</body>
</html>4.回调函数
下列所有的function函数均为回调函数，回调函数即为等待执行完某函数后再去执行的函数。
$().show(time,function () {
//等待time毫秒执行完show()函数后再执行function
function body
});
$().hide(time,function () {
//等待time毫秒执行完hide()函数后再执行function
function body
});
$().toggle(time,function () {
//等待time毫秒执行完toggle()函数后再执行function
function body
});
$().slideDown(time,function () {
//等待time毫秒执行完slideDown()函数后再执行function
function body
});
$().slideUp(time,function () {
//等待time毫秒执行完slideUp()函数后再执行function
function body
});
$().slideToggle(time,function () {
//等待time毫秒执行完slideToggle()函数后再执行function
function body
});
$().fadeIn(time,function () {
//等待time毫秒执行完fadeIn()函数后再执行function
function body
});
$().fadeOut(time,function () {
//等待time毫秒执行完fadeOut()函数后再执行function
function body
});
$().fadeToggle(time,function () {
//等待time毫秒执行完fadeToggle()函数后再执行function
function body
});
$().fadeTo(time,pram,function () {
//等待time毫秒执行完fadeTo()函数后再执行function
function body
});
八．jQuery扩展方法/插件机制(自定义方法)
作用:当jQuery中的标准库提供的方法不能达到我们想要的效果时，我们可以通过扩展方法来自定义方法来让jQuery调用已达到理想效果。
用jQuery写自己写插件时，最核心的两个方法。
1.为jQuery添加一个静态方法,格式:$.extend(object)
实例代码块如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
//为jQuery添加一个静态方法
//格式:$.extend(object)
$.extend({
min:function (a,b) { //自定义的函数必须用别名的方式
return(a<b?a:b);
},//注意此处用的是逗号
max:function (a,b) { //自定义的函数必须用别名的方式
return(a<b?b:a);
}
})
$(".p1").click(function () {
alert($.min(4,78));
})
alert($.max(4,78));
})
</script>
</head>
<body>
<div>
<p class="p1">点我呀</p>
</div>
</body>
</html>2.为jQuery添加一个方法,格式:$.fn.extend(object)
实例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
//为jQuery添加一个方法
//格式:$.fn.extend(object)
$.fn.extend({
min1:function (a,b) { //自定义的函数必须用别名的方式
return(a<b?10*a:10*b);
},//注意此处用的是逗号
max1:function (a,b) { //自定义的函数必须用别名的方式
return(a<b?10*b:10*a);
}
})
$(".p1").click(function () {
alert($.fn.min1(4,78)); 使用自定义函数
})
alert($.fn.max1(4,78)); 使用自定义函数
})
</script>
</head>
<body>
<div>
<p class="p1">点我呀</p>
</div>
</body>
</html>九.欢迎关注作者公众号