欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端-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);