必备工具库：jQuery
2019-12-06 本文已影响0人
CodeMT
中文文档：http://jquery.cuishifeng.cn/
GitHub：https://github.com/jquery/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()
三、寻找元素
3.1、选择器
1）基本选择器
$("*") $("#id") $(".class") $("element") $(".class,p,div")
2）层级选择器
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
3）基本筛选器
$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
4）属性选择器
$('[id="div1"]') $('["name="aa"][id]')
5）表单选择器
$("[type='text']") -----> $(":text") //注意只适用于input标签 : $("input:checked")
示例：
<!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">pppp</p>
<p id="p2" alex="sb">pppp</p>
<div class="outer">
outer
<div class="inner">
inner
<p>inner p</p>
</div>
<p>alex</p>
</div>
<div class="outer2">Yuan</div>
<p>xialv</p>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>4444</li>
<li>4444</li>
<li>4444</li>
</ul>
<input type="text">
<input type="checkbox">
<input type="submit">
<script src="jquery-3.1.1.js"></script> //导入jquery
<script>
//基本选择器
// $("div").css("color","red") //div标签及包含其子标签
// $("*").css("color","red") //全部
// $("#p1").css("color","red") //id为p1
// $(".outer").css("color","red") //outer class
// $(".inner,p,div").css("color","red")
//层级选择器
// $(".outer p").css("color","red") //outer class下的p标签(后代选择器)
// $(".outer>p").css("color","red") //outer class下一级的p标签（子代选择器）
// $(".outer+p").css("color","red") //下面毗邻标签（紧挨着）
// $(".outer~p").css("color","red") //下面标签，不要求紧挨着
//基本筛选器
// $("li:first").css("color","red") //第一个，也有last
// $("li:eq(0)").css("color","red")
//$("li:gt(2)").css("color","red")
//$("li:lt(2)").css("color","red")
//属性选择器
// $("[alex='sb'][id='p1']").css("color","red")
//表单选择器
//$("[type='text']").css("width","200px")
//$(":text").css("width","400px")
</script>
</body>
</html>
3.2、筛选器
1）过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test")
2）查找筛选器
$("div").children(".test") //子代选择器
$("div").find(".test") //后代
//向下查找
$(".test").next()
$(".test").nextAll()
$(".test").nextUntil()
//向上查找
$("div").prev()
$("div").prevAll()
$("div").prevUntil()
//父辈
$(".test").parent()
$(".test").parents()
$(".test").parentUntil()
$("div").siblings()
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="">click</a>
<p id="p1" alex="sb">pppp</p>
<p id="p2" alex="sb">pppp</p>
<div class="outer">outer
<div class="inner">
inner
<p>inner p</p>
</div>
<p>alex</p>
</div>
<div class="outer2">Yuan</div>
<p>xialv</p>
<ul>
<li class="begin">1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>4444</li>
<li id="end">4444</li>
<li>4444</li>
</ul>
<input type="text">
<input type="checkbox">
<input type="submit">
<script src="jquery-3.1.1.js"></script>
<script>
//筛选器
//$("li").eq(2).css("color","red");
//$("li").first().css("color","red");
//$("li").last().css("color","red");
//查找筛选器
//$(".outer").children("p").css("color","red");
//$(".outer").find("p").css("color","red");
//$("li").eq(2).next().css("color","red");
//$("li").eq(2).nextAll().css("color","red");
//$("li").eq(2).nextUntil("#end").css("color","red");
//$("li").eq(4).prev().css("color","red");
//$("li").eq(4).prevAll().css("color","red");
//$("li").eq(4).prevUntil("li:eq(0)").css("color","red");
//console.log($(".outer .inner p").parent().html())
//$(".outer .inner p").parents().css("color","red");
//$(".outer .inner p").parentsUntil("body").css("color","red");
$(".outer").siblings().css("color","red")
</script>
</body>
</html>
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
height: 1000px;
width: 100%;
}
.menu{
float: left;
background-color: beige;
width: 30%;
height: 500px;
}
.content{
float: left;
background-color: rebeccapurple;
width: 70%;
height: 500px;
}
.title{
background-color: aquamarine;
line-height: 40px;
}
.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">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单二</div>
<div class="con hide">
<div>222</div>
<div>222</div>
<div>222</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">菜单三</div>
<div class="con hide">
<div>333</div>
<div>333</div>
<div>333</div>
</div>
</div>
</div>
<div class="content"></div>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
function show(self) {
$(self).next().removeClass("hide"); //自身菜单内容显示
$(self).parent().siblings().children(".con").addClass("hide"); //其他菜单内容隐藏
}
</script>
</body>
</html>
四、元素操作
4.1、属性操作
//属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();
//CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
//HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
$("").css("color","red")
注意：attr与prop区别
<input id="chk1" type="checkbox"/>是否可见
<input id="chk2" type="checkbox" checked="checked"/>是否可见
<script>
//对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
//对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此
//需要使用prop方法去操作才能获得正确的结果。
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>
示例：
<!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">是否可见
<input type="text" value="123">
<div value="456"></div>
<div id="id1">
uuuuu
<p>ppppp</p>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
// console.log($("div").hasClass("div1")); //true
// console.log($("div").attr("con")) //c1
// console.log($("div").attr("con","c2")) //设置属性
// console.log($(":checkbox:first").attr("checked")) //checked
// console.log($(":checkbox:last").attr("checked")) //undefined
// console.log($(":checkbox:first").prop("checked")) //true
// console.log($(":checkbox:last").prop("checked")) //false
// console.log($("div").prop("con")) //undefined
// console.log($("div").prop("class")) //div1
// console.log($("#id1").html()); //uuuuu <p>ppppp</p>
// console.log($("#id1").text()); //uuuuu ppppp
// console.log($("#id1").html("<h1>YUAN</h1>"))
// console.log($("#id1").text("<h1>YUAN</h1>"))
// console.log($("#id1").html());
// console.log($("#id1").text()); //<h1>YUAN</h1>
//固有属性
// console.log($(":text").val()); //123
// console.log($(":text").next().val()) //没有值
// $(":text").val("789");
// $("div").css({"color":"red","background-color":"green"})
</script>
</body>
</html>
jquery循环遍历：
<!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="jquery-3.1.1.js"></script>
<script>
arr=[11,22,33];
//使用遍历
// for (var i=0;i<arr.length;i++){
// $("p").eq(i).html(arr[i])
// }
// 使用jquery遍历方式一
// $.each(arr,function (x,y) { //x下标，y值
// console.log(x);
// console.log(y);
// });
//使用jquery遍历方式二（常用）
$("p").each(function() { //对所有p标签遍历
console.log($(this));
$(this).html("hello")
})
</script>
</body>
</html>
示例-全反选：
<!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="jquery-3.1.1.js"></script>
<script>
function selectall() {
$(":checkbox").each(function () {
$(this).prop("checked",true)
})
}
function cancel() {
$(":checkbox").each(function () {
$(this).prop("checked",false)
})
}
function reverse() {
$(":checkbox").each(function () {
//方式一
$(this).prop("checked",!$(this).prop("checked"));
//方式二
// if($(this).prop("checked")){
// $(this).prop("checked",false)
// }
//
// else {
// $(this).prop("checked",true)
// }
})
}
</script>
</body>
</html>
示例-模态对话框：
<!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="jquery-3.1.1.js"></script>
<script>
function action1(self){
$(self).parent().siblings().removeClass("hide");
}
function action2(self) {
//方式一
// $(self).parent().addClass("hide")
// $(self).parent().prev().addClass("hide")
//方式二
// $(self).parent().addClass("hide").prev().addClass("hide");
//方式三
$(self).parent().parent().children(".models,.shade").addClass("hide")
}
</script>
</body>
</html>
4.2、文档处理
//创建一个标签对象
$("<p>")
//内部插入
$("").append(content|fn) //----->$("p").append("<b>Hello</b>");
$("").appendTo(content) //----->$("p").appendTo("div");
$("").prepend(content|fn) //----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) //----->$("p").prependTo("#foo");
//外部插入
$("").after(content|fn) //----->$("p").after("<b>Hello</b>");
$("").before(content|fn) //----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) //----->$("p").insertAfter("#foo");
$("").insertBefore(content) //----->$("p").insertBefore("#foo");
//替换
$("").replaceWith(content|fn) //----->$("p").replaceWith("<b>Paragraph. </b>");
//删除
$("").empty() //清空标签内容
$("").remove([expr]) //将整个标签清除
//复制
$("").clone([Even[,deepEven]])
实例：
<!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="jquery-3.1.1.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);
//$ele.appendTo(".c1")
//$(".c1").prepend($ele);
//$ele.prependTo(".c1")
//外部插入
//$(".c1").after($ele)
//$ele.insertAfter(".c1")
//$(".c1").before($ele)
//$ele.insertBefore(".c1")
//替换
//$("p").replaceWith($ele)
//删除与清空
// $(".c1").empty() //清除本标签的内容，但标签自身还在
// $(".c1").remove() //标签整个清除
//clone
// var $ele2= $(".c1").clone();
// $(".c1").after($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="item">
<button onclick="add(this)">+</button>
<input type="text">
</div>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
function add(self) {
//var $clone_obj=$(".item").clone();
var $clone_obj=$(self).parent().clone();
$clone_obj.children("button").html("-").attr("onclick","remove_obj(this)");
$(".outer").append($clone_obj)
}
function remove_obj(self) {
$(self).parent().remove()
}
</script>
</body>
</html>
4.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{
width: 200px;
height: 100px;
}
.div1{
border: 5px solid rebeccapurple;
padding: 20px;
margin: 2px;
background-color: antiquewhite;
}
.div2{
background-color: rebeccapurple;
}
/*.outer{*/
/*position: relative;*/
/*}*/
</style>
</head>
<body>
<div class="div1"></div>
<div class="outer">
<div class="div2"></div>
</div>
<script src="jquery-3.1.1.js"></script>
<script>
// offset()相对于视口的偏移量
// console.log($(".div1").offset().top);
// console.log($(".div1").offset().left);
//
// console.log($(".div2").offset().top);
// console.log($(".div2").offset().left);
//position()：相对于已经定位的父标签的偏移量
// console.log($(".div1").position().top);
// console.log($(".div1").position().left);
// console.log($(".div2").position().top);
// console.log($(".div2").position().left);
// console.log($(".div1").height("300px"));
// console.log($(".div1").innerHeight());
// console.log($(".div1").outerHeight());
// console.log($(".div1").outerHeight(true));
</script>
</body>
</html>
实例-返回顶部：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.div2{
width: 100%;
height: 800px;
}
.div1{
width: 40%;
height: 150px;
background-color: antiquewhite;
overflow: auto;
}
.div2{
background-color: rebeccapurple;
}
.returnTop{
position: fixed;
right: 20px;
bottom: 20px;
width: 90px;
height: 50px;
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>
</div>
<div class="div2">
<button onclick="returnTop()">return</button>
</div>
<div class="returnTop hide" onclick="returnTop()">返回顶部</div>
<script src="jquery-3.1.1.js"></script>
<script>
window.onscroll=function () { //监控窗口滚轮状态
// console.log($(window).scrollTop());
if($(window).scrollTop()>300){
$(".returnTop").removeClass("hide")
}else {
$(".returnTop").addClass("hide")
}
};
function returnTop() {
$(window).scrollTop(0)
}
$(".div2 button").click(function () {
$(".div1").scrollTop(0)
})
</script>
</body>
</html>
五、事件
//页面载入
ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){}) -----------> $(function(){})
//事件处理
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
// .on的selector参数是筛选出调用.on方法的dom元素的指定子元素，如：
// $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定
// click事件；
//[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事件
[data]参数的调用:
function myHandler(event) {
alert(event.data.foo);
}
$("li").on("click", {foo: "bar"}, myHandler)
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
<button>add</button>
<script src="jquery-3.1.1.js"></script>
<script>
// 事件准备加载方式一
// $(document).ready(function () {
// $("ul li").html(5);
// });
// 事件准备加载方式二
// $(function () {
// $("ul li").html(5);
// });
//事件绑定简单形式
var eles=document.getElementsByTagName("li")
eles.onclick=function () {
alert(123)
}
$("ul li").click(function () { //绑定事件一
alert(6666)
});
// $("ul li").bind("click",function () { //绑定事件二
// alert(777)
// });
// $("ul li").unbind("click") //事件绑定解除
// 事件委托
$('ul').on("click","li",function () {
alert(999);
});
$("button").click(function () {
var $ele=$("<li>");
var len=$("ul li").length;
$ele.html((len+1)*1111);
$("ul").append($ele)
});
</script>
</body>
</html>
实例-面板拖动：
<!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.1.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>
六、动画效果
6.1、显示隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.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>
6.2、滑动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.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>
<div id="slideDown">出现</div>
<div id="slideUp">隐藏</div>
<div id="slideToggle">toggle</div>
<div id="content">helloworld</div>
</body>
</html>
6.3、淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.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>
6.4、回调函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<button>hide</button>
<p>helloworld helloworld helloworld</p>
<script>
$("button").click(function(){
$("p").hide(1000,function(){
alert($(this).html())
})
})
</script>
</body>
</html>
七、拓展方法(插件机制)
7.1、定义拓展方法
<script>
$.extend(object) //为JQuery 添加一个静态方法。
$.fn.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));
//-----------------------------------------------------------------------
$.fn.extend({
"print":function(){
for (var i=0;i<this.length;i++){
console.log($(this)[i].innerHTML)
}
}
});
$("p").print();
</script>
//-----------------------------------------------------------------------
$.fn.extend({
GetText:function () {
for(var i=0;i<this.length;i++){
console.log(this[i].innerHTML)
}
$.each($(this),function (x,y) {
//console.log(y.innerHTML)
//console.log($(y).html())
})
}
});
$("p").GetText()
