首页   /   JS,DOM   /   jQuery_01_Base

内容

源码CDN

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>

选择器

$(this)               //当前 HTML 元素
$("p")                //所有 <p> 元素
$("p.intro")          //所有 class="intro" 的 <p> 元素
$(".intro")           // 所有 class="intro" 的元素
$("#intro")           // id="intro" 的元素
$("ul li:first")      // 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")   // 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")  // id="intro" 的 <div> 元素中的所有 class="head" 的元素
$("h1,h2,p")          // 例:多操作

事件

$(document).ready(function)    // 将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function)    // 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) // 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)    // 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)// 触发或将函数绑定到被选元素的鼠标悬停事件

同时使用 jQuery 和其他框架(noConflict() 方法)

通过noConflict()方法会释放会 $ 标识符的控制,这样其他脚本就可以使用它了。

$.noConflict();
jQuery(document).ready(function(){
    jQuery("button").click(function(){
        jQuery("p").text("jQuery 仍在运行!");
    });
});

您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用,您可以把它存入变量,以供稍后使用。请看这个例子:

var jq = $.noConflict();
jq(document).ready(function(){
    jq("button").click(function(){
        jq("p").text("jQuery 仍在运行!");
    });
});

如果你的 jQuery 代码块使用 $ 简写,并且您不愿意改变这个快捷方式,那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外,依旧不得不使用 "jQuery":

$.noConflict();
jQuery(document).ready(function($){
    $("button").click(function(){
        $("p").text("jQuery 仍在运行!");
    });
});