xml地图|网站地图|网站标签 [设为首页] [加入收藏]

您的位置:亚洲必赢 > 计算机尝试 > jQuery中的常用内容总结

jQuery中的常用内容总结

发布时间:2019-05-30 05:04编辑:计算机尝试浏览(166)

    jQuery中的常用内容计算(贰)

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

    jQuery中的常用内容总计(1)

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

     

     

    前言

    转发请注脚地址:

    前言

    *  距离上次博客更新已经有二10来天了(●′ω`●),恍惚之间时间已经从身边流走~,好优伤≡(▔﹏▔)≡;所以,小编调节此番不管熬夜到几点都要把本节和第3节内容总体写完~
    *

     

      倒霉意思(✿◠‿◠),由于回家看病以及处理部分别样业务耽误了,不然那篇博客本该上前一周要么下一周写的;相同的时候闲聊几句:在此间建议各位开辟的童鞋,假使十分尽快医疗,不要拖,大病的话甚是~,肉体是本钱,纵然人的身直情径行康是1的话,若没有前边的1,后边再多的零也是徒劳无益,同有时候,建议在支付的时候保持四个好的心怀,积极面对需要和手艺难题,不要像本身同样在难的地方朝三个地点死钻、而且日常性考虑必要之外的急需,那样都以不太好,尽量以"供给"的心绪去"开荒",而不是以"开荒"的心理做"需要",那一点要清理~(◕ܫ◕)~

    内容提要

    内容提要

    NOW,回到正题==》



    内容提要

     

     


    • 选择器(上一节)
    • 选取器的强大方法([jQuery中的常用内容总结。上一节]())
    • 节点的CSS操作及节点别的操作([上一节]())
    • Ajax同步与异步(本节)
    • 事件(本节)
    • 弹窗(本节)
    • 参数种类化(第三节)
    • 遍历(第三节)
    • 其他(第三节)
    • 选择器(第一节)
    • 选取器的扩张方法(第一节)
    • 节点的CSS操作及节点其他操作(第一节)
    • Ajax同步与异步(上一节)
    • 事件([**上一节**]())
    • 弹窗([**上一节**]())
    • 参数连串化(本节)
    • 遍历([本节]())
    • 其他([本节]())

     

      ajax在实际支出中用的特地多,特别是内外端分离的明日甚是~,接下去所说的ajax都是通过jQuery封装过的,至于写法大概有ajax规范写法和jQuery简写两种,下面先交由那二种写法的体制->


    • 选择器(本节)
    • 选拔器的恢弘方法(本节)
    • 节点的CSS操作及节点别的操作(本节)
    • Ajax同步与异步(第2节)
    • 事件(第二节)
    • 弹窗(第三节)
    • 参数类别化(第陆节)
    • 遍历(第四节)
    • 其他(第四节)
    $.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         });    
    

    A>表单参数体系化提交


      以上第二种(同步)是ajax典型写法,第一种(异步)是jQuery简洁写法,当然假使是异步的话那两种写法都有效,不过,假设是一齐(涉及到两个请求并且分左右的话)只可以够取第叁种写法,在一齐请求的时候请小心要讲async(是或不是同步)那么些变量的参数写成false,至于一般景色下的伏乞是post依旧get呢,那些自家付出的建议是:一般传参到后端都用post方法就能够,实际利用中那二种请求并未明确性的不相同(是或不是幂等能够忽略不计);别的以上二种请求的主意的参数数量或回到参数的数目大概与jQuery完整写法不同,对于那一个主题素材,小编的表达是:在js中,方法调用和章程发明那二者之中前者的参数能够轻松后者的参数数量~,遂,大家不要在意哈(●´∀`)~

      假设未有借助jQuery,表单能够平素付出,那样带来八个难点就是安枕而卧(get提交)或表单参数验证障碍,嗯~,大概很难懂,那样啊,我先放张图,那图是原生get提交的->

    采取器大概分四类:

    B>事件

    图片 1

      >>CLASS(类)选择器  形如:$(".[dom中定义的class的值]");

     jQuery事件是在支付中差不离是每一日都会有,这里先給大家罗列下首要的多少个事件->

     

      >>ID选择器      形如:$("#[dom中定义的ID的值]");

      bind():相配的dom成分附加一个或多事件管理器,多少个事件需接纳空格隔开分离,形如:$("#id").bind("click mouseover",function(){}) 

      这下清楚了啊,全数的参数都在浏览器里面展现,稍稍别有用心的人就能够轻便利用,那是以此;

      >>标签字采用器    形如:$("[标签名称]");

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

      倘诺是post提交,恐怕没有上述这一个难点,不过。。。,假若参数值提交前要求在js中做拍卖(表单参数验证或参数拼接等等),那样一向把多少扔给后台的童鞋,料定不太好~

      >>复合选取器     形如:$(".[dom中定义的class的值] [标具名称]");或 $("#[dom中定义的ID的值] [标签字称]");

      blur():相称的dom失去主旨事件,一般用于绑定input输入框

      额,还足以依据前两章中的方法。。。恐怕会疲劳啊~,终究每1个表单都要独自取值。。。总而言之,那样麻烦;哈哈~ヽ(●´ω`●)ノ,既然麻烦,jQuery给大家提供了七个好用的不二等秘书技serializeArray()和serialize()

    这肆类选择器定义的都以以欧元符号$开首后接着左右括号,括号中的值视不一样的选择器而不一致,这里十分少缀诉,直接上代码吧:

      change():用于相称的dom的值退换事件,常用来表单中select下拉框只怕单选按键

      前者能够将表单的参数值类别化成三个Array的款式(用于post提交),后者会将表单参数值体系化成键值字符串的款型(用于get提交),贰话不说,先放出源码以及作用图-->

     1 <body>
     2 <div id="bodys">
     3         <h3>h3</h3>
     4         <p class="1">第一个P</p>
     5         <p class="2">第二个P</p>
     6         <p class="2">第三个P</p>
     7         <p id="4">第四个P</p>
     8         <p id="4">第五个P</p>
     9     <hr>
    10     <input type="button" onclick="classSelect()" value="类选择">
    11     <input type="button" onclick="idSelect()" value="ID选择">
    12     <input type="button" onclick="labelSelect()" value="标签选择">
    13     <input type="button" onclick="complexSelect()" value="复合选择">
    14     <script type="text/javascript">
    15     function classSelect(){
    16         alert($(".1"));
    17     }
    18     function idSelect(){
    19         alert($("#4"));
    20     }
    21     function labelSelect(){
    22         alert($("h3"));
    23     }
    24     function complexSelect(){
    25         alert($("#bodys p:eq(4)"));
    26     }
    27 </script>
    28 </div>
    29 </body>
    

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

     1 <form style="padding-left: 100px;" id="forms">
     2     姓名:<input type="text" name="name"/><br/>
     3     班级:<select name="class">
     4                 <option value="1">一班</option>
     5                 <option value="2">二班</option>
     6                 <option value="3">三班</option>
     7             </select>
     8             <br/>
     9     性别:男<input type="radio" name="sex" value="male"/>
    10              女<input type="radio" name="sex" value="female"/>
    11              <br/>
    12     课程:<label><input name="course" type="checkbox" value="1" />语文 </label> 
    13             <label><input name="course" type="checkbox" value="2" />数学</label> 
    14             <label><input name="course" type="checkbox" value="3" />历史</label> 
    15             <label><input name="course" type="checkbox" value="4" />化学</label>
    16     <br/>
    17         <button  type="submit">submit</button>
    18         <button type="button" onclick="submitForm(1)">提交1</button>
    19         <button  type="button" onclick="submitForm(2)">提交2</button>
    20          <button type="reset">取消</button>
    21 </form>
    
     1 function submitForm(val){
     2         if(1==val){
     3             //serializeArray
     4             var serializeArray=$("#forms").serializeArray();
     5             console.log("serializeArray:");
     6             console.log(serializeArray);
     7             for(var i in serializeArray){
     8                 
     9             }
    10         }else{
    11             var serialize=$("#forms").serialize();
    12             console.log("serialize:");
    13             console.log(serialize);
    14         }
    15     }
    

    这边不管是类、ID、标签或然符合采取器,结果都以3个List类型(依照浏览器大约的显示格局):

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

    图片 2

    图片 3

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

    图片 4

     

      keypress():按钮放手事件,一般用于输入框输入时绑定此事件

      后者已经相比健全了,能够直接拼接到提交路线前边就好了,但~对于前者,那几个serializeArray只是扶持做了一片段,要是是post提交应该是{key1:value一,key二:value二}的方式,此时即令对于新手也很轻便写二个通用的主意管理成靶子键值对的款式,在此就进献四个吗(๑´ڡ`๑)-->

    准确的说那是3个合乎项目,一般别的学Corey面都以叫jQuery对象类型,在此地也顺当大体叫"jQuery类型"吧,今后来看望那几个jQuery对象到底是何许东东:

      load():dom加载实现事件,一般用来页面加载后活动试行此事件

     1     function submitForm(val){
     2         if(1==val){
     3             //serializeArray
     4             var serializeArray=$("#forms").serializeArray();
     5             console.log("serializeArray_before:");
     6             console.log(serializeArray);
     7             console.log("serializeArray_after:");
     8             var paramsArray = $("#forms").serializeArray(),params = {};
     9             for ( var i in paramsArray)
    10                 params[paramsArray[i].name] = paramsArray[i].value;
    11             console.log(params);
    12         }else{
    13             var serialize=$("#forms").serialize();
    14             console.log("serialize:");
    15             console.log(serialize);
    16         }
    17     }
    

    图片 5

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

      实效:

    嗯~,这里总括下,jQuery对象一般包罗:

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

    图片 6

        List:存放dom内容,context:采取范围(约等于效能域)

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

      额,嗯~,其实有七个小标题,借使表单有1项尚未填的话参数会不设有,还会有八个难题是 多选框长久只会系列化第多个值,切记 切记。。。(ಠ .̫.̫ ಠ)

        length:当前选拔器选用的数据(也便是List对象的大小)

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

      啊哈,那几个标题就不折腾了 就付给聪明的读者吧~~~

        prevObject:上一个选拔对象(假设未有则都是document)

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

      哦~~~,还设有二个主题材料是,要是表单外层的form标签若不存在,则无法体系化参数,要是table标签里面嵌二个form的也无法,至于这些缘故 个人推测也许是与html标准争持呢~,那个是自己在骨子里开采中遇见的难题,希望各位不要踩坑啊!

        selector:接纳的艺术(就是选用器括号内部的内容)

      mouseover():鼠标指针位于成分上方事件

    B>遍历

     且注意!假若是ID选取器,则jQuery对象中从不prevObject这么些参数,因为ID本身正是唯1的,举例地方的代码,如若在html中定义了五个ID,jQuery选取器永久只会采纳第三个相当的,假若你只需求在class选用器结果中只取第伍个,一般的话有三种写法

    本文由亚洲必赢发布于计算机尝试,转载请注明出处:jQuery中的常用内容总结

    关键词: 565net网站