一、jQuery是什么？
jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
二、jQuery的基本语法：
jquery的基础语法：$(selector).action()
例如：$(“#test”).html();获取id=“test”的标签的文本内容
三、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
四、寻找元素（选择器和筛选器）
4.1 选择器
/************************基本选择器************************/
// $("div").css("color","red");
// $("*").css("color","red");
// $("#p1").css("color","red");
// $(".outer").css("color","red");
// $(".inner,div,p").css("color","red");
/************************层级选择器************************/
//后代选择器
// $(".outer p").css("color","red");//class="outer"标签内的所有p标签
//子代选择器
// $(".outer > p").css("color","red");class="outer"标签内的第一层p标签
//毗邻选择器
// $(".outer + p").css("color","red");//.outer的相邻下一个p标签颜色变红
//
// $(".outer~p").css("color","red");//.outer的向下的所有兄弟标签p标签颜色变红
/************************基本筛选器************************/
// $("ul li:first").css("color","red");//筛选第一个
// $("ul li:last").css("color","red");//筛选最后一个
// $("ul li:eq(1)").css("color","red");//从0开始，指定筛选第一个
// $("ul li:even").css("color","red");//从0行开始，筛选偶数行
// $("ul li:odd").css("color","red");//从第一行开始筛选，筛选奇数行
// $("ul li:gt(1)").css("color","red");//从0开始，第一行后面的全部筛选（不包括第一行行）
// $("ul li:lt(1)").css("color","red");//从0开始，第一行前面的全部筛选（不包括第一行行）
/************************属性选择器************************/
//属性名查找选择
// $("[alex='sb']").css("color","red");//装饰alex="sb"的所有标签
// $("[alex='sb'][id='p1']").css("color","red");//装饰alex="sb"且id="p1"的标签
/************************表单选择器************************/
//属性值查找选择
// $("[type='text']").css("width","300px");
//input表单选择器才能够使用以下简写方式
// $(":text").css("width","300px");练习：左侧菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
height: 1000px;
width: 100%;
}
.menu{
float: left;
height: 500px;
width: 30%;
background-color: #99aecb;
}
.content{
float: left;
height: 500px;
width: 70%;
background-color: rebeccapurple;
}
.title{
line-height: 40px;
background-color: #396bb3;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title" onclick="show(this)">菜单一</div>
<div class="con">
<p>111</p>
<p>111</p>
<p>111</p>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单二</div >
<div class="con hide">
<p>222</p>
<p>222</p>
<p>222</p>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单三</div>
<div class="con hide">
<p>333</p>
<p>333</p>
<p>333</p>
</div>
</div>
</div>
<div class="content"></div>
</div>
<script src="jQuery3.5.0.js"></script>
<script>
function show(self) {
$(self).next().removeClass("hide");
$(self).parent().siblings().children(".con").addClass("hide");
}
</script>
</body>
</html>View Code
4.2 筛选器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>hello</div>
<a href="">click</a>
<p id="p1" alex="sb">ppp</p>
<p id="p2" alex="sb">ppp</p>
<div class="outer">outer
<div class="inner">
inner
<p>inner p</p>
</div>
<p>alex</p>
</div>
<p>xialv</p>
<div class="outer2">oooouter </div>
<p>xialv</p>
<ul>
<li>111</li>
<li id="begin">222</li>
<a>ssss</a>
<li>333</li>
<li>444</li>
<li id="end">555</li>
<li>666</li>
</ul>
<input type="text">
<input type="checkbox">
<input type="submit">
<script src="jQuery3.5.0.js"></script>
<script>
//筛选器
// $("li").eq(2).css("color","blue");//获取所有的li标签，筛选出第二个li进行css修饰
// $("li").first().css("color","green");//获取所有的li标签，筛选出第一个li进行css修饰
// $("li").last().css("color","pink");//获取所有的li标签，筛选出最后一个li进行css修饰
//查找筛选器
// $(".outer").children("p").css("color","red");//仅装饰子代
// $(".outer").find("p").css("color","red");//装饰所有后代
$("li").eq(1).next().css("color","red");//获取所有的li标签，筛选出第一个li，对它的下一个标签进行css修饰
// $("li").eq(1).nextAll().css("color","red");//获取所有的li标签，筛选出第一个li，对它后面的所有标签进行css修饰
// $("li").eq(1).nextUntil("#end").css("color","red");//获取所有的li标签，筛选出第一个li，对它后面的，id=end前面的所有标签进行修饰
// $("li").eq(4).prev().css("color","red");//获取所有的li标签，筛选出第四个li，对它的上一个标签进行css修饰
// $("li").eq(4).prevAll().css("color","red");//获取所有的li标签，筛选出第四个li，对它前面的所有标签进行css修饰
// $("li").eq(4).prevUntil("#begin").css("color","red");//获取所有的li标签，筛选出第四个li，对它前面的，id=begin后面的所有标签进行修饰
// $("li").eq(4).prevUntil("li:eq(1)").css("color","red");
// console.log($(".outer .inner p").parent().html());//获取p标签的父标签的html内容
// $(".outer .inner p").parents().css("color","red");//对p标签的祖先标签进行css修饰
// $(".outer .inner p").parentsUntil("body").css("color","red");//对p标签的祖先标签进行css修饰，直到祖标签为body的时候停止，不包括body
// $(".outer").siblings().css("color","red");//对class=outer的标签的兄弟标签进行css修饰
</script>
</body>
</html>
五、操作元素（属性、文档处理、CSS）
5.1 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1" con="c1"></div>
<input type="checkbox" checked="checked">是否可见
<input type="checkbox">是否可见
<div id="id1">
<p>pppppp</p>
</div>
<input type="text" value="123"> <!--input固有的value属性 -->
<div value="456">aaa</div> <!--div没有value属性，这个是自定义的 -->
<script src="jQuery3.5.0.js"></script>
<script>
console.log($("div").hasClass("div1")); //true
/*************************对属性的操作*************************/
//attr:更适用于自定义属性
// console.log($("div").attr("con")); //查找属性值，c1
// $("div").attr("con","c2"); //修改（设置）属性值
// console.log($("div").attr("con")); //c2
// $("div").removeAttr("con"); //移除属性
// console.log($("div").attr("con")); //undefined
// console.log($(":checkbox:first").attr("checked")); //checked
// console.log($(":checkbox:last").attr("checked")); //undefined
//prop:更适用于固有的属性
// console.log($("div").prop("con")); //查找div下的自定义属性，undefined
// console.log($("div").prop("class")); //查找div1的固有属性
// $("div").prop("class","cccc"); //修改（设置）固有属性
// console.log($("div").prop("class")); //cccc
// console.log($(":checkbox:first").prop("checked")); //true
// console.log($(":checkbox:last").prop("checked")); //false
/*************************对CSS类的操作*************************/
// $("div").addClass("aaa");
// $("div").removeClass("aaa");
/*************************对HTML代码/文本/值的操作*************************/
// console.log($("#id1").html()); //<p>pppppp</p>
// console.log($("#id1").text()); //pppppp
// console.log($("#id1").html("<h1>YUAN</h1>")); //YUAN(粗体)
// console.log($("#id1").text("<h1>YUAN</h1>")); //<h1>YUAN</h1>
//注️:value用于固有属性，无法找到自定义的value
// console.log($(":text").val()); //123
// console.log($(":text").next().val()); //空
//
// $(":text").val("789");
// console.log($(":text").val()); //789
//
/*************************对CSS属性的操作*************************/
// $("p").css("color","red");
// $("p").css({"color":"red","background-color":"green"});
</script>
</body>
</html>
jQeury的循环遍历方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>1111</p>
<p>2222</p>
<p>3333</p>
<script src="jQuery3.5.0.js"></script>
<script>
arr=[11,22,33];
//JS跟Jquery可以混用
// for (var i=0;i<arr.length;i++){
// $("p").eq(i).text(arr[i]);
// }
//jquery循环遍历方法一
// $.each(arr,function (x,y) {
// console.log(x); //arr的下标
// console.log(y); //相应的arr[下标]对应的值
// })
//jquery循环遍历方法二
$("p").each(function () {
console.log($(this));
$(this).html("hello");
})
</script>
</body>
</html>View Code
实例一：正反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="selectall();">全选</button>
<button onclick="cancel();">取消</button>
<button onclick="reverse();">反选</button>
<hr>
<table border="1">
<tr>
<td><input type="checkbox"></td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>333</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>444</td>
</tr>
</table>
<script src="jQuery3.5.0.js"></script>
<script>
function selectall() {
$(":checkbox").each(function () {//冒号--》类型type
$(this).prop("checked",true);//prop--》JS对象的属性，attr是html文档节点的属性
})
}
function cancel() {
$(":checkbox").each(function () {
$(this).prop("checked",false);
})
}
function reverse() {
$(":checkbox").each(function () {
if($(this).prop("checked")){
$(this).prop("checked",false);
}
else{
$(this).prop("checked",true);
}
})
}
</script>
</body>
</html>View Code
实例二：模态对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
background-color: rebeccapurple;
height: 2000px;
}
.shade{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
background-color: coral;
opacity: 0.4;
}
.hide{
display: none;
}
.models{
position: fixed;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
height: 200px;
width: 200px;
background-color: gold;
}
</style>
</head>
<body>
<div class="back">
<input id="ID1" type="button" value="click" onclick="action1(this)">
</div>
<div class="shade hide"></div>
<div class="models hide">
<input id="ID2" type="button" value="cancel" onclick="action2(this)">
</div>
<script src="jQuery3.5.0.js"></script>
<script>
function action1(self) {
$(self).parent().siblings().removeClass("hide");
}
function action2(self){
//方式一：1、先给本标签的parent标签添加hide，2、给本标签的parent的上一标签添加hide
// $(self).parent().addClass("hide");
// $(self).parent().prev().addClass("hide");
//方式二：获取本标签的parent标签，再给parent标签及parent的上一标签添加hide
// $(self).parent().addClass("hide").prev().addClass("hide");
//方式三：通过body标签找到children标签下的class=shade，跟class=models标签，再添加class
$(self).parent().parent().children(".shade,.models").addClass("hide")
}
</script>
</body>
</html>View Code
5.2 文档处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="c1">
<p>ppp</p>
</div>
<button>add</button>
<script src="jQuery3.5.0.js"></script>
<script>
$("button").click(function () {
// $(".c1").append("<h1>HELLO YUAN</h1>");
var $ele=$("<h1>");//创建一个标签h1
$ele.html("Hello world");
$ele.css("color","red");
//内部插入：父标签中添加子标签
// $(".c1").append($ele);//往class=c1的标签中追加子标签$ele，(追加：追加到其他子标签的后面）
// $ele.appendTo(".c1");//将标签$ele追加到class=c1的标签内
// $(".c1").prepend($ele);//往class=c1的标签中添加子标签$ele，(prepend:添加到其他子标签的前面）
// $ele.prependTo(".c1") //将标签$ele添加加到class=c1的标签内,(prependTo:添加到其他子标签的前面）
//外部插入：父标签添加兄弟标签
//$(".c1").after($ele);//在父标签的下面添加兄弟标签
// $ele.insertAfter(".c1");//将兄弟标签添加到父标签的下面
// $(".c1").before($ele);//在父标签的上面添加兄弟标签
// $ele.insertBefore(".c1");//将兄弟标签添加到父标签的上面
// 替换
//$("p").replaceWith($ele);//用$ele标签替换p标签
//删除与清空
//$(".c1").empty();//清空：将c1内的所有内容清空，保留c1标签
//$(".c1").remove();//删除：连同c1一起删除，不保留c1标签
//clone
//var $ele2=$(".c1").clone();//对class=c1的标签进行克隆
//$(".c1").after($ele2);//每个class=c1的后面都添加$ele2
})
</script>
</body>
</html>练习一：clone方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="inner">
<button onclick="add(this)">+</button>
<input type="text">
</div>
</div>
<script src="jQuery3.5.0.js"></script>
<script>
function add(self) {
// var $clone_obj=$(".inner").clone();
var $clone_obj=$(self).parent().clone();
$clone_obj.children("button").html("-");
$clone_obj.children("button").attr("onclick","remove_obj(this)");
$(".outer").append($clone_obj);
}
function remove_obj(self) {
$(self).parent().remove();
}
</script>
</body>
</html>View Code
5.3 css操作
CSS
$("").css(name|pro|[,val|fn])
位置
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
尺寸
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.div1,.div2{
height: 1000px;
width: 200px;
}
.div1{
border: 5px solid red;
padding: 20px;
margin: 2px;
background-color: #396bb3;
}
.div2{
background-color: #E46E26;
}
.outer{
position: relative;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="outer">
<div class="div2"></div>
</div>
<script src="jQuery3.5.0.js"></script>
<script>
//offset()：相对于视口(窗口左上角)的偏移量;
// console.log($(".div1").offset().top);//0
// console.log($(".div1").offset().left);//0
// console.log($(".div2").offset().top);//1000
// console.log($(".div2").offset().left);//0
//position()：相对于已定位的父标签的偏移量;
// console.log($(".div1").position().top);//父标签:body,0px
// console.log($(".div1").position().left);//0px
//
// console.log($(".div2").position().top);//父标签:outer,0px
// console.log($(".div2").position().left);//0px
//height()方法：获取文本内容的大小，不包括内间距padding跟边框border
// console.log($(".div1").height());//1000px
// console.log($(".div2").height());//1000px
//height("像素值"):修改文本内容的大小,不包括内间距padding跟边框border
// $(".div1").height("1000px");//1000px
// $(".div2").height("2000px");//2000px
//innerHeight()方法：获取盒子的大小，包括内间距padding,不包括边框border
// console.log($(".div1").innerHeight());//1040
// console.log($(".div2").innerHeight());//2000
//outerHeight()方法：获取盒子的大小，包括内间距padding跟边框border
// console.log($(".div1").outerHeight());//1050
// console.log($(".div2").outerHeight());//2000
//outerHeight(true)方法：获取盒子的大小，包括内间距padding、边框border、外间距margin
// console.log($(".div1").outerHeight(true));//1054
// console.log($(".div2").outerHeight(true));//2000
</script>
</body>
</html>实例一：返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.div2{
height: 1000px;
width: 100%;
}
.div1{
width: 40%;
height: 200px;
background-color: #396bb3;
overflow: auto;
}
.div2{
background-color: #E46E26;
}
.returnTop{
position: fixed;
right: 20px;
bottom: 20px;
height: 50px;
width: 100px;
background-color: gray;
color: white;
text-align: center;
line-height: 50px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="div1">
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
<h1>1111</h1>
</div>
<div class="div2">
<button onclick="div1_returnTop()">return</button>
</div>
<div class="returnTop hide" onclick="returnTop()">返回顶部</div>
<script src="jQuery3.5.0.js"></script>
<script>
//给窗口绑定一个监听鼠标滚轮的事件
window.onscroll=function () {
// console.log($(window).scrollTop())//鼠标滚轮与顶部的距离
if ($(window).scrollTop()>100){
$(".returnTop").removeClass("hide");
}
else{
$(".returnTop").addClass("hide");
}
};
function returnTop() {//返回页面顶部
$(window).scrollTop(0);
}
// function div1_returnTop() {//返回class=div1的盒子顶部
// $(".div1").scrollTop(0);
// }
$(".div2 button").click(function () {//事件绑定返回cass=div1的盒子顶部
$(".div1").scrollTop(0);
})
</script>
</body>
</html>View Code
六、事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--DOM加载后执行JS的onload加载-->
<!-- <script>-->
<!-- function f() {-->
<!-- var ele=document.getElementsByTagName("li");-->
<!-- for(var i=0;i<ele.length;i++){-->
<!-- ele[i].innerText="5";-->
<!-- }-->
<!-- }-->
<!-- </script>-->
<!--DOM加载完后执行jquery的ready加载-->
<!-- 正常版-->
<!-- <script src="jQuery3.5.0.js"></script>-->
<!-- <script>-->
<!-- $(document).ready(function () {-->
<!-- $("ul li ").html(5)-->
<!-- })-->
<!-- </script>-->
<!-- 简写版-->
<!-- <script>-->
<!-- $(function () {-->
<!-- $("ul li ").html(5)-->
<!-- })-->
<!-- </script>-->
</head>
<body onload="f()">
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
<button>add</button>
<script src="jQuery3.5.0.js"></script>
<script>
//JS获取标签且进行功能操作,事件绑定失败，JS无法自动遍历所有的li标签
// var ele=document.getElementsByTagName("li");
// ele.onclick(function () {
// alert(666);
// })
//jquery获取标签且进行功能操作,事件绑定成功
// $("ul li").bind("click",function () {
// alert(777)
// });
//jquery获取标签且进行功能操作,事件绑定成功。简写模式
// $("ul li").click(function () {//给li绑定click事件，但是新增加的li标签没有绑定
// alert(999);
// });
//解除事件的绑定
// $("ul li").unbind("click");
// $("button").click(function () {//给ul中新加li标签
// var $ele=$("<li>");
// var $len=$("ul li").length;
// $ele.html(($len+1)*1111);
// $("ul").append($ele);
// });
//事件委托:事件绑定在ul上，但ul将绑定的事件委托给所有的li完成
// $("ul").on("click","li",function(){
// alert(6666666);
// })
</script>
</body>
</html>事件绑定与事件委托
七、动画效果
7.1 显示与隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>hello</div>
<button onclick="f1()">显示</button>
<button onclick="f2()">隐藏</button>
<button onclick="f3()">切换</button>
<script src="jQuery3.5.0.js"></script>
<script>
function f1() {
// $("div").show();
$("div").show(1000);
}
function f2() {
// $("div").hide();
$("div").hide(1000);
}
function f3() {
// $("div").toggle();
$("div").toggle(1000);
}
</script>
</body>
</html>View Code
7.2 滑动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jQuery3.5.0.js"></script>
<script>
$(document).ready(function () {
$("#slideDown").click(function () {
$("#content").slideDown(1000);
});
$("#slideUp").click(function () {
$("#content").slideUp();
});
$("#slideToggle").click(function () {
$("#content").slideToggle();
})
})
</script>
<style>
#content{
height: 100px;
width: 100%;
background-color: black;
color: white;
text-align: center;
line-height: 100px;
border: 1px red solid;
}
</style>
</head>
<body>
<div id="slideDown">出现</div>
<div id="slideUp">隐藏</div>
<div id="slideToggle">切换</div>
<div id="content">hello world</div>
</body>
</html>View Code
7.3 淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--创建四个按钮-->
<button id="fadeIn">fadeIn</button>
<button id="fadeOut">fadeOut</button>
<button id="fadeToggle">fadeToggle</button>
<button id="fadeTo">fadeTo</button>
<!--创建一个文本框-->
<div style="border: red 1px solid;width: 50px;height: 50px;background-color: pink" id="content"></div>
<script src="jQuery3.5.0.js"></script>
<script>
//事件绑定
$("#fadeIn").click(function () {//淡出事件
$("#content").fadeIn(1000);
});
$("#fadeOut").click(function () {//淡入事件
$("#content").fadeOut(1000);
});
$("#fadeToggle").click(function () {//切换事件
$("#content").fadeToggle(1000);
});
$("#fadeTo").click(function () {//淡出事件，可指定透明度
$("#content").fadeTo(1000,0.4);
});
</script>
</body>
</html>View Code
7.4 回调函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 回调函数：在完成特定动作后才执行的函数-->
<script src="jQuery3.5.0.js"></script>
<script>
$(document).ready(function () {
$("#show").click(function () {
$("#con").show(1000,function () {//1秒后执行完显示操作后触发回调函数，alert(111)
alert(111)
});
});
$("#hide").click(function () {
$("#con").hide(1000,function () {
alert(222)
});
});
$("#slideDown").click(function () {
$("#con").slideDown(1000,function () {
alert(333)
});
});
$("#slideUp").click(function () {
$("#con").slideUp(1000,function () {
alert(444)
});
});
$("#fadeIn").click(function () {
$("#content").fadeIn(1000,function () {
alert(555)
});
});
$("#fadeOut").click(function () {
$("#content").fadeOut(1000,function () {
alert(666)
});
});
})
</script>
</head>
<body>
<div id="con">hello world</div>
<button id="show">show</button>
<button id="hide">hide</button>
<button id="slideDown">slideDown</button>
<button id="slideUp">slideUp</button>
<button id="fadeIn">fadeIn</button>
<button id="fadeOut">fadeOut</button>
<div style="border: red 1px solid;width: 50px;height: 50px;background-color: pink" id="content"></div>
</body>
</html>View Code
八、扩展方法（插件机制）
$.extend(object) //为JQuery 添加一个静态方法。
$.fn.extend(object) //为JQuery实例添加一个方法。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>111</p>
<p>222</p>
<p>333</p>
<script src="jQuery3.5.0.js"></script>
<script>
//两种循环调用方式
//方式一：对所有的obj添加功能
// $.each(obj,function () {
//
// });
//
//方式二：对括号内的""所有标签添加功能
// $("").each(function () {
//
// });
//两种扩展方式
//方式一：为JQuery 添加一个静态方法。
// $.extend({
// Myprint:function () {
// console.log("hello");
// },
//
// Min:function (a,b) {
// return a<b? a:b;
// },
// Max:function (a,b) {
// return a>b? a:b;
// }
// });
// $.Myprint();
// var $min=$.Min(100,21);
// var $max=$.Max(21,100);
// console.log($min);
// console.log($max);
//方式二：//为JQuery实例添加一个方法。
$.fn.extend({
GetText:function () {
//JS形式
// for (var i=0;i<this.length;i++)
// {console.log(this[i].innerHTML)}
//jquery形式
$.each($(this),function (x,y) {
// console.log(y.innerHTML)//y是js对象
console.log($(y).html())//将y转为jquert对象
})
}
});
$("p").GetText();
</script>
</body>
</html>
练习：
<div id="box1">
<select multiple="multiple" size="10" id="left">
<option>book</option>
<option>book2</option>
<option>book3</option>
<option>book4</option>
<option>book5</option>
<option>book6</option>
</select>
</div>
<div id="choice">
<input class="add" type="button" value="--->" onclick="add()"><br>
<input class="remove" type="button" value="<---" onclick="remove();"><br>
<input class="add-all" type="button" value="====>" onclick="ADDall()"><br>
<input class="remove-all" type="button" value="<===" onclick="remall()">
</div>
<div>
<select multiple="multiple" size="10" id="right">
<option>book9</option>
</select>
</div>
<script>
function add(){
var right=document.getElementById("right");
var options=document.getElementById("left").getElementsByTagName("option");
for (var i=0; i<options.length;i++){
var option=options[i];
if(option.selected==true){
right.appendChild(option);
i--;
}
}
}
function remove(){
var left=document.getElementById("left");
var options=document.getElementById("right").getElementsByTagName("option");
for (var i=0; i<options.length;i++){
var option=options[i];
if(option.selected==true){
left.appendChild(option);
i--;
}
}
}
function ADDall(){
var right=document.getElementById("right");
var options=document.getElementById("left").getElementsByTagName("option");
for (var i=0; i<options.length;i++){
var option=options[i];
right.appendChild(option);
i--;
}
}
function remall(){
var left=document.getElementById("left");
var options=document.getElementById("right").getElementsByTagName("option");
for (var i=0; i<options.length;i++){
var option=options[i];
left.appendChild(option);
i--;
}
}
</script>左右内容移动
轮播图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
width: 590px;
height: 470px;
border: 1px solid red;
position: relative;
margin-left:400px;
margin-top: 80px;
}
.img li{
left: 0;
top: 0;
list-style: none;
position: absolute;
}
.num{
position: absolute;
left: 130px;
top: 400px;
}
.num li{
display: inline-block;
height: 18px;
width: 18px;
text-align: center;
line-height: 18px;
background-color: lightgray;
border-radius: 50%;
margin-left: 10px;
}
.num .active{
background-color: white;
}
.btn{
position: absolute;
width: 30px;
height: 60px;
text-align: center;
top: 50%;
margin-top: -30px;
font-size: 18px;
opacity: 0.7;
display: none;/*默认隐藏按钮*/
}
.left{
left: 0;
}
.right{
right: 0;
}
.outer:hover .btn{
display: block;/*鼠标悬停在class=outer的盒子时，显示按钮button*/
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><a><img src="img/1.jpg"></a></li>
<li><a><img src="img/2.jpg"></a></li>
<li><a><img src="img/3.jpg"></a></li>
<li><a><img src="img/4.jpg"></a></li>
<li><a><img src="img/5.jpg"></a></li>
<li><a><img src="img/6.jpg"></a></li>
<li><a><img src="img/7.jpg"></a></li>
<li><a><img src="img/8.jpg"></a></li>
</ul>
<ul class="num">
<!-- <li class="active">1</li>-->
<!-- <li>2</li>-->
<!-- <li>3</li>-->
<!-- <li>4</li>-->
<!-- <li>5</li>-->
<!-- <li>6</li>-->
<!-- <li>7</li>-->
<!-- <li>8</li>-->
</ul>
<button class="left btn"> < </button>
<button class="right btn"> > </button>
</div>
<script src="jQuery3.5.0.js"></script>
<script>
//jquery创建标签
var $img_len=$(".img li").length;//获取img下的li标签的长度
for (var i=0;i<$img_len;i++){
$(".num").append("<li></li>")//for 循环创建对应的标签
}
$(".num li").eq(0).addClass("active");//默认给第一个标签设置背景颜色
//定义全局变量，用于自动轮播+手动轮播的顺序调整
//自动轮播会按照顺序往后，手动轮播会调整其顺序
//若自动轮播到第五张，此时手动返回第一张
var i=0;
//手动轮播
$(".num li").mouseover(function () {//鼠标悬停在class=num下的li标签时触发此函数
i=$(this).index();//获取鼠标悬停的位置的对应的下标
$(this).addClass("active").siblings().removeClass("active");//给该下标添加类active并清除其兄弟类的active类
$(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200);//淡入对应的图像并淡出其他图像
});
//自动轮播,默认向右
var c=setInterval(GO_R,1500);//设置间隔1.5s执行函数GO_R
function GO_R() {
if(i==$img_len-1){//若轮播到最后一张图片
i=-1//返回轮播图的第0张
}
i++;//转到下一张轮播图
//给该下标添加类active并清除其兄弟类的active类
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
//淡入对应的图像并淡出其他图像
$(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200);
}
//鼠标悬停时停止轮播
$(".outer").hover
(
function () {
clearInterval(c);
},//鼠标悬停在class=outer的盒子时触发此函数
function () {
c=setInterval(GO_R,1500);
}//鼠标离开class=outer的盒子时触发此函数
);
//左右按钮的点击功能
$(".right").click(GO_R);//上述已经有向右的功能了
$(".left").click(GO_L);
function GO_L() {
if(i==-1){//若轮播到第一张
i=$img_len-1//返回轮播图的最后一张
}
i--;//转到上一张轮播图
//给该下标添加类active并清除其兄弟类的active类
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
//淡入对应的图像并淡出其他图像
$(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200);
}
</script>
</body>
</html>View Code
day45有图片
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
