开始使用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。示例加说明如下：

Code
<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"。

转载于:https://www.cnblogs.com/gboxcc/archive/2009/02/16/1391510.html