JQuery 總結（6）鋒利的jQuery

時間 2020-06-18

標籤 jquery 總結鋒利欄目 JQuery 简体版

原文原文鏈接

1.解決 jQuery 和其餘庫的衝突css

定義了一個快捷鍵，之後碰到$的能夠用新的替代，jQuery.noConflict(); 表示轉移$控制權html

//⋯省略其餘代碼
var $j = jQuery.noConflict(); //自定義一個快捷方式
$j(function(){ //使用 jQuery，利用自定義快捷方式 — $j
$j("p").click(function(){
alert( $j(this).text() );
})
})
$("pp").style.display = 'none'; //使用 prototype.js 隱藏元素
//⋯省略其餘代碼

2.jQuery 檢查某個元素是否存在
有時候要用做if判斷語句，若是存在執行什麼若是不存在點擊哪一個按鈕app

if($("#hh")[0]){
console.log(1)
}else{
console.log(2)
$("#chh").click()
}ide

if ($("span")[0]){
   $("div").css("background","red")
  }

3.鼠標指示顯示title
鼠標覆蓋建立一個標籤，而後插入標籤，把前面的title值用東西存起來，清空他的title值，當鼠標移開的時候再給他賦值回去。this

<body>
<p><a href="#" class="tooltip" title="這是個人超連接提示 1.">提示 1.</a></p>
<p><a href="#" class="tooltip" title="這是個人超連接提示 2.">提示 2.</a></p>
<p><a href="#" title="這是自帶提示 1.">自帶提示 1.</a> </p>
<p><a href="#" title="這是自帶提示 2.">自帶提示 2.</a> </p>
<script>
  $(".tooltip").mouseover(function (e) {
     this.myTitle = this.title;
     this.title = "";
    var  newt="<div id='tooltip'>"+this.myTitle+"</div>";
    $("body").append(newt);
    console.log(e.pageX )
    $("#tooltip").css({
      "top": e.pageY +10+ "px",
      "left": e.pageX+10 + "px",
      "position":"absolute"
    })
  }).mouseout(function () {
   $("#tooltip").remove(); 
   this.title = this.myTitle;
  })
</script>
</body>

4.jQuery置頂
onclick=$(window).scrollTop(0);spa

$(".yb_top").click(function() {
$("html,body").animate({
'scrollTop': '0px'
}, 300)
});

　5.scrollprototype

6.判斷
activeText = activeText == "左邊" ? "左邊1111" : 5555;
判斷activeText == "左邊" 是否成立若是成立走前面左邊1111，不成立就走後面
code

7.菜單摺疊效果
htm

$(this).siblings().toggle(500).parent().siblings().children("p").slideUp(200);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

JQuery 總結（6） 鋒利的jQuery

JQuery 總結（6）鋒利的jQuery