JQuery

jQuery简介

1. jQuery由美国人John Resig于2006年创建
2. jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装
3. 它的设计思想是write less,do more

初识jQuery

              示例

              

jQuery的应用

           jQuery与其他JavaScript库

           jQuery

           Bootstrap

           Zepto

           Ext

           YUI

          

jQuery能做什么

1. 访问和操作DOM元素
2. 控制页面样式
3. 对页面事件进行处理
4. 扩展新的jQuery插件
5. 与Ajax技术完美结合

 

提示

jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率

 

 

jQuery的优势

体积小，压缩后只有100KB左右

强大的选择器

出色的DOM封装

可靠的事件处理机制

出色的浏览器兼容性

使用隐式迭代简化编程        //可以一直点“.”下去

丰富的插件支持

 

 

获取jQuery

             

jQuery库文件

  jQuery库分开发版和发布版

             

             

1. 在页面中引入jQuery

 

jQuery基本语法

使用jQuery弹出提示框

         示例

                

$(document).ready()

              $(document).ready()与window.onload类似，但也有区别

              

jQuery语法结构

              语法       $(selector).action() ;

 

            工厂函数$()：将DOM对象转化为jQuery对象

            选择器 selector：获取需要操作的DOM 元素

            方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

 

addClass( )方法          //追加样式类别并保存原有的类别

              语法       jQuery 对象.addClass([样式名]);

              示例:

                     $("#current").addClass("current");     

                     

css( )方法

              

设置元素的显示和隐藏

              语法       $(selector).show( );

$(selector).hide( );

 

              示例:

                            $(".nav-top").show( );

$("p").hide( );

 

jQuery代码风格

  “$”等同于“ jQuery ”

                            $(document).ready()=jQuery(document).ready()

$(function(){...})=jQuery (function(){...})     

链式操作

隐式迭代

 

 

链式操作

对一个对象进行多重操作，并将操作结果返回给该对象

示例:

         $("h2").css("background-color","#ccffff").next().css("display","block");

          //next()：取回匹配该选择器的下一个同胞元素

          

隐式迭代

              示例:

                    $(document).ready(function() {

                 $("li").css({"font-weight":"bold","color":"red"});

                   });

                   

添加注释

                  

浏览器把HTML文档的元素转换成节点对象，所有节点组成了一个树状结构

                  

DOM对象和jQuery对象

            DOM对象：直接使用JavaScript获取的节点对象

            

            jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用

            

          

          提示:

          DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

 

DOM对象转jQuery对象

                     使用$()函数进行转化：$(DOM对象)

                                   var txtName =document.getElementById("txtName");

var $txtName =$(txtName); 

注意

       jQuery对象命名一般约定以$开头

在事件中经常使用$(this)，this是触发该事件的对象

 

jQuery对象转DOM对象         //JQuery其实是个数组

              jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM

              

               通过get(index)方法得到相应的DOM对象

                

 

总结