python学习笔记 Jquery
目录
一、概述
二、jQuery对象
三、寻找元素
四、操作元素
五、扩展方法
六、轮播图实践
一、概述
［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还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
二、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()
参考：http://jquery.cuishifeng.cn/
三、寻找元素(选择器和筛选器)
1、选择器
基本选择器
$("*") //选取所有元素
$("#id") //id 选择器
$(".class") //类选择器
$("element") //标签名选择器
$(".class,p,div") //组合选择器
层级选择器
$(".outer div") //所有后代元素选择器
$(".outer>div") //子代元素选择器
$(".outer+div") //向下毗邻兄弟元素选择器
$(".outer~div") //向下寻找普通兄弟选择器
基本筛选器
$("li:first") //筛选第一个标签
$("li:last") //筛选最后一个标签
$("li:eq(2)") //筛选索引值为2的标签
$("li:even") //筛选所有偶数标签
$("li:odd") //筛选所有奇数标签
$("li:gt(1)") //筛选大于索引值后面的所有标签
$("li:lt(1)") //筛选小于索引值前面的所有标签
属性选择器
用 [ ],注意引号.
$('[id="div1"]') //id加值组合
$('["ss="bb"][id="ss"]') //自定义属性加值,还可以加ID多重组合
表单选择器
$("[type='text']") //简写方式----->$(":text")
注意只适用于input标签 : $("input:checked")
2、 筛选器
过滤筛选器
$("li").eq(2) //跟基本选择器有所不同,eq在外面,可以更加灵活的运用
$("li").first()
$("ul li").hasclass("test") //检查被选元素是否包含指定的 class,返回布尔值
查找筛选器
查找子标签：
$("div").children(".test") //满足条件的子级标签
$("div").find(".test") //所有满足条件的后代标签
向下查找兄弟标签：
$(".test").next() //下一个兄弟标签
$(".test").nextAll() //向下所有兄弟标签
$(".test").nextUntil() //向下一直到某个标签之间的标签 开区间
向上查找兄弟标签：
$("div").prev() //上一个兄弟标签
$("div").prevAll() //向上所有兄弟标签
$("div").prevUntil() //向上直到某个标签之间的所有标签 开区间
查找所有兄弟标签：
$("div").siblings() //除自己以外的所有兄弟标签
查找父标签：
$(".test").parent() //父元素
$(".test").parents() //该方法从父元素向上遍历 DOM 元素的祖先，直至文档根元素的所有路径（<html>）
$(".test").parentUntil() //父元素直到某个标签之间的元素
四、操作元素(属性，css，文档处理)
1、属性操作
//--------------------------CSS类 $("").addClass(class|fn) //addClass() 方法向被选元素添加一个或多个类名。该方法不会移除已存在的 class 属性，仅仅添加一个或多个类名到 class 属性。 $("").removeClass([class|fn]) //removeClass() 方法从被选元素移除一个或多个类。注意：如果没有规定参数，则该方法将从被选元素中删除所有类。 //--------------------------属性 $("").attr(); //attr("con","dog") 方法设置或返回被选元素的属性和值。键值对则表示给添加属性赋值. $("").removeAttr(); //removeAttr() 方法从被选元素中移除属性。 $("").prop(); //prop() 方法设置或返回被选元素的属性和值。仅限于自带属性, 不能设置或获取自定义属性. 与attr最大区别,对固有属性用prop,对自定义属性用attr $("").removeProp(); //removeAttr() 方法从被选元素中移除自带属性。 //--------------------------HTML代码/文本/值 $("").html([val|fn]) //html() 方法返回或设置被选元素的内容 (inner HTML)。 $("").text([val|fn]) //text() 方法设置或返回被选元素的文本内容(innerText) $("").val([val|fn|arr]) // val() 方法返回或设置被选元素的 value 属性。仅限于自带value属性的标签 //---------------------------样式改变 $("#c1").css({"color":"red","fontSize":"35px"})
$("h1").css("color","red")
//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。 //对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。 //像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此 //需要使用prop方法去操作才能获得正确的结果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button class="select" onclick="selectAll()">全选</button>
<button class="select" onclick="reserve()">反选</button>
<button class="select" onclick="cancel()">取消</button>
<table border="1" cellpadding="5px" cellspacing="1px">
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox"></td>
<td>333</td>
<td>333</td>
<td>333</td>
</tr>
</table>
<script src="jquery-3.5.1.min.js"></script>
<script>
function selectAll() {
$(".checkbox").prop("checked",true)
}
function reserve() {
$(".checkbox").each(function () {
$(this).prop("checked",!$(this).prop("checked"))
})
}
function cancel() {
$(".checkbox").prop("checked",false)
}
</script>
</body>
</html>
2、each循环
jquery内部维持一个循环；但如果对于选中标签进行不同处理，这时就需要对所有标签数组进行循环遍历啦
jquery支持两种循环方式：
方式一：
格式：$.each(obj,fn)
li=[10,20,30,40]; dic={name:"yuan",sex:"male"}; $.each(li,function(i,x){ console.log(i,x) //i是索引值，x是元素。//如果是dic，i是key，x是value。 });
方式二
格式：$("").each(fn)
$("tr").each(function(){
console.log($(this).html())
}) //其中,$(this)代指当前循环的标签。
/* function f(){ for(var i=0;i<4;i++){ if (i==2){ return } console.log(i) } } f(); // 这个例子大家应该不会有问题吧!!! //----------------------------------------------------------------------- li=[11,22,33,44]; $.each(li,function(i,v){ if (v==33){ return ; // ===试一试 return false会怎样? } console.log(v) }); //------------------------------------------ // 大家再考虑: function里的return只是结束了当前的函数,并不会影响后面函数的执行 //本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了, //希望后面的函数也不再执行了!基于此,jquery在$.each里又加了一步: for(var i in obj){ ret=func(i,obj[i]) ; if(ret==false){ return ; } } // 这样就很灵活了: // <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true // <2>如果你不想return后下面循环函数继续执行,那么就直接写return false // ---------------------------------------------------------------------
3、文档节点处理
$("<p>") //创建一个空标签对象
//------------内部插入
$("").append(content|fn) ----->$("p").append("<b>Hello</b>"); //在被选中元素的子标签结尾插入标签
$("").appendTo(content) ----->$("<p>hh</p>").appendTo("div"); //另一种结尾插入子标签的方式
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>"); //在被选中元素的子标签开头插入标签
$("").prependTo(content) ----->$("<p>hh</p>").prependTo("#foo"); //另一种开头插入子标签的方式
//------------外部插入
$("").after(content|fn) ----->$("p").after("<b>Hello</b>"); //在被选元素后插入指定兄弟标签
$("").before(content|fn) ----->$("p").before("<b>Hello</b>"); //在被选元素之前插入指定兄弟标签
$("").insertAfter(content) ----->$("<p>hh</p>").insertAfter("#foo"); //另一种后插入指定兄弟标签方式
$("").insertBefore(content) ----->$("<p>hh</P>").insertBefore("#foo"); //另一种前插入指定兄弟标签方式
//------------替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>"); //把被选元素替换为新的内容
//------------删除
$("").empty() //移除被选元素的所有子节点和内容, 不会移除元素本身，或它的属性。
$("").remove([expr]) //移除被选元素，包括所有的文本和子节点, 也会移除被选元素的数据和事件。
//------------复制
$("").clone([Even[,deepEven]]) //生成被选元素的副本，包含子节点、文本和属性
<head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div> <div class="item"> <button onclick="add(this)">+</button> <input type="text"> </div> </div> <script src="jquery-3.5.1.min.js"></script> <script> function add(self) { var $ele= $(self).parent().clone() $ele.children().html("-").attr("onclick","remove(this)") $(self).parent().parent().append($ele) } function remove(self) { $(self).parent().remove() } </script> </body> </html>
4、css操作
$("").css(name|pro|[,val|fn])
//------------- 位置
$("").offset([coordinates]) //返回或设置匹配元素相对于文档的偏移（位置）包含两个整型属性：top 和 left ,offset({top:y,left:x})
$("").position() //返回匹配元素相对于已定位的父元素的位置（偏移）
$("").scrollTop([val]) //返回或设置匹配元素的滚动条的垂直位置
$("").scrollLeft([val]) //返回或设置匹配元素的滚动条的水平位置
//------------- 尺寸
$("").height([val|fn]) //返回或设置匹配元素的高度
$("").width([val|fn]) //返回或设置匹配元素的宽度
$("").innerHeight() //返回元素的高度（包含 padding，不包含 border 、margin）
$("").innerWidth() //返回元素的宽度（包含 padding，不包含 border、 margin）
$("").outerHeight([soptions]) //返回元素的高度度（包含 padding 和 border）如需包含 margin，请使用 outerHeight(true)
$("").outerWidth([options]) //返回元素的宽度（包含 padding 和 border）如需包含 margin，使用 outerWidth(true)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-2.2.3.js"></script> <script> window.onscroll=function(){ var current=$(window).scrollTop(); console.log(current) if (current>100){ $(".returnTop").removeClass("hide") } else { $(".returnTop").addClass("hide") } } function returnTop(){ // $(".div1").scrollTop(0); $(window).scrollTop(0) } </script> <style> body{ margin: 0px; } .returnTop{ height: 60px; width: 100px; background-color: darkgray; position: fixed; right: 0; bottom: 0; color: greenyellow; line-height: 60px; text-align: center; } .div1{ background-color: orchid; font-size: 5px; overflow: auto; width: 500px; } .div2{ background-color: darkcyan; } .div3{ background-color: aqua; } .div{ height: 300px; } .hide{ display: none; } </style> </head> <body> <div class="div1 div"> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> </div> <div class="div2 div"></div> <div class="div3 div"></div> <div class="returnTop hide" onclick="returnTop();">返回顶部</div> </body> </html>
5、事件
页面载入
ready(fn) // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。 JS中的onload一样的 $(document).ready(function(){}) -----------> $(function(){})
事件绑定
//语法: 标签对象.事件(函数) $("p").click(function(){}) --------->$("p").bind("click",function(){})
事件委派
-指将事件统一绑定给元素的共同祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素 从而通过祖先元素的响应函数来处理事件.
-事件委派是利用了冒泡,通过委派可以减少事件绑定的次数提高程序的性能.只绑定一次事件,即可应用到多个元素上,即使元素是后添加的
$("selector").on(eve,[childSelector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
//eve是处理事件, selector是被绑定的标签 childSelector是指被委派的子标签, data是传给函数的额外参数(可选), fn是事件发生时运行的函数
$("要绑定事件标签的父级标签").on('事件', '要绑定事件的标签'，function(){}) //注意事件和标签都需要加引号
off() 方法通常用于移除通过 on() 方法添加的事件处理程序
$("selector").off("eve") //selector是被绑定的标签,不是委派的子标签, eve是绑定的处理事件
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<hr>
<button id="add_li">Add_li</button>
<button id="off">off</button>
<script src="jquery-3.5.1.min.js"></script>
<script>
// $("ul li").click(function () {
// alert(123)
// })
$("ul").on("click","li",function () {
alert(123)
})
$("#add_li").click(function () {
var $ele = $("<li>")
$ele.html("111")
$("ul").append($ele)
})
$("#off").click(function () {
$("ul").off("click")
})
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.outer{
width: 600px;
border: 1px solid #4b4c4d;
}
.title{
color:white;
height: 40px;
background-color: black;
}
.content{
height: 300px;
}
</style>
</head>
<body>
<div class="outer">
<div class="title">标题</div>
<div class="content">内容</div>
</div>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
//当鼠标移入标题标签时触发
$(".title").mouseover(function () {
//cursor 改变鼠标指针的样式
$(this).css("cursor", "move")
//当鼠标按下以后触发
}).mousedown(function (e) {
//获取指针的位置坐标
var _event = e||window.event;
console.log(_event)
var old_x = _event.clientX;
var old_y = _event.clientY;
//获取面板盒子的坐标
var parent_left= $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top;
//绑定鼠标移动事件,鼠标移动时触发
$(this).mousemove(function (e) {
//获取移动后的鼠标指针坐标
var _newevent=e||window.event;
var new_x = _newevent.clientX;
var new_y = _newevent.clientY;
//计算面板盒子应该移动的位置坐标
var x = parent_left + (new_x - old_x);
var y = parent_top + (new_y - old_y);
//设置面板盒子的位置
$(this).parent().offset({top:y,left:x})
})
//鼠标按键松开触发
}).mouseup(function () {
//解除绑定的移动事件
$(this).off("mousemove")
})
})
</script>
</body>
</html>
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>放大镜</title> <style> *{ margin: 0; padding: 0; } .outer{ height: 209px; width: 250px; border: dashed 3px red; } .float{ height: 100px; width: 100px; background-color: #a4a4a4; opacity: 0.4; position: absolute; display: none; } .big_box{ height: 300px; width: 400px; border: solid 3px green; display: none; overflow: hidden; position: absolute; left:256px; top: 0; z-index:1 } .outer .big_box img{ position: absolute; z-index: 5; } </style> </head> <body> <div class="outer"> <div class="small_box"> <div class="float"></div> <img src="small.jpg" alt=""> </div> <div class="big_box"> <img src="big.jpg" alt=""> </div> </div> <script src="jquery-3.5.1.min.js"></script> <script> $(document).ready(function () { var $small = $(".small_box"); $small.mouseover(function () { $(".float").css("display","block"); $(".big_box").css("display","block") }) $small.mouseleave(function () { $(".float").css("display","none"); $(".big_box").css("display","none") }) $small.mousemove(function (e) { var _event=e || window.event; //透明选择框的高和宽 var float_width = $(".float").width(); var float_height = $(".float").height(); //透明选择框的高宽的一半, 为了计算离左边的距离 var float_width_half = float_width/2; var float_height_half = float_height/2; //小图片盒子的高宽 var small_box_width = $(".small_box").width(); var small_box_height = $(".small_box").height(); //计算出float离smallbox的距离,使得float中心刚好和鼠标指针重叠 var mouse_left = _event.clientX - float_width_half; var mouse_top = _event.clientY - float_height_half; //根据判断是否超出small_box范围设置超出部分的值 if (mouse_left < 0){ mouse_left = 3 }else if(mouse_left > small_box_width - float_width){ mouse_left = small_box_width - float_width + 3 } if (mouse_top < 0){ mouse_top = 3 }else if(mouse_top > small_box_height - float_height){ mouse_top = small_box_height - float_height - 1 } //设置透明框的位置,跟鼠标指针重叠 $(".float").offset({top:mouse_top,left:mouse_left}) //计算大图跟big_box的差值与小图与透明框的差值的比例 var percentX = ($(".big_box img").width() - $(".big_box").width())/(small_box_width - float_width) var percentY = ($(".big_box img").height() - $(".big_box").height())/(small_box_height - float_height) //根据比例设置大图相对于big_box的位置,跟小图形成对应 $(".big_box img").css("left",-percentX*mouse_left+"px") $(".big_box img").css("top",-percentY*mouse_top+"px") }) }) </script> </body> </html>
事件切换
hover事件：
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
$(selector).hover(inFunction,outFunction)
| inFunction | 必需。规定 mouseenter 事件发生时运行的函数。 |
| outFunction | 可选。规定 mouseleave 事件发生时运行的函数。 |
如果只规定了一个函数，则它将会在 mouseenter 和 mouseleave 事件上运行。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .test{ width: 200px; height: 200px; background-color: wheat; } </style> </head> <body> <div class="test"></div> </body> <script src="jquery-3.5.1.min.js"></script> <script> function enter(){ console.log("enter") } function out(){ console.log("out") } $(".test").hover(enter) // $(".test").mouseenter(function(){ // console.log("enter") // }); // // $(".test").mouseleave(function(){ // console.log("leave") // }); </script> </html>
6、动画效果
显示隐藏
1、hide() 方法隐藏被选元素
$(selector).hide(speed,easing,callback)
2、show() 方法显示隐藏的被选元素
$(selector).show(speed,easing,callback)
3、toggle() 方法在 显示和隐藏切换
$(selector).toggle(speed,callback,switch) //switch 可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。True - 显示所有元素 False - 隐藏所有元素
| 参数 | 描述 |
|---|---|
| speed | 可选。规定显示效果的速度。
可能的值：毫秒、"slow"、"fast" ，默认为 "normal" |
| easing | 可选。规定在动画的不同点上元素的速度。默认值为 "swing"。
可能的值："swing" - 在开头/结尾移动慢，在中间移动快 、"linear" - 匀速移动 提示：扩展插件中提供更多可用的 easing 函数。 |
| callback | 可选。show() 方法执行完之后，要执行的函数。 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.5.1.min.js"></script> <script> $(document).ready(function() { $("#hide").click(function () { $("p").hide(1000); }); $("#show").click(function () { $("p").show(1000); }); //用于切换被选元素的 hide() 与 show() 方法。 $("#toggle").click(function () { $("p").toggle(); }); }) </script> <link type="text/css" rel="stylesheet" href="style.css"> </head> <body> <p>hello</p> <button id="hide">隐藏</button> <button id="show">显示</button> <button id="toggle">切换</button> </body> </html>
滑动
1、slideDown() 方法以滑动方式显示被选元素
$(selector).slideDown(speed,easing,callback)
2、slideUp() 方法以滑动方式隐藏被选元素
$(selector).slideUp(speed,easing,callback)
3、slideToggle() 方法在被选元素上进行 slideUp() 和 slideDown() 之间的切换
$(selector).slideToggle(speed,easing,callback)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.5.1.min.js"></script> <script> $(document).ready(function(){ $("#slideDown").click(function(){ $("#content").slideDown(1000); }); $("#slideUp").click(function(){ $("#content").slideUp(1000); }); $("#slideToggle").click(function(){ $("#content").slideToggle(1000); }) }); </script> <style> #content{ text-align: center; background-color: lightblue; border:solid 1px red; display: none; padding: 50px; } </style> </head> <body> <button id="slideDown">出现</button> <button id="slideUp">隐藏</button> <button id="slideToggle">toggle</button> <div id="content">helloworld</div> </body> </html>
淡入淡出
1、adeIn() 方法逐渐改变被选元素的不透明度，从隐藏到可见（褪色效果）
$(selector).fadeIn(speed,easing,callback)
2、fadeOut() 方法逐渐改变被选元素的不透明度，从可见到隐藏（褪色效果）
$(selector).fadeOut(speed,easing,callback)
3、fadeToggle() 方法在 fadeIn() 和 fadeOut() 方法之间切换
$(selector).fadeToggle(speed,easing,callback)
4、fadeTo() 方法逐渐改变被选元素的不透明度为指定的值（褪色效果）。
$(selector).fadeTo(speed,opacity,easing,callback) //opacity必填。规定要淡入或淡出的透明度。必须是介于 0.00 与 1.00 之间的数字。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.5.1.min.js"></script> <script> $(document).ready(function(){ $("#in").click(function(){ $("#id1").fadeIn(1000); }); $("#out").click(function(){ $("#id1").fadeOut(1000); }); $("#toggle").click(function(){ $("#id1").fadeToggle(1000); }); $("#fadeto").click(function(){ $("#id1").fadeTo(1000,0.4); }); }); </script> </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> </body> </html>
回调函数
Callback 函数在当前动画 100% 完成之后执行
无回调函数会先执行alert,有回调函数的会在callback执行完再执行alert
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.5.1.min.js"></script> </head> <body> <button class="button1">hide</button> <p class="p1">helloworld helloworld helloworld</p> <button class="button2">无回调</button> <p class="p2">helloworld helloworld helloworld</p> <script> $(".button1").click(function(){ $(".p1").hide(1000,function(){ alert($(this).html()) }) }) $(".button2").click(function () { $(".p2").hide(1000) alert($(this).html()) }) </script> </body> </html>
扩展方法 (插件机制)
jQuery.extend(object)
是为jQuery类添加类方法（静态方法），需要通过jQuery类来调用，（直接使用 $.xxx 调用）
扩展jQuery对象本身。
用来在jQuery命名空间上增加新函数。
在jQuery命名空间上增加两个函数:
<script> jQuery.extend({ min: function(a, b) { return a < b ? a : b; }, max: function(a, b) { return a > b ? a : b; } }); jQuery.min(2,3); // => 2 jQuery.max(4,5); // => 5 </script>
jQuery.fn.extend(object)
是为jQuery类添加成员函数（实例方法），所有jQuery实例都可以直接调用，（需要使用 $().xxx 调用）。
$("#XX")即为实例对象
扩展 jQuery 元素集来提供新的方法（通常用来制作插件）
增加两个插件方法：
<body> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <script src="jquery.min.js"></script> <script> jQuery.fn.extend({ check: function() { $(this).attr("checked",true); }, uncheck: function() { $(this).attr("checked",false); } }); $(":checkbox:gt(0)").check() </script> </body>
轮播图实践
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>轮播图</title> <style> *{ margin: 0; padding: 0; } .outer{ width: 960px; height: 370px; margin: 80px auto; position: relative; } .pic li{ position: absolute ; list-style: none; display: inline-block; left: 0; top: 0; } .ori #_left,#_right{ position: absolute; color: white; opacity: 0.1; font-size: 22px; width: 50px; height: 50px; background-color: black; border-radius: 50%; text-align: center; line-height: 50px; } .ori #_left{ top:160px; left: 20px; } .ori #_right{ top:160px; right: 20px } .outer:hover #_left,.outer:hover #_right{ opacity: 0.8; cursor: pointer; } .slider_indicators{ position: absolute; list-style: none; left: 380px; bottom: 18px; cursor: pointer; } .slider_indicators li{ display: inline-block; background-color: #4b4949; width: 8px; height: 8px; margin-left: 10px; border-radius: 50%; opacity: 0.5; list-style: none; } .slider_indicators .actived{ border-radius: 30%; width: 30px; height: 6px; opacity: 1; } </style> </head> <body> <div class="outer"> <ul class="pic"> <li><a href=""><img src="1.jpg" alt=""></a></li> <li><a href=""><img src="2.jpg" alt=""></a></li> <li><a href=""><img src="3.png" alt=""></a></li> <li><a href=""><img src="4.gif" alt=""></a></li> <li><a href=""><img src="5.jpg" alt=""></a></li> <li><a href=""><img src="6.jpg" alt=""></a></li> </ul> <div class="ori"> <div id="_left"> <span class="btn"><</span> </div> <div id="_right"> <span class="btn">></span> </div> </div> <ul class="slider_indicators"></ul> </div> <script src="jquery-3.5.1.min.js"></script> <script> var img_num = $(".pic img").length for (var i=0;i<img_num;i++){ $(".slider_indicators").append("<li></li>") } $(".slider_indicators li").eq(0).addClass("actived"); $(".pic li").eq(0).show().siblings().hide(); //为手动轮播和自动轮播索引做统一设置,避免手动轮播以后自动轮播还是从之前的轮播位置开始轮播 var j = 0; //手动下方小标轮播 $(".slider_indicators li").mouseover(function () { //获取小标的索引,用索引跟图片一一对应,同时轮播的索引赋给全局变量j j = $(this).index(); //根据鼠标悬浮的索引添加CSS样式,同时移除其他兄弟标签样式 $(this).addClass("actived").siblings().removeClass("actived") //根据鼠标悬浮标的索引显示图片,同时影藏其他兄弟图片 //stop()表示在执行下面操作时,结束之前的操作 $(".pic li").eq(j).stop().fadeIn(1000).siblings().stop().fadeOut(1000) }) //自动轮播,根据手动轮播索引j开始自动轮播,如果没有手动默认从0开始 var c = setInterval(move_left,1500) function move_left() { //如果索引到达了轮播图的最后一张,需要将索引定位到第一张图片 if (j == $(".pic li").length-1){ j = -1 } j++; $(".slider_indicators li").eq(j).addClass("actived").siblings().removeClass("actived"); $(".pic li").eq(j).stop().fadeIn(1000).siblings().stop().fadeOut(1000) } function move_right(){ if (j == 0){ j=6 } j--; $(".slider_indicators li").eq(j).addClass("actived").siblings().removeClass("actived"); $(".pic li").eq(j).stop().fadeIn(1000).siblings().stop().fadeOut(1000) } //当鼠标悬浮到outer标签时,取消setInterval自动循环,注意代码格式, 后面"",fuction()""代表的是鼠标离开outer $(".outer").hover(function () { clearInterval(c) },function () { c = setInterval(move_left,1500) }) //点击左边<时执行move_right,注意书写格式 $("#_left").click(move_right) // $("#_right").click(move_left) </script> </body> </html>
浙公网安备 33010602011771号