JQurey详解

JQurey的介绍
jquery是一个轻量级的js框架，具有跨浏览器的特性，兼容性好，并且封装了很多工具，方便使用。常用的有: 选择器 ，dom操作 ，ajax(ajax不能跨域) ，特效，工具类

JQurey的详细介绍

Jquery用起来比较简单，封装了很多逻辑，各种浏览器兼容性比较好，还支持方法链的编程方式

我对jquery也比较熟悉，像jquery的选择器，有通过#id,标签, .class选择元素，还有表单选择器，前面加一个冒号(:)，可以选择表单中的各种元素，比如文本框，单选框，多选框等等。还有基本选择器，可以指定选取哪个元素，因为使用$(selector)得到的是一个数组，可以指定，选取第一个:first，最后一个:last，奇数个:odd，偶数个:even，第几个元素:eq(index), 下标大于几，或者小于几的元素，还有通过属性过滤的，使用一个方括号，给定一个属性名称和属性值，选取具有指定属性和属性值的元素。

然后，使用jquery发送ajax请求，也比较方便，主要是使用其中的几个属性，有url, type, dataType, success, error, 在使用中，需要注意的是async这个属性，它默认是true，表示异步，这个时候，$.ajax后面的代码先执行，回调函数后执行，因为需要发送网络请求得到结果之后才能调用success指定的函数。

其他的，type表示发送get,还是post请求，默认是get, dataType表示请求返回的数据类型, 比如指定json, jquery会自动将服务端返回的json字符串转为js对象，如果不指定json，需要手动编码使用eval函数进行转换。

然后，我对jquery中的属性操作也比较熟悉，一般使用attr(), html(), text()这些函数,

然后，使用jquery操作dom元素也比较方便，像append,appendTo在元素内部末尾追加, prepend,prependTo 在元素内部开始追加，empty()清空元素内部的内容, remove()删除元素。

我们在项目中，也经常使用一些jquery的插件，比如实现ajax的文件上传，可以使用jquery.form.js这个插件，它有一个ajaxSubmit的函数, 可以配置请求成功的回调函数，当文件上传成功之后，调用回调函数做一些事情。

还有ztree，可以方便的实现树形的UI元素，比如树形菜单，树形下拉列表，它使用起来比较方便，只需要定义树节点的id 和pid就可以，如果使用其他的像dxtree(xml格式的数据),easyui的tree,extjs都需要递归的方式封装树型节点的json数据。

还有一些图表的插件，比如fushion charts, high chart, echarts, fushion charts 是使用flash来实现的，需要xml格式的数据，high charts 使用json格式的数据，echarts 也是使用json格式的数据, 可以用他们来实现柱状图，饼图，折线图，区域图， 像这些图表，一般就是设置x轴数据,y轴数据,以及展示图表的业务数据。

还有显示二维码的插件，jquery.qrcode.js, 它可以通过table，给每个td设置白色或者黑色的背景色来实现的，也可以在中间嵌入一个LOGO图片。

其实，我们在项目中，我们一般会使用一些基于jquery的UI框架，像easyui, 可以很方便的实现一些UI效果，比如布局，一般后台系统都设置东西南北中的布局, 还有树形菜单，折叠菜单，还有tab页布局(就是上面是一排选项卡，点击一个选项卡，下面出来对应的页面这种效果)，还有提示框，对话框，一般我们在项目中，对于表单，比如增加，修改等表单，采用dialog弹出层的方式来做，指定一个url，就可以将页面的内容载入到dialog中，

还有数据表格，就是datagrid, 可以在grid顶部设置各个按钮，以及搜索框，中间显示列表数据，可以方便的设置是否多选，在grid底部可以设置分页条，需要注意的是，datagrid发送分页请求的参数是page ,rows, page表示页码，从1开始数数，rows表示每页条数,
datagrid还提供了一些方便的函数，可以刷新，以及重新加载数据，也可以传递请求参数，如果需要对单元格的内容自定义html代码，可以使用formatter函数

还有easyui提供了方便的前台表单校验的方法，只需要在html页面对表单域设置一个class样式，当鼠标移开的时候，自动校验，如果不正确，在输入框后面给出提示。
然后在表单提交的时候，使用form(‘validate’)可以对整个表单的元素进行校验，返回true 或false.

还可以使用$.get,$.post,$.getJSON,$.getScript,$(选择器).load等发送ajax请求,但是这些都是异步的
使用jquery也可以发送跨域ajax请求，也比较方便，需要指定dataType为jsonp, 服务端直接返回 函数调用参数 的字符串

有时候，我们也自己开发一些jquery插件，一般是采用两种方式，
一个是基于jQuery类,一个是基于jQuery对象
当时项目中，很多地方都要选择部门，然后选择员工，这样有一个二级联动，我当时使用写了一个jquery插件，把发送ajax请求获取部门数据和根据部门获取员工数据的逻辑，封装在jquery插件中，这样，开发中使用起来比较方便，只需要引入一个js文件，给一个div设置一个class就可以了。在这个js文件的末尾，使用$(document).ready(function(){}), 获取指定class的元素, 给它生成select，option，并绑定onchange函数。

其实，在前端方面，除了js这块，我对各种常用的标签也比较熟悉，像jstl标签，c:开头的标签，
像c:forEach表示循环，c:if表示分支判断，还可以使用 c:choose, c:when 表示分支判断，fmt:开头的标签用来格式化，fmt: formatNumber 格式化数字，fmt:formatDate 格式化日期时间等。
除了jstl标签，对struts2标签也比较详细，s:开头的，s:iterator表示循环, s:property获取属性, s:if表示分支判断，s:date格式化日期时间，其实struts2的标签性能比较低，struts2性能低的主要原因是 它的标签造成的，所以，一般在使用struts2的时候，如果有性能方面的考虑，可以使用jstl替代。

然后，现在用freemaker也挺多的，用起来也比较方便，#list … as … 用来循环遍历，#if,#elseif,#else 用来作分支判断，#include用来包含另外一个页面，还可以指定日期格式, 在后面加?string(‘yyyy-MM-dd’)指定日期输出格式，数字格式在后面加?string.number , 货币格式加?string.currency, 百分比的格式加?string.perecent等,
其实freemarker标签不一定比jsp标签慢，如果页面比较简单，freemaker标签会比jsp标签慢，如果页面比较复杂，包含大量判断，数字日期格式化等，freemarker标签比jsp标签要快，同时，jsp自定义标签需要编写java类，比较麻烦，freemarker定义自定义标签比较方便。只需要使用<#macro>进行宏定义就可以了，不需要编写java类。