jQuery

什么是jQuery

jQuery是一套Javascript脚本库.  在我的博客中可以找到"Javascript轻量级脚本库"系列文章. Javascript脚本库类似于.NET的类库, 我们将一些工具方法或对象方法封装在类库中, 方便用户使用.

注意jQuery是脚本库, 而不是脚本框架. "库"不等于"框架", 比如"System程序集"是类库,而"ASP.NET MVC"是框架. jQuery并不能帮助我们解决脚本的引用管理和功能管理,这些都是脚本框架要做的事.

脚本库能够帮助我们完成编码逻辑,实现业务功能. 使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅, 更加健壮. 同时网络上丰富的jQuery插件也让我们的工作变成了"有了jQuery,天天喝茶水"--因为我们已经站在巨人的肩膀上了.

创建一个ASP.NET MVC项目时, 会发现已经自动引入了jQuery类库. jQuery几乎是微软的御用脚本库了!完美的集成度和智能感知的支持,让.NET和jQuery天衣无缝结合在一起!所以用.NET就要选用jQuery而非Dojo,ExtJS等.

jQuery有如下特点:
1.提供了强大的功能函数

使用这些功能函数, 能够帮助我们快速完成各种功能, 而且会让我们的代码异常简洁.
2.解决浏览器兼容性问题

javascript脚本在不同浏览器的兼容性一直是Web开发人员的噩梦,  常常一个页面在IE7,Firefox下运行正常, 在IE6下就出现莫名其妙的问题. 针对不同的浏览器编写不同的脚本是一件痛苦的事情. 有了jQuery我们将从这个噩梦中醒来, 比如在jQuery中的Event事件对象已经被格式化成所有浏览器通用的, 从前要根据event获取事件触发者, 在ie下是event.srcElements 而ff等标准浏览器下下是event.target. jQuery则通过统一event对象,让我们可以在所有浏览器中使用event.target获取事件对象.
3.实现丰富的UI

jQuery可以实现比如渐变弹出, 图层移动等动画效果, 让我们获得更好的用户体验. 单以渐变效果为例, 从前我自己写了一个可以兼容ie和ff的渐变动画, 使用大量javascript代码实现, 费心费力不说, 写完后没有太多帮助过一段时间就忘记了. 再开发类似的功能还要再次费心费力. 如今使用jQuery就可以帮助我们快速完成此类应用.

jQuery中为我们提供了很多有用的方法和属性，自己总结的一些常用的函数，方法。

事件处理

ready(fn)

代码：

     $(document).ready(function(){
       // Your code here...    
 })； 

作用：它可以极大地提高web应用程序的响应速度。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

bind(type,[data],fn)

代码：

     $("p").bind("click", function(){ 
      alert( $(this).text() );  
   }); 

作用：为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。起到事件监听的作用。

toggle(fn,fn)
代码：
 

        $("td").toggle( 
      function () {
     $(this).addClass("selected"); 
      },       
function () {
     $(this).removeClass("selected");
       }     
);     

作用：每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。挺有趣的一个函数，在动态实现某些功能的时候可能会用到。

(像click(),focus(),keydown()这样的事件这里就不提了，那些都是开发中比较常用到的。)


外观效果

addClass(class)和removeClass(class)

代码： 

 $(".stripe tr").mouseover(function(){
         $(this).addClass("over");})
.mouseout(function(){        
$(this).removeClass("over");})     
});     也可以写成：    
$(".stripe tr").mouseover(function() { 
$(this).addClass("over") });     
$(".stripe tr").mouseout(function() { 
$(this).removeClass("over") });

作用：为指定的元素添加或移除样式，从而实现动态的样式效果，上面的实例中实现鼠标移动双色表格的代码。

css(name,value)

代码：

    $("p").css("color","red");


作用：很简单，就是在匹配的元素中，设置一个样式属性的值。这个个人感觉和上面的addClass(class)有点类似。

slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown()

代码：
    
 

   $("#btnShow").bind("click",function(event){ $("#divMsg").show() });     
$("#btnHide").bind("click",function(evnet){ $("#divMsg").hide() });

作用：jQuery中提供的比较常用的几个动态效果的函数。还可以添加参数：show(speed,[callback])以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。

animate(params[,duration[,easing[,callback]]])


作用：制作动画效果用到的函数，功能非常的强大，可以连续使用此函数。

查找筛选

map(callback)
HTML 代码:

     <p><b>Values: </b></p>     
<form>       
<input type="text" name="name" value="John"/>      
 <input type="text" name="password" value="password"/>       
<input type="text" name="url" value="http://ejohn.org/%22/>     
</form>

jQuery 代码:

    $("p").append( $("input").map(function(){      
 return $(this).val();    
 }).get().join(", ") ); 

结果:
[ <p>John, password, http://ejohn.org/%3C/p> ]

 
作用：将一组元素转换成其他数组（不论是否是元素数组）你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立。

find(expr)

HTML 代码:

<p><span>Hello</span>, how are you?</p>
jQuery 代码:

 $("p").find("span")

结果:

[ <span>Hello</span> ]


作用：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

文档处理

attr(key,value)
HTML 代码:

    <img/><img/>
jQuery 代码:

$("img").attr("src","test.jpg");

作用：取得或设置匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。在控制HTML标记上是必备的工具。


html()/html(val)
HTML 代码:

    <div><p>Hello</p></div>
jQuery 代码:

 $("div").html();

结果:
<p>Hello</p>


作用：取得或设置匹配元素的html内容，同类型的方法还有text()和val()。前者是取得所有匹配元素的内容。，后者是获得匹配元素的当前值。三者有相似的地方常用在内容的操作上。

wrap(html)
HTML 代码:

    <p>Test Paragraph.</p>
jQuery 代码:

$("p").wrap("<div class='wrap'></div>");

结果:
<div class="wrap"><p>Test Paragraph.</p></div>

 
作用：把所有匹配的元素用其他元素的结构化标记包裹起来。
这种包装对于在文档中插入额外的结构化标记最有用，而且它不会破坏原始文档的语义品质。 可以灵活的修改我们的DOM。

empty()
HTML 代码:

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

jQuery 代码:

    $("p").empty();
结果:
<p></p>


作用：删除匹配的元素集合中所有的子节点。