初识JQuery

jQuery简介

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

jQuery能做什么

        访问和操作DOM元素
        控制页面样式
        对页面事件进行处理
        扩展新的jQuery插件
        与Ajax技术完美结合
​
注意：jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率，减少代码量

jQuery的优势

   体积小，压缩后只有100KB左右
   强大的选择器
   出色的DOM封装
   可靠的事件处理机制
   出色的浏览器兼容性
   使用隐式迭代简化编程
   丰富的插件支持

jQuery库文件

jQuery库分为：开发版和发布版
    名称                          大小                          说明
jquery-1.版本号.js(开发版)        约286KB              完整无压缩版本，主要用于测试、学习和开发
​
jquery-1.版本号.min.js(发布版)    约94.8KB             经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目
​
在页面中引入jQuery库文件
<script src="js/jquery-1.12.4.js" type="text/javascript"></script>

jQuery基本语法

<script>
     $(document).ready(function() { 	//为页面加载事件绑定方法 
        alert("Hello jQuery!");
    });
</script>

$(document).ready()与window.onload()的异同

	window.onload()	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行	网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容(图片、flash、视频等）并没有加载完
编写个数	同一页面不能同时编写多个	同一页面能同时编写多个
简化写法	无	$(function(){/执行代码);

jQuery语法结构

语法：
    $(selector).action() ; 

组成	说明	作用
$()	工厂函数	将DOM对象转化为jQuery对象
selector	选择器	获取需要操作的DOM 元素
action()	方法	jQuery中提供的方法，其中包括绑定事件处理的方法

jQuery操作页面元素

使用addClass( )方法为元素添加样式：
    语法：
        jQuery 对象.addClass([class名]);
    示例：
        $("h1").addClass("abc"); 
    
使用css( )方法设置元素样式：
    语法：
        css("属性","属性值") ; //设置一个CSS属性
        css({"属性1":"属性值1","属性2":"属性值2"...}) ; //同时设置多个CSS属性
    示例：
        $(this).css({"background":"#c81623"});
​
使用show( )、hide( ) 方法设置元素的显示和隐藏：
    语法：
        $(selector).show( );
        $(selector).hide( );
    示例：
        $(".abc").show( );
        $("p").hide( );

jQuery代码风格

“$”等同于“ jQuery ”
        $(document).ready()=jQuery(document).ready()
        $(function(){...})=jQuery (function(){...})      

链式操作

对一个对象进行多重操作，并将操作结果返回给该对象
​
示例：
     $("h2").css("background-color","#ccffff").next().css("display","block");

隐式迭代

在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用,这就叫做隐式迭代
 
示例：$("h2").css("background-color","#ccffff").next().css("display","block");

DOM模型

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

DOM对象和jQuery对象

DOM对象：直接使用JavaScript获取的节点对象
        var objDOM=document.getElementById("title"); 
        var objHTML=objDOM.innerHTML;  
​
jQuery对象：使用jQuery包装DOM对象后产生的对象，它能够使用jQuery中的方法
        $("#title").html( );===document.getElementById("title").innerHTML; 
​
注意： DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

DOM对象转jQuery对象

 使用$()函数进行转化：$(DOM对象)
var txtName =document.getElementById("txtName");  //getElementById是DOM对象
var $txtName =$(txtName);  //$(txtName)是jQuery对象
    
注意：
    jQuery对象命名一般约定以$开头
    在事件中经常使用$(this)，this是指触发该事件的对象

jQuery对象转DOM对象

jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象
         var $txtName =$ ("#txtName");      //jQuery对象
         var txtName =$txtName[0];           //DOM对象
    
通过get(index)方法得到相应的DOM对象
        var $txtName =$("#txtName");        //jQuery对象
        var txtName =$txtName.get(0);       //DOM对象

siblings() 方法返回被选元素的所有同级元素。

初识jQuery总结

 jQuery简介：  
            jQuery的用法
            jQuery的优势
            jQuery的配置环境
​
 jQuery语法:
            jQuery的语法结构：工厂函数、选择器和方法
            jQuery方法的应用
                        addClass( )方法、css( )方法
                        show( )、hide( )方法
                        next()方法
            jQuery程序的代码风格
                        “$”的使用
                        链式操作
                        隐式迭代
DOM对象和jQuery对象：
            DOM对象
            jQuery对象
            jQuery对象与DOM对象的相互转换