刚刚接触jquery,很多东西都不是很理解,主要还是停留在copy代码的位置上,现对今天学到的知识总结如下:
1.?????? ?$('#dialog1')代表获取id为dialog1的元素
2.?????? Jquery弹框:
这里使用了jquery ui (访问http://jqueryui.com/ )
通过用户自定义得到自己想要的弹框样式,并根据需要勾掉一些不用的功能,然后下载文件到本地.
在jsp中引入文件夹中所带的文件
jquery-ui-1.7.3.custom.css??? --自定义的样式文件,如果要修改弹框样式可以改这个
jquery-1.3.2.min.js
jquery-ui-1.7.3.custom.min.js
这样就可以在自己的页面中使用Jquery弹框了,使用方法是:
(1)???? 首先,要在body中建立一个div并指定其id,这个div就是放置弹框中的内容,可以按照自己的想法来设计及修改.如:
<div id="dialog1" title="注意"></div>
(2)???? 然后在js中写入dialog1的声明:
<script type="text/javascript">
$(function(){
?????? $('#dialog4').dialog({??
?????????? autoOpen: false,
?????????? width: 375,
?????????? position:[180,60],
?????????? buttons: {
??? ?????????? "更新": function() {
????????????????? $(this).dialog("close");
????????????? },
????????????? "取消": function() {
????????????????? $(this).dialog("close");
????????????? }
?????????? }
???? });
});
</script>
其中position可以设置弹框的位置,buttons中的function可以定义自己想要触发的事件
(3)???? 在事件触发中弹出dialog
$('#dialog2').dialog('open');
(4)???? 当想要重复使用同一dialog时可以修改:
若修改提示的button,可使用语句:
$('#dialog1').dialog('option', 'buttons',{
????????????????? "确定": function() {
???????????????????? $(this).dialog("close");
????????????????? }
???? ?????? });
若想修改提示文字,可使用:
$('#dialog1').html('请选择要删除的条目!');
?
3.?????? Jquery的使用
(1)???? 获取text的值: $('#select').val(),该值不能进行设置,若要设置需要通过attr来实现.
(2)???? 获取某元素某个属性的css值:? $('#select').css(“display”)
(3)???? 设置某元素某个属性的css值:? $('#select').css(“display”,’none’)
Display正常时是$('#select').css(“display”,’’)
(4)???? 访问servlet并传参
这里访问servlet的方式是:
?var name=$('#name').val();
?????? var parentid=$('#parentid').val();
?????? var comments=$('#comments').val();
?????? $.get("DeviceTypeAdd",{name:name,parentid:parentid},
?????????? function dedit(data){???????????????????
????????????? //alert(data);//很多时候数据出错我都会通过弹data值来差错
????????????? if(data=="true"){
????????????????? $('#dialog3').html('添加成功!');????
????????????? }
????????????? else{
????????????????? $('#dialog3').html('添加失败!');
????????????? }
????????????? $('#dialog3').dialog('open');
??????? });
(在刚开始做这部分的时候很不理解,以为jquery访问servlet和在MVC架构中使用servlet一样,访问完后会进行页面的跳转.而事实上,jquery在通过$.get方式访问后,还会回到原来的jsp页面,只是返回一个data值来表示访问成功.我们通常使用这个data值来传递一些有用的信息.比如返回json数组,会在下一篇里详细说说)
其中$.get要注意在servlet中有相应的doGet操作
传参要在servlet中有相应的request.getparameter
如果传的是数组,也可以是request.getparametervalues
若servlet运行成功,会返回一个data,这个data值可以在servlet中通过out.write输出得到:
以与上面的js对应的servlet为例
/*DevicetypeAdd.java*/
? ??protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
??// TODO Auto-generated method stub
??response.setContentType("text/html");
??request.setCharacterEncoding("UTF-8");/*解决中文乱码的问题*/
???response.setCharacterEncoding("UTF-8");
??????? PrintWriter out = response.getWriter();
??????? boolean data=true;
???????
??String name=request.getParameter("name");
??int parentid=2;
??String comments=request.getParameter("comments");
??Connection conn=null;
??PreparedStatement ps=null;
??ResultSet rs=null;
??try{
???conn=DBConnection.getConnection();?
???ps=conn.prepareStatement(
???"insert into ddpms_devicetype values(ddpms_devicetype_seq.nextval,?,?,?)");
???ps.setString(1, name);
???ps.setInt(2,parentid);
???ps.setString(3,comments);
???int flag=ps.executeUpdate();
???if(flag!=1)
????data=false;
??}catch(Exception e){
???e.printStackTrace();
??}
??finally{
???try{
????DBConnection.dbClose(conn,ps,rs); //释放数据库连接资源
???}catch(Exception e){
????e.printStackTrace();
???}
??}
??out.write(String.valueOf(data));
?}
?
4.?????? Js的退出操作是: return? false;