jQuery伐木指南(上)

手握jQuery,横扫DOM树。

介绍核心功能、事件与效果。

注意:本文所用jQuery版本为3.2.1
本文demo的GitHub地址:https://github.com/yrq110/jquery-travel

核心功能

$(document).ready()

DOM树加载完成后执行一个函数

  1. 标准写法

    1
    2
    3
    $( document ).ready(function() {
    console.log( "document ready" );
    });
  2. 简化写法

    1
    2
    3
    $(function() {
    console.log( "document ready" );
    });
  3. window.load - 整个页面(DOM、js文件、图像文件等)加载完成后后执行一个函数

    1
    2
    3
    $( window ).on( "load", function() {
    console.log( "window loaded" );
    });

.attr()

使用.attr()方法进行属性的获得与设置。

  1. setter

    1
    $( "a" ).attr( "href", "http://yrq110.me" );
  2. getter

    1
    2
    var ref = $("a").attr("href");
    console.log(ref);

选择元素

选择元素的多种方式

  1. 通过ID选择

    1
    2
    3
    $("#one").click(function(){
    console.log("I'm selected by id");
    })
  2. 通过className选择

    1
    2
    3
    $(".two").click(function(){
    console.log("I'm selected by class");
    })
  3. 通过attribute选择

    1
    2
    3
    $("p[name='three']").click(function(){
    console.log("I'm selected by attr");
    })
  4. 复合CSS选择

    1
    2
    3
    $("#four ul.hi li").click(function(){
    console.log("I'm selected by compound css");
    })
  5. 判断是否有结果

    1
    2
    3
    if($("#one").length){
    console.log("Find a #one result");
    }
  6. 保存选择结果

    1
    2
    var divs = $("div");
    console.log(divs);

元素操作

获得元素后的各种操作

  1. 获取与设置属性
    • .html() - 获取或设置HTML代码
    • .text() - 获取或设置文本内容
    • .attr() - 获取或设置属性值
    • .position() - 获取所选择的第一个元素的位置信息
    • .val() - 获取或设置表单元素的值
  2. 其它操作

    1. 移动

      1
      $("#one").append($(".two"));
    2. 复制

      1
      $("#one").clone().appendTo($(".two"));
    3. 移除

      1
      $("#one").remove();
    4. 创建

      1
      2
      3
      4
      5
      6
      7
      var element = $( "<p>This is a new paragraph</p>" );
      var element = $("<a/>", {
      html: "This is my blog.",
      href: "http://yrq110.me",
      "class": "blog_link"
      })
      $("#one").append(element);
    5. 操作属性

      1
      2
      3
      4
      5
      6
      7
      $("a").attr({
      href: function(idx, href){
      console.log(idx);
      return href;
      },
      target: "\_blank"
      })

jQuery对象

  1. 通用性

    1
    2
    3
    4
    var one = document.getElementById( "one" );
    one.innerHTML = "Hello <b>World</b>!";
    // 使用jQuery:
    $(one).html("Hello <b>World</b>!");
  2. 简洁性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var one = document.getElementById( "one" );
    var newElement = document.createElement( "div" );
    newElement.innerHTML = "Hello world";
    one.parentNode.insertBefore( newElement, one.nextSibling );
    //使用jQuery:
    var one = document.getElementById( "one" );
    var newElement = document.createElement( "div" );
    $(newElement).html("Hello world");
    $(one).after(newElement);
  3. 使用jQuery对象保存元素

    1
    2
    3
    4
    5
    var p = $("p");
    // 得到页面中的第一个p元素(jQuery对象)
    var first_p = p.eq(0);
    // 得到页面中的第一个p元素(HTMl元素)
    var first_p = p.get(0);
  4. jQuery对象非唯一

    1
    2
    3
    var one1 = $( "#one" );
    var one2 = $( "#one" );
    alert(one1 === one2);
  5. 不是”活”的

    1
    2
    3
    var all_p = $( "p" );
    // 若p标签内容更新了,则需要重新刷新all_p对象
    all_p = $( "p" );

遍历元素

父子与兄弟元素

  1. 父元素

    1
    2
    var parent = $("#one").parent();
    console.log(parent);
  2. 子元素

    1
    2
    var children = $("div").children("p");
    console.log(children);
  3. 兄弟元素

    1
    2
    3
    4
    var bro = $("#one").next();
    var sis = $("#one").prev();
    console.log(bro);
    console.log(sis);

CSS、样式与尺寸

设置CSS样式与尺寸

  1. 获取与设置css属性

    1
    2
    3
    var size = $("#one").css("fontSize");
    console.log(size);
    $("#one").css("fontSize","30px");
  2. 添加CSS样式class

    1
    $("p:first").addClass("note");
  3. 尺寸

    1
    2
    $("#one").width("10px");
    console.log($("#one").height());

数据方法

工具方法

在$命名空间中提供了多个工具方法

  1. $.trim()

    1
    2
    var string = $.trim( " remove whitespace " );
    console.log(string);
  2. $.each()

    1
    2
    3
    $.each([ "foo", "bar", "baz" ], function( idx, val ) {
    console.log( "element " + idx + " is " + val );
    });
  3. $.inArray()

    1
    2
    3
    4
    var myArray = [ 1, 2, 3, 5 ];
    if ( $.inArray( 4, myArray ) !== -1 ) {
    console.log( "found it!" );
    }
  4. $.extend()

    1
    2
    3
    4
    5
    var firstObject = { foo: "bar", a: "b" };
    var secondObject = { foo: "baz" };
    var newObject = $.extend( firstObject, secondObject );
    console.log( firstObject.foo ); // "baz"
    console.log( newObject.foo ); // "baz"
  5. $.proxy()

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var myFunction = function() {
    console.log( this );
    };
    var myObject = {
    foo: "bar"
    };
    myFunction(); // window
    var myProxyFunction = $.proxy( myFunction, myObject );
    myProxyFunction(); // myObject
  6. 类型检测

    1
    2
    3
    4
    5
    6
    $.isArray([]); // true
    $.isFunction(function() {}); // true
    $.isNumeric(3.14); // true
    $.type( true ); // "boolean"
    $.type( 3 ); // "number"
    $.type( "test" ); // "string"

.index()

  1. 无参数 - 在父元素中的索引

    1
    2
    3
    4
    5
    6
    var one = $("#one").index();
    console.log("index:" + one); //0
    var four = $("#four").index();
    console.log("index:" + four); //3
    var div = $("div").index();
    console.log("index:" + div); //1
  2. 有字符串参数 - 在父元素中的指定类型元素的索引

    1
    2
    var four = $("#four").index("div");
    console.log("index:" + four); //1
  3. 有jQuery对象参数 - 在父元素中的指定类型元素的索引

    1
    2
    3
    var div = $("div");
    var four = $("#four");
    console.log("index:" + div.index(four)); //1

事件

jQuery事件基础

jQuery事件基本使用方法

  1. 设置元素事件响应

    1
    2
    3
    $("p").click(function(){
    console.log("click event");
    });

    使用.on()方法处理事件

    1
    2
    3
    $("p").on( "click", function() {
    console.log( "click" );
    });
  2. 给新添加的元素设置响应事件

    1
    2
    3
    4
    $("button.alert").on("click", function() {
    console.log( "A button with the alert class was clicked!" );
    });
    $("<button class='alert'>Alert!</button>").appendTo($("p"));
  3. 事件对象属性

    1
    2
    3
    4
    5
    $("p").on( "click", function(e) {
    console.log("event type: " + e.type);
    console.log("event touch id: " + e.which);
    console.log("event target: " + e.target);
    });
  4. 设置多事件响应
    多个事件相同处理

    1
    2
    3
    4
    5
    6
    $("input").on(
    "click change",
    function() {
    console.log( "An input was clicked or changed!" );
    }
    );

    多个事件不同处理

    1
    2
    3
    4
    $("input").on({
    "click": function () {console.log("clicked!");},
    "change": function () {console.log("changed!");}
    });
  5. 销毁事件响应

    1
    $("p").off("click");
  6. 设置单次事件响应

    1
    2
    3
    4
    5
    $( "p" ).one( "click", clickFunc );
    function clickFunc() {
    console.log( "You just clicked this for the first time!" );
    $(this).click( function() { console.log( "You have clicked this before!" ); } );
    }

事件辅助

例:.hover()的第一个参数是mouseenter事件的响应函数,第二个参数是mouseleave事件的响应函数

1
2
3
4
5
6
7
8
9
10
$("p").hover(
function(){
$(this).addClass("hover");
console.log("hover");
},
function(){
$(this).removeClass("hover");
console.log("leave");
}
)

事件监听

事件监听的不同方法

  1. 原生JS

    1
    2
    3
    4
    5
    var helloBtn = document.getElementById( "helloBtn" );
    helloBtn.addEventListener( "click", function( event ) {
    alert( "Hello." );
    }, false );
  2. 使用jQuery监听事件

    1
    2
    3
    4
    5
    6
    7
    $( "#helloBtn" ).click(function( event ) {
    alert( "Hello." );
    });
    $( "#helloBtn" ).on( "click", function( event ) {
    alert( "Hello." );
    });
  3. 事件对象函数
    .preventDefault()

    1
    2
    3
    $("a").click(function(event){
    event.preventDefault(); // 阻止默认行为
    })

    .stopPropagation()

    1
    2
    3
    4
    5
    6
    $("#sp li").click(function (e) {
    alert("I'm li");event.stopPropagation(); // 阻止节点分派到其他节点,停止传播
    })
    $("#sp ul").click(function (event) {
    alert("I'm ul"); // 阻止了冒泡过程,因此这句不会显示
    })

事件处理

jQuery的事件处理

  1. .on()函数

    1. 单一事件绑定

      1
      2
      3
      $("p").on("click",function(){
      console.log("click p");
      })
    2. 多个事件单一处理绑定

      1
      2
      3
      $("p").on("mouseenter mouseleave",function(){
      console.log("hover over or out a p");
      })
    3. 多个事件多个处理绑定

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      $("p").on({
      mouseenter: function() {
      console.log("hovered over a p");
      },
      mouseleave: function() {
      console.log("mouse left a p");
      },
      click: function() {
      console.log("clicked on a p");
      }
      });
    4. 事件对象

      1
      2
      3
      $("p").on("click",function(e){
      console.log(e);
      })
    5. 事件处理中传参

      1
      2
      3
      $("p").on("click",{message:"Hello"},function(e){
      console.log("message: " + e.data.message);
      })
    6. 绑定事件到暂不存在的元素

      1
      2
      3
      $( "ul" ).on( "click", "li", function() {
      console.log( "Something in a <ul> was clicked, and we detected that it was an <li> element." );
      });
  2. .one()函数
    仅处理一次事件

    1
    2
    3
    4
    5
    6
    $( "p" ).one( "click", function() {
    console.log( "You just clicked this for the first time!" );
    $( this ).click(function() {
    console.log( "You have clicked this before!" );
    });
    });
  3. 事件解绑
    解绑事件绑定的所有处理

    1
    $("p").off("click");

    通过引用解绑事件绑定的指定函数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var foo = function() {
    console.log("foo");
    };
    var bar = function() {
    console.log("bar");
    };
    $("p").on("click", foo).on("click", bar);
    $("p").off("click", bar);

事件对象的属性和方法

  • pageX,pageY
  • type
  • which
  • data
  • target
  • preventDefault()
  • stopPropagation()

事件代理

  1. 直接对具体元素绑定事件,对动态添加的元素无作用

    1
    2
    3
    4
    5
    $("#list li").on("click",function(e){
    e.preventDefault();
    console.log($(this).text());
    });
    $("#list").append("<li><a href=''>6</a></li>");
  2. 在父元素上绑定代理事件,对动态添加的元素有作用

    1
    2
    3
    4
    5
    $("#list").on("click","li",function(e){
    e.preventDefault();
    console.log($(this).text());
    });
    $("#list").append("<li><a href=''>6</a></li>");
  3. 操作被触发的元素

    1
    2
    3
    4
    5
    6
    $( "#list" ).on( "click", "a", function(e) {
    var elem = $( this );
    if ( elem.is( "[href^='http']" ) ) {
    elem.attr( "target", "\_blank" );
    }
    });

触发事件处理

.trigger()函数

1
2
3
4
5
6
7
8
$("#blog").click(function (e) {
e.preventDefault();
console.log("hello blog")
})
$("p").click(function(){
$("#blog").attr("href", "http://yrq110.me");
$("#blog").trigger( "click" );
})

自定义事件

结合.on()与.trigger()函数

1
2
3
4
5
6
7
8
9
10
11
12
13
$( ".lightbulb" ).on( "light:toggle", function( event ) {
var light = $( this );
if ( light.is( ".on" ) ) {
light.removeClass( "on" ).addClass( "off" );
} else {
light.removeClass( "off" ).addClass( "on" );
}
});
$( ".switch, .clapper" ).click(function() {
var room = $( this ).closest( ".room" );
room.find( ".lightbulb" ).trigger( "light:toggle" );
});

效果

效果基础

  1. 显示和隐藏内容

    1
    2
    3
    4
    $("p").hide(function(){
    console.log("I'm a visible p");
    });
    $("div.hidden").show();
  2. 渐变和滑动动画

    1
    2
    3
    4
    5
    6
    // 淡出和淡入
    $("p").fadeOut(2000);
    $("div").hide().fadeIn(2000);
    // 滑出与滑入
    $("p").slideUp(2000);
    $("div").hide().slideDown(2000);
  3. 根据可视状态改变显示效果

    1
    2
    3
    4
    5
    $("p").toggle();
    $("p").toggle("slow");
    $("p").toggle(2000);
    $("p").slideToggle(1000);
    $("p").fadeToggle(1000);
  4. 动画完成后执行函数

    1
    2
    3
    $("p#text").hide().fadeIn(2000,function(){
    console.log("animation finished");
    })
  5. 动画管理

    1. .stop()

      1
      2
      3
      4
      5
      $("p").hide(5000);
      $("body").append("<button>Stop animation</button>");
      $("button").click(function(){
      $("p").stop();
      })
    2. .delay()

      1
      $("p").hide(1000).delay(1000).show(1000);
    3. jquery.fx

      1
      2
      3
      4
      5
      jQuery.fx.off = true;
      $("body").append("<button>jQuery.fx disbale animation</button>");
      $("button").click(function(){
      $("p").toggle("slow");
      });

使用.animate()自定义动画

1
2
3
4
5
6
7
8
9
$("p").animate(
{
opacity: 0.2
},
2000, // 持续时间
function(){ // 动画完成后的回调
console.log("done");
}
);

Easing效果

1
2
3
4
5
6
7
8
9
10
$("p").animate(
{
opacity: [0.2,"linear"]
// opacity: [0.2,"swing"]
},
2000, // 持续时间
function(){ // 动画完成后的回调
console.log("done");
}
);

队列

  1. 在回调中使用队列

    1. 入列方法 .queue() - 在队列中添加执行函数,

      1
      2
      3
      4
      5
      $("p")
      .animate({fontSize:30}, 1000)
      .queue(function(){
      $("#message").html( "We're in the animation, baby!" );
      })
    2. 出列方法一 .dequeue() - 移除匹配元素所绑定的队列中的第一个函数并执行

      1
      2
      3
      4
      5
      6
      7
      $("p")
      .animate({fontSize:30}, 1000)
      .queue(function(){
      $("#message").html( "We're in the animation, baby!" );
      $(this).dequeue();
      })
      .animate({fontSize:15}, 1000);
    3. 出列方法2 - 直接调用回调函数中的参数

      1
      2
      3
      4
      5
      6
      7
      $("p")
      .animate({fontSize:30}, 1000)
      .queue(function(next){
      $("#message").html( "We're in the animation, baby!" );
      next();
      })
      .animate({fontSize:15}, 1000);
  2. 自定义队列
    可以给元素绑定多个入列函数,并分配名称

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $("p")
    .queue("steps",function(next){
    console.log("Step 1");
    next();
    })
    .queue("steps",function(next){
    console.log("Step 2");
    next();
    })
    .dequeue("steps")
    .animate({fontSize:30}, 1000);
  3. 清空队列
    队列中的函数是按顺序执行,有时一些逻辑需要终止队列中函数的执行,可以使用.clearQueue()方法

    1
    2
    3
    4
    5
    6
    7
    $("p")
    .queue("steps",function(next){
    console.log("I will clear the queue"); //由于清空了队列中的steps函数,因此这句不会打印出来
    next();
    })
    .clearQueue("steps")
    .dequeue( "steps" );

    也可以使用.stop()函数清空指定入列函数

    1
    2
    3
    4
    5
    6
    7
    $("p")
    .queue("steps",function(next){
    console.log("I will clear the queue"); //由于清空了队列中的steps函数,因此这句不会打印出来
    next();
    })
    .stop("steps")
    .dequeue( "steps" );
  4. 替换队列
    若在.queue()的第二个参数中传入一个数组,则会替换之前添加的同名入列函数,可以比较下3.2中的写法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $("p")
    .queue("steps",function(next){
    console.log("I'm Bob"); // 不会打印出来
    next();
    })
    .queue("steps",[
    function(next){
    console.log("I'm Rizu");
    next();
    }])
    .dequeue("steps");

    打印一下入列函数会发现返回一个数组

    1
    2
    3
    4
    5
    6
    $("p").queue("steps",function(next){
    console.log("I'm Bob");
    next();
    })
    console.log($("p").queue("steps"));
    $("p").dequeue("steps");
文章目录
  1. 1. 核心功能
    1. 1.1. $(document).ready()
    2. 1.2. .attr()
    3. 1.3. 选择元素
    4. 1.4. 元素操作
    5. 1.5. jQuery对象
    6. 1.6. 遍历元素
    7. 1.7. CSS、样式与尺寸
    8. 1.8. 数据方法
    9. 1.9. 工具方法
    10. 1.10. .index()
  2. 2. 事件
    1. 2.1. jQuery事件基础
    2. 2.2. 事件辅助
    3. 2.3. 事件监听
    4. 2.4. 事件处理
    5. 2.5. 事件对象的属性和方法
    6. 2.6. 事件代理
    7. 2.7. 触发事件处理
    8. 2.8. 自定义事件
  3. 3. 效果
    1. 3.1. 效果基础
    2. 3.2. 使用.animate()自定义动画
    3. 3.3. 队列
|