JQuery学习笔记（一）

初学者JQuery学习笔记

参考菜鸟教程http://www.runoob.com/jquery/jquery-intro.html，和《锋利的JQuery》

jQuery是一个JavaScript函数库。是目前最流行的 JS 框架，而且提供了大量的扩展。

 

安装：下载，或者使用CDN

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

 

语法： $(selector).action()     比如：$("#test").hide() 

 

如果在文档没有完全加载之前就运行JQuery代码，操作可能失败，所以要在文档加载完成后运行函数。

$(document).ready(function(){

   // jQuery methods go here...

});

或者

$(function(){

   // jQuery methods go here...

});

 

JQuery选择器：

JQuery选择器完全继承了CSS的风格，写法十分简洁，处理机制完善。

如果html没有id为XX的元素，使用getElementById会报错，而使用$(\'#xx\')获取元素，则不需要判断是否存在。

但是当判断元素是否存在是，由于$(\'#xx\')获取的是对象，不能if($(\'#xx\')),而是if($(\'#xx\').length>0)或者转化为DOM对象判断if($(\'#xx\')[0])。

 

常见事件：

 

触发点击事件：

$("p").click(function(){
  // action goes here!!
});

Mousedown和click的区别：click事件包含了Mousedown与MouseUp

 

同样，hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

$(document).ready(function(){
  $("#p1").hover(function(){
    alert("You entered p1!");
    },
    function(){
    alert("Bye! You now leave p1!");
  }); 
});