Jquery(一) 初识Jquery，简单使用Jquery。

1、什么是Jquery?

　　　　　　其实超级简单，不要把它想的太难了，Jquery就是一个js(javascript)类库。

　　　　　　　　1.一、什么是js类库？

　　　　　　　　　　[JavaScript库封装了不少预约义的对象和实用函数，来帮助使用者创建有高难度交互客户端页面，而且兼容各大浏览器]，看到这句话应该就知道了，通俗点讲，js类库就是别人将一些功能写好了封装成了函数，而咱们直接拿过来调用便可，这就是js类库。

　　　　　　　　1.二、什么是Jquery?

　　　　　　　　　　Jquery是js类库的一种，其优势有不少，百度一下基本上就知道了，这里将收集的一些大白话列举出来，看看便可。　　

　　　　　　　　　　一、开源免费，提供众多插件

　　　　　　　　　　二、jQuery是继prototype以后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各类浏览器[来自百度百科]

　　　　　　　　　　三、它的文档说明很全，并且各类应用也说得很详细，同时还有许多成熟的插件(aptana)可供选择。jQuery可以使js代码和html内容分离(说明文档确实很全很详细，下面就会带着一块儿读文档，进行操做。)

　　　　　　　　　　四、jQuery 口号：The Write Less, Do More 

　　　　　　　　　　五、待本身去查询和发现吧~  

 

2、使用Jquery

　　　　　　知道了什么是Jquery，那么接下来就要知道如何使用它。

　　　　　　　　2.一、导入js库

　　　　　　　　　　jQuery有不少版本，介绍一下各类版本的使用环境

　　　　　　　　　　　　　　　　

　　　　　　　　　　jquery-1.8.3.js：全部的源码，比较大。开发过程使用

　　　　　　　　　　jquery-1.8.3.min.js 压缩的版本（不易于阅读）生产环境使用(导入项目中可能会报错，报错的话先删除，等在生产环境时在导入使用)

　　　　　　　　　　将要使用的jQuery版本的.js导入项目中，

　　　　　　　　　　　　　　　　　　　　　　　　　　　

<!--
        /jQuery_day01/js/jquery-1.8.3.js  相对路径（相对web站点的根）
        ./        表示当前页面所在目录
        ../        表示当前页面上一级目录
        <script>导入js库
            type 指定类型
            src js位置
        注意：若是使用src，标签体中不能编写内容
        注意：编写js代码时，有加载顺序问题
            1.jquery类库必须放在使用以前
            2.若是直接编写js代码，必须放在目标对象（html）的指以后
                注意：js库的位置须要写准确，不然没法使用
-->
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>

导入js库

　　　　　　　　　　　　

 

　　　　　　　　2.二、Jquery的对象的获取

　　　　　　　　　　在导入了js库以后，就能够在页面中使用js库了，这里也就是使用jQuery，获取jQuery的两种方式

 

<script type="text/javascript">
        //语法：  jQuery  或    $
                //#username：是获取一个id=username的结点(元素) 等价于 //document.getElementById("username"); 区别在于前者属于jQuery的方式获取，或者属//于使用原始dom的方式获取
        // 方式1 jQuery， 
        //var $username = jQuery("#username");
        // 方式2 $  通常jQuery对象的变量名都会使用$开头进行命名，一种习惯，不//实用也能够
        var $username = $("#username");
        
        alert($username.val());
        
    </script>

获取jQuery的两种方式

获取jQuery对象的两种方法

 

　　　　　　　　2.三、dom和Jquery的转换

　　　　　　　　　　jQuery对象能够看做将dom对象(javascript的原始内容)进行的封装，从而使用jQuery对象就只可以调用jQuery定义的函数(方法)或属性了，而dom对象就只可以调用dom对象的属性和函数，不能混淆调用。　　　　注意：必定要区别dom对象和jQuery对象的使用，不要混淆，使用jQuery的函数时，注意看返回值是dom对象仍是什么，好比get(0)返回的就是dom对象，流个当心眼。

//1 得到dom对象 （javascript 原始内容）
        var username = document.getElementById("username");
        // * 打印value值，调用属性
        //alert(username.value);
        
        //2 将dom对象，转成jQuery对象
        // * 建议：jQuery变量名使用$开头
        var $username = $(username);
        //alert($username.val());//调用方法来获取属性值
        
        //3 jQuery 对象 转换 dom对象
        // 方式1：jQuery得到对象，内部是一个数组，若是只有一个对象时，能够经过下标0获取
        var obj1 = $username[0];
        //alert(obj1.value);
        // 方式2：jQuery 提供函数 get 得到指定下标对象
        var obj2 = $username.get(0);
        alert(obj2.value);
        
        
        //注意：jQuery对象 只能使用 jQuery的函数或属性
        //        dom对象 只能使用dom的函数和属性
        //        彼此不能相互调用。例如： $username.value 错误的

dom和jQuery对象的转换

　　

　　　　　　　　2.四、查询jQuery文档来学习jQuery提供了哪些功能？

　　　　　　　　　　2.4.一、文档解释

　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　咱们将学习该文档中的全部功能，其实也就是大概过一遍，知道哪块是什么意思就行，具体的用法该文档中都会有详细的使用规则介绍，真的很是详细。我会带着你们看几个，而后依次类推，便可。

　　　　　　　　　　2.4.二、选择器　　　　

 　　　　　　　　　　　　　　分为九种，其基本功能就是为了选取页面html中的特定的元素。

　　　　　　　　　　　　　　 [基本选择器、层级选择器、基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、表单过滤、表单对象属性过滤]

　　　　　　　　　　　　　　 2.4.2.一、基本选择器

　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　5种，超级简单，咱们来对着文档解析一个个看。

　　　　　　　　　　　　　　　　　#id：根据给定的ID匹配一个元素。若是选择器中包含特殊字符，能够用两个斜杠转义。参见示例。(详细把。例子都有，因此说不懂，不会用，不要紧，查文档)

　　　　　　　　　　　　　　　　　　　　   

　　　　　　　　　　　　　　　　　element:根据给定的元素名(标签名)匹配全部元素　

　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　.class：经过class选择，必须.开头 。 <div  class="myClass"> 。例如：$(".myClass")；文档图略

　　　　　　　　　　　　　　　　　*，匹配全部元素

　　　　　　　　　　　　　　　　　s1,s2,s3...，将多个选择器合并，多个之间使用逗号分隔。  例如：$("#id,.myClass")；

　　　　　　　　　　　　　　2.4.2.二、层级选择器

　　　　　　　　　　　　　　　　　 就是在标签和标签之间中选取，好比选取父标签下的特定的标签。

　　　　　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　　　　　A标签 B标签 ， 表示A标签中全部后代的B标签 （爷孙）
　　　　　　　　　　　　　　　　　　A标签>B标签，表示A标签全部子标签中的B标签（父子）
　　　　　　　　　　　　　　　　　　A标签+B标签，表示A标签的第一个兄弟标签（兄弟）
　　　　　　　　　　　　　　　　　　A标签~B标签，表示A标签以后的全部兄弟标签（兄弟）

　　　　　　　　　　　　　　2.4.2.三、基本过滤

　　　　　　　　　　　　　　　　　　略，查看文档就懂了

　　　　　　　　　　　　　　2.4.2.四、内容过滤

　　　　　　　　　　　　　　　　　　略，查看文档就懂了　　

　　　　　　　　　　　　　　2.4.2.五、可见性过滤

　　　　　　　　　　　　　　　　　　略，查看文档就懂了

　　　　　　　　　　　　　　2.4.2.六、属性过滤

　　　　　　　　　　　　　　　　　　略，查看文档就懂了

　　　　　　　　　　　　　　2.4.2.七、子元素过滤

　　　　　　　　　　　　　　　　　　略，查看文档就懂了

　　　　　　　　　　　　　　2.4.2.八、表单过滤

　　　　　　　　　　　　　　　　　　略，查看文档就懂了

　　　　　　　　　　　　　　2.4.2.九、表单对象属性过滤

　　　　　　　　　　　　　　　　　　略，查看文档就懂了

　　　　　　　　　　2.4.三、属性

 　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　这个稍微解释一下，上面选取到了某个特定的元素(标签)或者几个元素，

　　　　　　　　　　　　　　　　　　属性的函数来对其内容进行查看或者修改，

　　　　　　　　　　　　　　　　　　css类的话，能够修改(移除，添加)class样式，toggleClass是经过判断一个boolean值来取决使用什么样式。

　　　　　　　　　　　　　　　　　　HTML代码/文本/值这个比较有意思

　　　　　　　　　　　　　　　　　　　　　　val:表示获取属性的值，好比获取input标签中的value值，val(xxx)有参数 则给value属性赋值为xxx。

　　　　　　　　　　　　　　　　　　　　　　text:表示获取某个标签的文本内容，也就是<p>xxx</p>获取xxx的内容，text(xxx)，给某个标签的文本赋值。若是添加标签，直接显示　　

　　　　　　　　　　　　　　　　　　　　　　html:跟text功能差很少，可是可以设置css样式，若是添加标签，浏览器须要解析

　　　　　　　　　　　　　　　　　　　　　　具体查看文档。

　　　　　　　　　　2.4.四、CSS

　　　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　查看文档，位置和样式的处理

 

　　　　　　　　　　2.4.四、文档处理

 　　　　　　　　　　　　　上面了解的，都是如何选取特定的元素，而后如何修改样式或者内容。文档处理作的就是增长删除修改复制元素等等的操做，好比，在A标签以后添加一个B标签，相似这种，具体查看文档。

　　　　　　　　　　　

　　　　　　　　　　2.4.五、筛选

　　　　　　　　　　　　　 　　　　　　

　　　　　　　　　　　　　筛选跟选择器中的过滤是差很少的，区别就在于，筛选提供函数，而过滤的不是。通常过滤都是从jQuery对象中有不少个元素(也就是数组中有多个元素)，须要从中获取到咱们想要的jQuery对象，进一步过滤，可是不能使用get()或者array[0]，由于此种方式获取到的是dom对象，而不是jQuery对象，因此须要使用筛选或者选择器中的过滤，来达到目的。具体查看文档把。

 

　　　　　　　　　　2.4.六、事件　　

　　　　　　　　　　　　　事件，讲解几个经常使用和重要的，其余看文档。

　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　这个应该比较有意思。也比较重要。

　　　　　　　　　　　　　　　一、页面载入：ready(fn)：这个就是讲javascript代码写在页面最上面所须要用的函数，做用就是等页面所有加载完，而后在来加载js代码。有两种方式，代码以下

//方式1
$(document).ready(function(){         // $ == jQuery
    ....
});
* 变种
jQuery(document).ready(function(){         // $ == jQuery
    ....
});

//方式2
$(function(){
   .....
});

View Code

 

　　　　　　　　　　　　　　　二、focus和focusin对比

　　　　　　　　　　　　　　　　　　focus：两种用法，focus()：使对象得到焦点，focus(fn)：得到焦点触发事件，子元素[不触发]父元素事件[]　　　　　　

　　　　　　　　　　　　　　　　　　fosusin(fn):得到焦点触发事件，子元素[触发]父元素事件

　　　　　　　　　　　　　　　　　　　　　　　

//一、2都是对父元素进行焦点出发事件，因此就可以进行对比。
       <script type="text/javascript">
        $(document).ready(function(){
            //1 js focus 子元素[不触发]父元素事件
            /*
            $("#outerDiv").focus(function(){
                alert("focus");
            });
            */
            //2 js focusin 子元素[触发]父元素事件
            /*
            */
            $("#outerDiv").focusin(function(){
                alert("focusin");
            });
        });
        
        
    </script>    
//省略html的代码。html的代码展现图就是上面的图。

View Code

 

　　　　　　　　　　　　　　三、blur 和 focusout  失去焦点

　　　　　　　　　　　　　　四、mouseover 和 mouseenter 移进某个区域触发事件

　　　　　　　　　　　　　　　　mouseover , 若是鼠标指针穿过任何子元素，一样会触发 mouseover 事件

　　　　　　　　　　　　　　五、mouseout 和  mouseleave 移出

　　　　　　　　　　　　事件处理：

　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　一、on：对元素进行事件的绑定。

　　　　　　　　　　　　　　二、off:对元素上的事件进行解绑

　　　　　　　　　　　　　　三、bind:绑定事件，一直使用，直到解绑

　　　　　　　　　　　　　　　　例如：$username.bind("click",function(){})   等价于  $username.click(function(){});

　　　　　　　　　　　　　　四、unbind 解绑事件

　　　　　　　　　　　　　　　　绑定是能够指定别名 ，格式： 事件.别名

　　　　　　　　　　　　　　　　bind("click.xxx",fn)

             　　　　　　　　　　　　 unbind("click.xxx")

　　　　　　　　　　　　　　五、触发：在每个匹配的元素上触发某类事件。

　　　　　　　　　　　　　　　　trigger() 触发全部的事件（包括浏览器默认的）

       　　　　　　　　　　　　　　triggerHandler() 触发全部的事件（不包括浏览器默认的）

　　　　　　　　　　　　事件委派　

　　　　　　　　　　　　　　　　

　　　　　　　　　　　　　　一、live  jQuery 给全部匹配的元素附加一个事件处理函数，即便这个元素是之后再添加进来的也有效

              　　　　　　　　　　　　给A标签添加事件，以后再追加a标签都具备相同的事件

　　　　　　　　　　　　　　二、die 解绑

　　　　　　　　　　　　

　　　　　　　　　　2.4.七、效果

　　　　　　　　　　　　　　这个就是对元素进行隐藏啊，动态显示进行设置

　　　　　　　　　　2.4.八、AJAX

　　　　　　　　　　　　　　留着下一节讲解把~

 

3、总结

　　　　经过这一章节，

　　　　3.一、知道了什么是jQuery？

　　　　3.二、jQuery的使用方法和如何经过文档进行学习？仍是那句话，不会的查文档，查文档

　　　　明天：讲解一下jQuery对Ajax的的使用。和对jQuery进行沉淀(几个小的demo)。这一章是学会如何使用jQuery，下一节算是小实战把。哈哈~ 加油。