jQuery基础学习
一、简介
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“Write Less, Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对css选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
二、jQuery是什么？
·jQuery是由美国人John Resig创建，至今已吸引了来自世界各地的众多JavaScript高手加入其中。
·jQuery是继prototype之后又一个优秀的JavaScript框架。其宗旨是——Write Less, Do More!
·jQuery是轻量级的js库，这是其它的js库所不及的，它兼容css3，还兼容各种浏览器。
·jQuery是一个快速的，简洁的JavaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
·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()
四、寻找元素（选择器和筛选器）
4.1 选择器
4.1.1 基本选择器
|
$("*") |
$("#id") |
$(".class") |
$(".class, p, div") |
4.1.2 层级选择器
|
$(".outer div") |
$(".outer>div") |
$(".outer+div") |
$(".outer~div") |
4.1.3 基本筛选器
|
$("li:first") |
$("li:eq(2) ") |
$("li:even") |
$("li:gt(1) ") |
4.1.4 属性选择器
$('[id="div1"]')
|
$('[name="mayi"]') |
4.1.5 表单选择器
|
$("[type='text']") ----->$(":text") 注意：只适用于input标签：$("input:checked") |
4.1.6 表单属性选择器
|
:enabled :disabled :checked :selected |
例子：
<body>
<form>
<label>123<input type="checkbox" value="123" checked /></label>
<label>456<input type="checkbox" value="456" checked /></label>
<label>植物
<select>
<option value="1">Flowers</option>
<option value="2">Garends</option>
<option value="3">Trees</option>
</select>
</label>
</form>
<script src="jquery-3.4.1.js"></script>
<script>
// console.log($("input:checked").length); //2
$("input:checked").each(function(){
console.log($(this).val())
})
</script>
</body>
4.2 筛选器
4.2.1 过滤筛选器
|
$("li").eq(2) |
$("li").first() |
$("ul li").hasclass("test") |
4.2.2 查找筛选器
|
查找子标签 |
$("div").children(".test"); $("div").find(".test"); |
|
向下查找兄弟标签 |
$(".test").next(); $(".test").nextAll(); $(".test").nextUntil(); |
|
向上查找兄弟标签 |
$("div").prev(); $("div").prevAll(); $("div").prevUntil() |
|
查找所有兄弟标签 |
$("div").siblings() |
|
查找父标签 |
$(".test").parent(); $(".test").parents(); $(".test").parentUntil(); |
五、操作元素（属性、css、文档处理）
5.1 事件
页面载入
ready(fn); //当DOM载入就绪可以查询及操作时绑定一个要执行的函数。
$(document).ready(function(){}); //-----> $(function(){})
事件绑定
//语法：标签对象.事件（函数） $("p").click(function(){});
事件委派
//在选择元素上绑定一个或多个事件的事件处理函数。 $("").on(eve, [selector], [data], fn);
例子：
<body>
<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.4.1.js"></script>
<script>
$("ul li").click(function(){
alert(123);
});
$("#add_li").click(function(){
var $ele = $("<li>");
$ele.text(Math.round(Math.random() * 10));
$("ul").append($ele);
});
// $("ul").on("click", "li", function(){
// alert(456);
// });
$("#off").click(function(){
$("ul li").off();
});
</script>
</body>
事件切换
hover事件：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
over事件：鼠标移到元素上要触发的函数。
out事件：鼠标移出元素要触发的函数。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test03</title> <style> * { margin: 0; padding: 0; } .test { width: 200px; height: 200px; background-color: wheat; } </style> </head> <body> <div class="test"></div> <script src="jquery-3.4.1.js"></script> <script> // function enter(){ // console.log("enter"); // } // // function out(){ // console.log("out"); // } // // $(".test").hover(enter, out); $(".test").mouseenter(function(){ console.log("enter"); }); $(".test").mouseleave(function(){ console.log("leave"); }) </script> </body> </html>
5.2 属性操作
//css类 $("").addClass(class|fn); $("").removeClass([class|fn]); //属性 $("").attr(); $("").removeAttr(); $("").prop(); $("").removeProp(); //HTML代码/文本/值 $("").html([val|fn]); $("").text([val|fn]); $("").val([val|fn|arr]); //应用 $("#c1").css({"color": "red", "fontSize": "35px"});
attr方法使用：
<body> <label><input id="chk1" type="checkbox" />是否可见</label> <label><input id="chk2" type="checkbox" checked="checked" />是否可见</label> <script src="jquery-3.4.1.js"></script> <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> </body>
5.3 each循环
我们知道$("p").css("color", "red")是将css操作加到所有的标签上，内部维持一个循环；但如果对于选中标签进行不同处理，这时就需要对所有标签数组进行循环遍历了。
jQuery支持两种循环方式：
方式一：
格式：$.each(obj, fn)
li = [10, 20, 30, 40]; dic = {name: "MaYi", sex: "male"}; $.each(li, function(i, x){ console.log(i, x); }); $.each(dic, function(k, v){ console.log(k, v); });
方式二：
格式：$("").each(fn)
$("tr").each(function(){ console.log($(this).html()); });
其中，$(this)代指当前循环标签。
5.4 文档节点处理
创建一个标签对象
$("<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) |
$("p").before("<b>Hello</b>"); |
|
|
|
$("").insertAfter(content|fn) |
$("p").insertAfter("#foo"); |
|
|
|
$("").insertBefore(content) |
$("p").insertBefore("#foo"); |
|
|
替换
|
$("").replaceWith(content|fn) |
$("p").replaceWith("<b>Paragraph.</b>"); |
删除
|
$("").empty() |
|
$("").remove([expr]) |
复制
|
$("").clone([Even[, deepEven]]) |
5.5 动画效果
显示隐藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</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); //1000毫秒 }); $("#show").click(function(){ $("p").show(1000); //1000毫秒 }); $("#toggle").click(function(){ $("p").toggle(1000); //1000毫秒 }); </script> </body> </html>
滑动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <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">切换</div> <div id="content">hello world!</div> <script src="jquery-3.4.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> </body> </html>
淡入淡出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> #id1 { display: none; width: 80px; height: 80px; background-color: blueviolet; } </style> </head> <body> <button id="in">fade in</button> <button id="out">fade out</button> <button id="toggle">fade toggle</button> <button id="to">fade to</button> <div id="id1"></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); }); $("#to").click(function(){ $("#id1").fadeTo(1000, 0.4); }); </script> </body> </html>
回调函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <button>hide</button> <p>hello world</p> <script src="jquery-3.4.1.js"></script> <script> $("button").click(function(){ $("p").hide(1000, function(){ alert($(this).html()); }); }); </script> </body> </html>
5.6 css操作
css位置操作
$("").offset([coordinates]) $("").position() $("").scrollTop([val]) $("").scrollLeft([val])
示例1：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> .test { width: 200px; height: 200px; background-color: wheat; } </style> </head> <body> <h1>this if offset</h1> <div class="test"></div> <p></p> <button>change</button> <script src="jquery-3.4.1.js"></script> <script> var $offset = $(".test").offset(); var $lefts = $offset.left; var $tops = $offset.top; $("p").text("Top:" + $tops + " Left:" + $lefts); $("button").click(function(){ $(".test").offset({left: 200, top: 400}); }); </script> </body> </html>
示例2：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> * { margin: 0; } .box1 { width: 200px; height: 200px; background-color: rebeccapurple; } .box2 { width: 200px; height: 200px; background-color: darkcyan; } .parent_box { position: relative; } </style> </head> <body> <div class="box1">hello box1</div> <div class="parent_box"> <div class="box2">hello box2</div> </div> <p>hello p</p> <script src="jquery-3.4.1.js"></script> <script> var $position = $(".box2").position(); var $left = $position.left; var $top = $position.top; $("p").text("Top:" + $top + " Left:" + $left); </script> </body> </html>
示例3：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> body { margin: 0; } .returnTop { height: 60px; width: 100px; background-color: peru; position: fixed; right: 0; bottom: 0; color: white; line-height: 60px; text-align: center; } .div1 { background-color: wheat; font-size: 5px; overflow: auto; width: 500px; height: 200px; } .div2 { background-color: darkgray; height: 2400px; } .hide { display: none; } </style> </head> <body> <div class="div1 div"> <p>hello world</p> <p>hello world</p> <p>hello world</p> <p>hello world</p> <p>hello world</p> </div> <div class="div2 div">hello div2</div> <div class="returnTop hide">返回顶部</div> <script src="jquery-3.4.1.js"></script> <script> $(window).scroll(function(){ var $current = $(window).scrollTop(); console.log($current); if($current > 100){ $(".returnTop").removeClass("hide"); } else{ $(".returnTop").addClass("hide"); } }); $(".returnTop").click(function(){ $(window).scrollTop(0); }); </script> </body> </html>
css尺寸操作
$("").height([val|fn]) $("").width([val|fn]) $("").innerHeight() $("").innerWidth() $("").outerHeight([soptions]) $("").outerWidth([options])
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <style> * { margin: 0; } .box1 { width: 200px; height: 200px; background-color: wheat; padding: 50px; border: 50px solid rebeccapurple; margin: 50px; } </style> </head> <body> <div class="box1"> hello div </div> <p>hello p</p> <script src="jquery-3.4.1.js"></script> <script> var $ele = $(".box1"); var $height = $ele.height(); var $innerHeight = $ele.innerHeight(); var $outerHeight = $ele.outerHeight(); var $margin = $ele.outerHeight(true); //200---300---400---500 $("p").text($height + "---" + $innerHeight + "---" + $outerHeight + "---" + $margin); </script> </body> </html>
六、扩展方法（插件机制）
6.1 jQuery.extend(object)
扩展jQuery对象本身。
用来在jQuery命名空间上增加新函数。
例：在jQuery命名空间上增加两个函数：
<script src="jquery-3.4.1.js"></script> <script> jQuery.extend({ min: function(a, b) { return a < b ? a : b;}, max: function(a, b) { return a > b ? a : b;} }); console.log(jQuery.min(2, 3)); //2 console.log(jQuery.max(4, 5)); //5 </script>
6.2 jQuery.fn.extend(object)
扩展jQuery元素集来提供新的方法（通常用来制作插件）。
例：增加两个插件方法：
<body> <label><input type="checkbox" /></label> <label><input type="checkbox" /></label> <label><input type="checkbox" /></label> <script src="jquery-3.4.1.js"></script> <script> jQuery.fn.extend({ check: function(){ $(this).attr("checked", true); }, uncheck: function(){ $(this).attr("checked", false); } }); $(":checkbox:gt(0)").check(); </script> </body>
