• 关于JQuery的技巧、易错点(连载中.....)


      JQuery的诞生让我们对原生态的js代码变得陌生起来,不得不说,他真的是很强大,接下来博主就浅谈一下我对JQuery的一些认知和小tips。

    JQuery:他是一个JavaScript库,他将原生态的js代码封装成若干功能强大,使用便捷的方法,对于我们工程师来说,只需要知道基本的js语法,
    然后会调用JQuery方法就行了。接下来我们就聊一下JQuery中那些容易理解错的属性、方法
      
     
      1.首先,是选择器

      $("div,span,p.myClass"); 这是取出 所有div span 和 class名叫 myClass 的p标签 , 这里经常会有朋友在书写/检查代码时,
    习惯性的认为自己选中的是div中的span、p标签。而忽略了div外部的,这种多条件的选择器,容易记错。了解的语言太多,难免会混。
     
      $("tr:eq(1)");只要是带索引值的东西,都可以选中,这个就是直接按索引值选择,选中索引值为1的元素。eq的索引是从0开始计算的。
    $("ul li:nth-child(2)") 这是选中每个ul的第二个li,注意他从1算,而eq从0算。而且nth-child 是选中所有ul中的第二个子元素
    $("div:nth-of-type(2)"); nth-of-type 他是选中 父容器div中,同一类标签名(这里是至少有2个);而且在div中位置最靠前的;
        第二个子元素。他的限制条件很多,经常有同志选中的元素并不是最靠前的,从而为达到预期而出错。
     
     
    2.其次,是事件
     
      文档就绪函数ready():
        $(document).ready(function(){ // 在这里写你的代码... }); 作用是,处理完完HTML代码后再加在js代码
        避免出现js代码无法取到HTML代码的情况 
        $(function(){}); 这是文档就绪函数的简写形式,通过匿名函数的写法
      他与window.onload()方法的区别:
        (1)window.onload需要在网页所有内容都加载完成后才能执行,包括那些视频之类的;而
      文档就绪函数只要dom结构加载完成就可以执行
        (2)window.onload如果写了好几个,只会执行最后一个,但是文档就绪函数不会,他每个
      都会执行
     
      
      事件绑定函数on():   
        on(events,[selector],[data],fn)给元素绑定一个或多个事件的事件处理函数,on的使用十分灵活,当然也容易出错
          
        $("button").on("click", function(){
          console.log($(this).html());
        })
        这是最基本的事件绑定方式,只使用了event和function两个参数
     
     
        $("button").on("mouseover click",function(){
          console.log($(this).html());
        })
        mouseover和click事件都可以触发回调函数,实现多个事件绑定一个函数
     
     
        $("button").on("click",{name:"我"},function(event){
          console.log(event.data.name);
        })
          这是调用函数时,传入参数。注意:event是一个默认的形参,不写是默认有的,如果我们自身定义形参,
        那必须写上event,因为传参时默认先给event。所以,这里,经常会有朋友不注意,然后导致传参混乱出错。
          注意这里打印出来的内容,clientX:72 clientY:20 这是取得了鼠标的坐标;which:1 是鼠标左键点击的
        这些属性还是很常用的,初学者可以常识多运用练习一番
     
     
        $("button").on({
          click:function(){
          console.log("click");
        },
        mouseover:function(){
            console.log("mouseover");
          }
        })
        同时实现同一个元素,多个事件,分别绑定自己的事件函数
     
     
        $("body").on("click","button",function(){
          alert("1");
    })
      这是事件委派,是将原本要绑定到某元素上的事件,绑定到父容器乃至根节点上,然后再委托到想绑定事
    件的子节点上就是比如阿贾克斯里面,如果页面新增加了一些标签,他们想带上咱原来设置的一些事件,那
    就用这个。意思是 选中父容器,再选中父容器中的子元素,就会使在这个父容器中新增的所有子元素也会
    带上这个 绑定的事件。因为那些新增的元素,默认是无法绑定以前的事件的
     
     
    3.原生dom与jQuery对象之间的相互转换
       (1)原生dom转jQuery对象
           console.log($("p").hide(2000));
          这是通过$(“选择器”),通过这种方式将HTML代码转换掉
       (2)jQuery转原生dom对象
           $("p")[1].style.color="red";
         因为jQuery是把原生的js代码以对象的形式存到自己的数组中。所以,直接在 $("p")[1]
         以这个数组的形式,直接确定要修改哪一个HTML标签就可以了
           $("p").get(0).style.color="blue";
           或者也可以用上述的方法直接改,直接用get()这个方法去取对象中的元素
     
        例:$("p").css({"color":"yellow","background-color":"blue","font-size":"55px"});
        此例是用js的方式修改所有p标签的样式,前面是通过jQuery选中了所有的p标签。
        这里得格外注意,经常会有朋友将二者混在一起,js与jQuery代码混杂,产生错误。
        当然,这样使用虽然在有些场合十分便捷,还是不建议新手使用,没有分的很清晰的,最好别大量使用
     
    以上,是博主曾经遇到过的一些比较典型的问题,以后还会不断完善,也希望广大朋友们能来共同探讨,相互学习。
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     

      
  • 相关阅读:
    angular入门学习文档之一
    将SDL程序变成网页(使用emscripten)
    Nim使用OpenGL
    C++移动操作,RVO和NRVO
    从零开始制作一个粒子系统
    cocos2d-x学习之路(一)——安装cocos2d-x
    堆排序
    开发zeroc ice应用入门(java开发ice应用,python开发ice应用,java与python结合开发ice服务)
    eclipse自动提示设置以及问题:去除变量自动提示(图文详解)
    ubuntu安装新版QQ
  • 原文地址:https://www.cnblogs.com/pengfei-nie/p/6752322.html
Copyright © 2020-2023  润新知