技术分析之JQuery

**JQuery的概述**

1. JavaScript类库的概述
   * 为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了
   * JavaScript 库封装了很多预定义的对象和实用函数
   * 能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面
   * 注意：兼容各大浏览器（这是最主要的）

2. 当前流行的js的库有如下
   * JQuery            -- 企业应用最广泛，55%左右，开源的，免费的。
   * Prototype         -- 以前比较牛的类库。
   * Dojo              -- 已经退出了历史的舞台
   * YUI               -- 雅虎公司提供的。
   * EXT_JS            -- 应用也是比较多的

3. JQuery类库的优点
* 它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。
* jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。
* jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
* jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可

**JQuery的入门**


1. JQuery程序的入门步骤
   * 先把JQuery的文件拷贝到工程中
   * 在JSP或者HTML页面引入JQuery的库
   * 在页面中可以直接使用JQuery库了

2. 页面加载
   * JQuery的方式
       jQuery(document).ready(function(){
           alert("aaa");
       }); 

   * 简写方式
       $(function(){
           alert("aaa");
       });

**JQuery与DOM对象之间的转换**

1. 什么是JQuery对象
   * jQuery 对象就是通过jQuery包装DOM对象后产生的对象
   * jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法
       * 例如：$("#xx").html()        -- 获取id为xx元素的html内容
       * html()就是JQuery中的方法，而$("#xx") 获取的就是JQuery对象
       * 上述代码获取的结果等同于document.getElementById("xx").innerHTML

2. JQuery对象不能调用DOM对象的方法和属性
   * 虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法
   * 同理DOM对象也不能使用jQuery里的方法.乱使用会报错

3. DOM对象和JQuery对象的互相转换
   * DOM对象转换成JQuery对象
       * 对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了   例如：$(DOM对象) 

   * JQuery对象转换成DOM对象
       * 第一种方式：jQuery对象是一个数组对象，可以通过[index]的方法，来得到相应的DOM对象

       * 第二种方式：jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

4. DOM对象和JQuery对象的对比
   * 如果ID值不存在，那么DOM对象获取元素会报错，而JQuery对象不会！！

**JQuery的基本选择器**

1. JQuery的基本选择器有如下种类
* ID选择器 -- $("#id")
* 类选择器 -- $(".class")
* 元素选择器 -- $("元素")
* 通配符选择器 -- $("*")
* 选择器,选择器 -- $("#id,.class")

2. HTML的代码
<div id="divId" class="divv"></div>
<div class="divv">div2</div>

**JQuery的层级选择器**


1. 层次选择器
        * Selector Selector     -- 中间使用空格。说明：在给定的祖先元素下匹配所有的后代元素。（所有的子节点，包含孙子节点）
        * parent>child          -- 中间使用>。说明：在给定的父元素下匹配所有的子元素（不包括孙子）
        * prev+next             -- 中间使用+。说明：匹配所有紧接在 prev 元素后的 next 元素，第一个兄弟节点
        * prev~siblings         -- 中间使用~，说明：匹配 prev 元素之后的所有 siblings 元素，所有的兄弟节点

2. HTML的代码
<div id="divId" class="divv">
<span>
哈哈
<a href="#">超链接</a>
</span>
<span>呵呵</span>
</div>
<font>字体1</font>
<font>字体2</font>
<div class="divv">div2</div>

**JQuery的过滤选择器**


1. 基本过滤选择器
        * 注意：基本过滤选择器的写法都是   :选择器        例如： :first  代表查找第一个元素
        * 过滤器选择器的种类
            * :first                -- 获取第一个元素
            * :last                 -- 获取最后一个元素
            * :not(selector)        -- 过滤掉符合not选择器的元素
            * :even                 -- 偶数，默认从0开始
            * :odd                  -- 奇数
            * :eq(index)            -- 获取相等下标值的元素
            * :gt(index)            -- 获取大于下标值的元素
            * :lt(index)            -- 获取小于下标值的元素
            * :header               -- 获取<h1> <h2>等标题元素

**JQuery的可见过滤选择器**


1. 可见过滤选择器（掌握）
        * :hidden           -- 匹配所有不可见元素，或者type为hidden的元素
        * :visible          -- 匹配所有的可见元素

**JQuery的属性过滤选择器**


1. 属性过滤选择器（掌握重点的）
        * 基本语法：$("选择器[属性=值]")
        * [attribute]                           -- 含有指定的属性
        * [attribute=value]                     -- 指定属性值的标签
        * [attribute!=value]                    -- 属性值不为指定的内容
        * [attribute^=value]                    -- 属性值以value开头
        * [attribute$=value]                    -- 属性值以value结尾
        * [attribute*=value]                    -- 属性值含value

**JQuery的表单过滤选择器**


1. 表单过滤选择器
        * :input            -- 表单中所有元素（ input, textarea, select 和 button 元素）
        * :text             -- <input type="text">
        * :password         -- <input type="password">
        * :radio            -- <input type="radio">
        * :checkbox         -- <input type="checkbox">
        * :submit           -- <input type="submit">
        * :image            -- <input type="image">
        * :reset            -- <input type="reset">
        * :button           -- <input type="button"> 或 <button>
        * :file             -- <input type="file">
        * :hidden           -- 与可见性过滤 一致

2. 表单对象属性的选择器
* :checked 复选框被选中的
* :selected 下拉列表被选中的

**JQuery的常用属性及方法**


1. 使用JQuery来获取元素对象
* 使用id选择器：$(#id)
        * size()
* val() -- 获取和设置value属性的值
* text() -- 获取和设置文本内容（div span）
* html() -- 获取和设置中间HTML代码的片段（div）
* css() -- 获取和设置样式


2. JQuery的隐藏和显示的效果方法
2.1. 基本效果
* show() -- 显示
* speed -- 代表隐藏的元素显示的速度
* fn -- 元素显示后，会执行一次该函数。
* hide() -- 隐藏

2.2. 滑动效果
* slideDown() -- 改变高度显示对象，从上往下
* slideUp() -- 改变高度隐藏对象

2.3. 淡入淡出效果
* fadeIn -- 显示的透明度
* fadeOut -- 隐藏是透明度
* fadeTo -- 指定透明度，取值0-1之间


3. 以后咱们在开发中需要使用的是美工都定义好的样式，在JQuery中有方法可以添加class
* addClass(class|fn)
* removeClass([class|fn])

4. JQuery中的遍历
* 在JQuery中使用each的方法进行遍历，有两种方式
* 一种用法：
JQ的对象.each(function(i,n){ });

* 二种用法
$.each(数组,function(i,n){ });

5. JQuery的DOM操作
* append(); -- a.append(b); 把b添加到a中
* appendTo(); -- a.appendTo(b); 把a添加到b中

6. 创建JQuery对象
* $("<option></option>");
var $li = $("<li></li>");
// 添加文本
$li.text("深圳");


7. 删除所有子节点
* empty() -- 删除匹配的元素集合中所有的子节点