4.jquery

0.1概述

        jquery是一个快速，小乔，功能丰富的javascript库，它通过易于使用的API在大量浏览器运行，是的HTML文档遍历和操作，事件处理，动画和Ajax变得更加简单。

0.2使用

        1.引入jquery.js文件

<script type="text/javascript" src="jquery文件路径"></script>

         2.入口函数

$(document).ready(function(){ //read：jquery的函数，当页面的dom对象加载成功后会执行ready函数里的内容
    //js代码
})

                 简写：

$(function(){
    //js代码
})

       3.dom对象和jquery对象

                dom对象：使用javascript的语法创建的对象叫做dom对象，也就是js对象。

var obj=document.getElementById("text1"); //obj就是dom对象|js对象

                jquery对象：jquery语法表示的对象叫做jquery对象，注意：jquery表示的对象都是数组。

var jobj=$("#text1"); //jobj就是jquery对象，是一个数组，现在数组中就一个值

                 dom对象转jquery对象：

$(dom对象)

                 jquery对象转为dom对象：从数组中获取的第一个对象，第一个对象就是dom对象，使用[0]或者get[0]。

0.3选择器

        选择器：就是定位条件，通知jquery函数定位满足条件的DOM对象。

        基本选择器：根据ID，class属性，标签类型名定位HTML元素，转为jquery对象。

                id选择器：$("#id")

                class选择器：$(".class名称")

                标签选择器：$("标签名")

                所有选择器：$("*")

                组合选择器：$("id选择器,class选择器,标签选择器")

        表单选择器：$(":type属性值") 

0.4过滤器

        过滤器就是过滤条件，对已经定位的数字中的DOM对象进行过滤筛选，过滤条件不能独立出现jquery函数，只能出现在选择器后方。

        1.基本过滤器：

                first：选择第一个first，保留数组中第一个DOM对象

$("选择器:first")

                last：选择最后一个last，保留数组中最后一个DOM对象

$("选择器:last")

                 eq：选择数组中指定对象

$("选择器:eq(数组索引)")

                lt：选择数组中小于指定索引的所有DOM对象

$("选择器:lt(数组索引)")

                 gt：选择数组中大于指定索引的所有DOM对象

$("选择器:gt(数组索引)")

        2.表单属性过滤器：根据表单中dom对象的状态情况，定位dom对象

                选择可用的文本框

$.(":text:enabled")

                 选择不可用的文本框

$(":text:disabled")

                 复选框选中的元素

$(":checkbox:checked")

                 选择指定下拉列表的被选中元素

$("选择器>option:selected")

0.5jquery绑定事件

        方式一：

$(选择器).事件名称(事件的处理函数)

        方式二：on()绑定事件

$(选择器).on(event,function)

                event：事件一个或者多个，多个之间空格分开。

                function：可选。事件方式时运行的函数

0.6函数

        val()：操作数组中DOM对象的value属性。无参数时为获取第一个DOM对象的value属性值；有参数时对所有DOM对象的value属性赋值

        text()：操作数组中所有DOM对象的文字显示内容。无参数时为所有DOM对象的文字显示内容并拼接为一个字符串；有参数时对所有DOM对象的文字显示内容赋值

        attr()：对val，text之外的其他属性操作

attr("属性名")：获取DOM数组第一个对象的属性值

attr("属性名","值")：对数组中所有DOM对象的属性设为新值

        remove()：将数组中所有DOM对象及其子对象一并删除

        empty()：将数组中所有DOM对象的子对象删除

        appent()：为数组中所有DOM对象添加子对象

        html()：无参数为获取DOM数组第一个DOM对象元素内容；有参数时，设置DOM数组中所有元素的内容

        each()：对数组，json和dom数组等的遍历，对每一个元素调用一次函数

                语法1：

 $.each(要遍历的对象,function(index,element){处理程序})

                语法2：

jquery对象.each(dunction(index,element){处理程序})

                        index：数组的下标

                        element：数组的对象

0.7ajax

        全局刷新：整个浏览器被新的数据覆盖，在网络中传输大量的数据。浏览器需要加载，渲染页面。

        局部刷新：在浏览器的内部，发起请求，获取数据，改变页面中的部分内容。其余页面无需加载和渲染，网络中数据传输量少，给用户感受好。

        ajax是一种无需重新加载整个网页的情况下，能够局部刷新部分页面内容的方法。

同步：提交请求->等待服务器处理->处理完毕返回。这个期间客户端浏览器不能干任何事。
异步: 请求通过事件触发->服务器处理（这时浏览器仍然可以作其他事情）->处理完毕返回。

        1.java中json的使用

                java中的json工具库：

                        fastjson：速度快，不是最符合json处理规范

                        jackson：性能好，规范好

                        json-lib：性能差，依赖多

       2.jquery中json的使用

                (1)$.ajax()：jquery中实现ajax的核心函数

                (2)$.post()：使用post方式做ajax请求

$.post(url,data,function(resp),dataType)

                        url：必需

                        data：可选，请求发送到服务器的数据

                        function(resp)：可选，请求成功时运行的函数；resp自定义形参名，为请求的结果数据

                        dataaType：可选，期望从服务器响应的数据类型

                (3)$.get()：使用get方式发送ajax请求

$.get(url,data,function(resp),dataType)

                $.post()和$.get()在内部都是调用$.ajax()

0.8正则表达式

        1.yyyy-MM-dd hh:mm:ss

/(\d{4}-\d{2}-\d{2}\d{2}:\d{2}:\d{2})|(\d{2}-\d{2}\d{2}:\d{2}:\d{2})|(\d{2}:\d{2}:\d{2})/

        2.yyyy-MM-dd

/^[1-2]{1}([0-9]{3})-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/
或
/^[0-9]{4}-[0-1]?[0-9]{1}-[0-3]?[0-9]{1}$/

         3.手机号

/^((\(\d{2,3}\))|(\d{3}\-))?1[3,8,5]{1}\d{9}$/

         4.身份证

/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/