jquery 常見字段及用法

為元素賦值
$('#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

點擊某一個元素之外的地方,執(zhí)行事件(jquery)
    $('#statistics').bind('click', function (e) { // $('#statistics'),指的是在這個區(qū)域內執(zhí)行
        var o = e.target;
        if($(o).closest('#project_lists').length==0) { // 點擊id不是project_lists的區(qū)域,執(zhí)行以下事件
          $('.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)
為動態(tài)追加的元素添加點擊事件
$("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點擊事件,點擊一次執(zhí)行多次的問題
  • 原因:代碼錯誤,將click事件進行了多次綁定,需解綁后再進行綁定
  • 解決方法:
 $("#id").off("click").on("click",function() {});

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

jquery 加載頁面的方法

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內容