前端基础---jquery

简介:

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如需转载请自行联系原作者

迟到的栋子
相关文章
|
5月前
|
设计模式 JavaScript 前端开发
|
6月前
|
JavaScript 前端开发
前端基础 - JQuery自定义校验器
前端基础 - JQuery自定义校验器
32 0
|
6月前
|
JavaScript 前端开发
前端基础 - JQuery事件切换(原来还有这种写法)
前端基础 - JQuery事件切换(原来还有这种写法)
29 0
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
jQuery最方便的前端验证方式2种(非空验证与比较验证)
jQuery最方便的前端验证方式2种(非空验证与比较验证)
40 0
|
4月前
|
JavaScript 前端开发 UED
前端知识笔记(四)———JQuery 自动刷新页面但不闪烁的实现方法
前端知识笔记(四)———JQuery 自动刷新页面但不闪烁的实现方法
45 0
|
5月前
|
前端开发 JavaScript
Jquery前端分页插件pagination同步加载和异步加载
Jquery前端分页插件pagination同步加载和异步加载
43 0
|
5月前
|
JavaScript 前端开发 数据格式
Jquery前端分页插件pagination使用
Jquery前端分页插件pagination使用
59 1
|
6月前
|
JavaScript 前端开发
前端基础 - JQuery 简单的表单校验器
前端基础 - JQuery 简单的表单校验器
30 0
|
Web App开发 移动开发 JavaScript
Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列二十】
  《Web 前端开发精华文章推荐》2013年第八期(总第二十期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章和资源能够帮助到您。
2307 0
|
Web App开发 移动开发 JavaScript
Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十九】
  《Web 前端开发精华文章推荐》2013年第七期(总第十九期)和大家见面了。梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 CSS3 技术应用,推荐优秀的 网页设计 案例,共享精美的设计素材和优秀的 Web 开发工具,希望这些精心整理的前端技术文章能够帮助到您。
1981 0