现在的位置: 首页 > 综合 > 正文

jQuery入门(2):核心(核心函数,对象访问,多库共存)

2012年12月30日 ⁄ 综合 ⁄ 共 4978字 ⁄ 字号 评论关闭

核心(核心函数,对象访问,多库共存)

注:其中jQuery()可替换为快捷方式$(),如果$被其它对象占用,可使用jQuery.noConflict()函数取消快捷方式。

核心函数

$(expr,[context])/jQuery(expression,[context])
该函数可以通过css选择器,Xpath或html代码来匹配目标元素,所有的jQuery操作都以此为基础
expression (String)用来查找的字符串,context(Element, jQuery)(可选)作为待查找的DOM元素集、文档或 jQuery 对象。
例子
<p>one</p>
<div><p>two</p></div>
<
p>three</p>
 
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:

function jq(){  
    alert($("div>p").html());  
}

当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容

function jq(){
    $("<div><p>Hello</p></div>").appendTo("body");
}

当点击id为test的元素时,向body中添加<div><p>Hello</p></div>

 

context

在文档的第一个表单中,查找所有的单选按钮(即: type 值为 radio 的 input 元素)。 $("input:radio", document.forms[0]);

在一个由 AJAX 返回的 XML 文档中,查找所有的 div 元素。$("div", xml.responseXML);


$(elem)

限制jQuery作用于一个特定的dom元素,这个函数也接受xml文档和windows对象
 elem:通过jQuery对象压缩的DOM元素
例子
<p>one</p>

<div><p>two</p></div>

<p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能:

function jq(){
    alert($(document).find("div>p").html());
}

当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容

function jq(){
   $(document.body).background("black");
}

运行:当点击id为test的元素时,背景色变成黑色


$(elems)
限制jQuery作用于一组特定的DOM元素
 elem:一组通过jQuery对象压缩的DOM元素
例子
<form
 id="form1">
<input type="text" name="textfield">
<input type="submit" name="Submit" value="提交">
</form>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能:

function jq(){ 
   $(form1.elements).hide(); 
}

当点击id为test的元素时,隐藏form1表单中的所有元素。


$(fn)/jQuery(callback)
$(document).ready()的简写,当文档全部载入时执行函数。可以有多个$(fn)当文档载入时,同时执行所有函数!
fn(Function):当文档载入时执行的函数!
例子

$(function() {

    alert($(document.body).html());

});

当文档载入时背景变成黑色,相当于onLoad。


$(obj)
复制一个jQuery对象
obj (jQuery): 要复制的jQuery对象
例子
<p>one</p>
<div><p>two</p></div>
<p>three</p>
<a
 href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能:

function jq(){
    var f = $("div"); 
    alert($(f).find("p").html()) 
}

当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容。

$("<input>").attr("type", "checkbox");// 在IE中无效:微软规定 <input>元素的type只能写一次

$("<input type='checkbox'>");// 在IE中有效:

 

对象访问


each(callback)
以每一个匹配的元素作为上下文来执行一个函数。每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素)。在每次执行函数时,都会给函数传递一个表示作为执行环境的元素在匹配的元素集合中所处位置的数字值作为参数(从零开始的整形)。返回 'false' 将停止循环(就像在普通的循环中使用'break')。返回 'true' 跳至下一个循环(就像在普通的循环中使用'continue')。

对于每个匹配的元素所要执行的函数

例子

<img/><img/>

jQuery代码

$("img").each(function(i){

   this.src = "test" + i + ".jpg";

 });

结果:<img src="test0.jpg" /><img src="test1.jpg" /> 

 

可以使用 $(this) 函数得到 jQuery对象。

jQuery 代码:

$("img").each(function(){

 $(this).toggleClass("example");

});

 

可以使用 'return' 来提前跳出 each() 循环。

<button>Change colors</button>

<span></span><div></div><div></div><div></div> <div></div><div id="stop">Stop here</div><div></div><div></div><div></div>

jQuery代码

$("button").click(function () {

     $("div").each(function (index, domEle) {

      // domEle == this

      $(domEle).css("backgroundColor", "yellow"); 

      if ($(this).is("#stop")) {

          $("span").text("Stopped at div index #" + index);

          return false;

      }

     });

});


eq(pos)
减少匹配对象到一个单独得dom元素
pos (Number): 期望限制的索引,从0开始
例子
<p>This
 is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能:

function jq(){
    alert($("p").eq(1).html())
}

当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容


get()/get(num)
获取匹配元素,get(num)返回匹配元素中的某一个元素
get(Number): 期望限制的索引,从0开始
例子
<p>This
 is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能:

function jq(){
    alert($("p").get(1).innerHTML);
}

当点击id为test的元素时,alert对话框显示:So is this,即第二个<p>标签的内容

注意get和eq的区别,eq返回的是jQuery对象,get返回的是所匹配的dom对象,所有取$("p").eq(1)对象的内容用jQuery方法html(),而取$("p").get(1)的内容用innerHTML


index(obj)
返回对象索引,如果找到了匹配的元素,从0开始返回;如果没有找到匹配的元素,返回-1。
obj(Object)要查找的对象
例子
<div
 id="test1"></div>
<div id="test2"></div>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能:

function jq(){
    alert($("div").index(document.getElementById('test1')));
    alert($("div").index(document.getElementById('test2')));
}

当点击id为test的元素时,两次弹出alert对话框分别显示0,1


size()/Length
jQuery对象中元素的个数,与jQuery对象的'length' 属性一致。

例子
<img
 src="test1.jpg"/>
<img src="test2.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>

jQuery代码及功能:

function jq(){
    alert($("img").length);
}

当点击id为test的元素时,弹出alert对话框显示2,表示找到两个匹配对象 

 

多库共存

 

jQuery.noConflict()

运行这个函数将变量$的控制权让渡给第一个实现它的那个库。

这有助于确保jQuery不会与其他库的$对象发生冲突。在运行这个函数后,就只能使用jQuery变量访问jQuery对象。例如,在要用到$("div p")的地方,就必须换成jQuery("div p")。

示例

jQuery.noConflict();

jQuery("div p").hide();// 使用 jQuery

$("content").style.display = 'none'; // 使用其他库的 $()

 

恢复使用别名$,然后创建并执行一个函数,在这个函数的作用域中仍然将$作为jQuery的别名来使用。在这个函数中,原来的$对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效。

jQuery.noConflict();

(function($) {

 $(function() {

    //使用 $ 作为 jQuery 别名的代码

 });

})(jQuery);

// 其他用 $ 作为别名的库的代码

 

创建一个新的别名用以在接下来的库中使用jQuery对象。

var j = jQuery.noConflict();

j("div p").hide();// 基于 jQuery 的代码

$("content").style.display = 'none'; // 基于其他库的 $() 代码


jQuery.noConflict(extreme)

将$和jQuery的控制权都交还给原来的库。用之前请考虑清楚!

这是相对于简单的 noConflict 方法更极端的版本,因为这将完全重新定义jQuery。这通常用于一种极端的情况,比如你想要将jQuery嵌入一个高度冲突的环境。注意:调用此方法后极有可能导致插件失效。

extreme (Boolean):传入true来允许彻底将jQuery变量还原

 

完全将jQuery移到一个新的命名空间。

var dom = {};

dom.query = jQuery.noConflict(true);

结果:

dom.query("div p").hide();// 新 jQuery 的代码

$("content").style.display = 'none';// 另一个库 $() 的代码

jQuery("div > p").hide(); // 另一个版本 jQuery 的代码

 

抱歉!评论已关闭.