jQuery

JavaScript类库(javascript框架)

定义：封装了很多预定义的对象和实用函数

作用：能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面, 并且兼容各大浏览器

市场用得比较多两个框架： jQuery 比较适合做一些互联网 的应用（12306.com,蘑菇街，美丽说，聚美）

　　　　　　　　　　　　extjs 比较适合做后台管理系统（电商（订单管理），银行，电信）

Web1.0与Web2.0：

Web1.0：以内容为中心(门户网站)

Web2.0：以人为中心(社交网站)

Web3.0：基于移动互联网的社交网站

富客户端与瘦客户端

富客户端：在瘦客户端基础上，加上增删改查功能

瘦客户端：做页面数据的静态展示

组成 ：核心（重点）、UI、插件

分类：

Web版本：我们主要学习

UI版本：集成UI内容

mobile版本：针对移动开发

qunit：用于js测试

版本：

1.4.2版本：企业开发主流

1.8.3版本：学习研究主流

正常版本：代码及注释（学习研究）

压缩版本min：代码（开发使用）GZIP

一、核心

主要功能：JS开发人员查找元素、操作DOM、处理事件、执行动画和开发Ajax的操作

优势：写更少代码，做更多的事

（1）轻量级　　JS库很小

（2）强大的选择器

获取页面上的DOM元素

document.getElementById()

操作DOM，必须先得到DOM

（3）出色的DOM操作封装

（4）可靠的事件处理机制　　对事件进行封装

（5）完善的Ajax　　底层封装了XMLHttprequest

（6）不污染顶级变量　　

在jQuery中只有一个对象 jQuery == $；$("#id")  jQuery对象

（7）出色的浏览器兼容性

（8）链式操作方式

$("#ddd").addClass().removeClass()  // 拿到元素，增加样式，再删除样式

（9）隐式迭代

显示迭代

for(var i=0; i<array.length; i++) {
}

隐式迭代屏蔽掉for操作

（10）行为层和结构层的分离

（11）丰富的插件支持　　后期扩展非常方便

（12）完善的文档

jQuery和DOM对象的区别和联系：

DOM对象：DOM对象是浏览器自带对象，解析HTML页面，将页面元素解释为元素节点、属性节点和文本节点，通过DOM解析HTML页面元素，得到的DOM元素就是DOM对象

jQuery对象：通过jQuery包装页面上面的元素或者DOM而产生的一个新的对象，对象是一个数组

jQuery对象与DOM对象不能相互转换，转换之后就可以相互调用了

// JS
window.onload = function() {
　　　　var username = document.getElementById("username");
}

// jQuery
// 1
$(document).ready(function()) {
})

// 2
$(function{
　　　　$("#username").val();
})
　　
// 相互转换
　　var $username = $(username);  // 把DOM对象包装成jQuery对象
　　var username = $username[0];  // jQuery转换成DOM，方式一
　　var username = $username.get(0);  // 方式二

二、选择器(重点)

完全集成了CSS的风格，可以快速找出指定的DOM元素

九类

1、基本选择器

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素

// 1.#id选择器
$("#myDiv");  // 返回单个元素组成的集合
// 2.Element元素选择器
$("div")   // 返回值是集合元素
// 3.class类选择器
$(.myClass)  // 返回值是集合元素
// 4. *
$("*")  // 返回值是集合元素
// 5.selector1,selector2
$("div, span, p.myClass")  // 返回值是集合元素

$(document).ready(function(){
    $("#btn1").click(function(){
        $("#one").css("background", "red");  // 选择id为one的元素
    })

    $("#btn2").click(function(){
        $(".mini").css("background", "red");  // 选择class为mini的元素
    })  

    $("#btn3").click(function(){
        $("div").css("background", "red");  // 选择元素名为div的元素
    })  

    $("#btn4").click(function(){
        $("*").css("background", "red");  // 选择所有元素
    })  

    $("#btn4").click(function(){
        $("span, #two").css("background", "red");  // 选择span元素和id为two的元素
    })  
})

2、层级选择器

通过DOM之间的层次关系来获取特定元素，如子元素、后代元素、相邻元素、兄弟元素等

$("body div").css("background", "blue");  // 选择body中所有div元素
$("body>div").css("background", "blue");  // 选择body中子div元素
$("#one+div").css("background", "blue");  // 选择id为one的下一个div元素
$("#one~div").css("background", "blue");  // 选择id为one后的所有div兄弟元素
$("#one").siblings("div").css("background", "blue");  // 选择id为one的所有div兄弟元素

只有当前的这个方法返回的是jQuery 对象才能进行链式操作

动画效果

// 1.显示隐藏
$("#showbutton").click(function(){
    $("#message").hide(3000);   // 3s后隐藏
})
$("#message").show(3000);   // 3s后隐藏

// 2.淡入淡出
 $("#message").fadeIn(3000);   // 3s后隐藏
 $("#message").fadeOut(3000);   // 3s后隐藏

// 3.滑动
 $("#message").slideDown(3000);   // 3s后隐藏
 $("#message").slideUp(3000);   // 3s后隐藏

// 4.执行动画
 $("#message").animate({"margin-left":300, 3000});   // 3s移动到左边距300px的地方
$("#message").animate({"padding":30}, 1000);  // 1s边距为30px
// {“” ： “”} json在js中就是一个对象   “opacity”:“hide” 隐藏

3、过滤选择器

找到页面元素，添加过滤条件找到想要的元素，然后进行操作

格式    ：过滤条件

// 基本过滤选择器
$("div:first").css("background":"green");  // 第一个div
$("div:last").css("background":"green");  // 最后一个div
$("div:not('.one')").css("background":"green");  // 除class为one外的div
$("div:even").css("background":"green");  // 偶数的div，从0开始
$("div:odd").css("background":"green");  // 奇数的div
$("div:eq(3)").css("background":"green");  // 索引为3的div
$("div:gt(3)").css("background":"green");  // 索引大于3的div
$("div:lt(3)").css("background":"green");  // 索引小于3的div
$(":header").css("background":"green");  // 标题h1h2h3

funvtion move() {
    $("#move").slideToggle("slow", move);
}
move();
$(":animated").css("background":"green");  // 选中正在执行动画的元素

4、内容过滤选择器

主要体现在它所包含的子元素和内容上

$("div:contains('di')").css("background", "red");  // 选取含有文本"di"的div元素
$("div:empty").css("background", "red");  // 选取不包含子元素和文本元素空的div元素
$("div:has('.mini')").css("background", "red");  // 选取含有class为mini元素的div元素
$("div:parent").css("background", "red");  // 选取含有子元素或者文本元素的div元素

5、可见度过滤选择器

主要对元素的可见性（可见或不可见）进行过滤

$("div:visible").css("background", "red");  // 选取所有可见的div元素
$("div:hidden").css("background", "red").show(2000);  // 选取所有不可见的div元素显示出来

// 显示迭代
var $input=$("input:hidden");
for(var i=0; i<$inout.length; i++){
    alert($input[i].value);
}

// 隐式迭代，文本隐藏域
$("input:hidden").each(function(index, dom){
    alert(index);
    alert(dom.value);
})
// 选取onediv下所有的div，打印里面的文本
$("#ondediv>div").each(function(index, dom){
    alert($(dom).text());
})

6、属性过滤选择器

根据元素的属性获得相应的元素

$("div[tittle]").css("background", "red");  // 选取含有title属性的div元素
$("div[tittle=test]").css("background", "red");  // 选取含有title属性值等于test的div元素
$("div[tittle=test]").css("background", "red");  // 选取含有title属性值等于test的div元素
$("div[tittle!=test]").css("background", "red");  // 选取含有title属性值不等于test的div元素
$("div[tittle^=te]").css("background", "red");  // 选取含有title属性值以te开头的div元素
$("div[tittle$=est]").css("background", "red");  // 选取含有title属性值以est结尾的div元素
$("div[tittle*=est]").css("background", "red");  // 选取含有title属性值含有es的div元素
$("div[id][title*=es]").css("background", "red");  // 选取含有id属性且title含有es的div元素

7、子元素过滤选择器

主要选择元素中所含有的子元素

$("div[class=one] :nth-child(2)").css("background":"red");  // 选取class为one的div，父元素下的第二个子元素，子元素过滤选择器的特殊写法， 
 ：（：前有空格）
$("div[class=one] :first-child").css("background":"red"); // 选取class为one的div，父元素下的第一个子元素
$("div[class=one] :last-child").css("background":"red");   // 选取class为one的div，父元素下的最后一个子元素
$("div[class=one] :only-child").css("background":"red");   // 选取class为one的div，父元素下的仅有一个子元素

8、表单属性过滤选择器

$("input:enabled").val("麦克");  // 对表单内可用的input赋值
$("input:disabled").val("麦克");  // 对表单内不可用的input赋值
$("input:checked").size();  // 获取多选框的个数
$("select>option:selected").each(function(index,dom){
    $(dom).text();    // 获取下拉框选中的内容
    var title = $(dom).attr("title");   // 获取title属性的值
});

9、表单选择过滤器

$(":input");  // 匹配所有input textarea select button元素
$(":text");  // 匹配所有的单行文本框
$("password");  // 匹配所有的密码框
$(":radio");  // 匹配所有的单选按钮
$(":checkbox")  // 匹配所有的复选框
$(":submit")  // 匹配所有的提交按钮
$(":image");  // 匹配所有图像域
$(":button")  // 匹配所有按钮
$(":file")  // 匹配所有文件域
$("input:hidden")  // 匹配所有的不可见元素

三、DOM操作

页面上的元素分三种类型的节点

1、元素节点  九大选择器

2、属性节点 先找到元素节点，再调用attr

3、文本节点 先找到元素节点再同text()

（1）插入节点

$(function(){
    $("#createNode").click(function(){
        var div=$("<div title='mike'>麦克</div>");
        $('body').append();  // 往body中追加
        }) 
})

$("#wuhan").append($("#ezhou"));  // 向匹配的元素内部的结尾处追加内容
$("#wuhan").appendTo($("#ezhou"));  // 向匹配的元素追加到指定元素后
$("#wuhan").prepend($("#ezhou"));  // 向匹配的元素内部的开始处追加内容
$("#wuhan").prependTo($("#ezhou"));  // 将每个匹配元素追加到制定元素内部的开始处
$("#wuhan").prependTo($("#ezhou"));  // 将每个匹配元素追加到制定元素内部的开始处
$("#wuhan").after($("#ezhou"));  // 在每个匹配元素后插入内容
$("#wuhan").before($("#ezhou"));  // 在每个匹配元素前插入内容
$("#wuhan").insertAfter($("#ezhou"));  // 把匹配的元素插入到指定元素的后面
$("#wuhan").insertBefore($("#ezhou"));  // 在每个匹配元素前插入内容

 （2）删除节点

$(“#ni”).remove();  // 删除节点以及下面的所有子节点
$(“#ni”).empty();   // 清空节点下面的所有子节点

（3）复制节点

$(function(){
    $("#clonebutton").click(function(){
        var p = $("p").clone(true);  // 克隆节点，同事克隆事件
         $("div").append();
    })
})

（4）替换节点

（5）属性操作

function(){
    $("#attrbutton").click(function(){
        alert($("div").text());  // 获取当前节点的文本节点和子节点的文本节点
        alert($("div").html());  // 获取当前节点里面的htnl内容，常用
        alert($("div").width());  // 获取宽度
        alert($("div").height());  // 获取高度
        alert($("div").css());  // 获取css样式
        alert($("div").val());  // 获取值
        alert($("div").attr(“title”));  // 获取属性和属性设置，title属性的值
        alert($("div").attr(“class”,"ni"));  // 追加属性，1.4可用，到1.7就不兼容了
  })
}    

（6）样式操作

$("div").addClass("cssbd");  // 往当前元素上追加一个样式，方式一，用
$("div").attr("class", "cssbd");  // 往当前元素上追加一个样式，方式二
$("div").css("background","red");  // 往当前元素上追加一个样式，方式三

<div class="cssb cssc"></div>  //  一个div上可以有多个class作用
$("div").removeClass();  // 不加参数会删除当前元素下所有值
$("div").removeClass("cssb");  // 删除指定样式
$("div").hasClass("cssb");  // 是否具备指定样式
$("div").toggleClass("cssb");  // 控制样式上的重复切换，类名存在则删除，不存在则添加
$("div").toggle();   // 切换，与样式无关，先判断当前元素是否隐藏状态，则调用jQuery的show方法显示，显示在调用hide隐藏

（7）遍历节点

$("ul").children().length;  // 获取当前节点下的子节点
$("#ni").next();  // 获取当前节点的下一节点
$("#ni").prev();  // 获取当前节点的下一节点
$("#ni").siblings("li");  // 获取当前节点的兄弟节点

（8）包裹节点

$("p").wrap("<font color='red'></font>");  // 将匹配到的元素逐个包裹
$("p").wrapAll("<font color='red'></font>");  // 将匹配到的元素整体包裹
$("p").wrapInner("<font color='red'></font>");  // 将匹配到的元素内部逐个包裹

四、jQuery事件

window.onload=function(){  // 页面加载完毕执行,JS
}

$(function(){     // window.onload可以不写,jQuery
})
$().ready(function(){
})

区别

window.onload与$(function(){})都是用来作用页面渲染（显示）完毕之后的初始化操作

window.onload需要等待页面上所有的元素都绘制完毕之后才执行，包含图片

$(function(){})页面上所有的dom元素绘制完毕就执行，不包含图片

$("#bindbutton").click(function(){
    $("div").bind("mouseover",function(){  // 绑定鼠标悬停事件
         $(this).css("background", "blue");  // this指向当前鼠标移动到的标签
    })
})

$("div").unbind();  // 解绑事件

 可以绑定的事件：blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error

// 鼠标悬停事件
$("ul>li").mouseover(function(){
    $(this).css("background","red");
});
$("ul>li").mouseout(function(){
    $(this).css("background", "white");
});

$("ul>li").hover(function(){
    $(this).css("n=background", "red");
}, function(){
    $(this).css("background", "white");
});

// 搜索引擎栏
$(function(){
    // 光标定位
    $("#keywords".focus());
    // 失去焦点的事件
    $("#keywords").blur(function(){
        $(".message_area").hide(1000);
    });
    // 鼠标敲下离开的事件
    $("#keywords").bind("keyup", function(){
        var keywords=$(this).val();
         if(keywords){
            // 要是真实开发，需要把值获取到，然后通过ajax请求后台，回来数据，可能是jason
            $(".message_area").show(1000);
            }esle{
            $(".message_area").hide(1000);
        }
            
        $(".message_area>li").MOUSEOVER(function(){
            $(".meaasge_area>li").removeClass("haosouclass");
            $(this).addClass("haClass");
        })
        
        $(".message_area>li").MOUSEOUT(function(){
            $(this).addClass("haClass");
        })
    })  
    
    // 使用jQuery监听键盘，因为键盘上每一个按键都对应的是一个数字
    $(window).KEYDOWN(function()event{
        switch(event.keyCode) {
            case 40:{  // 向下的键
                if($(".haosouclass").size()==0){  // 10个li里面没有一个是高亮，把第一个高亮
                    $(".message_area>li:first-child").addClass("haosouclass");
                }esle{
                    if($(".haosouclass").next().size()==0){
                        $(".message_area>li:first-child").addClass("haosouclass");
                        $(".message_area>li:last-child").removeClass("haosouclass");
                    }else{
                        //　把当前元素的class删除调用获取到下一个元素，为下一个元素追加样式
                        $(".haosouclass").removeClass("haosouclass").next().addClass("");
                    }

                }
            }
        }
    })
        
    
});

五、jQuery Ajax

1、jQuery.ajax

ajax以后的作用：1.异步加载后台数据 2.性能优化

用该方法进行异步数据通讯可以很灵活地设置请求的各个参数

$.ajax({
   type: "POST",
   url: "testServlet",
   data: {"name":"itcast","location":"guangzhou"},
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});

url：发送请求的地址

data：发送到服务器的数据。将自动转换为请求字符串格式

type：请求方式 ("POST" 或 "GET")，默认为 "GET"

dataType：预期服务器返回的数据类型。可用值: xml,html,script,json,jsonp,text

success：请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据

error：默认: 自动判断 (xml 或 html)) 请求失败时调用此函数。如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是"timeout", "error", "notmodified" 和 "parsererror"

async：默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行

// 异步提交表单数据
$(function(){
    $("#formbutton").click(function(){
        // 将表单里面的数据序列化成一个字符串
        var data = $("#form1").serialize();
        // 序列化成一个数组,底层
        var data = $("#form1").serializeArray();
        // alert只能打印字符串和int，不能打印对象的详细信息，浏览器提供的console.info则可以
        console.info(data);
        //发送异步的ajax请求
        $.ajax({
            url:"../../formServlet",
            // 通过ajax方法提交的时候有两种数据格式，一种是字符串
            // data:data,
            // 一种是jason
            data:{
                username:$("#username").val(),  // 获取表单中的数据
                password:$("#password").val(),
                email:$("#email").val(),
            },
            type:"POST",
            success:function(data){
                
            }
        })
    })
})

// 随着用户的鼠标向下滚动逐渐加载页面
//JS
//window.onscroll=function(){
//    
//}

// jQuery
$(window).scroll(function(){
    var t=document.documentElement.scrollTop;
    var t=document.documentElement.scrollTop;
                
    if(t>0  && t<800){
        loadImage("1");
    }
                  
    if(t>800  && t<1600){
        loadImage("2");
    }
})

function loadImage(imageType) {
    $.ajax({
        url: "../../imageServlet",
        type: "POST",
        data: {
            imageType: imageType
        },
        success: function(data) {
            var area = "#area_" + imageType;
            var image = "<img src='../../" + data + "'>";
            $(area).html(image);
        }
    })

})

// imageServlet
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

    response.setContentType("text/html");
    PrintWriter out = response.getWriter();
    System.out.println("itcast");
    String imageType = request.getParameter("imageType");
    if ("1".equals(imageType)) {
        out.println("image/1.jpg");
    }
    if ("2".equals(imageType)) {
        out.println("image/2.jpg");
    }
}

2、jQuery.get

$.get(url, [data], [callback], [type]) 通过远程 HTTP GET 请求载入信息，是$.ajax的一个高级实现

url：发送请求的地址

data：待发送 Key/value 参数

type：返回内容格式，xml, html, script, json, text, _default

callback：请求成功后的回调函数。参数：由服务器返回，并根据type参数进行处理后的数据

$.get("testServlet", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
});

{total:118, rows:[{id:1,title:'马克'},{id:2,title:‘约翰’},{id:3,title:'杰森'}]}  // jason解析
var obj=eval("("+data+")");
var rows=obj.rows;
for(var i=0;i<rows.length;i++){
     alert(rows[i].id);
     alert(rows[i].title);
}

3、jQuery.post

$.post(url, [data], [callback], [type]) 通过远程 HTTP POST 请求载入信息，是$.ajax的一个高级实现。

url：发送请求的地址

data：待发送 Key/value 参数

type：返回内容格式，xml, html, script, json, text, _default

callback：请求成功后的回调函数。参数：由服务器返回，并根据type参数进行处理后的数据

$.post("testServlet", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
});

4、jQuery.getJSON

$.getJSON(url, [data], [callback]) 通过远程 HTTP GET 请求载入json信息，是$.ajax的一个高级实现。

jQuery在解析的时候要求key上有双引号

url：发送请求的地址

data：待发送 Key/value 参数

callback：请求成功后的回调函数

$.getJSON("testServlet", { name: "John", time: "2pm" }, function(json){
  alert("JSON Data: " + json.users[3].name);
});

5、jQuery.getScript

$.getScript(url, [callback]) 通过远程 HTTP GET 请求载入并执行一个 JavaScript 文件

url：待载入 JS 文件地址

callback：请求成功后的回调函数

$.getScript("test.js", function(){
  alert("Script loaded and executed.");
});

6、load

load(url, [data], [callback]) 载入远程 HTML 文件代码并插入至 DOM 中。默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式

url：待装入 HTML 网页网址

data：待发送 Key/value 参数

callback：请求成功后的回调函数

$("#divID").load("feeds.jsp", {limit: 25}, function(){
   alert("The last 25 entries in the feed have been loaded");
});

六、jQuery插件扩展

jQuery核心里面的dom操作，事件，选择器，ajax并不能满足所有开发需求，可能还需要表单验证validate等等

对外提供了一些接口，来扩展jQuery定义自己的功能

三种类型的插件：

1、全局方法的插件

$.validateUsername("");

$.extend({  // jason对象
    validateUsername:function(username){
        
    }
});

2、局部方法的插件

$("#datagrid").datagrid({  // 对象
   　coloms:[  {title:"车次"}，
　　　　　　　{title:"出发站<br>达到站"},
　　　　　　　{title:"出发时间/到达时间"},
　　　　　　　{title:"备注"}
       ]
});

// 扩展绘制表格
$.fn.extend({
    datagrid:function(obj){  // 传入的是一个对象
        var colomns = obj.colomns;
        var tr = "<tr>";
        for(var i=0; i<columns.length; i++) {
            tr+="<td>"+columns[i].title+"</td>";
        }
        tr+="</tr>";
        $(this).append(tr);
    }
})

3、选择器插件

七、jQuery的HTML5播放器

浏览器需要借助Adobe实现播放视频，因为需要操作硬件调用系统的扬声器和麦克风，JS不能调用

Adobe可以嵌入到浏览器里面，actionScript(flex)，可以与JS相互调用，会出现安全漏洞，Safri支持Adobe

jQuery的HTML5播放器 jPlayer

客户端和服务端都用Http协议，request/response链接会断掉

在HTML5里面的JS代码可以写socket，WebSocket协议，节省服务器资源，可以即时通讯

八、EasyUI

基于Jquery基础之上的插件集合，打造功能丰富且美观的UI界面，没Extjs强大，但更轻量，非常容易实现页面的常见效果 tree draggable datagrid tab 

1、JqueryEasyUI目录结构介绍

demo:案例
locale:国际化
plugins:各种插件的实现
src:JqueryEasyUI源码
jquery.min.js jquery文件
jquery.easyui.min.js EasyUI主文件

2、引入JqueryEasyUI

<!--引入Jquery主文件，basic.html中-->
<script type="text/javascript" src="../easyui/jquery.min.js"></script>
<!--引入JqueryEasyUI主文件-->
<script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
<!--easyui的各种主题文件-->
<link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
<!--easyui的各种图标-->
<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">

3、JqueryEasyUI基础

（1）拖动

方式一：标签自定义

<div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="100px;height:100px;"> 
<div id="title" style="background:#ccc;">title</div></div>

方式二：通过JS代码创建

<div id="dd" style="100px;height:100px;"> 
<div id="title" style="background:#ccc;">title</div> 
</div>
<script type="">
      //$("#mydd").draggable(); 错误的方式? why? 这段代码没有得到执行的机会
      $(function(){
            $("#mydd").draggable();
      });
</script>

//如果没有参数传递,那么当光标一定到id为dd的元素上时,就可以拖动
//当光标移动到id为title元素上时,才能拖动
$('#dd').draggable({handle:'#title'});

原理:jQueryEasyUI.js 这个js文件,他会去页面上寻找判断每一个元素.看元素中的class属性是否是以easyui开头.那么这个js文件中的程序会将这个元素将其渲染为对应的组件

几乎每一种插件都有2种方式来实现.一种是通过纯html标签来实现 class="easyui-**"；第二种通过html标签+js代码来实现
如果内容变化不大,不需要经常改变: html来实现；如果内容经常变化,js+html来实现

data-options="k1:v1,k2:v2" ,让easyUI来识别，通过识别data-options中的各种属性和属性值为当前组件增加各种属性.

data-options="handle:'#title'": 如果没有data-options,光标移动到外层div的任何一个区域,都可以拖动. 当我光标移动到id胃title的元素上时,鼠标才变样式,只有鼠标一定到id为title元素上时,才可以实现拖动效果

class data-options
$("#mydd").方法名({});

方法名是有规律的:
$("#mydd").tree({k1:v1,k2:v2});
$("#mydd").menu({});
$("#mydd").draggable({});

方法中传递的是一个对象. 对象中的属性是以键值对的形式存在,多个属性之间用,分割.

<div id="dd" class="easyui-draggable" data-options="handle:'#title',revert:false,cursor:'help',disabled:false,proxy:'clone',edge:10" style="300px;height:300px;background:red">
     <div id="title" style="background:green;">title</div>
</div>

添加事件
$("#mydd").draggable({
事件名1:function(){},
事件名2:function(){},
});

（2）分页

通过标签创建

<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;">
</div> 

通过JS代码创建

// 页面元素：
<div id="pp" style="background:#efefef;border:1px solid #ccc;"></div>
 //js 代码:
$('#pp').pagination({ 
total:2000, 
pageSize:10 
}); 

（3）进度条

使用HTML标签或程序创建进度条组件，添加‘easyui-progressbar’类ID到<div/>标签

<div id="p" class="easyui-progressbar" data-options="value:60" style="400px;">
</div> 

（4）提示框

通过标签创建提示框，给元素添加一个"easyui-tooltip"类名，无需JS代码

<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>

（5）window窗口

窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口默认情况下,窗口可以移动,调整大小和关闭。它的内容也可以被定义为静态html或要么通过ajax动态加载。

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在页面开头加入以下语句
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
可能会出现样式改变.不能正确的显示组件的外观

<div id="win" class="easyui-window" title="My Window" style="600px;height:400px"   
        data-options="iconCls:'icon-save',modal:true">   
    Window Content    
</div>  

（5）Dialog对话框

该对话框是一种特殊类型的窗口，它在顶部有一个工具栏，在底部有一个按钮栏。对话框窗口右上角只有一个关闭按钮用户可以配置对话框的行为显示其他工具,如collapsible,minimizable,maximizable工具等。

<div id="dd" class="easyui-dialog" title="My Dialog" style="400px;height:200px;"   
            data-options="title:'我的对话框',modal:true,buttons:[{text:'保存',handler:function(){}},{text:'关闭',handler:function(){}}]">
        Dialog Content.    
</div>    

（6）messager消息窗口

消息窗口提供了不同的消息框风格，包含alert(警告框), confirm(确认框), prompt(提示框), progress(进度框)等。所有的消息框都是异步的。用户可以在交互消息之后使用回调函数去处理结果或做一些自己需要处理的事情

$.messager.alert('警告','警告消息');    
$.messager.confirm('确认','您确认想要删除记录吗？',function(r){    
    if (r){    
        alert('确认删除');    
    }    
});  

（7）menu菜单

1:通过标签创建菜单，给<div/>标签添加一个名为'easyui-menu'的类ID。每个菜单项都通过<div/>标签创建。我们可以添加'iconCls'属性来给菜单项定义一个图标显示到菜单项的左侧。添加'menu-sep'类ID菜单项将会生成一个菜单分割线。
2:在菜单被创建的时候它是隐藏和不可见的。调用'show'方法显示菜单。
3:使用Javascript创建菜单项并监听'onClick'事件。

（8）linkbutton按钮

通过标签创建

<a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">easyui</a>  

（9）menubutton菜单按钮

// 依赖关系
<a href="javascript:void(0)" id="mb" class="easyui-menubutton"     
        data-options="menu:'#mm',iconCls:'icon-edit',plain:true,duration:100">Edit</a>   
<div id="mm" style="150px;">   
    <div data-options="iconCls:'icon-undo'">Undo</div>   
    <div data-options="iconCls:'icon-redo'">Redo</div>   
    <div class="menu-sep"></div>   
    <div>Cut</div>   
    <div>Copy</div>   
    <div>Paste</div>   
    <div class="menu-sep"></div>   
    <div data-options="iconCls:'icon-remove'">Delete</div>   
    <div>Select All</div>   
</div> 

（10）Tabs选项卡

<div id="tt" class="easyui-tabs" style="500px;height:250px;">   
    <div title="张三" style="padding:20px;">   
        tab1    
    </div>   
    <div title="BBBB" data-options="closable:true" style="overflow:auto;padding:20px;">   
        tab2  
    </div>   
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;">   
        tab3    
    </div>   
</div>

（11）Tree树

树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

MyEclipse对Json格式的文件没有完全支持.

1.建立了一个json文件.MyE将这个空的json发布到了项目下,后期修改了json文件之后,
MyE没有正确的去管理这个文件.
FireBub--->网络--->json-->响应
重新加载发布项目
2.出现乱码 将json文件 另存为utf-8格式

（12）DateGrid数据表格

DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。DataGrid的设计用于缩短开发时间，并且使开发人员不需要具备特定的知识。它是轻量级的且功能丰富。单元格合并、多列标题、冻结列和页脚只是其中的一小部分.

<table class="easyui-datagrid">   
     <thead>   
            <tr>   
                <th data-options="field:'code',220">编码</th>   
                <th data-options="field:'name'">名称</th>   
                <th data-options="field:'price'">价格</th>   
            </tr>   
     </thead>   
     <tbody>   
            <tr>   
                <td>001</td><td>name1</td><td>2323</td>   
            </tr>   
            <tr>   
                <td>002</td><td>name2</td><td>4612</td>   
            </tr>   
     </tbody>   
</table>  

// JS方式
　　$('#dg').datagrid({    
    url:'datagrid_data.json',    
    columns:[[    
        {field:'code',title:'Code',100},    
        {field:'name',title:'Name',100},    
        {field:'price',title:'Price',100,align:'right'}    
    ]]    
});  
网页元素:<table id="dg"></table>