笔记-JavaWeb学习之旅17
1.过滤选择器
首元素选择器：first 获得选择的元素中的第一个元素
尾元素选择器：last获得选择元素中的最后一个元素
非元素选择器：not(selector) 不包括指定内容的元素
偶数选择器：even偶数，从0开始计数
奇数选择器：odd奇数，从0开始计数
等于索引选择器：eq(index)指定索引元素
大于索引选择器：gt(index) 大于指定索引元素
小于索引选择器：lt(index)小于指定索引元素
标题选择器：header 获得标题(h1-h6)元素，固定写法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>基本过滤选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="js/jquery-3.3.1.min.js"></script>
<style type="text/css">
div,span{
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div .mini01{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
</style>
<script type="text/javascript">
$(function () {
// <input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/>
$("#b1").click(function(){
$("div:first").css("backgroundColor","red");
});
// <input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/>
$("#b2").click(function(){
$("div:last").css("backgroundColor","red");
});
// <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/>
$("#b3").click(function(){
$("div:not(.one)").css("backgroundColor","red");
});
// <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/>
$("#b4").click(function(){
$("div:even").css("backgroundColor","red");
});
// <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/>
$("#b5").click(function(){
$("div:odd").css("backgroundColor","red");
});
// <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/>
$("#b6").click(function(){
$("div:gt(3)").css("backgroundColor","red");
});
// <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/>
$("#b7").click(function(){
$("div:eq(3)").css("backgroundColor","red");
});
// <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/>
$("#b8").click(function(){
$("div:lt(3)").css("backgroundColor","red");
});
// <input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/>
$("#b9").click(function(){
$(":header").css("backgroundColor","red");
});
});
</script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 改变第一个 div 元素的背景色为 红色" id="b1"/>
<input type="button" value=" 改变最后一个 div 元素的背景色为 红色" id="b2"/>
<input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色" id="b3"/>
<input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色" id="b4"/>
<input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色" id="b5"/>
<input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色" id="b6"/>
<input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色" id="b7"/>
<input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色" id="b8"/>
<input type="button" value=" 改变所有的标题元素的背景色为 红色" id="b9"/>
<h1>有一种奇迹叫坚持</h1>
<h2>自信源于努力</h2>
<div id="one">
id为one
</div>
<div id="two" class="mini" >
id为two class是 mini
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
<div class="mini" >class是xinlaid mini</div>
</div>
</body>
</html>
表单过滤选择器
可用元素选择器：enabled 获得可用元素
不可用元素选择器：disabled 获得不可用元素
选中选择器 checked 获得单选/复选框选中的元素
选中选择器：selected 获得下拉框选中的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>表单属性过滤选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="js/jquery-3.3.1.min.js"></script>
<style type="text/css">
div,span{
width: 180px;
height: 180px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div .mini01{
width: 50px;
height: 50px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
#job{
margin: 20px;
}
#edu{
margin-top:-70px;
}
</style>
<script type="text/javascript">
$(function () {
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
$("#b1").click(function(){
//获取所有的表单，并且是纯文本框可用的，改变他们的值
$("input[type='text']:enabled").val("aaa");
})
// <input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
$("#b2").click(function(){
$("input[type='text']:disabled").val("aaa");
})
// <input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3"/>
$("#b3").click(function(){
//获取所有复选框，checked表示选中的个数
alert($("input[type='checkbox']:checked").length);
})
// <input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4"/>
$("#b4").click(function(){
//通过id获取器获得下拉框元素
alert($("#job > option:selected").length);
});
});
</script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
<input type="button" value=" 利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
<input type="button" value=" 利用 jQuery 对象的 length 属性获取复选框选中的个数" id="b3"/>
<input type="button" value=" 利用 jQuery 对象的 length 属性获取下拉框选中的个数" id="b4"/>
<br><br>
<input type="text" value="不可用值1" disabled="disabled">
<input type="text" value="可用值1" >
<input type="text" value="不可用值2" disabled="disabled">
<input type="text" value="可用值2" >
<br><br>
<input type="checkbox" name="items" value="美容" >美容
<input type="checkbox" name="items" value="IT" >IT
<input type="checkbox" name="items" value="金融" >金融
<input type="checkbox" name="items" value="管理" >管理
<br><br>
<input type="radio" name="sex" value="男" >男
<input type="radio" name="sex" value="女" >女
<br><br>
<select name="job" id="job" multiple="multiple" size=4>
<option>程序员</option>
<option>中级程序员</option>
<option>高级程序员</option>
<option>系统分析师</option>
</select>
<select name="edu" id="edu">
<option>本科</option>
<option>博士</option>
<option>硕士</option>
<option>大专</option>
</select>
<br/>
<div id="two" class="mini" >
id为two class是 mini div
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div>
</body>
</html>
DOM操作
(需要分清楚是对标签体的内容还是对标签体的属性进行操作)
内容操作
html():获取/设置元素的标签体内容
text()：获取/设置元素的标签体纯文本内容
val()：获取/设置元素的value属性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
// 获取myinput的value值
// 通过id选择器获取元素对象
var value = $("#myinput").val();
alert(value);
// 获取mydiv的标签体内容,使用html方法
alert($("#mydiv").html());
// 获取mydiv文本内容
alert($("#mydiv").text());
});
</script>
</head>
<body>
<input id="myinput" type="text" name="username" value="张三" /><br />
<div id="mydiv"><p><a href="#">标题标签</a></p></div>
</body>
</html>
属性操作
1.通用属性操作
- attr(): 获取/设置元素的属性
- removeAttr():删除属性
- prop():获取/设置元素的属性
- removeProp():删除属性
attr和prop的区别
如果操作的是元素的固有属性，则建议使用Prop
如果操作的是元素自定义的属性，则建议使用attr
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>获取属性</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="js/jquery-3.3.1.min.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div.mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<script type="text/javascript">
$(function () {
//获取北京节点的name属性值
//name是标签体的属性，li标签中没有name属性，所以是自定义的属性，建议使用attr
//获取标签元素，使用方法attr获取属性值
var value = $("#bj").attr("name");
alert(value);
//设置北京节点的name属性的值为dabeijing
var value1 = $("#bj").attr("name","dabeijing");
//新增北京节点的discription属性 属性值是didu
var value2 = $("#bj").attr("discription","didu");
//删除北京节点的name属性并检验name属性是否存在
$("#bj").removeAttr("name")
//获得hobby的的选中状态,checked是固有属性，建议使用prop
var checked = $("#hobby").prop("checked");
alert(checked);
});
</script>
</head>
<body>
<ul>
<li id="bj" name="beijing" xxx="yyy">北京</li>
<li id="tj" name="tianjin">天津</li>
</ul>
<input type="checkbox" id="hobby"/>
</body>
</html>
2.对class属性的操作
1.addClass():添加class属性值
2.removeClass():删除class属性值
3.toggleClass():切换class属性(如果存在该属性值就删除掉，不存在该属性值就添加)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>样式操作</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="js/jquery-3.3.1.min.js"></script>
<style type="text/css">
.one{
width: 200px;
height: 140px;
margin: 20px;
background: red;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
width: 40px;
height: 40px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div .mini01{
width: 40px;
height: 40px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
/*待用的样式*/
.second{
width: 300px;
height: 340px;
margin: 20px;
background: yellow;
border: pink 3px dotted;
float:left;
font-size: 22px;
font-family:Roman;
}
</style>
<script type="text/javascript">
$(function () {
// <input type="button" value="采用属性增加样式(改变id=one的样式)" id="b1"/>
//使用attr获取/设置属性的值
$("#b1").click(function () {
$("#one").attr("class","second");
})
// <input type="button" value=" addClass" id="b2"/>
$("#b2").click(function () {
$("#one").addClass("second");
})
// <input type="button" value="removeClass" id="b3"/>
$("#b3").click(function () {
$("#one").removeClass("second");
})
// <input type="button" value=" 切换样式" id="b4"/>
$("#b4").click(function () {
$("#one").toggleClass("second");
})
// <input type="button" value=" 通过css()获得id为one背景颜色" id="b5"/>
$("#b5").click(function () {
alert($("#one").css("backgroundColor"))
})
// <input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="b6"/>
$("#b6").click(function () {
$("#one").css("backgroundColor","green")
})
});
</script>
</head>
<body>
<input type="button" value="保存" class="mini" name="ok" class="mini" />
<input type="button" value="采用属性增加样式(改变id=one的样式)" id="b1"/>
<input type="button" value=" addClass" id="b2"/>
<input type="button" value="removeClass" id="b3"/>
<input type="button" value=" 切换样式" id="b4"/>
<input type="button" value=" 通过css()获得id为one背景颜色" id="b5"/>
<input type="button" value=" 通过css()设置id为one背景颜色为绿色" id="b6"/>
<h1>有一种奇迹叫坚持</h1>
<h2>自信源于努力</h2>
<div id="one" class="one">
id为one
</div>
<div id="two" class="mini" >
id为two class是 mini
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini" >class是 mini</div>
<div class="mini" >class是 mini</div>
</div>
<div class="one" >
class是 one
<div class="mini01" >class是 mini01</div>
<div class="mini" >class是 mini</div>
</div>
<span class="spanone"> span
</span>
</body>
</html>
CRUD操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>内部插入脚本</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="js/jquery-3.3.1.min.js"></script>
<style type="text/css">
div,span{
width: 140px;
height: 140px;
margin: 20px;
background: #9999CC;
border: #000 1px solid;
float:left;
font-size: 17px;
font-family:Roman;
}
div .mini{
width: 30px;
height: 30px;
background: #CC66FF;
border: #000 1px solid;
font-size: 12px;
font-family:Roman;
}
div.visible{
display:none;
}
</style>
<script type="text/javascript">
$(function () {
// <input type="button" value="将反恐放置到city的后面" id="b1"/>
$("#b1").click(function () {
$("#city").append($("#fk"));
})
// <input type="button" value="将反恐放置到city的最前面" id="b2"/>
$("#b2").click(function () {
$("#city").prepend($("#fk"));
})
// <input type="button" value="将反恐插入到天津后面" id="b3"/>
$("#b3").click(function () {
$("#tj").after($("#fk"));
})
// <input type="button" value="将反恐插入到天津前面" id="b4"/>
$("#b4").click(function () {
$("#tj").before($("#fk"));
})
});
</script>
</head>
<body>
<input type="button" value="将反恐放置到city的后面" id="b1"/>
<input type="button" value="将反恐放置到city的最前面" id="b2"/>
<input type="button" value="将反恐插入到天津后面" id="b3"/>
<input type="button" value="将反恐插入到天津前面" id="b4"/>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<ul id="love">
<li id="fk" name="fankong">反恐</li>
<li id="xj" name="xingji">星际</li>
</ul>
<div id="foo1">Hello1</div>
</body>
</html>
JQuery高级
动画
三种方式显示和隐藏元素
1.默认显示和隐藏方式
- show([speed],[easing],[fn])
- hide([speed],[easing],[fn])
- toggle([speed],[easing],[fn])
speed:动画的速度，三个预定义的值("slow","normal","fast")或表示动画时长的毫秒数值
easing:用来指定切换效果，默认是"swing",可用参数"linear"
fn:在动画完成是执行的函数，每个函数执行一次
2.滑动显示和隐藏方式
1.slideDown([speed],[easing],[fn])
2.slideUp([speed],[easing],[fn])
3.slideToggle([speed],[easing],[fn])
3.淡入淡出显示和隐藏方式
fadeIn([speed],[easing],[fn])
fadeOut([speed],[easing],[fn])
fadeToggle([speed],[easing],[fn])
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
//隐藏div
function hideFn(){
//默认方式
//$("#showDiv").hide("slow","swing")
//滑动方式
//$("#showDiv").slideUp("slow","swing")
//淡入淡出方式
$("#showDiv").fadeOut("8000","swing")
}
//点击按钮显示div
function showFn(){
//默认方式
//$("#showDiv").show("slow","linear");
//滑动方式
//$("#showDiv").slideDown("slow","linear");
//淡入淡出方式
$("#showDiv").fadeIn("5000","linear");
}
//点击按钮切换div显示和隐藏
function toggleFn(){
//默认方式
//$("#showDiv").toggle("slow","swing");
//滑动方式
//$("#showDiv").slideToggle("slow","swing");
//淡入淡出方式
$("#showDiv").fadeToggle("5000","swing");
}
</script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">
<div id="showDiv" style="width:300px;height:300px;background:pink">
div显示和隐藏
</div>
</body>
</html>
遍历
js遍历方式 for(初始化值;循环结束条件；步长)
jq遍历方式
1.jq对象.each(callback)
2.$.each(object,[callback])
3.for...of;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
//获取遍历对象
var citys = $("#city li");
//第一种方式，不能获得索引
citys.each(function (index,element) {
// alert(this.innerHTML)
// });
//第二种方式，可以获得索引，在回调函数中定义参数
if("上海"==$(element).html()){
return false;//false相当于java的break,true相当于continue
}
alert(index+":"+$(element).html());//把获得的js对象强制转换jq对象
});
});
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>上海</li>
<li>天津</li>
<li>重庆</li>
</ul>
</body>
</html>
事件绑定
1.jquery标准的绑定方式：jq对象.事件方法(回调函数)
2.on绑定事件/off解除绑定
jq对象.on("事件名称"，回调函数)
jq对象.off("事件名称")
3.事件切换：toggle
jq对象.toggle(fn1,fn2....)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
//绑定单机事件
$("#btn").on("click",function () {
alert("我被点击了")
})
//解除单机事件
$("#btn2").click(function () {
$("#btn").off("click");//若不传递click参数，则将btn上的所有绑定事件解绑
})
});
</script>
</head>
<body>
<input id="btn" type="button" value="使用on绑定点击事件">
<input id="btn2" type="button" value="使用off解绑点击事件">
</body>
</html>
案例1
当页面加载完，3秒后，自动显示广告
广告显示5秒后，自动消失
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>广告的自动显示与隐藏</title>
<style>
#content{width:100%;height:500px;background:#999}
</style>
<!--引入jquery-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
setTimeout(adShow,3000);
setTimeout(adHide,8000);
})
function adShow() {
$("#ad").fadeIn("slow","swing")
}
function adHide() {
$("#ad").fadeOut("slow","swing")
}
</script>
</head>
<body>
<!-- 整体的DIV -->
<div>
<!-- 广告DIV -->
<div id="ad" style="display: none;">
<img style="width:100%" src="adv.jpg" />
</div>
<!-- 下方正文部分 -->
<div id="content">
正文部分
</div>
</div>
</body>
</html>
案例2--抽奖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery案例之抽奖</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script language='javascript' type='text/javascript'>
var imgs = [
"man00.jpg",
"man01.jpg",
"man02.jpg",
"man03.jpg",
"man04.jpg",
"man05.jpg",
"man06.jpg",
];
var satrtId;
var index;
$(function () {
//点击开始按钮，需要循环加载图片
$("#startID").click(function () {
$("#startID").prop("disabled",false);//设置按钮可用
$("#stopID").prop("disabled",true);//设置按钮不可用
//使用定时器，循环加载图片
satrtId= setInterval(function () {
$("#startID").prop("disabled",true);
$("#stopID").prop("disabled",false);
//随机获得数字
index = Math.floor(Math.random()*7);
$("#img1ID").prop("src",imgs[index]);//获得随机图片
},20);
})
//点击停止按钮，加载大方框图片
$("#stopID").click(function () {
$("#startID").prop("disabled",false);
$("#stopID").prop("disabled",true);
//结束定时器
clearInterval(satrtId)
var img = $("#img2ID").prop("src",imgs[index]).hide();
img.show(1000);
})
})
</script>
</head>
<body>
<!-- 小像框 -->
<div style="border-style:dotted;width:160px;height:100px">
<img id="img1ID" src="man00.jpg" style="width:160px;height:100px"/>
</div>
<!-- 大像框 -->
<div
style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">
<img id="img2ID" src="man00.jpg" width="800px" height="500px"/>
</div>
<!-- 开始按钮 -->
<input
id="startID"
type="button"
value="点击开始"
style="width:150px;height:150px;font-size:22px">
<!-- 停止按钮 -->
<input
id="stopID"
type="button"
value="点击停止"
style="width:150px;height:150px;font-size:22px">
</body>
</html>
插件机制
实现方式：
1.$.fn.extend(object),增强通过jquery获取对象的功能 $("#id")
(使用对象调用方法)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-jQuery对象进行方法扩展</title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//使用jquery插件 给jq对象添加2个方法 check()选中所有复选框，uncheck()取消选中所有复选框
//1.定义jqeury的对象插件
$.fn.extend({
//该方法所有的jq对象都可以调用
check:function () {
this.prop("checked",true);
},
uncheck:function () {
this.prop("checked",false);
}
});
$(function () {
$("#btn-check").click(function () {
$("input[type='checkbox']").check();//获取所有的复选框对象
})
})
$(function () {
$("#btn-uncheck").click(function () {
$("input[type='checkbox']").uncheck();//获取所有的复选框对象
})
})
</script>
</head>
<body>
<input id="btn-check" type="button" value="点击选中复选框" onclick="checkFn()">
<input id="btn-uncheck" type="button" value="点击取消复选框选中" onclick="uncheckFn()">
<br/>
<input type="checkbox" value="football">足球
<input type="checkbox" value="basketball">篮球
<input type="checkbox" value="volleyball">排球
</body>
</html>
2.$.extend(object),增强JQuery对象自身的功能，$/JQuery
（使用$来调用方法）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>01-jQuery对象进行方法扩展</title>
<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//对全局方法扩展2个方法，扩展min方法：求2个值的最小值；扩展max方法：求2个值最大值
$.extend({
max:function (a,b) {
return a>=b ? a:b;
},
min:function (a,b) {
return a<=b ? a:b;
}
})
//调用全局方法
var max = $.max(2,3);
alert(max);
var min = $.min(2,3);
alert(min);
</script>
</head>
<body>
</body>
</html>
