一、jQuery UI

jQuery UI 则是在jQuery 基础上开发的一套界面工具，几乎包括了网页上你所能想到和用到的插件以及动画特效，让一个毫无艺术感只知道码字的码农不费吹灰之力就可以做出令人炫目的界面。让你在做界面的时候随便‘拿来’就用，还有一点就是，它是免费开源的，用户可根据需要自定义甚至重新设计

//以下是使用jQuery UI中dialog实例
<link href="accordion/jquery-ui.css" rel="stylesheet">
<script src="accordion/external/jquery/jquery.js"></script>
<script src="accordion/jquery-ui.js"></script>

    <a href="#" id="dialog-link" class="ui-state-default ui-corner-all">
    <span class="ui-icon ui-icon-newwin"></span>Open Dialog</a>
    <div id="dialog" title="jQuery UI">
      <p>hello world</p>
    </div>

<script type="text/javascript">
      $( "#dialog-link" ).click(function( event ) {
        $( "#dialog" ).dialog( "open" );
        //取消点击a标记的默认操作
        event.preventDefault();
    });
    //提示框
    $( "#dialog" ).dialog({
        //提示框默认不显示
        autoOpen:false,
        width:300,
        height:200,
        //设置提示框的背景是否显示
        modal:true,
        //设置提示框的按钮，是一个数组，每一个按钮是一个对象
        buttons:[
            {text:"ok",click:function () {$( this ).dialog( "close" );}},
            {text:"cancle",click:function () {$( this ).dialog( "close" );}}
        ]
});
</script>

open Dialog
dialog

二、 开发插件 - 原理

1. 对象方法插件 - $().each()
   $.fn.extend(object)

2. 全局函数插件 - $.each()
   $.extend(object)

   $.fn.extend({
    //对象方法
     test:function () {
     $(this).css("background","red");
       }
    })
   

 $.extend({
   //全局函数
    wid:function ($elem) {
    $elem.css("width","200")；
    }
  })

调用对象方法和全局函数

    $("div").click(function () {
    //测试对象方法
    $(this).test();
    //测试全局函数
    $.wid($(this));
    })

三、HTML5新表单

input新类型:

email:验证是否包含@
search:搜索框
url: 验证是否包含http
tel: 效果只能在移动端出现
number: 数字选择 min max step
range: 范围类型 min max step value
color: 颜色选择器
date:日期类型
week:星期类型
month:月份类型

email:<input type="email"><br/>
    search:<input type="search" value="124324"><br>
    url: <input type="url"><br>
    tel: <input type="tel"><br>
    num: <input type="number" min="10" max="50" step="5"><br>
    range: <input type="range" min="0" max="100" step="40" ><br>
    color: <input type="color"><br>
    date: <input type="date"><br>
    week: <input type="week"><br>
    month <input type="month"><br>
    <input type="submit" value="注册">

表单新元素

datalist: 定义input的备选框

input的list的值要等于datalist的id值
数据与结构的分离
数据：预定义数据内容datalist
结构：显示在页面中的元素input
使用datalist元素定义的数据，可以重复使用

<input type="text" list="datalist">
<datalist id="datalist">
<option>南京</option>
<option>上海</option>
<option>北京</option>
</datalist>

datalist

progress: 进度条

max - 设置进度条的最大值
没有min属性 - 最小值为0
value - 当前的进度值

<progress max="100" min="0" value="20"></progress>

progress

meter : 刻度

min: 最小值
max: 最大值
value: 当前值
low: 低预警值
high:高预警值

<meter max="100" min="0" low="20" high="80" value="90"></meter>

meter

表单新属性

1. placeholder ： 置空字符

2. multiple:允许输入多个值
   多个值使用逗号隔开，例如多个邮箱
   只定义属性名，没有定义属性值

3）autofocus:自动获取焦点
只定义属性名，没有定义属性值

4）form：允许将表单元素定义在表单外

form表单外的表单一定要写form的id