Tag Archives: jquery

Hello World 幻界杂谈 点点滴滴

jQuery()方法的第二个参数

jquery框架的神奇之处在于,即便是对于我这种以“精通jquery”自居的人(嘿嘿),每次在看文档时,仍然能有新的发现,比如今天,就发现$(xxx)方法,其实还可以有第二个参数,并且随着第一个参数的不同,第二个参数还有不同的含义:

1.  $(selector, [context])

这种用法,相当于 $(context).find(selector) 或者 context.find(selector)

2. jQuery(html, [ownerDocument])

文档对ownerDocument的解释是:“创建DOM元素所在的文档

也就是说,如果你要编写挎document的脚本,比如iframe或者用window.open开一个新窗口,可能会用得着它

3. jQuery(html, props)

这个比较简单,直接把文档里的例子贴出来了:

$("<input>", {
type: "text",
val: "Test",
focusin: function() {
$(this).addClass("active");
},
focusout: function() {
$(this).removeClass("active");
}
}).appendTo("form")

也就是说,props内的属性会像.attr()方法一样,被设置到新创建的标签内

注:IE总不能通过.attr()设置input的type属性
----------
参考:http://www.w3school.com.cn/jquery/core_jquery.asp#syntax1

Hello World

jquery unbind不能用于live

刚发现使用jquery时容易犯的一个错误:使用unbind解绑live注册的事件,应该使用die进行解绑

关于unbind与bind,请参考这里:http://www.jiangkunlun.com/2011/03/jquery_bind_unbind/

die与live的用法如下:

<button id="theone">Does nothing...</button>
<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div style="display:none;">Click!</div>
<script>
function aClick() {
  $("div").show().fadeOut("slow");
}
$("#bind").click(function () {
  $("#theone").live("click", aClick)
              .text("Can Click!");
});
$("#unbind").click(function () {
  $("#theone").die("click", aClick)
              .text("Does nothing...");
});
</script>

———–

Hello World

stop!

jquery的animate方法可以创建各种炫酷的动画效果,但是,有些时候,我们却需要停止正在运行的动画,此时,就需要用到stop方法,使用方法非常简单,以下是jquery官方文档中的内容:

/* Start animation */
$("#go").click(function(){
  $(".block").animate({left: '+=100px'}, 2000);
});
/* Stop animation when button is clicked */
$("#stop").click(function(){
  $(".block").stop();
});

即要停止谁的动画就让谁“stop”,而不用取区分具体正在运行的是什么动画

Hello World

jquery1.6以后attr()方法的变化

下午做了一个控制textarea的功能,在测试页面里表现很好,挪到使用环境里就不行了,“attr(‘scrollHeight’)”总是返回undefined~~~~开始以为是两边css不一样的问题,某个css样式影响了scrollHeight属性,删掉多余的css,不行;后来以为是使用环境里的其他js的影响,于是去掉其他所有的js,还是不行~~~折腾了一个多小时,百思不得其解之时,去了趟wc,突然就开窍了~~~之前看过jquery版本变化时,貌似提到一些方法发生了变化:测试页面用的是1.4,而使用环境用的时1.6~~~于是将使用环境的暂时变成1.4,成功!!
查了一下,是jquery1.6以后的attr方法有了变化,我这里用到了“attr(‘scrollHeight’)”,到了1.6,需要使用“prop(‘scrollHeight’)”才能取到。于是把jquery换回1.6,把attr换成prop,功能正常了。

Hello World

jquery模板方法

偶然发现了jquery模板方法tmpl(),看起来还不错:

<ul id="movieList"></ul>
<script id="movieTemplate" type="text/x-jquery-tmpl">
    <li><b>${Name}</b> (${ReleaseYear})</li>
</script>
<script type="text/javascript">
    var movies = [
        { Name: "The Red Violin", ReleaseYear: "1998" },
        { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
        { Name: "The Inheritance", ReleaseYear: "1976" }
    ];
    $( "#movieTemplate" ).tmpl( movies )
         .appendTo( "#movieList" );
</script>

转自:http://api.jquery.com/tmpl/