前端基础---jquery

  1. 云栖社区>
  2. 博客>
  3. 正文

前端基础---jquery

科技探索者 2017-11-21 12:44:00 浏览569
展开阅读全文

1jQuery简介

1   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team

2   jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!

3  它是轻量级的js(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器

4  jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocumentsevents、实现动画效果,并且方便地为网站提供AJAX交互。

5  jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。

 

2jQuery对象

jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的如果一个对象是 jQuery 对象那么它就可以使用 jQuery 里的方法

$("#test").html()   

        意思是指:获取IDtest的元素内的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()          //jquery代码实现

$("#msg")[0].innerHTML      //DOM代码实现

 

3、寻找元素(选择器和筛选器)

1】选择器

基本选择器:

$("*")          通配符(全部)

$("#id")         id选择器

$(".class")       class选择器

$("element")     标签选择器

$(".class,p,div")   组合选择器

 

层级选择器:

$(".outer div")       后代元素选择器

$(".outer>div")       子元素选择器

$(".outer+div")       毗邻元素选择器

$(".outer~div")      普通兄弟选择器

 

基本筛选器

$("li:first")        筛选第一个li标签

$(“li:last”)       筛选最后一个li标签

$("li:eq(2)")          筛选第3li标签

$("li:even")         筛选排序为奇数的li标签(隔行筛选)

$("li:gt(1)")        筛选排序大于1li标签

 

属性选择器

$('[id="div1"]')       

$('["alex="sb"][id]')

 

表单选择器:只适用于表单标签

$("[type='text']")     等同于$(":text")        

注意只适用于input标签  : $("input:checked")

 

 

2】筛选器

过滤筛选器

$("li").eq(2)           筛选第2li标签(推荐使用,方便传参)

$("li").first()          筛选第1li标签

$("ulli").hasclass("test")     筛选class中含有testulli标签

 

查找筛选器

查找子标签:        

$("div").children(".test")      //找儿子标签的test

$("div").find(".test")         //找所有后代标签中的test

向下查找兄弟标签:   

$(".test").next() $(".test").nextAll()     

$(".test").nextUntil()      //开区间查找,不含尾

向上查找兄弟标签:   

$("div").prev()      $("div").prevAll()      $("div").prevUntil()  

查找所有兄弟标签:   

$("div").siblings()               

查找父标签:

$(".test").parent()             

$(".test").parents()           找所有父标签,到html

$(".test").parentUntil(“.outer”)    查找父标签(不含outer

 

4、文本操作

Jquery事件绑定

$(“.p1”).click(function (){

      alert(123)

})

 

练习:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
</head>
<body>
 
<p class="p1">P1</p>
<p class="p1">P2</p>
<p class="p1">P3</p>
<p class="p1">p4</p>
 
<script>
    // DOM对象转为Jquery对象  $(DOM对象)
    $("p").click(function () {
        console.log($(this));
 
        // 取值操作
        //alert($(this).html());
        //alert($(this).text())
 
        // 赋值操作
        $(this).html("<a href=''>hello</a>")
        //$(this).text("<a>hello</a>")
    })
 
</script>
 
</body>
</html>


5、操作元素

a. Jquery事件

页面载入

ready(fn)          // DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function(){})-----------> $(function(){})

 

事件绑定

$(“.p1”).click(function (){

      alert(123)

})

练习:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
</head>
<body>
 
<p class="p1">P1</p>
<p class="p1">P2</p>
<p class="p1">P3</p>
<p class="p1">p4</p>
 
<script>
    // DOM对象转为Jquery对象  $(DOM对象)
    $("p").click(function () {
        console.log($(this));
 
        // 取值操作
        //alert($(this).html());
        //alert($(this).text())
 
        // 赋值操作
        $(this).html("<a href=''>hello</a>")
        //$(this).text("<a>hello</a>")
    })
 
</script>
 
</body>
</html
事件委派


$("").on(eve,[selector],[data],fn)  // 在选择元素上绑定一个或多个事件的事件处理函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<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.1.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)
 
    });
 
     $("#off").click(function(){
         $("ul li").off()
     })
 
</script>
 
</body>
</html>

 

事件切换

hover事件

一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态

over:鼠标移到元素上要触发的函数

out:鼠标移出元素要触发的函数

 

b.属性操作

--------------------------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方法使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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>


c.each循环

jquery支持两种循环方式:

方式一:

格式:$.each(obj,fn)

1
2
3
4
5
li=[10,20,30,40];
dic={name:"yuan",sex:"male"};
$.each(li,function(i,x){
    console.log(i,x)
});

方式二:

格式:$("").each(fn)

1
2
3
$("tr").each(function(){
   console.log($(this).html())
})


其中,$(this)代指当前循环标签

 

each扩展

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/*
       function f(){
  
       for(var i=0;i<4;i++){
  
           if (i==2){
                return
           }
           console.log(i)
       }
  
    }
   f();  // 这个例子大家应该不会有问题吧!!!
//-----------------------------------------------------------------------
  
  
   li=[11,22,33,44];
   $.each(li,function(i,v){
  
       if (v==33){
                return ;   // ===试一试 return false会怎样?
           }
           console.log(v)
   });
  
//------------------------------------------
  
  
   // 大家再考虑: function里的return只是结束了当前的函数,并不会影响后面函数的执行
  
   //本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了,
   //希望后面的函数也不再执行了!基于此,jquery在$.each里又加了一步:
        for(var i in obj){
  
            ret=func(i,obj[i]) ;
            if(ret==false){
                 return ;
            }
  
        }
   // 这样就很灵活了:
   // <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true
   // <2>如果你不想return后下面循环函数继续执行,那么就直接写return false
//---------------------------------------------------------------------


d.文档节点处理

//创建一个标签对象

   $("<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]])

 

e.动画效果

显示隐藏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="jquery-2.1.4.min.js"></script>
   <script>
  
$(document).ready(function() {
   $("#hide").click(function () {
       $("p").hide(1000);
   });
   $("#show").click(function () {
       $("p").show(1000);
   });
  
//用于切换被选元素的 hide() 与 show() 方法。
   $("#toggle").click(function () {
       $("p").toggle();
   });
})
  
   </script>
   <link type="text/css" rel="stylesheet"href="style.css">
</head>
<body>
   <p>hello</p>
   <button id="hide">隐藏</button>
   <button id="show">显示</button>
   <button id="toggle">切换</button>
</body>
</html>


滑动:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="jquery-2.1.4.min.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>
   <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">toggle</div>
  
   <div id="content">helloworld</div>
  
</body>
</html>


淡入淡出:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="jquery-2.1.4.min.js"></script>
   <script>
   $(document).ready(function(){
  $("#in").click(function(){
      $("#id1").fadeIn(1000);
  
  
  });
   $("#out").click(function(){
      $("#id1").fadeOut(1000);
  
  });
   $("#toggle").click(function(){
      $("#id1").fadeToggle(1000);
  
  
  });
   $("#fadeto").click(function(){
      $("#id1").fadeTo(1000,0.4);
  
  });
});
  
 
   </script>
  
</head>
<body>
     <button id="in">fadein</button>
     <button id="out">fadeout</button>
     <button id="toggle">fadetoggle</button>
     <button id="fadeto">fadeto</button>
  
     <div id="id1" style="display:none; width: 80px;height:80px;background-color: blueviolet"></div>
  
</body>
</html>

 

回调函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <script src="jquery-2.1.4.min.js"></script>
  
</head>
<body>
 <button>hide</button>
 <p>helloworld helloworld helloworld</p>
  
  
  
 <script>
  $("button").click(function(){
      $("p").hide(1000,function(){
          alert($(this).html())
      })
  
   })
   </script>
</body>
</html>


f.css操作

css位置操作

$("").offset([coordinates])

$("").position()

$("").scrollTop([val])

$("").scrollLeft([val])

 

练习1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       .test1{
           width: 200px;
           height: 200px;
           background-color: wheat;
       }
   </style>
</head>
<body>
  
  
<h1>this is offset</h1>
<divclass="test1"></div>
<p></p>
<button>change</button>
</body>
<scriptsrc="jquery-3.1.1.js"></script>
<script>
   var $offset=$(".test1").offset();
   var lefts=$offset.left;
   var tops=$offset.top;
  
   $("p").text("Top:"+tops+" Left:"+lefts);
   $("button").click(function(){
  
       $(".test1").offset({left:200,top:400})
   })
</script>
</html>


练习2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Title</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>
  
  
  
  
<divclass="box1"></div>
<div>
   <div></div>
</div>
<p></p>
  
  
<scriptsrc="jquery-3.1.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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Title</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: darkgrey;
           height: 2400px;
       }
  
  
       .hide{
           display: none;
       }
   </style>
</head>
<body>
    <div class="div1 div">
          <h1>hello</h1>
          <h1>hello</h1>
          <h1>hello</h1>
          <h1>hello</h1>
          <h1>hello</h1>
          <h1>hello</h1>
          <h1>hello</h1>
          <h1>hello</h1>
          <h1>hello</h1>
          <h1>hello</h1>
          <h1>hello</h1>
          <h1>hello</h1>
          <h1>hello</h1>
          <h1>hello</h1>
          <h1>hello</h1>
          <h1>hello</h1>
     </div>
    <div class="div2 div"></div>
    <div class="returnTop hide">返回顶部</div>
  
 <scriptsrc="jquery-3.1.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>


尺寸操作

$("").height([val|fn])

$("").width([val|fn])

$("").innerHeight()

$("").innerWidth()

$("").outerHeight([soptions])

$("").outerWidth([options])

 

练习:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       *{
           margin: 0;
       }
       .box1{
           width: 200px;
           height: 200px;
            background-color: wheat;
           padding: 50px;
           border: 50px solid rebeccapurple;
           margin: 50px;
       }
   </style>
</head>
<body>
  
<div>
   DIVDIDVIDIV
</div>
  
<p></p>
<scriptsrc="jquery-3.1.1.js"></script>
<script>
   var $height=$(".box1").height();
   var $innerHeight=$(".box1").innerHeight();
   var $outerHeight=$(".box1").outerHeight();
   var $margin=$(".box1").outerHeight(true);
  
   $("p").text($height+"---"+$innerHeight+"-----"+$outerHeight+"-------"+$margin)
</script>
</body>
</html>


Jquery扩展方法(插件机制)

jQuery.extend(object)

扩展jQuery对象本身,用来在jQuery命名空间上增加新函数

练习:

jQuery命名空间上增加两个函数

1
2
3
4
5
6
7
8
9
<script>
   jQuery.extend({
     min: function(a, b) { return a < b ? a : b; },
     max: function(a, b) { return a > b ? a : b; }
});
  
   jQuery.min(2,3); // => 2
   jQuery.max(4,5); // => 5
</script>

 

jQuery.fn.extend(object)

扩展 jQuery 元素集来提供新的方法(通常用来制作插件)

练习:

增加两个插件方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<body>
  
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
  
<scriptsrc="jquery.min.js"></script>
<script>
   jQuery.fn.extend({
     check: function() {
        $(this).attr("checked",true);
     },
     uncheck: function() {
        $(this).attr("checked",false);
     }
   });
  
   $(":checkbox:gt(0)").check()
</script>
  
</body>

本文转自lyndon博客51CTO博客,原文链接http://blog.51cto.com/lyndon/1976510如需转载请自行联系原作者

迟到的栋子

网友评论

登录后评论
0/500
评论
科技探索者
+ 关注