Jquery

课程目的

  • 熟练使用jquery常用事件
  • 理解dom元素jquery元素差别
  • 理解事件代理 live delegate

课程内容

Jquery是什么

jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性:

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

简单使用

<script type="text/javascript" src="http://kejian.jirengu.com/static/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>

DOM ready

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,如果在文档没有完全加载之前就运行函数,操作可能失败。必须在文档加载完成后在执行操作,可使用ready事件,作用相当于我们把js写到body的末尾。

$(document).ready(function(){
    //your code here
});

$().ready(function(){
    $("p").hide();
});

$(function(){
    $("#btn").on('click', function(){
        $("p").show();
    });
});

上面三种写法都ok

基本语法

jQuery 语法可以对元素执行某些操作。

基础语法是:$(selector).action()

其中selector是选择器名称,和css选择器一样,action是jquery对象的方法。

$("p").hide() - 隐藏所有段落

选择器

和css的选择器类似

$(this) 当前 HTML 元素

$("p") 所有

元素

$("p.intro") 所有 class="intro" 的

元素

$(".intro") 所有 class="intro" 的元素

$("#intro") id="intro" 的元素

$(".a .b .c") class a的子元素class b的子元素class c.

$("[data-flag=true]") 所有带有data-flag属性 并且值是true的元素

$("div#intro .head") id="intro" 的

元素中的所有 class="head" 的元素

$("div#intro").find(".head");

#div1, #div2 .intro{

}

$('#div1, #div2 .intro')

事件

常见事件有:click、dblclick、mousedown、mouseenter、resize等 参考w3c事件

事件绑定写法

$("button").click(function() {
    alert(1);
} );
$("button").bind('click', function(e){
    console.log(e);
    alert(2);
});
$("button").on('click', function(){
    console.log(e);
    console.log(this);
    console.log($(this));
});

DOM元素 vs Jquery元素

dom元素: 通过原生js获取的dom节点是dom元素; jquery元素: 通过jquery选择器选择的元素是jquery元素

<div id="mydiv">test</div>
<button id="btn">隐藏</button>
<script>
    var div1 = document.getElementById("mydiv");
    var div2 = $("#mydiv");
    console.log(div1); //dom元素
    console.log(div2); //jquery元素
    $('#btn').on('click', function(){
        div2.hide();
    });
    document.getElementById("btn").onclick=function(){
        div1.show();
    }
</script>

区别?

Dom元素只能使用dom元素的属性和方法。

jquery元素只能使用jquery的属性和方法。

dom元素和jquery元素如何转换? 1. dom->jquery,加$(dom)

var dom1 = document.getElementById("div1");
var $dom1 = $(dom1);
var $dom2 = $("<div>hello,这样创建节点</div>")
var lists = document.getElementsByClassName("p1");
var $lists = $(lists);
$("#btn").on('click', function(){
    var $btn = $(this);  //this是dom元素,代表按钮, $(this)转换为jquery元素
});
  1. jquery->dom, jquery元素是以数组形式展现,选取数组的第几项就能转换为dom元素

    var $p1 = $('.p1'); var p1 = $p1[0]; //转换为dom元素

bind live delegate on

参考这里

.bind()

$('a').bind('click', function() { 
    alert("That tickles!") 
});

这是最简单的绑定方法了。JQuery扫描文档找出所有的$(‘a’)元素,并把alert函数绑定到每个元素的click事件上。

.live()

$('a').live('click', function() { 
    alert("That tickles!") 
});

JQuery把alert函数绑定到$(document)元素上,并使用’click’和’a’作为参数。任何时候只要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的目标元素与’a’这一CSS选择器是否匹配,如果都是的话,则执行函数。

.delegate()

$('#container').delegate('a', 'click', function() { 
    alert("That tickles!") 
});

JQuery扫描文档查找$(‘#container’),并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。

为什么.delegate()要比.live()好用?

$('a').live('click', function() { blah() });
// 或者
$(document).delegate('a', 'click', function() { blah() });

后者实际上要快过前者,因为前者首先要扫描整个的文档查找所有的$(‘a’)元素,把它们存成jQuery对象。

.on()

// Bind
$( "#members li a" ).on( "click", function( e ) {} ); 
$( "#members li a" ).bind( "click", function( e ) {} ); 


// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} );   //注意子元素参数位置
$( "#members" ).delegate( "li a", "click", function( e ) {} );

live方法被废弃

on事件绑定把上面三种方法统一了,用起来更方便