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

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

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

前言

*  距离上次博客更新就生二十来天了(●′ω`●),恍惚之间时间已经由身边流走~,好难了≡(▔﹏▔)≡;所以,我决定这次未任熬夜到几乎点还如将本节跟老三节约内容总体形容了~
*

内容提要


 

  • 选择器(上一节)
  • 选择器的恢弘方法([上一节](http://www.cnblogs.com/funnyzpc/p/7455909.html))
  • 节点的CSS操作与节点其他操作([上一节](http://www.cnblogs.com/funnyzpc/p/7455909.html))
  • Ajax同步和异步(本节)
  • 事件(本节)
  • 弹窗(本节)
  • 参数序列化(第三节)
  • 遍历(第三节)
  • 其他(第三节)

  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():

  图片 1

  上图中
id为p2的dom是故jQuery插入的,然后绑定的一个点击事件及一个鼠标移开事件,当然(•‾̑⌣‾̑•)✧˖°只有当dom存在的早晚才见面执行绑定的事件,也尽管是用即刻半只事件归一(用统一的函数处理这些事件);当然上图备受id为p2的节点是因此jQuery插入的(属于未来事变之处理范畴),比较适中的相同栽艺术是为此on来进展绑定,如果小版本的jQuery
的语建议吧堪行使live()进行绑定( ̄ε
 ̄)~

C>弹窗

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

  1>alert弹窗

    图片 2

 

 

  2>对话输入弹窗

     图片 3

图片 4

 

 

  3>按钮是/否
弹框

     图片 5

图片 6

 

 

  4>html子窗
弹窗

 图片 7

图片 8

 

 

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

 图片 9

图片 10

 

   咳咳~,以上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,本章搞定ㄟ(▔▽▔)ㄏ

 

 

相关文章