MyException - 我的异常网
当前位置:我的异常网» jQuery » jQuery中的惯用内容总结(二)

jQuery中的惯用内容总结(二)

www.MyException.Cn  网友分享于:2013-11-16  浏览:0次
jQuery中的常用内容总结(二)

jQuery中的常用内容总结(二)

转载请注明地址http://www.cnblogs.com/funnyzpc/p/7571993.html

前言

  距离上次博客更新已经有二十来天了(●′ω`●),恍惚之间时间已经从身边流走~,好难过≡(▔﹏▔)≡;所以,我决定这次不管熬夜到几点都要把本节和第三节内容全部写完~

内容提要


 

  ajax在实际开发中用的特别多,尤其是前后端分离的今天甚是~,接下来所说的ajax都是经过jQuery封装过的,至于写法大致有ajax标准写法和jQuery简写两种,下面先给出这两种写法的样式->

$.ajax({
             type : "post",  
              url :app+"/app/forum/getUser.json",
              data : {"a":"1","b":"2"},
              async : false,
              success : function(d){  
                  $elem.append("<option value=''>"+"--"+"</option>");
                  for(var i in d){
                      if(d[i].value)
                      $elem.append("<option value='"+d[i].userid+"'>"+d[i].value+"</option>");
                  }
              }  
         }); 
1     $.post(module.opts.url + "/delete.json", {"a":"1","b":"2"}, function(d){
2             if (d.error){
3                 alert("删除出错:" + d.error.msg);
4                 return;
5             }
6                         /*请求成功后的逻辑代码*/
7         });    

  以上第一种(同步)是ajax标准写法,第二种(异步)是jQuery简洁写法,当然如果是异步的话这两种写法都可行,但是,如果是同步(涉及到多个请求并且分前后的话)只可以取第一种写法在同步请求的时候请注意要讲async(是否同步)这个变量的参数写成false,至于一般情况下的请求是post还是get呢,这个我给出的建议是:一般传参到后端都用post方法就可以,实际使用中这两种请求并没有明显的区别(是否幂等可以忽略不计);另外以上两种请求的方法的参数数量或返回参数的数量可能与jQuery完整写法不一致,对于这个问题,我的解释是:在js中,方法调用和方法申明这两者之中前者的参数可以少于后者的参数数量~,遂,大家不要介意哈(●´∀`)~

B>事件

 jQuery事件是在开发中几乎是每天都会有,这里先給大家列举下主要的几个事件->

  bind():匹配的dom元素附加一个或多事件处理器,多个事件需使用空格隔开,形如:$("#id").bind("click mouseover",function(){}) 

  on():用于绑定未来元素的事件,一般在插入dom时会使用到

  blur():匹配的dom失去焦点事件,一般用于绑定input输入框

  change():用于匹配的dom的值改变事件,常用于表单中select下拉框或者单选按钮

  click():用于匹配的dom被点击事件

  focus():dom获取焦点事件,一般用户点击输入框进行输入时候使用此事件

  keydown():按键按下事件,一般用于输入框输入时绑定此事件

  keypress():按键松开事件,一般用于输入框输入时绑定此事件

  load():dom加载完毕事件,一般用于页面加载后自动执行此事件

  mousedown():鼠标指针移动到dom上方事件

  mouseenter():鼠标指针穿过dom事件

  mouseleave():鼠标指针离开dom事件

  mousemove():鼠标指针在dom中移动事件

  mouseout():鼠标指针从dom上移开事件

  mouseover():鼠标指针位于元素上方事件

  mouseup():鼠标在dom上松开事件

 好了(◕ܫ◕),以上事件列举完毕,现在实例应用一个重要的不怎么用到的事件bind():

  

  上图中 id为p2的dom是用jQuery插入的,然后绑定的一个点击事件和一个鼠标移开事件,当然(•‾̑⌣‾̑•)✧˖°只有在dom存在的时候才会执行绑定的事件,也就是将这两个事件归一(用统一的函数处理这些事件);当然上图中id为p2的节点是用jQuery插入的(属于未来事件的处理范畴),比较合适的一种方式是用on来进行绑定,如果低版本的jQuery 的话建议也可以使用live()进行绑定( ̄ε  ̄)~

C>弹窗

  这里介绍五种弹窗,两大类,一类是js原生弹窗,一类是jQuery UI弹窗

  1>alert弹窗

    

 

 

  2>对话输入弹窗

     

 

 

  3>按钮是/否 弹框

     

 

 

  4>html子窗 弹窗

 

 

 

  5>jQuery UI弹窗(需要引入jquery UI)

 

 

   咳咳~,以上5种弹窗,第一种是不可传参的,第五种需要使用jquery_UI.js(jQuery 弹窗插件)且传参需要单独从表单取值...

只有展示效果可不行,现在(*☉౪⊙*)把源码展示下:

 1 <br/>
 2   <button onclick="popUp(1)">1.alert弹窗</button>
 3 <br/><br/>
 4   <button onclick="popUp(2)">2.对话输入弹窗</button>
 5 <br/><br/>
 6   <button onclick="popUp(3)">3.按钮是/否 弹框</button>
 7 <br/><br/>
 8   <button onclick="popUp(4)">4.html子窗 弹窗</button>
 9 <br/><br/>
10   <button onclick="popUp(5)">5.jQuery UI弹窗</button>
11 <!-- <button onclick="insertDom();">P后面插入一个P元素</button> -->
12 <script>
 1 function popUp(val){
 2     if(1==val){
 3         alert("这是一个弹出框~");
 4     }else if(2==val){
 5         var text = prompt("这是一个输入对话框,请输入您的内容:","20");
 6         alert("您输入的内容是:"+text);
 7     }else if(3==val){
 8         var text=confirm("确定是您输入的内容吗?");
 9         if(text)
10             alert("您输入的是 "+text);
11         else
12             alert("您输入的是 "+text);
13     }else if(4==val){
14          var pop = window.open('','_blank','width=400,height=200,menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes');
15          pop.document.write("<h2>这是一个窗口哦~</h2>");
16          pop.document.write("<br/>");
17          pop.document.write("<br/>");
18          pop.document.write("<button>确认</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
19          pop.document.write("<button>取消</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
20          window.opener="success";
21         var loop= setInterval(function() {     
22                 if(pop.closed) {    
23                       clearInterval(loop); 
24                     alert("您关闭了窗口咯~");
25                 }    
26             }, 500);
27     }else{
28         var cc="<div class=col-sm-3>" +
29         "<input type=\"text\" name=\"id\" value="+99+" style=\"display:none;\">" +
30                 "<textarea style=\"width:440px;height:150px;\" name=\"reply\"></textarea>" +
31                 "</div>";
32         $dlg = $("<div title=\"您的内容\"><div>").html(cc).dialog({
33         modal:true,width:500,height:300,
34         buttons:{
35             "确认":function(){
36                 if($("textarea[name=reply]").val()=="")
37                     alert("您回复的内容为空,请检查!");
38                 else
39                     alert("您输入的内容是:"+$('textarea[name=reply]').val());
40             },
41             "取消":function(){
42                 $dlg.dialog("close");
43             }
44         },
45         close:function(){
46             $dlg.dialog("destroy");
47         }
48     });
49     }
50 }

  以上我是根据函数的参数(val)来区别弹窗类别,其:

    第一种弹窗使用alert,是最简单最通用也是最不堪大用的弹框

    第二种弹窗使用的是原生的prompt,同时需要把这个对象赋给一个变量,通过参数可以即可获取到用户输入的内容哦~

    第三种弹框是一种单选性质的弹框,使用的是confirm,同样也是需要将这个对象赋给一个变量才可获取到true 或 false 嘿~

    第四种弹框使用的是一个完整的html页面(需要window.open,里面一堆配置参数哈~),其最大的好处就是自定义特别强而且原生,目前项目也用到过;在这里说个缺点哈:

       这种弹框很容易被浏览器拦截(尤其chrome),如果拦截了请点击浏览器地址栏,然后点同意即可~

    第五种弹窗需要用到jQuery的UI插件(dialog方法),自定义也很强,不过个人感觉很丑,如果有时间建议尝试bootstrap插件,比这个亮潵百倍哄~

 

oh~yeah,本章搞定ㄟ(▔▽▔)ㄏ

 

 

文章评论

为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
那些争议最大的编程观点
那些争议最大的编程观点
漫画:程序员的工作
漫画:程序员的工作
程序员必看的十大电影
程序员必看的十大电影
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
程序员应该关注的一些事儿
程序员应该关注的一些事儿
老程序员的下场
老程序员的下场
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
旅行,写作,编程
旅行,写作,编程
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
10个调试和排错的小建议
10个调试和排错的小建议
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
总结2014中国互联网十大段子
总结2014中国互联网十大段子
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
为什么程序员都是夜猫子
为什么程序员都是夜猫子
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
程序员和编码员之间的区别
程序员和编码员之间的区别
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
Java程序员必看电影
Java程序员必看电影
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
程序员的鄙视链
程序员的鄙视链
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
一个程序员的时间管理
一个程序员的时间管理
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
鲜为人知的编程真相
鲜为人知的编程真相
编程语言是女人
编程语言是女人
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
 程序员的样子
程序员的样子
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
我的丈夫是个程序员
我的丈夫是个程序员
中美印日四国程序员比较
中美印日四国程序员比较
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
如何成为一名黑客
如何成为一名黑客
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有