资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

jQuery常用方法和练习例子

要点:

成都创新互联是一家专注于网站设计制作、成都做网站与策划设计,襄阳网站建设哪家好?成都创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:襄阳等地区。襄阳做网站价格咨询:13518219792

    1、jQuery方法内置循环:

            $('div').css('backgroundColor','red'):给所有DIV标签添加红色背景

    2、this出现在jQuery的function中,代表循环时,当前正在处理的DOM对象

    3、$(this),把当前DOM对象转换在JQuery,以便使用jQuery方法

    4、隐式条件判断语句:

                var result=条件表达式?真返回值:假返回值;

    5、each(function) 对象的每个元素都做操作。

    收藏:jQuery样式。https://www.layui.com/demo/rate.html

常用方法:

    1、筛选器:

    next('筛选条件')    当前的下一个

    nextAll('筛选条件')    当前的后面所有

    nextUntil('筛选条件')    从下一个,到满足'筛选条件'的前一个标签,

    prev('筛选条件')    当前的上一个

    prevAll('筛选条件')    当前位置前面的所有同级标签

    prevUntil('筛选条件')    从上一个,到满足‘筛选条件’的前一个标签

    parent('筛选条件')    父标签

    parents('筛选条件')    向上一直找,直到html

    parentsUntil('筛选条件')    向上一直找到'满足筛选条件的标签'

    children('筛选条件')    子标签

    siblings('筛选条件')    除自已外,其它兄弟标签

    find('筛选条件')        遍历自已包含的所有标签,找到‘符合条件的所有标签’

    first()                    结果里的第一个

    last()                    结果里的最后一个

    eq(数值)/ eq('数值')        结果的表列里,第几个值

    2、内容方法:

        text()     取值/赋值,无参数,获取文本内容;text('this a text'),赋值

        html()    取值/赋值,无参数,获取文本内容;text('

this is a html

'),赋值

        val()       input标签,取值/赋值,无参数,获取value;val('value新值'),赋值。jQuery版本3以前,checkbox和radio会出现不同步,必须使用prop        

        prop(属性,值)    设置或返回被选元素的属性和值。使用字典同时多值,设置:prop('checked','checked'),获取属性值:prop('checked'),结果undefine,代表没有此属性。

        attr(属性,值)      设置被选元素的属性和值。可以接受字典值。

        prop与attr区别:prop  对于HTML元素本身就带有的固有属性   attr  对于HTML元素我们自定义的加在标签中的属性。  

        具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop()

    jQuery常用方法和练习例子    jQuery常用方法和练习例子jQuery常用方法和练习例子jQuery常用方法和练习例子jQuery常用方法和练习例子jQuery常用方法和练习例子

    $("img").attr("width",function(n,v){        \\n当前对象在筛选器里的索引,v是获取到width的值。
      return v-50;
    });
    
    

                    

    3、样式方法:

        hasClass('样式名')            判断是否包含样式名

        addClass('样式名'):          添加calss样式

        removeClass('样式名'):    删除class样式

        toggleClass('样式名'):     不存在则添加,存在则删除

        

    4、文档处理:

        append(htmlstring) :在指定标签内部的最后添加内容

        prepend(htmlstring):在指定标签内部的最前面添加内容

        after(htmlstring):在指定标签结束符后,外面添加

        before(htmlstring):在指定标签开始符前,外面添加

        remove():删除当前元素

        empty():清空所有子元素

        clone():返回复制的元素html

      //添加
      $('#s1').click(function(){
        var s='
  • 我是新来的
  • ';         $('#uli').after(s)       })       //remove()       $('#r1').click(function(){       $('#uli').remove();)}              //empty();清空所有子元素      $('#e1').click(function(){        $('#uli').empty();      })      //clone,复制id=uli的元素,并追加到body      $('body').append($('#uli').clone())

        5、鼠标坐标

            scrollTop(值) 设置/获取当前对象的滚动条上下位置。

            scrollLeft(值) 设置/获取当前对象的滚动务左右位置。

            

            offset().left    获取元素左上角的当前X坐标

            offset().top    获取元素左上角的当前Y坐标

            offset({left:0,top:0})        设置当前元素的坐标

            event.x    获取鼠标当前元素相对于父元素的X坐标

            event.y    获取鼠标当前元素相对于父元素的Y坐标

            event.clientX    获取鼠标相对于整个文档的X坐标,其中客户区域不包括窗口自身的控件和滚动条

            event.clientY    获取鼠标相对于整个文档的Y坐标,其中客户区域不包括窗口自身的控件和滚动条

            event.screenX    获取鼠标相对于整个显示屏的X坐标

            event.screenY    获取鼠标相对于整个显示屏的Y坐标

          $(document.body).mousemove(function(){
            $('#xx').text(event.x);
            $('#yy').text(event.y);
          })
          
          $('#divmove').offset({left:100,top:100})

        6、jQuery绑定四种事件。

            直接绑定:.click

            bind绑定:

                $('c1').bind('click',function(){....})

            delegate/undelegate绑定:在jQuery1.7中 .delegate()已被.on()取代

                $('c1').delegate('a','click',function(){ .... })

                $( elements ).delegate( selector, events, data, handler );

            on/off绑定

                $( elements ).on( events, [selector], data, handler );

                $('c1').on('click',function (){...})

    
    
        
            lala
    
        

        7、元素高度和宽度:

            jQuery常用方法和练习例子

            height/width:获取/设置元素高度/宽度-内容高、宽

            innerHeight/innerWidth:获取/设置元素高度/宽度-内容高\宽+padding

            outerHeight/outerWidth:获取/设置元素高度/宽度-内容高\宽+padding+border

            outerHeight(true)/outerWidth(true):获取/设置元素高度/宽度-内容高\宽+padding+border+margin

    
    
        
            
                lalalalala
            
        

            8、return false阻止事件发生

                以下程序,不跳转到href这个网址

    
        
            lala
        
    
    

            9、jquery扩展

                .extend

                .fn.extend

    1、左侧弹出菜单,点击出现子菜单,其它隐藏

        HTML

      
        菜单一
          
              
    • sub11
    •         
    • sub12
    •         
    • sub13
    •       
        菜单二       
              
    • sub21
    •         
    • sub22
    •         
    • sub23
    •       
        菜单三       
              
    • sub31
    •         
    • sub32
    •         
    • sub33
    •       
      

        jQuery:

      

    2、弹出窗口,窗口其它元素不可操作。点叉关闭

        CSS样式

        .header-menu{
          display:inline-block;
          margin-right:20px;
          height:40px;
        }
        .zhezhao{
          display:none;
          position:fixed;
          left:0;
          top:0;
          right:0;
          bottom:0;
          background-color:gray;
          z-index:8;
          opacity:0.7;
        }
        .regedit{
          display:none;
          width:400px;
          height:600px;
          position:fixed;
          background:white;
          left:50%;
          top:50%;
          margin-left:-200px;
          margin-top:-300px;
          z-index:9;
        }
        .login{
          display:none;
          width:400px;
          height:400px;
          position:fixed;
          background:white;
          left:50%;
          top:50%;
          margin-left:-200px;
          margin-top:-300px;
          z-index:9;
        }
        .divouter{
          width:100%;
          background:gray;
          text-align:right;
        }
        .close_flag{
          padding-right:10px;
          padding-top:10px;
          width:30px;
        }
        .show{
          display:block;
        }

        HTML

      
      
      
      
        注册
        登陆
      
      
      
      
      
        
          
        
      
      
      
           
          
        
      

        jQuery

        //显示注册/登陆框
        $('.header-menu').click(function(){
          $('.zhezhao').addClass('show');
          var sh = $(this).attr('name');        //使用获取到的属性值进行二次定位,达到动态效果。
          var s='.'+sh;
          $(s).addClass('show');                               
        })
        //关闭显示/登陆框
        $('.close_flag').click(function(){
          $('.zhezhao').removeClass('show');
          var hi=$(this).attr('name');
          var h='.'+hi;
          $(h).removeClass('show');
        })

    3、鼠标移入和移出背景变色:

        HTML:

      
      
        注册
        登陆
      

        jQuery:

        $('.header-menu').mouseover(function(i,v){$(this).css({'backgroundColor':'#2550aa','color':'white'})})
        $('.header-menu').mouseout(function(i,v){$(this).css({'backgroundColor':'','color':''})})

    4、TAB式菜单:

        HTML

      
        标签一标签二标签三
        
        
          111111
          2222222
          333333
        

        jQuery

        //tab菜单脚本,实现方法千千万~这里没有选择Addclass,因为class有前后定义的毛病~
        
          $("[name='t1']").show()
          $('.tab_div').children().mouseover(function(){
            $(this).addClass('tab_over').siblings().removeClass('tab_over');
            var d=$(this).addClass('tab_over').attr('id');
            var n = "[name='"+d+"']"
            $(n).show().siblings().each(function(){
              $(this).hide()
            })
          });
     
        //方案二:可以删除子菜单ID,省代码~更简洁~
    
          $(document).ready(function(){
            $(".tab_div").children().mouseover(function(i){
              $(this).addClass('tab_over').siblings().removeClass('tab_over');
              $('.tab_content').eq($(this).index()).show().siblings().hide();
            })
          })

    5、点赞动态效果

        html:

    
    
    









        jQuery:

    
    

    6、注册框判断是否为空,为空返回并提示:

            本质是用return跳出函数,并给标签返回一个False。

            HTML

    
      注册
      登陆
    
    
      
        
        ✖
      
      
                                                       用户名:                                                                                       密码:                                                                                       确认密码:                                      111                                                 邮箱:                                                                                       电话:                                                                                       爱好:                                                                              
                                
      
           ✖   

            CSS

    .tab_div span{
      color:white;
      line-height:30px;
      display:inline-block;
      height:30px;
      padding-right:10px;
      padding-left:10px;
      background-color:#4e5154;
    }
    table{
      width:100%
    }
    .close_flag{
      padding-right:10px;
      padding-top:10px;
      width:30px;
    }
    .header-menu{
      display:inline-block;
      margin-right:20px;
      height:40px;
    }
    .zhezhao{
      display:none;
      position:fixed;
      left:0;
      top:0;
      right:0;
      bottom:0;
      background-color:gray;
      z-index:8;
      opacity:0.7;
    }
    .regedit{
      display:none;
      width:400px;
      height:600px;
      position:fixed;
      background:white;
      left:50%;
      top:50%;
      margin-left:-200px;
      margin-top:-300px;
      z-index:9;
    
    }
    .login{
        display:none;
        width:400px;
        height:400px;
        position:fixed;
        background:white;
        left:50%;
        top:50%;
        margin-left:-200px;
        margin-top:-300px;
        z-index:9;
    }
    .divouter{
      width:100%;
      background:gray;
      text-align:right;
    }
    .close_flag{
      padding-right:10px;
      padding-top:10px;
      width:30px;
    }

            jQuery


    当前文章:jQuery常用方法和练习例子
    标题来源:http://www.cdkjz.cn/article/pipgdi.html
    返回首页 了解更多建站资讯
    多年建站经验

    多一份参考,总有益处

    联系快上网,免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈,可以通过以下方式与我们联系

    大客户专线   成都:13518219792   座机:028-86922220