Technical blog

IT小白的成长之旅

0%

jQuery教程

发表于 更新于 分类于

jQuery基础

jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。

jQuery库包含以下功能：

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

提示： 除此之外，Jquery还提供了大量的插件。

jQuery语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(*selector*).*action*()

  • 美元符号定义 jQuery
  • 选择符（selector）”查询”和”查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

实例:

  • $(this).hide() - 隐藏当前元素
  • $(“p”).hide() - 隐藏所有

    元素

  • $(“p.test”).hide() - 隐藏所有 class=”test” 的

    元素

  • $(“#test”).hide() - 隐藏 id=”test” 的元素
1
2
3
4
5
6
7
8
9
10
11
12
//在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：
$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});
/*这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

试图隐藏一个不存在的元素
获得未完全加载的图像的大小*/

jQuery选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

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
//jQuery 元素选择器基于元素名选取元素,在页面中选取所有 <p> 元素。
//用户点击按钮后，所有 <p> 元素都隐藏。
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
//jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
//页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
//jQuery 类选择器可以通过指定的 class 查找元素。
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
//如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。
//当我们在教程中演示 jQuery 时，会将函数直接添加到 <head> 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：
<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

jQuery事件

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。页面中指定一个点击事件：下一步是定义什么时间触发事件，可以通过一个事件函数来实现；

常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法 章节中已经提到过。

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。该函数在用户点击 HTML 元素时执行。

dblclick()

当双击元素时，会发生 dblclick 事件。

dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：

mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。

mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：

mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数

mouseup()

当在元素上松开鼠标按钮时，会发生 mouseup 事件。

mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：

hover()

hover()方法用于模拟光标悬停事件。

当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

focus()

当元素获得焦点时，发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数

blur()

当元素失去焦点时，发生 blur 事件。

blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

jQuery效果

隐藏与显示

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

1
2
3
4
5
6
7
8
9
10
11
12
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
//可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
//可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

//通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
//显示被隐藏的元素，并隐藏已显示的元素：
$("button").click(function(){
  $("p").toggle();
});
$(selector).toggle(speed,callback);
//可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

淡入淡出

通过 jQuery，您可以实现元素的淡入淡出效果。jQuery 拥有下面四种 fade 方法：

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()
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
//jQuery fadeIn() 用于淡入已隐藏的元素;
$(selector).fadeIn(speed,callback);
$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

//jQuery fadeOut() 方法用于淡出可见元素
$(selector).fadeOut(speed,callback);
$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

//jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
//如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

//jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

滑动效果

通过 jQuery，您可以在元素上创建滑动效果。jQuery 拥有以下滑动方法：

  • slideDown()
  • slideUp()
  • slideToggle()
1
2
3
4
//jQuery slideDown() 方法用于向下滑动元素。
//jQuery slideUp() 方法用于向上滑动元素。
//jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
//如果元素向下滑动，则 slideToggle() 可向上滑动它们。如果元素向上滑动，则 slideToggle() 可向下滑动它们。

jQuery动画

jQuery animate() 方法用于创建自定义动画。

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
$(selector).animate({params},speed,callback);
/*必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

下面的例子演示 animate() 方法的简单应用。它把 <div> 元素往右边移动了 250 像素：*/
$("button").click(function(){
  $("div").animate({left:'250px'});
});
//默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!

//同样生成动画的过程中可以同时使用多个属性
$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

//：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

//也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
//默认地，jQuery 提供针对动画的队列功能。
//这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

//

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画

$(selector).stop(stopAll,goToEnd)。

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。因此，默认地，stop() 会清除在被选元素上指定的当前动画。

Callback 函数在当前动画 100% 完成之后执行。

jQuery链

通过 jQuery，可以把动作/方法链接在一起。Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）

直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。

不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。提示： 这样的话，浏览器就不必多次查找相同的元素。如需链接一个动作，您只需简单地把该动作追加到之前的动作上。下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。”p1” 元素首先会变为红色，然后向上滑动，再然后向下滑动：

1
2
3
4
5
6
7
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
//如果需要，我们也可以添加多个方法调用。
//提示：当进行链接时，代码行会变得很长。不过，jQuery 语法不是很严格；您可以按照希望的格式来写，包含换行和缩进。如下书写也可以很好地运行：
$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);
//jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行。

什么是链式调用

链式调用完方法后，return this返回当前调用方法的对象。普通的定义类方法，在多次调用一个对象的不同方法时有一个弊端，就是会多次重复使用一个对象变量，进行了多次查找，可以在原本的实现类中增添一行return this 从而能简单地实现链式调用。

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
//创建一个bird类
    function Bird(name) {
        this.name=name;
        this.run=function () {
            document.write(name+" "+"start run;");
            return this;// return this返回当前调用方法的对象。
        }
        this.stopRun=function () {
            document.write(name+" "+"start run;");
            return this;
        }
        this.sing=function () {
            document.write(name+" "+"start sing;");
            return this;
        }
        this.stopSing=function () {
            document.write(name+" "+"start stopSing;");
            return this;
        }
    }


var bird=new Bird("测试");
    bird.run().sing().stopSing().stopRun();
//结果为;测试 start run;测试 start sing;测试 start stopSing;测试 start run;

jq的链式调用

jq的链式调用其实就是比如我们在选择dom的时候，

1
2
3
4
5
6
7
8
9
10
11
12
$('input[type="button"]')
    .eq(0).click(function() {
        alert('点击我!');
}).end().eq(1)
.click(function() {
    $('input[type="button"]:eq(0)').trigger('click');
}).end().eq(2)
.toggle(function() {
    $('.aa').hide('slow');
}, function() {
    $('.aa').show('slow');
});

比如如上代码，先选择type类型为button的所有DOM，然后再选择第一个…

我们自然想到每次其实就是返回选择后的结果，在js里面有什么东西可以指代这个吗？
如果你想到this就对了。

q的方法都是挂在原型的，那么如果我们每次在内部方法返回this，也就是返回实例对象，那么我们就可以继续调用原型上的方法了，这样的就节省代码量，提高代码的效率，代码看起来更优雅。

但是也会出现一个问题：所有对象的方法返回的都是对象本身，也就是说没有返回值，所以这种方法不一定在任何环境下都适合。

模仿jQuery的链式调用

1、定义一个含参数的空对象；

1
2
3
4
(function(){
  //下划线：表示私有变量的写法
    function _$(els) { };//有参数的空函数对象
})()//程序启动的时候 里面的代码直接执行了

2、准备方法：在_$上定义一个onrReady方法；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function(){
   //第一步，下划线：表示私有变量的写法
    function _$(els) { };//有参数的空对象
    //第二步，准备方法  在_$上定义一个onrReady方法
    _$.onrReady=function (fn) {
        //按要求把对象（_$）注册到window对象上
        //对外开放的接口
        window.$=function () {
            return new _$(arguments);
            //传递相应的方法调用参数  返回一可以使用function类原型上的方法的对象（$("")=_$(参数)）
        }
        fn();
    }
    }
})()

3、为了类能扩展函数，我们定义一个它的静态函数

1
2
3
4
Function.prototype.method=function (name,fn) {//（函数名称，函数本身）
     this.prototype[name]=fn;
     return this;//链式调用关键
};//这个函数的意思：为function对象增加函数，会用链式调用，链式调用有两个参数name,和fn

4、扩展类的相应方法，链式的对象增加jquery库提供的操作函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
(function(){
    //下划线：表示私有变量的写法
    function _$(els) { };//有参数的空对象
    //第二步，准备方法  在_$上定义一个onrReady方法
    _$.onrReady=function (fn) {
        //按要求把对象（_$）注册到window对象上   
        //对外开放的接口
        window.$=function () {
            return new _$(arguments);//传递相应的方法调用参数  返回一可以使用function类原型上的方法的对象（$("")=_$(参数)）
        }
        fn();
    }
     //第四步
    //扩展类的相应方法  链式的对象增加jquery库提供的操作函数  
_$.method("AddEvent",function (type,fn) {//_$本身是一个function要继承原型链上的东西。
    fn();
}).method("getEvent",function (fn,e) {
    fn();
})
})()

5、使用，需要调用_$.onReady方法才可以返回对象使用从function类继承而来的原型上的方法

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
(function () {
    // （1）下划线：表示私有变量的写法
    function _$(els) { };//有参数的空对象
    //（2）准备方法  在_$上定义一个onrReady方法
      // window.$=_$;
    _$.onrReady=function (fn) {
        //按要求把对象（_$）注册到window对象上   在任何地方都可以使用
        //对外开放的接口
        window.$=function () {//window 上先注册一个全局变量 与外界产生关系
            return new _$(arguments);//传递相应的方法调用参数  返回一可以使用function类原型上的方法的对象（$("")=_$(参数)）
        }
        fn();
    }
    //（4）扩展类的相应方法  链式的对象增加jquery库提供的操作函数
_$.method("AddEvent",function (type,fn) {//_$本身是一个function要继承原型链上的东西。
    fn();
}).method("getEvent",function (fn,e) {
    fn();
});
    //第五步，开始使用 ，需要调用_$.onready方法才可以返回对象使用从function类继承而来的原型上的方法
     _$.onrReady(function () {//$是绑定在Windows上的
        $("").AddEvent("click",function () {
            alert("click")
        })
    })
})()

链式调用

简单的加减法链式调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
(function(){
    function test(Number){
        return isNaN(Number)?Number:0
    }
    function Add(num){
        test(num)
        return this + num
    }
      function jian(num){
           test(num)
        return this - num
    }
    Function.prototype.Add = Add
    Function.prototype.jian = jian

})()
-------------本文结束感谢您的阅读-------------
坚持原创技术分享，您的支持将鼓励我继续创作！