33、jQuery介绍
33.1、jQuery是什么:
(1)jQuery由John Resig创建,至今已吸引了来自世界各地的众多 javascript 高手加入其team。
(2)jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是—WRITE LESS,DO MORE!
(3)它是轻量级的js库,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器。
(4)jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments、events、实现动画效果,
并且方便地为网站提供AJAX交互。
(5)jQuery还有一个比较大的优势,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
(6)下载jQuery的地址为:http://www.jq22.com/jquery-info122
33.2、什么是jQuery对象:
(1)简介:
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的,如果一个对象是 jQuery 对象,
那么它就可以使用 jQuery 里的方法,例如:$(“#test”).html();。
(2)示例:
$("#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 对象
$("#msg").html(); ===》 $("#msg")[0].innerHTML; //jquery对象转为dom对象。
var v = document.getElementById("v"); ===》 var $v = $(v); //DOM对象转jquery对象。
(3)jquery的基础语法:
$(selector).action();
33.3、使用jQuery寻找元素(选择器和筛选器):
(1)选择器:
1)基本选择器:
$("*"); $("#id"); $(".class"); $("element"); $(".class,p,div");
$("p.intro"); //选取所有 class="intro" 的 <p> 元素
$("p#demo"); //选取所有 id="demo" 的 <p> 元素
2)层级选择器:
$(".outer div"); $(".outer>div"); $(".outer+div");
后代、子代、毗邻
3)基本筛选器:
$("li:first"); $("li:eq(2)"); $("li:even"); $("li:gt(1)");
:even 选择器选取每个带有偶数 index 值的元素(比如 2、4、6),index 值从 0 开始,:odd表示从奇数开始。
:gt 选择器选取 index 值高于指定数的元素,index 值从 0 开始。
4)属性选择器:
$("[href]"); //选取所有带有 href 属性的元素。
$("[href='#']"); //选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']"); //选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']"); //选取所有 href 值以 ".jpg" 结尾的元素。
5)表单选择器:
$("[type='button']");------>$("input:button");------>$(":button");
//注意:只适用于input标签
(2)实例之左侧菜单:
1)代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menu{
height: 500px;
width: 30%;
background-color: gainsboro;
float: left;
}
.content{
height: 500px;
width: 70%;
background-color: rebeccapurple;
float: left;
}
.title{
line-height: 50px;
background-color: #425a66;
color: forestgreen;}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title">菜单一</div>
<div class="con">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="con hide">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="con hide">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
</div>
<div class="content"></div>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
$(".item .title").click(function () {
$(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");
})
</script>
</body>
</html>
2)效果图:
(3)实例之tab切换:
1)代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.tab_outer{
margin: 0px auto;
width: 60%;
}
.menu{
background-color: #cccccc;
/*border: 1px solid red;*/
line-height: 40px;
}
.menu li{
display: inline-block;
}
.content{
background-color: tan;
border: 1px solid green;
height: 300px;
}
.hide{
display: none;
}
.current{
background-color: darkgray;
color: yellow;
border-top: solid 2px rebeccapurple;
}
</style>
</head>
<body>
<div class="tab_outer">
<ul class="menu">
<li xxx="c1" class="current" onclick="tab(this);">菜单一</li>
<li xxx="c2" onclick="tab(this);">菜单二</li>
<li xxx="c3" onclick="tab(this);">菜单三</li>
</ul>
<div class="content">
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
function tab(self){
var index=$(self).attr("xxx");
$("#"+index).removeClass("hide").siblings().addClass("hide");
$(self).addClass("current").siblings().removeClass("current");
}
</script>
</body>
</html>
2)效果图:
(4)筛选器:
1)过滤筛选器:
$("li").eq(2); $("li").first(); $("ul li").hasclass("test");
//hasClass() 方法检查被选元素是否包含指定的 class。
2)查找筛选器:
A、$("div").children(".test"); $("div").find(".test");
//.find() 和 .children() 方法类似,不过后者只沿着 DOM 树向下遍历单一层级。
B、$(".test").next(); $(".test").nextAll(); $(".test").nextUntil("stop");
//next() 返回被选元素的后一个同级元素
//nextAll() 返回被选元素之后的所有同级元素
//$(selector).nextUntil(stop); 返回 selector 与 stop 之间的每个元素之后的所有同级元素。
C、$("div").prev(); $("div").prevAll(); $("div").prevUntil("stop");
D、$(".test").parent(); $(".test").parents(); $(".test").parentUntil("stop");
E、$("div").siblings();
//siblings() 方法返回被选元素的所有同级元素。
33.4、使用jQuery操作元素(属性,css,文档处理):
(1)属性操作:
1)属性:
$(selector).attr(attribute); //获取第一个被选元素的属性值
$(selector).attr(attribute,value); //设置被选元素的属性和值
$(selector).removeAttr(attribute); //删除被选元素的属性
$(selector).prop(attribute); //获取第一个被选元素的属性值
$(selector).prop(attribute,value); //设置被选元素的属性和值
$(selector).removeProp(attribute); //删除被选元素的属性
$(selector).val(); //获取第一个被选元素的value属性值 ===> $(selector).attr("value");
$(selector).val(value); //设置被选元素的value属性值 ===> $(selector).attr("value",value);
2)CSS类:
$(selector).addClass(class); //添加被选元素的类属性
$(selector).removeClass(class); //移除被选元素的类属性
3)HTML代码/文本/值:
$(selector).html(); //获取第一个被选元素的内容
$(selector).html(content); //覆盖被选元素的内容
$(selector).text(); //获取第一个被选元素的文本内容
$(selector).text(content); //覆盖被选元素的内容为文本
4)css选择器:
$("p").css("background-color","red"); //所有 p 元素的背景颜色更改为红色。
5)示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" class="lc" value="1111"/>
<div class="lc1">
<a>www.wangyi.com</a>
<p>lc1-1</p>
</div>
<div class="lc2">
<a>www.wangyi.com</a>
<p>lc2-1</p>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
console.log($(".lc").attr("value"));
//获取属性值 1111
console.log($(".lc").attr("value","2222"));
//添加属性 <input type="button" class="lc" value="2222">
console.log($(".lc").val()); //===> console.log($(".lc").attr("value"));
//2222
console.log($(".lc1").html());
//获取标签中的所有内容
//<a>www.wangyi.com</a>
//<p>lc1</p>
console.log($(".lc1").html("<p>lc1-2</p>"));
//替换标签中的内容
//<div class="lc1">
// <p>lc1-2</p>
//</div>
console.log($(".lc2").text());
//获取标签中的所有文本
//www.wangyi.com
//lc2-1
console.log($(".lc2").text("<p>lc2-2</p>"));
//替换标签中的内容为文本
//<div class="lc2"><p>lc2-2</p></div>
</script>
</body>
</html>
(2)attr和prop注意点:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见
<script src="jquery-3.4.1.js" type="text/javascript"></script>
<script>
/*
对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,
这些也属于固有属性,因此需要使用prop方法去操作才能获得正确的结果。
$("#chk1").attr("checked")
undefined
$("#chk1").prop("checked")
false
//手动选中的时候attr()获得到没有意义的undefined
$("#chk1").attr("checked")
undefined
$("#chk1").prop("checked")
true
*/
console.log($("#chk1").prop("checked"));
//false
console.log($("#chk2").prop("checked"));
//true
console.log($("#chk1").attr("checked"));
//undefined
console.log($("#chk2").attr("checked"));
//checked
</script>
</body>
</html>
(3)实例之全反选:
1)代码:
<!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>
<table border="1">
<tr>
<td><input type="checkbox" name=""></td>
<td>111</td>
</tr>
<tr>
<td><input type="checkbox" name=""></td>
<td>222</td>
</tr>
</table>
<script src="jquery-3.4.1.js"></script>
<script>
function selectall(){
$("table :checkbox").prop("checked",true);
}
function cancel(){
$("table :checkbox").prop("checked",false);
}
function reverse(){
$("table :checkbox").each(function(){
$(this).prop("checked",!$(this).prop("checked"));
});
}
</script>
</body>
</html>
2)效果图:
(4)实例之模态对话框:
1)代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.back{
background-color: white;
height: 2000px;
}
.shade{
position: fixed;
top: 0;
bottom: 0;
left:0;
right: 0;
background-color: gray;
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: white;
}
</style>
</head>
<body>
<div class="back">
<input id="ID1" type="button" value="click" onclick="show(this)">
</div>
<div class="shade hide"></div>
<div class="models hide">
<input id="ID2" type="button" value="cancel" onclick="cancle(this)">
</div>
<script src="jquery-3.4.1.js"></script>
<script>
function show(self){
$(self).parent().siblings().removeClass("hide");
}
function cancle(self){
$(self).parent().addClass("hide").prev().addClass("hide")
}
</script>
</body>
</html>
2)效果图:
(5)文档处理:
1)用法:
A、创建一个标签对象:
$("<p>")
B、内部插入:
$(selector).append(content); //$("p").append("<b>Hello</b>");,在被选元素内部的结尾插入指定内容。
$(content).appendTo(selector); //$("<b>Hello</b>").appendTo("#foo");,和上面的写法相反。
$(selector).prepend(content); //$("p").prepend("<b>Hello</b>");,在被选元素内部的前面插入指定内容。
$(content).prependTo(selector); //$("<b>Hello</b>").prependTo("#foo");,和上面的写法相反。
C、外部插入:
$(selector).after(content); //$("p").after("<b>Hello</b>");,在被选元素同级的结尾插入指定内容。
$(content).insertAfter(selector); //$("<b>Hello</b>").insertAfter("#foo");,和上面的写法相反。
$(selector).before(content); //$("p").before("<b>Hello</b>");,在被选元素同级的前面插入指定内容。
$(content).insertBefore(selector); //$("<b>Hello</b>").insertBefore("p");,和上面的写法相反。
D、替换:
$(selector).replaceWith(content) //$("p").replaceWith("<b>Paragraph.</b>");,将被选元素内部替换为指定内容。
E、删除:
$(selector).empty(); //$("p").empty();,删除被选元素内的所有内容。
$(selector).remove(); //$("p").remove();,删除被选元素和被选元素内的所有所有内容。
F、复制:
$(selector).clone();
//clone() 方法生成被选元素的副本,包含子节点、文本和属性。
//true 规定需复制事件处理程序,false 默认,规定不复制事件处理程序。
2)实例之复制样式条:
A、代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="item">
<input type="button" value="+" onclick="add(this);">
<input type="text">
</div>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
function add(self){
//注意:var $clone_obj=$(".outer .item").clone(); 会一变二,二变四的增加
var $clone_obj=$(self).parent().clone();
$clone_obj.children(":button").val('-').attr("onclick","removed(this)");
$(self).parent().parent().append($clone_obj);
}
function removed(self){
$(self).parent().remove()
}
</script>
</body>
</html>
B、效果图:
(6)css操作:
1)用法:
A、CSS:
$(selector).css(propertyname); //返回第一个被选元素的 CSS 属性的值
$(selector).css(propertyname,value); //设置被选元素的 CSS 属性
B、位置:
$(selector).offset(); //返回第一个被选元素相对于文档的偏移坐标
$(selector).offset(value); //设置被选元素相对于文档的偏移坐标
$(selector).position(); //返回第一个被选元素的位置(相对于它的父元素)
$(selector).scrollTop(); //返回第一个被选元素的滚动条的垂直位置
$(selector).scrollTop(value); //设置被选元素的滚动条的垂直位置
$(selector).scrollLeft(); //返回第一个被选元素的滚动条的水平位置
$(selector).scrollLeft(value); //设置被选元素的滚动条的水平位置
C、尺寸:
$(selector).height(); //返回第一个被选元素的高度
$(selector).height(value); //设置被选元素的高度
$(selector).width(); //返回第一个被选元素的宽度
$(selector).width(value); //设置被选元素的宽度
$(selector).innerHeight();
//返回第一个被选元素的内部高度,该方法包含 padding,但不包含 border 和 margin。
/*
*/
$(selector).innerWidth();
//返回第一个被选元素的内部宽度,该方法包含 padding,但不包含 border 和 margin。
*/
*/
$(selector).outerHeight();
//返回第一个被选元素的外部高度,该方法包含 padding 和 border,如需包含 margin,请使用 outerHeight(true)。
/*
*/
$(selector).outerWidth([options]);
//返回第一个被选元素的外部宽度,该方法包含 padding 和 border,如需包含 margin,请使用 outerHeight(true)。
/*
*/
2)实例之返回顶部:
A、代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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;
}
.div2{
background-color: darkcyan;
}
.div3{
background-color: aqua;
}
.div{
height: 1000px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="div2 div"></div>
<div class="div3 div"></div>
<div class="returnTop hide" onclick="returnTop()">返回顶部</div>
<script src="jquery-3.4.1.js"></script>
<script>
window.onscroll=function(){
var current=$(window).scrollTop();
console.log(current);
if (current>800){
$(".returnTop").removeClass("hide")
}
else {
$(".returnTop").addClass("hide")
}
}
function returnTop(){
//$(".div1").scrollTop(0);
$(window).scrollTop(0)
}
</script>
</body>
</html>
B、效果图:
33.5、jQuery事件:
(1)用法:
1)页面载入:
ready(fn)
/*当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){}); ===> $(function(){});
*/
2)事件处理:
$(selector).on(eve,[selector],fn);
/*
在被选择元素上绑定一个或多个事件的事件处理函数。
.on的selector参数是筛选出调用.on方法的dom元素的指定子元素,如:
$('ul').on('click', 'li', function(){console.log('click');});,就是筛选出ul
下的li给其绑定click事件。
*/
3)[selector]参数的好处:
好处在于.on方法为动态添加的元素也能绑上指定事件,如:
$('ul li').on('click', function(){console.log('click');}); 的绑定方式和
$('ul li').bind('click', function(){console.log('click');}) 一样,通过js
给 ul 添加了一个 li,$('ul').append('<li>js new li<li>');,这个新加
的li是不会被绑上click事件的,但是用 $('ul').on('click', 'li', function(){console.log('click');}
方式绑定,然后动态添加 li,$('ul').append('<li>js new li<li>');,这
个新生成的 li 被绑上了click事件。
(2)实例之面板拖动:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="border: 1px solid #ddd;width: 600px;position: absolute;">
<div id="title" style="background-color: black;height: 40px;color: white;">
标题
</div>
<div style="height: 300px;">
内容
</div>
</div>
<script type="text/javascript" src="jquery-3.4.1.js"></script>
<script>
$(function(){
// 页面加载完成之后自动执行
$('#title').mouseover(function(){
$(this).css('cursor','move');
}).mousedown(function(e){
//console.log($(this).offset());
var _event = e || window.event;
// 原始鼠标横纵坐标位置
var ord_x = _event.clientX;
var ord_y = _event.clientY;
var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top;
$(this).bind('mousemove', function(e){
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY;
var x = parent_left + (new_x - ord_x);
var y = parent_top + (new_y - ord_y);
$(this).parent().css('left',x+'px');
$(this).parent().css('top',y+'px');
})
}).mouseup(function(){
$(this).unbind('mousemove');
});
})
</script>
</body>
</html>
(3)实例之放大镜:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bigger</title>
<style>
* {
margin: 0;
padding: 0;
}
.outer {
height: 350px;
width: 350px;
border: dashed 5px cornflowerblue;
}
.outer .small_box {
position: relative;
}
.outer .small_box .float {
height: 175px;
width: 175px;
background-color: darkgray;
opacity: 0.4;
fill-opacity: 0.4;
position: absolute;
display: none;
}
.outer .big_box {
height: 400px;
width: 400px;
overflow: hidden;
position: absolute;
left: 360px;
top: 0px;
z-index: 1;
border: 5px solid rebeccapurple;
display: none;
}
.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">
</div>
<div class="big_box">
<img src="big.jpg">
</div>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
$(function () {
$(".small_box").mouseover(function () {
$(".float").css("display", "block");
$(".big_box").css("display", "block")
});
$(".small_box").mouseout(function () {
$(".float").css("display", "none");
$(".big_box").css("display", "none")
});
$(".small_box").mousemove(function (e) {
var _event = e || window.event;
var float_width = $(".float").width();
var float_height = $(".float").height();
console.log(float_height, float_width);
var float_height_half = float_height / 2;
var float_width_half = float_width / 2;
console.log(float_height_half, float_width_half);
var small_box_width = $(".small_box").height();
var small_box_height = $(".small_box").width();
//鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理
var mouse_left = _event.clientX - float_width_half;
var mouse_top = _event.clientY - float_height_half;
if (mouse_left < 0) {
mouse_left = 0
} else if (mouse_left > small_box_width - float_width) {
mouse_left = small_box_width - float_width
}
if (mouse_top < 0) {
mouse_top = 0
} else if (mouse_top > small_box_height - float_height) {
mouse_top = small_box_height - float_height
}
$(".float").css("left", mouse_left + "px");
$(".float").css("top", mouse_top + "px")
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);
console.log(percentX, percentY)
$(".big_box img").css("left", -percentX * mouse_left + "px")
$(".big_box img").css("top", -percentY * mouse_top + "px")
})
})
</script>
</body>
</html>
33.6、jQuery动画效果:
(1)实例之显示隐藏:
1)代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">切换</button>
<script src="jquery-3.4.1.js"></script>
<script>
$("#hide").click(function () {
$("p").hide(1000);
});
$("#show").click(function () {
$("p").show(1000);
});
$("#toggle").click(function () {
$("p").toggle();
});
</script>
</body>
</html>
2)效果图:
(2)实例之滑动:
1)代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#content{
text-align: center;
background-color: lightblue;
border:solid 1px red;
display: none;
padding: 50px;
}
</style>
</head>
<body>
<input type="button" value="滑动出现" id="slideDown"/>
<input type="button" value="滑动隐藏" id="slideUp"/>
<input type="button" value="滑动切换" id="slideToggle"/>
<div id="content">helloworld</div>
<script src="jquery-3.4.1.js"></script>
<script>
$("#slideDown").click(function(){
$("#content").slideDown(1000);
});
$("#slideUp").click(function(){
$("#content").slideUp(1000);
});
$("#slideToggle").click(function(){
$("#content").slideToggle(1000);
})
</script>
</body>
</html>
2)效果图:
(3)实例之淡入淡出:
1)代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="in">淡入出现</button>
<button id="out">淡出隐藏</button>
<button id="toggle">淡入淡出切换</button>
<button id="fadeto">淡入出现自定义透明度</button>
<div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>
<script src="jquery-3.4.1.js"></script>
<script>
$("#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>
</body>
</html>
2)效果图:
(4)实例之回调函数:
1)代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>隐藏</button>
<p>hello world</p>
<script src="jquery-3.4.1.js"></script>
<script>
$("button").click(function(){
$("p").hide(1000,function(){
alert($(this).html());
//点击button按钮后,p标签隐藏完成后浏览器再弹出文本框。
});
});
</script>
</body>
</html>
2)效果图:
33.7、jQuery扩展方法(插件机制):
(1)使用jQuery写插件时,最核心的两个方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>1</p>
<p>2</p>
<script src="jquery-3.4.1.js"></script>
<script>
//$.extend(object);
//为JQuery 添加一个静态方法。
jQuery.extend({
min:function(a, b) { return a < b ? a : b; },
max:function(a, b) { return a > b ? a : b; }
});
console.log($.min(3,4));
//3
//$.fn.extend(object);
//为JQuery实例添加一个方法。
$.fn.extend({
"print":function(){
for (var i=0;i<$(this).length;i++){
console.log($(this)[i].innerHTML);
}
}
});
$("p").print();
//1 2
</script>
</body>
</html>
33.8、jquery循环的两种方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script src="jquery-3.4.1.js"></script>
<script>
//方式一
var $li=[10,20,30,40];
dic={name:"lc",sex:"male"};
$.each($li,function(i,x){
console.log(i,x)
});
/*
输出结果:
0 10
1 20
2 30
3 40
*/
//方式二
$("ul li").each(function(i,x){
console.log(i,x)
console.log($(this).html());
});
/*
输出结果:
0 <li>1</li>
1
1 <li>2</li>
2
2 <li>3</li>
3
*/
</script>
</body>
</html>
33.9、轮播图:
见附件:
33、jQuery介绍的更多相关文章
- jQuery介绍 DOM对象和jQuery对象的转换与区别
jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍 jQuery: http://jquery.com/ write less, do more. j ...
- 前端——jQuery介绍
目录 jQuery介绍 jQuery的优势 jQuery内容: jQuery版本 jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器: 表单筛选器: ...
- 前端-jQuery介绍
目录 jQuery介绍 jQuery的优势 jQuery内容: jQuery版本 jQuery对象 jQuery基础语法 查找标签 基本选择器 层级选择器: 基本筛选器: 属性选择器: 表单筛选器: ...
- Day047--JS BOM介绍, jQuery介绍和使用
内容回顾 DOM 文档对象模型(model) 一个模型就是一个对象(属性和方法 面向对象的三大特性:封装 继承 多态) 为了可扩展性 DOM操作 标签属性操作 获取值 getAttribute() 设 ...
- Python自动化 【第十七篇】:jQuery介绍
jQuery jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多),对javascript进行了封装,是的更加便捷的开发,并且在 ...
- jquery介绍
1.jQuery (1)jQuery简介 是一个js框架(.js文件),它的最大特点是,使用选择器( 借鉴了css选择器的语法)查找要操作的节点,并且将这些 节点封装成一个jQuery对象,通过调用j ...
- 2.jQuery介绍
. jQuery的认识 jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:具有高效灵活的css选择器,并且可对CSS选择器进行扩展:拥有便捷的插件扩展机制和丰富的插件. 和原 ...
- jQuery介绍 常用选择器
jquery现在三个版本, 1.x 2.x 3.x 都在用,越小的版本兼容性越好,ie8以下浏览器也支持,新功能不多.我们通常使用1.x 在html中,css放Head中,js放body尾部 j ...
- JQuery -- 介绍,选择器及其示例, 基本选择器,层次选择器,过滤选择器,表单选择器
1. 什么是jQuery对象 jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的 ...
随机推荐
- Docker——Registry搭建私有镜像仓库
前言 在 Docker 中,当我们执行 docker pull xxx 的时候,它实际上是从 registry.hub.docker.com 这个地址去查找,这就是Docker公司为我们提供的公共仓库 ...
- SystemVerilog 编写FSM
SystemVerilog 编写FSM 题目 SystemVerilog实现 仿真 SystemVerilog 编写FSM 好书: https://github.com/yllinux/blogPic ...
- xpath元素定位语法
举个栗子 -------------------------------------------------------------------------------------- <?xml ...
- 在虚拟机中安装 Ubuntu
https://www.cnblogs.com/huohu121/p/12250869.html 火狐python 博客园 首页 新随笔 联系 订阅 管理 随笔 - 54 文章 - 0 评论 - ...
- shell基础之99乘法表
方法一: 1 #!/bin/bash 2 for a in {1..9};do 3 for b in {1..9};do 4 c=`echo "$a*$b" |bc` 5 if [ ...
- Nginx/LVS/HAProxy对比分析
Nginx/LVS/HAProxy简单介绍: Nginx:专为性能优化而开发,性能是其最重要的考量,实现上非常注重效率 .它支持内核Poll模型,能经受高负载的考验,有报告表明能支持高达 50,000 ...
- [论文阅读笔记] LouvainNE Hierarchical Louvain Method for High Quality and Scalable Network Embedding
[论文阅读笔记] LouvainNE: Hierarchical Louvain Method for High Quality and Scalable Network Embedding 本文结构 ...
- python中的时间戳和格式化之间的转换
import time #把格式化时间转换成时间戳 def str_to_timestamp(str_time=None, format='%Y-%m-%d %H:%M:%S'): if str_ti ...
- Python+Selenium学习笔记5 - python官网的tutorial - 交互模式下的操作
这篇笔记主要是从Python官网的Tutorial上截取下来,再加上个人理解 1. 在交互模式下,下划线'_'还可以表示上一步的计算结果 2.引号转义问题. 从下图总结的规律是,字符串里的引号如果和引 ...
- Linux BSP非标准HDMI分辨率
Linux BSP非标准HDMI分辨率 Intrinsyc公司发布了它的一个新的Linux BSP软件的发布 打开-Q820 开发套件基于Linux内核版本.支持的软件功能包括HDMI输出,可以支持标 ...