一、定义
1. 什么是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还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
2. 什么是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()
二、选择器
1. 基本选择器
$("*") 选择所有元素
$("#id") id选择器
$(".class") class选择器
$("element") 标签选择器
$(".class,p,div") 组合选择器
2. 层级选择器
$(".outer div") 后代选择器
$(".outer>div") 子代选择器
$(".outer+div") 选择后一个兄弟元素
$(".outer~div") 选择后面的所有兄弟元素
3. 属性选择器
$("[name='aaa']")
$("[name='aaa'][id='div1']") 筛选多个属性
4. 表单选择器
$(":text") 注意只适用于input标签
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <p>hello</p> 9 <div id="div1" class="outer" name="aaa">outer 10 <div class="inner">inner 11 <p>p2</p> 12 </div> 13 <p>p1</p> 14 </div> 15 <div>div1</div> 16 <a href="">aaa</a> 17 <div>div2</div> 18 <input type="text" value="123456"/> 19 20 <script src="js/jquery-3.4.1.js"></script> 21 <script> 22 // //基本选择器 23 // $("*").css("color","red") 24 // $("#div1").css("color","aqua") 25 // $(".inner").css("color","beige") 26 // $("p").css("color","brown") 27 // $(".inner,p,div").css("color","black") 28 29 // //层级选择器 30 // $(".outer div").css("color","red") 31 // $(".outer>div").css("color","red") 32 // $(".outer+div").css("color","red") 33 // $(".outer~div").css("color","red") 34 35 //属性选择器 36 // $("[id='div1']").css("color","red") 37 // $("[name='aaa'][id='div1']").css("color","red") //筛选多个属性 38 39 //表单选择器 40 $(":text").css("color","red") 41 </script> 42 </body> 43 </html>
三、筛选器
1. 基本筛选器
$("li:first") $("li:last")
$("li:eq(2)")
$("li:even") $("li:odd")
$("li:gt(1)") $("li:lt(1)")
2. 过滤筛选器
$("li").eq(2)
$("li").first()
3. 查找筛选器
$("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()
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <p>hello</p> 9 <div id="div1" class="outer" name="aaa">outer 10 <div class="inner">inner 11 <p id="p2">p2</p> 12 </div> 13 <p>p1</p> 14 </div> 15 <div>div1</div> 16 <a href="">aaa</a> 17 <div>div2</div> 18 <p id="p1">pppp</p> 19 <ul> 20 <li id="li1">1111</li> 21 <li>2222</li> 22 <li>3333</li> 23 <li>4444</li> 24 <li>5555</li> 25 </ul> 26 27 28 <script src="js/jquery-3.4.1.js"></script> 29 <script type="text/javascript"> 30 // //基本筛选器 31 // $("li:first").css("color","red") //选择第一个li 32 // $("li:last").css("color","red") //选择最后一个li 33 // $("li:eq(2)").css("color","red") //选择第2个li，从0开始计数 34 // $("li:even").css("color","red") //选择偶数行的li，从0开始计数 35 // $("li:odd").css("color","red") //选择奇数行的li，从0开始计数 36 // $("li:gt(2)").css("color","red") //选择行数大于2的li，从0开始计数 37 // $("li:lt(2)").css("color","red") //选择行数小于2的li，从0开始计数 38 39 // //过滤筛选器 40 // $("li").eq(2).css("color","red") 41 // $("li").first().css("color","red") 42 43 // //查找筛选器 44 // $(".outer").children("p").css("color","red") //查找子代 45 // $(".outer").find("p").css("color","red") //查找后代 46 47 // $(".outer").next().css("color","red") //查找后一个兄弟标签 48 // $(".outer").nextAll().css("color","red") //查找后面所有兄弟标签 49 // $(".outer").nextUntil("#p1").css("color","red") //查找后面所有兄弟标签，直到p1(不包含p1) 50 51 // $("li").eq(2).prev().css("color","red") //查找前一个兄弟标签 52 // $("li").eq(2).prevAll().css("color","red") //查找前面所有兄弟标签 53 // $("li").eq(2).prevUntil("#li1").css("color","red") //查找前面所有兄弟标签，直到li1(不包含li1) 54 55 // $("#p2").parent().css("color","red") //查找父代 56 // $("#p2").parents().css("color","red") //查找所有祖先 57 // $("#p2").parentsUntil(".outer").css("color","red") //查找所有祖先，直到".outer"，(不包含".outer") 58 59 // $(".outer").siblings().css("color","red") //查找所有兄弟标签 60 </script> 61 </body> 62 </html>
四、操作元素
1. 属性操作
--------------------------属性
$("").attr(); $("").attr("class") 显示class属性的值 $("").attr("class","a") 修改class属性
$("").removeAttr();
$("").prop();
$("").removeProp();
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("").css("color","red")
<input id="chk1" type="checkbox" />是否可见
<input id="chk2" type="checkbox" checked="checked" />是否可见
<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>
attr和prop
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <button onclick="selectall()">全选</button> 9 <button onclick="reverse()">反选</button> 10 <button onclick="cancel()">取消</button> 11 <table> 12 <tr> 13 <td><input type="checkbox" /></td> 14 <td>111</td> 15 </tr> 16 <tr> 17 <td><input type="checkbox" /></td> 18 <td>222</td> 19 </tr> 20 <tr> 21 <td><input type="checkbox" /></td> 22 <td>333</td> 23 </tr> 24 </table> 25 26 <script src="js/jquery-3.4.1.js"></script> 27 <script> 28 function selectall(){ 29 $(":checkbox").each(function(){ 30 $(this).prop("checked",true); 31 }) 32 } 33 function cancel(){ 34 $(":checkbox").each(function(){ 35 $(this).prop("checked",false); 36 }) 37 } 38 function reverse(){ 39 $(":checkbox").each(function(){ 40 if($(this).prop("checked")){ 41 $(this).prop("checked",false); 42 } 43 else{ 44 $(this).prop("checked",true); 45 } 46 }) 47 } 48 </script> 49 </body> 50 </html>
jquery循环的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>1111</p>
<p>2222</p>
<p>3333</p>
<p>4444</p>
<script src="js/jquery-3.4.1.js"></script>
<script>
li=[11,22,33];
//方式一：
$.each(li,function(x,y){
console.log(x,y);//x为索引，y为值
})
//方式二：
$("p").each(function(){
console.log($(this).html())
})
</script>
</body>
</html>
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]])
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <a href="">click</a> 9 <div class="c1"> 10 <p>PPP</p> 11 </div> 12 <button>add</button> 13 14 <script src="js/jquery-3.4.1.js"></script> 15 <script type="text/javascript"> 16 $("button").click(function(){ 17 // $(".c1").append("<h1>hello</h1>") 18 var $ele=$("<h1>"); 19 $ele.html("hello"); 20 // //内部插入 21 // $(".c1").append($ele) 22 // $ele.appendTo(".c1") 23 // $(".c1").prepend($ele) 24 // $ele.prependTo(".c1") 25 26 // //外部插入 27 // $(".c1").after($ele) 28 // $ele.insertAfter(".c1") 29 // $(".c1").before($ele) 30 // $ele.insertBefore(".c1") 31 32 // //替换 33 // $(".c1").replaceWith($ele) 34 35 // //删除 36 // $(".c1").empty() //清空".c1"的内容 37 // $(".c1").remove() //删除".c1"标签 38 }) 39 </script> 40 </body> 41 </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="outer"> <div class="item"> <button onclick="add(this)">+</button> <input type="text" /> </div> </div> <script src="js/jquery-3.4.1.js"></script> <script> function add(self){ //var $clone_obj=$(.item).clone(); if($(self).html()=="+"){ var $clone_obj=$(self).parent().clone() $(".outer").append($clone_obj) $clone_obj.children("button").html("-") } else{ $(self).parent().remove() } } </script> </body> </html>
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])
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .div1,.div2{ 12 width: 200px; 13 height: 200px; 14 } 15 .div1{ 16 border: 3px solid red; 17 padding: 20px; 18 margin: 10px; 19 background-color: aqua; 20 } 21 .div2{ 22 background-color: cadetblue; 23 } 24 .outer{ 25 position: relative; 26 } 27 </style> 28 </head> 29 <body> 30 <div class="div1"></div> 31 <div class=outer> 32 <div class="div2"></div> 33 </div> 34 35 <script src="js/jquery-3.4.1.js"></script> 36 <script> 37 //offset() 相对于视口的偏移量 38 console.log($(".div1").offset().top) //0 39 console.log($(".div1").offset().left) //0 40 console.log($(".div2").offset().top) //264.79998779296875 41 console.log($(".div2").offset().left) //0 42 43 //position() 相对于已经定位的父标签的偏移量 44 console.log($(".div1").position().top) //0 45 console.log($(".div1").position().left) //0 46 console.log($(".div2").position().top) //0 47 console.log($(".div2").position().left) //0 48 49 //height() width() 获取标签的width、heigth；加入参数表示修改 50 console.log($(".div1").height()) //200 51 // $(".div1").width("500px") 52 //innerHeight() outerHeight() 53 console.log($(".div1").innerHeight()) //240 (包括padding) 54 console.log($(".div1").outerHeight()) //244.8 (包括border) 55 console.log($(".div1").outerHeight(true)) //264.8(包括magin) 56 </script> 57 </body> 58 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .div1,.div2{ 12 width: 200px; 13 height: 1000px; 14 } 15 .div1{ 16 border: 3px solid red; 17 padding: 20px; 18 margin: 10px; 19 background-color: aqua; 20 } 21 .div2{ 22 background-color: cadetblue; 23 } 24 .top{ 25 position: fixed; 26 right: 20px; 27 bottom: 20px; 28 width: 90px; 29 height: 50px; 30 background-color: antiquewhite; 31 text-align: center; 32 line-height: 50px; 33 } 34 .hide{ 35 display: none; 36 } 37 </style> 38 </head> 39 <body> 40 <div class="div1"></div> 41 <div class="div2"></div> 42 <div class="top hide">返回顶部</div> 43 </body> 44 <script src="js/jquery-3.4.1.js"></script> 45 <script> 46 window.onscroll=function(){ 47 // console.log($(window).scrollTop()); 48 if($(window).scrollTop()>50){ 49 $(".top").removeClass("hide") 50 } 51 else{ 52 $(".top").addClass("hide") 53 } 54 } 55 $(".top").click(function(){ 56 $(window).scrollTop("0") 57 }) 58 </script> 59 </html>
五、事件
1. 事件绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<button>click</button>
<script src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
// //方式一
// $("ul li").click(function(){ //jquery会自动遍历取得的所有标签
// (123)
// })
//
// //方式二
// $("ul li").bind("click",function(){
// alert(123)
// })
// //解除绑定
// $("ul li").unbind("click")
//
//方式三(事件委托)
$("ul").on("click","li",function(){
alert(123)
})
//用$('ul').on('click', 'li', function(){console.log('click');}方式绑定，
//然后动态添加li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件
$("button").click(function(){
var $ele=$("<li>")
var len=$("ul li").length
$ele.html((len+1)*111)
$("ul").append($ele)
})
</script>
</body>
</html>
[data]参数的调用:
function myHandler(event) {
alert(event.data.foo);
}
$("li").on("click", {foo: "bar"}, myHandler)
2. 页面载入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<button>click</button>
<script src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
// //页面载入
// //方式一
// $(document).ready(function(){
// $("ul li").html("hello")
// })
//方式二
$(function(){
$("ul li").html("hello")
})
</script>
</body>
</html>
六、动画效果
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-2.1.4.min.js"></script> 7 <script> 8 9 $(document).ready(function() { 10 $("#hide").click(function () { 11 $("p").hide(1000); 12 }); 13 $("#show").click(function () { 14 $("p").show(1000); 15 }); 16 17 //用于切换被选元素的 hide() 与 show() 方法。 18 $("#toggle").click(function () { 19 $("p").toggle(); 20 }); 21 }) 22 23 </script> 24 <link type="text/css" rel="stylesheet" href="style.css"> 25 </head> 26 <body> 27 28 29 <p>hello</p> 30 <button id="hide">隐藏</button> 31 <button id="show">显示</button> 32 <button id="toggle">切换</button> 33 34 </body> 35 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-2.1.4.min.js"></script> 7 <script> 8 $(document).ready(function(){ 9 $("#slideDown").click(function(){ 10 $("#content").slideDown(1000); 11 }); 12 $("#slideUp").click(function(){ 13 $("#content").slideUp(1000); 14 }); 15 $("#slideToggle").click(function(){ 16 $("#content").slideToggle(1000); 17 }) 18 }); 19 </script> 20 <style> 21 22 #content{ 23 text-align: center; 24 background-color: lightblue; 25 border:solid 1px red; 26 display: none; 27 padding: 50px; 28 } 29 </style> 30 </head> 31 <body> 32 33 <div id="slideDown">出现</div> 34 <div id="slideUp">隐藏</div> 35 <div id="slideToggle">toggle</div> 36 37 <div id="content">helloworld</div> 38 39 </body> 40 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-2.1.4.min.js"></script> 7 <script> 8 $(document).ready(function(){ 9 $("#in").click(function(){ 10 $("#id1").fadeIn(1000); 11 12 13 }); 14 $("#out").click(function(){ 15 $("#id1").fadeOut(1000); 16 17 }); 18 $("#toggle").click(function(){ 19 $("#id1").fadeToggle(1000); 20 21 22 }); 23 $("#fadeto").click(function(){ 24 $("#id1").fadeTo(1000,0.4); 25 26 }); 27 }); 28 29 30 31 </script> 32 33 </head> 34 <body> 35 <button id="in">fadein</button> 36 <button id="out">fadeout</button> 37 <button id="toggle">fadetoggle</button> 38 <button id="fadeto">fadeto</button> 39 40 <div id="id1" style="display:none; 80px;height: 80px;background-color: blueviolet"></div> 41 42 </body> 43 </html>
七、扩展与插件
1. 编写JQuery插件
<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>
2. 定义作用域
定义一个JQuery插件，首先要把这个插件的代码放在一个不受外界干扰的地方。如果用专业些的话来说就是要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。
(function(a,b){return a+b})(3,5)
(function ($) { })(jQuery);
//相当于
var fn = function ($) { };
fn(jQuery);
3. 默认参数
定义了jQuery插件之后，如果希望某些参数具有默认值，那么可以以这种方式来指定。
/step01 定义JQuery的作用域
(function ($) {
//step03-a 插件的默认值属性
var defaults = {
prevId: 'prevBtn',
prevText: 'Previous',
nextId: 'nextBtn',
nextText: 'Next'
//……
};
//step06-a 在插件里定义方法
var showLink = function (obj) {
$(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
}
//step02 插件的扩展方法名称
$.fn.easySlider = function (options) {
//step03-b 合并用户自定义属性，默认属性
var options = $.extend(defaults, options);
//step4 支持JQuery选择器
//step5 支持链式调用
return this.each(function () {
//step06-b 在插件里定义方法
showLink(this);
});
}
})(jQuery);