zoukankan html css js c++ java

前端-jQuery

一、定义

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

查看全文

相关阅读:
stl-序列式容器
 BFS
Hash
二分法
 草稿1
红黑树的左旋、右旋和颜色变换
 动态规划
 自动驾驶-安全
 二叉树
 树

原文地址：https://www.cnblogs.com/lsf123456/p/11276805.html