jQuery基础体验

一、简介

      优秀的Js框架，使页面上控制文档、处理事件、实现特效、添加Ajax交互更简单快速。

 

二、使用方法

      在需要用到jQuery的地方引入jQuery相应版本的开发包。

      HTML代码：

      <script. type="text/javascript" src="js/jquery.js"></script>

       jQuery针对不同的功能还有很多的包，可以按需要逐个添加。

 

      推荐两篇不错的jquery教程：《jQuery的起点教程》和《使用 jQuery 简化 Ajax 开发》

 

三、语法总结与注意事项

      1、页面元素引用

       jQuery的$()操作符可以通过id、class、元素名、元素层次关系、dom等等方式来快捷访问页面元素，而且返回的都是jQuery对象，不能直接调用dom定义的方法。

      2、dom对象与jQuery对象的互换

      jQuery对象与dom对象的操作使有区别的，操作时要注意！普通的dom对象一般可以用$()转换为jQuery对象。

      eg:

             $(document.getElementById("msg"))  

      因为jQuery对象是一个集合。所以jQuery对象要转换为dom对象则必须取出其中的某一项，一般时通过索引来达到目的的！

     eg：

             $("#msg")[0]，      $("div").eq(1)[0]，        $("div").get()[1]

      3、获得jQuery对象集合中的某一项

      如上面的例子，获得某一项可以采用索引、eq()、get()三种方法，要注意的时eq()返回的时jQury对象，get()和索引返回的是dom对象。

      4、多种实现set()、get()的函数

       eg:

1. $("#msg").html();    //返回id为msg的元素节点的html内容。   
2. $("#msg").html("<b>new content</b>");    
3. //将“<b>new content</b>” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content   
4.   
5. $("#msg").text();    //返回id为msg的元素节点的文本内容。   
6. $("#msg").text("<b>new content</b>");    
7. //将“<b>new content</b>” 作为普通文本串写入id为msg的元素节点内容中,页面显示粗体的<b>new content</b>   
8.   
9. $("#msg").height();    //返回id为msg的元素的高度   
10. $("#msg").height("300"); //将id为msg的元素的高度设为300   
11. $("#msg").width();    //返回id为msg的元素的宽度   
12. $("#msg").width("300"); //将id为msg的元素的宽度设为300   
13.   
14. $("input").val("); //返回表单输入框的value值   
15. $("input").val("test"); //将表单输入框的value值设为test   
16.   
17. $("#msg").click(); //触发id为msg的元素的单击事件   
18. $("#msg").click(fn); //为id为msg的元素单击事件添加函数 

      5、集合处理功能

       对jQuery返回的对象集合无需逐个处理。

       eg

1. $("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})    
2. //为索引分别为0，1，2的p元素分别设定不同的字体颜色。   
3.   
4. $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})    
5. //实现表格的隔行换色效果   
6.   
7. $("p").click(function(){alert($(this).html())})       
8. //为每个p元素增加了click事件，单击某个p元素则弹出其内容

      6、扩展我们需要的功能

           eg:

           定义自己的方法

         

1. $.extend({   
2. min: function(a, b){return a < b?a:b; },   
3. max: function(a, b){return a > b?a:b; }    
4. }); //为jquery扩展了min,max两个方法 

 

           调用自己的方法

           alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));   

 

 

       7、方法连写

        eg：

1. $("p").click(function(){alert($(this).html())})   
2. .mouseover(function(){alert('mouse over event')})   
3. .each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});  

       8、操作元素的样式

 

       eg:

1. $("#msg").css("background");    //返回元素的背景颜色   
2. $("#msg").css("background","#ccc") //设定元素背景为灰色   
3. $("#msg").height(300); $("#msg").width("200"); //设定宽高   
4. $("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式   
5. $("#msg").addClass("select"); //为元素增加名称为select的class   
6. $("#msg").removeClass("select"); //删除元素名称为select的class   
7. $("#msg").toggleClass("select"); //如果存在（不存在）就删除（添加）名称为select的class 

       9、事件处理

            jquery可以动态为html元素添加事件。

       eg:

          

1. $("#msg").click(function(){alert("good")}) //为元素添加了单击事件   
2. $("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})   
3. //为三个不同的p元素单击事件分别设定不同的处理