关于jQuery中的$

阿良

大家说说$有什么用途？我先说，可以换￥。
那jQuery里面的$呢？
在jQuery里面，$是jQuery的一个别名，为什么用$呢？这个在Prototype里面也用啊？如果同时加了这两个框架，他们就会打架，你想用jQuery的$，却是Prototype里面的$，哎，被忽悠了，伤不起啊。
如何避免jQuery和Prototype（或者其它，没办法啊，大家都爱$）争抢$呢？
一、$争夺战
如何避免这种情况？这有两个方法：
１、先引入Prototype，再引入jQuery
　　但这样Prototype的$就不见啦，怎么办？看jQuery的源代码，开始部分有一句_$ = window.$，原来jQuery把先到的$存储起来了。所以，你可以用_$来使用Prototype（或其它框架的$），如果不喜欢这样的话，你可以使用noConflict方法给jQuery的$起个别名：var $j = jQuery.noConflict(); 这样$就还给Prototype了，jQuery就用 $j 。
２、先引入jQuery，jQuery就用jQuery
　　jQuery不和你们争了，你们爱$，就送给你们吧。我还是用自己的jQuery——但这样不爽啊，怎么办？用闭包把$关起来：

1. jQuery(function($){
   
2.   // 这里继续用jQuery的$
   
3. });

复制代码

个人推荐第二种方法
好了，$争夺战到此结束。

二、正题：$的用途
查看API，得出$有如下用途（上文说过，$就是jQuery）
１、jQuery(callback)
２、jQuery(elements)
３、jQuery(expression, [context])
４、jQuery(html, [props])
５、jQuery(html, [ownerDocument])

下面来一一讲解：
１、在上文就讲过jQuery(callback)的用法，其实，这是jQuery(document).ready(fn)的简写

２、jQuery(elements)，这里实现的功能是转换对象，常见的使用场合是在事件处理方法里面将this转换成jQuery对象
这也是很多朋友容易搞混淆的地方，分不清HTMLElement对象和jQuery对象，以后就要注意了。

1. jQuery(function($) {
   
2.   $('a').click(function() {
   
3.     var $this = $(this);  // 使用$将this转换成jQuery对象
   
4.     alert('点击的a的链接是（使用HTMLElement属性）：' + this.href);  // this是HTMLElement，所以能获得原始的属性，href
   
5.     alert('点击的a的链接是（使用jQuery的attr方法）：' + $this.attr('href'));  // $this是jQuery对象，所以可以使用attr方法。
   
6.     /* 错误的用法
   
7.     alert(this.attr('href')); // error
   
8.     alert($this.href); // error
   
9.     */
   
10.   });
    
11. });

复制代码

３、这个是大家最熟悉的了，就是CSS1-3选择器。
但大家常常忽略了[context]，这是查找范围，如果忽略的话，就是从document查找的。你可以试一下输出$('#anything').context
说白了，这就是$(context).find(expression)的简写，看jQuery的源代码也可以得出这点：

1. // 选自jQuery1.3.2
   
2. // HANDLE: $(expr, [context])
   
3. // (which is just equivalent to: $(content).find(expr)
   
4. } else return jQuery(context).find(selector);

复制代码

另外，关于id（或其它属性）里面含有特殊字符的，据《锋利的jQuery》所说的，在1.3.0和之前，可以使用转义（比如：$('#\\.a')选择id=.a的element，没试）
现在推荐大家这么选：

1. $('[id="form.login"]', '#formID');
   
2. /*
   
3. 注意id=""，后面有双引号，我习惯用单引号做外层，原因是构造JSON String方便
   
4. jsonstring = '{"key" : "value"}';
   
5. */

复制代码

４、根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素。
你可以传递一个手写的 HTML 字符串，或者由某些模板引擎或插件创建的字符串，也可以是通过 AJAX 加载过来的字符串。但是在你创建 input 元素的时会有限制，可以参考第二个示例。当然这个字符串可以包含斜杠 (比如一个图像地址)，还有反斜杠。当你创建单个元素时，请使用闭合标签或 XHTML 格式。例如，创建一个 span ，可以用 $("<span/>") 或 $("<span></span>") ，但不推荐 $("<span>")

【可选参数props】是同时设置一系列的属性、事件等

1. /*
   
2. 示例
   
3. 动态创建一个 div 元素（以及其中的所有内容），并将它追加到 body 元素中。在这个函数的内部，是通过临时创建一个元素，并将这个元素的 innerHTML 属性设置为给定的标记字符串，来实现标记到 DOM 元素转换的。所以，这个函数既有灵活性，也有局限性。
   
4. */
   
5. $("<div>", {
   
6. "class": "test",
   
7. text: "Click me!",
   
8. click: function(){
   
9.    $(this).toggleClass("test");
   
10.   }
    
11. }).appendTo("body");

复制代码

1. // 创建一个 <input> 元素，同时设定 type 属性、属性值，以及一些事件。
   
2. $("<input>", {
   
3.   type: "text",
   
4.   val: "Test",
   
5.   focusin: function() {
   
6.     $(this).addClass("active");
   
7.   },
   
8.   focusout: function() {
   
9.     $(this).removeClass("active");
   
10.   }
    
11. }).appendTo("form");

复制代码

好吧，我偷懒了，这节是从1.4.2API摘的，另外加上一个“雕虫小技”：解析AJAX获取的HTML片段，并获取其中元素的属性

1. var responseHTML = '<input id="ok" value="okValue" />';
   
2. alert(
   
3.   $(  // #1
   
4.     '#ok',
   
5.     $(responseHTML)  // 构造HTML，返回jQuery对象，作为#1的context
   
6.   ).attr('value')
   
7. );
   
8. // 获取id=ok的value

复制代码

５、和４差不多、另外，我也看不到有什么区别，囧
不过，在API的例子中里面看到一点，值得大家注意的地方：

1. // 创建一个 <input> 元素必须同时设定 type 属性。因为微软规定 <input> 元素的 type 只能写一次。
   
2. // 在 IE 中无效:
   
3. $("<input>").attr("type", "checkbox");
   
4. // 在 IE 中有效:
   
5. $("<input type='checkbox'>");

复制代码

海威

先顶再说消灭零回复

king

清风

支持良哥 ···

宁静致远

哦。。不错。。呵呵 有时间的时候来看一下学习一下

阿良

宁静致远 发表于 2011-7-13 08:57
哦。。不错。。呵呵 有时间的时候来看一下学习一下

还没看就回复了？

hjzhbb7758

拿东西 灌水