前端-jQuery
程序员文章站
2022-06-23 23:09:17
一、定义 1. 什么是jQuery <1> jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。 <2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE! < ......
一、定义
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; width: 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);
上一篇： 实例讲解python中的序列化知识点