开始使用jQuery(二) - Write Less

    JQuery的口号是"write less,do more",而且JQuery竟然真的在沿着这个方向努力,这一点挺不社会主义的,所以开始时我们多少会有些不适应,但在使用jQuery简单的重写了之前的一些代码之后,我觉得JQuery真的不需要花很大的功夫去学,因为JQuery其实还应该有一句口号:"easy to use",如果你现在还没有使用JQuery,多半是因为你压根就没想过使用它或者是把它想得太难。
    在上一篇中,我们已经能够使用$("#id")的方式让jQuery帮我们找id对应的HTML Element了,然后通过Debug知道$("#id")返回的jQuery对象包含一组方法,可以进一步的来简化我们的代码,所以今天继续我们的"write less"之旅。
    1.html方法,在上一篇中我们已经接触到了html方法,其功能就是获取和设置HTML Element对象的innerHTML属性值,因为要获取和设置,所以该方法提供了2个重载。示例如下:
<div id="demo"></div>
<script type="text/javascript">
  $(
"#demo").html("abc");
  alert($(
"#demo").html());
</script>
    2.text方法,同html方法一样,有2个重载,用来获取和设置innerText属性。
    3.val方法,用来获取和设置具有value属性的HTML Element,像input,select option,checkbox,radio。val方法不仅提供了类似于html,text的获取和设置的重载,还提供了一个可以用来select/check多个HTML Element的方法,这个方法需要一个集合参数,里面包含所有你需要select/check的HTML Element的name,注意是name不是id,而且这些HTML Element必须在jQuery的集合列表中。示例如下:
<input type="checkbox" name="checkboxname" value="check1"/> check1
<input type="checkbox" name="checkboxname" value="check2"/> check2
<input type="radio"  name="r" value="radio1"/> radio1
<input type="radio"  name="r" value="radio2"/> radio2
<script type="text/javascript">
/*这里我们没有用#id的方式,而是指定了一个element name,在上一章中我也提到过jquery支持很多种参数类型,并通过很多辅助符合加以区分,对于element name这样的参数,jQuery将查找当前文档种所有对应的element,在本例中最后返回的jQuery对象中也将包含一个所有input element的集合。*/
$(
"input").val(["check1","check2""radio1" ]);
</script>
    4....,针对HTML Element的每个属性,jQuery都提供一个对应的方法吗?当然不是,不要忘了jQuery诞生的原因:懒,其实作者最初只提供了一个方法来获取和改变Element的属性,那就是attr方法,上面三个是因为过于常用,作者额外提供的而已,懒人终究还是懒人。
    attr方法有4个重载。1个get,3个set。示例加说明如下:

<div id="demo">I'm inner HTML and Text</div>
<script type="text/javascript">
alert($(
"#demo").attr("offsetHeight")); //1 get
alert($("#demo").attr("innerHTML")); //equal $("#demo").html()
$("#demo").attr("innerHTML","342342"); // 1 set,直接给某个属性赋值
$("#demo").attr({innerHTML:"aaaaaa",title:"hahaha"}); //2 set,同时给多个有效属性赋值
$("#demo").attr("innerHTML",function(){return "bbbbbb"+ this.id;}); //3 set,指定一个function的返回值
alert($("#demo").html());
</script>


今天就到这,通过一些jQuery提供的方法我们能够"write less",而且除了$("#id"),我们现在还会通过$("element")找HTML Element,继续在使用中学习,期待"do more"。

posted @ 2009-02-16 14:30  盒子  阅读(528)  评论(0编辑  收藏  举报