美文网首页
jquery 常见字段及用法

jquery 常见字段及用法

作者: zlf_j | 来源:发表于2019-04-04 12:50 被阅读0次
    为元素赋值
    $('#frame').text(this.prev_frame);
    
    为元素添加事件
    $("div").delegate("button","click",function(){
      $("p").slideToggle();
    });
    

    http://www.w3school.com.cn/jquery/event_delegate.asp

    添加元素
    $("p").append("Some appended text.");
    

    http://www.w3school.com.cn/jquery/jquery_dom_add.asp

    删除div中的内容 ,但是保留这个div
    $('#test').empty(); //jQuery
    

    https://zhidao.baidu.com/question/289778640.html

    $(this)下的第一个子元素
    $("#cont").find("p").first().css("color","red"); 
    
    获取鼠标点击的位置
    $("div").click(function(e){
           var y=$(this).offset().top;
           var x=$(this).offset().left;
    });
    
    样式 .css()
    $("p").css("background-color","yellow");
    $("p").css({"background-color":"yellow"});
    

    http://www.w3school.com.cn/jquery/jquery_css.asp

    attr()设置多个属性值
    $('.setType').eq(this.dateIndex).attr({'type': 1, 'class':'week_active'})
    
    获取 div type属性不是2的所有元素
    $('.setType:not([type=2])').css({'box-shadow': 'none', 'background': 'red'})
    
    点击事件,通过$(this)获取子元素
    $('body').undelegate('.select_lis', 'click').delegate('.select_lis', 'click', function (evt) {
          evt.stopPropagation() // 阻止事件冒泡
          let str = $(this).children('.select_checkbox').prop('checked')
          if (str) {
            $(this).children('.select_checkbox').attr('checked', false)
          } else {
            $(this).children('.select_checkbox').attr('checked', true)
          }
    })
    

    https://zhidao.baidu.com/question/376745108.html

    prop获取input的checked属性
    let str = $(this).children('.select_checkbox').prop('checked')
    console.log(str)
    

    https://www.cnblogs.com/shenzikun1314/p/6594367.html

    点击某一个元素之外的地方,执行事件(jquery)
        $('#statistics').bind('click', function (e) { // $('#statistics'),指的是在这个区域内执行
            var o = e.target;
            if($(o).closest('#project_lists').length==0) { // 点击id不是project_lists的区域,执行以下事件
              $('.projects').css({'display': 'none'})
            }
          })
    

    https://ask.csdn.net/questions/250756

    获取元素的css值
    let cssValue = $('.detail_div')[0].style.left
    if (cssValue == '65%') {
       console.log(111)
    }
    

    http://www.jquerycn.cn/a_82

    获取有两个class的元素
    $('.content.teaching_content')
    

    https://blog.csdn.net/qq_38006520/article/details/82704081

    jquery判断div滚动条到底部
      $(document).ready(function (){
           var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
           var nScrollTop = 0;   //滚动到的当前位置
           var nDivHight = $("#div1").height();
           $("#div1").scroll(function(){
             nScrollHight = $(this)[0].scrollHeight;
             nScrollTop = $(this)[0].scrollTop;
         var paddingBottom = parseInt( $(this).css('padding-bottom') ),paddingTop = parseInt( $(this).css('padding-top') );
             if(nScrollTop + paddingBottom + paddingTop + nDivHight >= nScrollHight)
               alert("滚动条到底部了");
             });
         });
    

    https://www.cnblogs.com/tylerdonet/p/4844297.html

    删除第二个元素
    $(".image_tofile:eq(1)").remove(); // 删除第二个class名为image_tofile的元素
    
    平移动画
    • 方法1:jquery
              $("#dailiesImg").animate({"left":(this.versionPage-1)*100*(-1)+'%'},2000)
    
    • 方法1:原生js
     let box = document.getElementById("dailiesImg");
                let st = parseInt(box.style.left);
                let time = 0
                let ID
                clearInterval(ID)
                // 跑起来
                ID=setInterval(function(){
                  time += 2
                  st -= 2
                  box.style.left = st + '%'
                  if (time == 100) {
                    clearInterval(ID)
                  }
                }, 10)
    
    为动态追加的元素添加点击事件
    $("body").on('click', '#capture', function() {
    })
    

    https://blog.csdn.net/xiaobinqt/article/details/84109813

    判断某个元素是否存在($('#box').length > 0)
    var my_element = $("#element_Id" )
    if(my_element.length>0){ 
        alert("element is exist.");  
    }else{  
        alert("element not be found");  
    } 
    

    https://www.cnblogs.com/super-chao/p/8241581.html

    input输入框自动获取焦点
    $('#test').focus() 
    // 如果数据加载延迟的话,可以加 setTimeout
    setTimeout("$('#test').focus()",500);
    

    https://www.cnblogs.com/zydtm/p/9140087.html

    判断一个元素下是否有内容
    if($("#test").length){//元素是否存在
        if($("#test").text()){//是否有内容
         
        }else{
            //内容不存在时的操作
        }
    }else{
        //元素不存在时的操作
    }
    

    https://zhidao.baidu.com/question/1639543104444344300.html

    jquery点击事件,点击一次执行多次的问题
    • 原因:代码错误,将click事件进行了多次绑定,需解绑后再进行绑定
    • 解决方法:
     $("#id").off("click").on("click",function() {});
    

    https://www.cnblogs.com/lezuw/p/11253970.html

    jquery 加载页面的方法

    https://www.cnblogs.com/james641/p/7838373.html

    相关文章

      网友评论

          本文标题:jquery 常见字段及用法

          本文链接:https://www.haomeiwen.com/subject/lagvbqtx.html