Web前端JQuery入門實戰案例

時間 2019-12-07

標籤 web 前端 jquery 入門實戰案例欄目 HTML 简体版

原文原文鏈接

前端jquery入門到實戰javascript

爲何要學習Jquery?由於生活。css

案例：html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset = "UTF-8">
 <title>dashu</title>
 <style>
  div {
   height: 100px;
   background-color: yellow;
  }
 </style>
 <script>
  window.onload=function(){
   //js註冊事件會被覆蓋
   //addEventListener
  }
 </script>
</head>
<body>
<input type="button" value="展現" id="btn1">
<input type="button" value="設置內容" id="btn2">

<div></div>
<div></div>

<script>
 var btn1 = document.getElementById("btn1");
 var btn2 = document.getElementById("btn2");
 var divs = document.getElementsByName("div");

 btn1.onclick = function() {
  for(var i=0; i<divs.length;i++){
   divs[i].style.display = "block";
  }
 };

 btn2.onclick = function(){
  for(var i=0; i<divs.length;i++){
   divs[i].innerText = "輸入文本內容";
  }
 }
</script>
</body>
</html>
複製代碼

使用jquery案例：前端

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset = "UTF-8">
 <title>dashu</title>
 <style>
  div {
   height: 100px;
   background-color: yellow;
   display: none;
  }
 </style>
 <script src="jquery-xxx.js"></script>
 <script>
  // 入口，文檔準備好了才執行
  $(document).ready(function(){
   console.log("dashu");
   // 要等文檔加載完才執行
   // 註冊事件 click()
   // 重複註冊事件不會覆蓋
   $("#btn1").click(function(){
      // alert("dashu");
     $("div").show();
     // $("div").show(300);
     // $("div").slideDown(300);
     // $("div").fadeIn(300);
    });

   $("#btn2").click(function(){
    $("div").text("我是內容");
   });
   
  });
 </script>
 
</head>
<body>
<input type="button" value="展現" id="btn1">
<input type="button" value="設置內容" id="btn2">

<div></div>
<div></div>

</body>
</html>
複製代碼

jqueryjava

快速的，輕量級的，功能豐富的 js 庫。動畫(animation)，ajax，DOM，更簡單，容易使用的api。jquery

jquery api 文檔git

開發環境，測試環境，生產環境ajax

git svn編程

$(function(){
 // 寫jquery入口函數的第二種方法
});
複製代碼

jq對象和Dom對象api

<ul>
 <li></li>
 <li></li>
</ul>

 <script src="xxx.js"></script>
<script>
// 什麼是DOM對象
$(function(){
  // js對象，使用js方式獲取到的元素就是js對象，Dom對象
 // var clo = document.getElementById("clo");
 // clo.style.backgroundColor = "yellow";

  // var $li = $("li");
  // $li.text("我是達叔");
  // console.log("dashu");
  // jq對象與js對象

 });
<script>
複製代碼

jq對象其實就是js對象的一個集合，僞數組，裏面放着大量的js對象。

var arr = [
 {name:"dashu", say: function(){
  console.log("dashu");
 }}
];
arr[0].say();

// arr.say();錯誤
複製代碼

// jquery 僞數組
var $li = $("li");
$li[0].setAttribute("name","dashu");
// 建立數組索引爲0設置屬性
複製代碼

// dom對象變jq對象
var clo = document.getElementById("clo");
$(cloth).text("達叔");
複製代碼

// jq對象變dom對象
var $li = $("li");
$li[0].style.backgroundColor = "yellow";
// $li.get(0).style.backgroundColor="yellow";
複製代碼

隔行變色

<ul>
 <li>dashu</li>
</ul>

// shift + 回車
<script>
 $(function(){
  // var lis=$("li");
  var lis = document.getElementsByTagName("li");
 for(var i=0; i<lis.length; i++){
 if(i%2==0){
 lis[i].style.backgroundColor = "yellow";
 }
 }else{
 lis[i].style.backgroundColor = "red";
 }
 })

</script>
複製代碼

$ 其實就是一個函數 function

typeof $

$();
複製代碼

參數不一樣，功能不一樣

$(function(){

});
// 入口函數

$(domobj);

$(document).read(function(){

});

$("div") $("#btn") $(".class")
複製代碼

基本選擇器

jquery選擇器是jquery提供的一組方法，用來方便咱們找頁面中的元素，jquery選擇器返回的是jquery對象。

:first 獲取第一個元素
示例： 獲取匹配的第一個元素

<ul>
 <li>1</li>
 <li>2</li>
</ul>

$('li:first');
複製代碼

基本選擇器：

<ul>
 <li>1<li>
 <li>2<li>
 <li id="sb">3</li>
</ul>

$(function(){
  // 樣式
 $("#sb").css("backgroundColor", "yellow");
 // $("#sb").css("backgroundColor", "green");
});

// 交集，並集
$("#id, .green").css("color","red");

$("li.green").css();
複製代碼

jquery的樣式
css(name, value)
name: 樣式名 value: 樣式值
複製代碼

基本選擇器

id選擇器
類選擇器
標籤選擇器
並集選擇器 $("#id, .green").css("color","red");
交集選擇器 $("li.green").css();
複製代碼

層級選擇器

子代選擇器 $("ul>li");
後代選擇器 $("ul li");
複製代碼

<div id="father">
 <div>1</div>
 <div> 2 
  <p>1</p>
 </div>
 <p>3</p>
</div>

// 獲取3 子代元素
<script>
 $(function(){
  $("#father>p").css("backgroundColor", "red");
  });
 });

// 後代都有 123
  $(function(){
  $("#father p").css("backgroundColor", "red");
  });
 });
</script>
複製代碼

mouseenter與mouseover

<script>
 $(function(){
  var $li=$(".w>ul>li");
 
  $li.mouseover(function(){
   $(this).children("ul").show();
  });
 
  $li.mouseout(function(){
    $(this).children("ul").hide();
   });
 });
</script>
複製代碼

下拉菜單

<div class="wrap">
 <ul>
  <li>
   <a href="javascript:void(0);">一級菜單</a>
   <ul class="ul">
    <li><a href="javascript:void(0);">二級菜單</a></li>
    <li><a href="javascript:void(0);">二級菜單</a></li>
   </ul>
  </li>
 </ul>
</div>

$(function(){
 $(".wrap>ul>li").mouseover(function(){
   // console.log("哈哈");
  });
});
複製代碼

高亮

<div class="wrap">
 <ul>
  <li><a href="#"><img src="" alt=""/></a></li>
  <li><a href="#"><img src="" alt=""/></a></li>
 </ul>
</div>

$(".wrap>ul>li").mouseenter(function(){
 $(this).css("opacity","1").siblings().css("opacity","0.5");
});
複製代碼

選擇器:

children(selector); 子代
find(selector); 後代
siblings(selector);  查找兄弟不包括本身
parent(); 查找父親
複製代碼

手風琴

$(function(){
 $(".groupTitle").click(function(){
   $(this).next().show();
  });
});

<span class="groupTitle">標題</span>
<div>標題</div>
複製代碼

$(this).next().slideDown(1000).parent().siblings().children("div").slideUp(1000);
複製代碼

<script>
 $(function(){
  $("#left>li").mouseenter(function(){
   var idx=$(this).index();
   $("#center>li:eq("+idx+")").show().siblings().hide();
  });
 });
</script>
複製代碼

基本，層次，過濾，表單選擇器

jquery操做樣式

css(name, value);
$("#day").css("background","gray");
$("#day").css({
 backgroundColor:"pink",
 color:"red"
});
複製代碼

輪播圖

.slider{
 height: 300px;
 width: 700px;
 margin: 100px auto;
 position: relative;
}

.slider li {
 position: absolute;
 display: none;
}

.slider li:first-child {
 display: block;
}

<div class="arrow">
 <span class="arrow-left"> < </span>
 <span class="arrow-right"> > </span>
</div>

<script>
 $(function(){
  var count = 0; 
  $(".arrow-right").click(function(){
   count++;
   if(count == $(".slider li").length){
    count = 0;
    }
   $(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
  });
   
  $(".arrow-left").click(function(){
   count--;
   if(count == -1){
    count = $(".slider li").length-1;
   }
    $(".slider li").eq(count).fadeIn().siblings("li").fadeOut();
   });
 });
</script>
複製代碼

動畫效果

show()顯示，hide()隱藏

slideDown()滑入，slideUp()滑出，slideToggle()切換

fadeIn()淡入和fadeOut()淡出和fadeToggle切換

<style>
 div {
  width: 200px;
  height: 200px;
  background-color: red;
 }
</style>

<body>
<input type="button" value="開始">
<input type="button" value="結束">
<div></div>
<script>
 $(function(){
  $("input").eq(0).click(function(){
   $("div").animate({left:200});

   $("#div1").animate({left:200}, 4000, "swing");
   $("#div2").animate({left:200}, 4000, "linear");
  })
 })
</script>

</body>
複製代碼

swing是鞦韆的效果速度，到最上慢，下來就變快了，而linear是線性勻速的效果動畫。

手風琴效果

<div id="box">
 <ul>
  <li></li>
  <li></li>
 </ul>
</div>

<script>
 $(function(){
  //$("#box li").css("backgroundImage", "url(images/1.jpg)");
  var $li = $("#box li");
  for(var i=0; i < $li.length; i++){
   $li.eq(i).css("backgroundImage", "url(images/" + (i+1) + ".jpg)");
  }
 
   $li.mouseenter(function(){
     $(this).animate({width: 400}).siblings().animate({width: 100});
   }).mouseleave(function(){
    $li.animate({width:200});
   });
 });
</script>
複製代碼

<script>
 $(function(){
  $("#btn").click(function(){
   $("div").animate({left: 400}).animate({top: 400}).animate({width: 400}).animate({ left: 0});
  })
 });
</script>
複製代碼

var $li = $("ul>li");
$li.mouseenter(function(){
 $(this).children("ul").stop().slideDown();
});
$li.mouseleave(function(){
 $(this).children("ul").stop().slideUp();
});
複製代碼

音樂導航條

<div class="nav">
 <ul>
 <li>
  <a href="javascript:void(0);">導航條</a>
  <span style="top: 60px;"></span>
 </li>
 </ul>
</div>
複製代碼

<script>
 $(function(){
  $(".nav li").mouseenter(function(){
   $(this).children("span").animate({top:0});
   var id = $(this).index();
   $("audio").get(id).load();
   $("audio").get(id).paly();
  }).mouseleave(function(){
   $(this).childern("span").stop().animate({top:60});
   });
 });
</script>

<div class="nav">
 <ul>
  <li>
   <a href="javascript:void(0);">導航1</a>
   <span></span>
  </li>
  <li><a href="javascript:void(0);">導航2</a><span></span></li>
 </ul>
 
 <div>
  <audio src=""></audio>
  <audio src=""></audio>
 </div> 
</div>
複製代碼

建立節點，與添加

append appendTo
prepend prependTo
before 做爲兄弟元素前
after 做爲兄弟元素後
複製代碼

<script>
 $(function(){
  var box = document.getElementById("box");
  var a = document.createElement("a");
  box.appendChild(a);
  a.setAttribute("href","#");
 });
</script>
複製代碼

<script>
 $(function(){
  $("#box").append();
 });
</script>
複製代碼

城市選擇

$(function(){
 $("#btn1").click(function(){
  $("#city > option").appendTo("#citys");
 });

 $("#btn2").click(function(){
   $("#citys").append($("#city>option"));
 });

 $("#btn3").click(function(){
   $("#citys:selected").appendTo("#city");
  });

});
複製代碼

清空和刪除節點

<script>
 $(function(){
  //$("div").html("");
  $("div").empty(); // 清空內容
  // $("div").remove(); 移除，本身也沒了
 });
</script>
複製代碼

內存泄漏的是一塊內存被佔用，別人用不了。

發佈內容

</div class="box" id="fabu">
 <span>發佈</span>
 <textarea name="" id="txt" cols="30" rows="20"> </textarea>
 <buttoon id="btn">發佈</button>
 <ul id="ul">
 
 </ul>
</div>

<script>
 $(function(){
  $("#btn").click(function(){
    $("<li></li>").text($("#txt").val()).prependTo("#ul");
    

  });
 }); 
</script>
複製代碼

彈幕

<script>
 $(function(){
  var colors = ["red","green"];
  $("#btn").click(function(){
   var randomColor = parseInt(Math.random() * colors.length);
   var randomY = paseInt(Math.random() * 400);
   $("<span></span").text($("#text").val()).css("color",colors[randomColor]).css("left","2000px").css
  }).css("top",randomY).animate({left: -500}, 3000, "linear", function(){
    $(this).remove();
  }).appendTo("#box");
 });
</script>
複製代碼

操做節點：

建立節點：

$("<span></span>")
複製代碼

添加節點：

append appendTo 
prepend prependTo 
after before
複製代碼

清空內容：

empty();
複製代碼

刪除節點:

remove();
複製代碼

克隆節點：

clone();
複製代碼

動畫效果

show() hide()
slideDown() slideUp() slideToggle()
fadeIn() fadeOut() fadeToggle()
stop()
animate()
複製代碼

class操做：

addClass(name)添加類
removeClass(name)移除類
hasClass(name)判斷類
toggleClass(name)切換
複製代碼

css(name,value)設置單個樣式
css(obj)設置多個樣式
css(name)獲取樣式
複製代碼

val()方法

val方法用於獲取和設置表單元素的值

//設置值
$("#name").val("dashucoding");
//獲取值
$("#name").val();
複製代碼

// html == innerHTML獲取內容和標籤
// text == innerText獲取內容
//設置內容
$("div").html("<span>內容</span>");
//獲取內容
$("div").html()
//設置內容
$("div").text("<span>內容</span>");
//獲取內容
$("div").text();
複製代碼

// 獲取頁面可視化的寬度和高度
$(window).width();
$(window).height();

$(window).resize(function(){
 console.log($(window).width());
});

console.log($("div").width()); // width
console.log($("div").innerWidth()); // padding +width
console.log($("div").outerWidth()); // padding+width+border
console.log($("div").outerWidth(true)); // padding + width + border + margin
複製代碼

scrollTop與scrollLeft的方法

設置或者獲取垂直滾動條的位置

// 獲取頁面被捲曲的高度
$(window).scrollTop();
// 獲取頁面被捲曲的寬度
$(windwo).scrollLeft();

$(window).scroll(function(){
 console.log($(window).scrollTop());
 console.log($(window).scrollLeft());
});
複製代碼

固定導航

<script>
 $(function(){
  $(window).scroll(function(){
   if($(windwo).scrollTop() >= $(".top").height() ){
   $(".nav").addClass("fixed");
   $(".main").css("marginTop", $(".nav").height() );
   }
  });
 });
</script>
複製代碼

小火箭返回頂部

<style>
 .up a:hover{
  width: 150px;
  height: 190px;
  background: url(images/up.gif) no-repeat;
  outline: none;
 }
</style>

<div class="up"><a href="javascript:void(0);" title="Top"></a></div>

<script>
 $(function(){
  $(window).scroll(function(){
   if($(window).scrollTop() >= 1000){
    $(".up").fadeIn(1000);
   }else{
    $(".up").fadeOut(1000);
   }
  });
 });

 function getScroll(){
  return {
   left: window.getXOffset || document.documentElement.scrollLeft || document.body.scollLeft || 0,
  top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
  }
 }


</script>
複製代碼

offset()方法獲取元素的相對於document的位置，position()方法獲取相對於定義的父元素的位置。
複製代碼

簡單的事件綁定，bind事件綁定，delegate事件綁定，on事件綁定

click(handler)
mouseenter(handler)
mouseleave(handler)

$("#btn").click();
$("#btn").trigger("click");
複製代碼

delegate委託事件

$("div").delegate("p", "click", function(){
 
});

$("p").on("click",function(){
 alert("呵呵");
});

$("#btn").on("click",function(){
 $("<p>我是</p>").appendTo("div");
});

$(selector).on("click",function(){});

$(selector).on("click","span", function(){});

$(selector).on(events[,selector][,data],handler);
複製代碼

事件解綁

$(selector).unbind(); //解綁全部的事件
$(selector).unbind("click"); // 解綁指定的事件
複製代碼

$(selector).undelegate(); // 解綁全部的delegate事件
$(selector).undelegate("click"); //解綁全部的click事件
複製代碼

on // off
$("p").on("click", function(){
 alert("dashu");
});

//$("p").off();
$("p").off("mouseenter");

// toggle:切換 trigger:觸發
複製代碼

jquery事件對象

$(document).on("click",function(e){

})

on(types, selector, data, callback)
複製代碼

鋼琴例子

<script>
 $(function(){
   $(".nav li").mouseenter(function(){
    $(this).children("span").stop().animate({top:0});
 var idx=$(this).index();
 $(".nav audio").get(idx).load();
 $(".nav audio").get(idx).play();
   }).mouseleave(function(){
    $(this).children("span").stop().animate({top: 60 });
   });
  });
</script>
複製代碼

$(document).on("keydown", function(e){
 // console.log(e.keyCode);
});
複製代碼

節流閥，按下的時候，觸發，若是沒彈起，不讓觸發。

delay(duration,[queueName]);
設置一個延時效果
duration, [queueName]
duration:延時時間
queueName:隊列名詞
複製代碼

延時

<style>
 div{
  width: 400px;
  height: 60px;
  background-color: red;
  text-align: center;
  line-height: 60px;
  font-size: 30px;
  margin: 100px auto;
  display: none;
 }
</style>

<script>
 $(function(){
  $("div").fadeIn(1000).delay(2000).fadeOut(1000);
 });
</script>
複製代碼

五角星

* {
 padding: 0;
 margin: 0;
}

.comment li {
 float: left;
}

.comment{
 font-size: 30px;
 color: #ff22cf;
}

<ul class="comment">
 <li>☆<li>
</ul>

var k = "☆";
var s = "★";
$(".comment>li").on("mouseenter",function(){
 $(this).text(s).preAll().text(s);
 $(this).nextAll().text(k);
});

$(".comment").on("mouseleave",function(){
 $(this).children().text(k);
 $("li.current").text(s).prevAll().text(s);

});

$(".comment>li").on("click", function(){
 $(this).addClass("current").siblings().removeClass("current");
});

$(this).text(s).preAll().text(s).end().nextAll().text(k);
複製代碼

each方法

$(selector).each(function(index,element){});
複製代碼

$控制權：

$.noConflict();

jQuery(function(){

});

只有jquery拿到控制權，才能釋放
複製代碼

val()
text() 和 html()
width height
scrollTop scrollLeft
offset position
複製代碼

on("click", function(){})
on("click", "p", function(){})

off() off("click")
click() trigger("click");

e.stopPropagation()
e.preventDefault()
$.noConflict();
複製代碼

插件

插件支持顏色 jquery.color.js
animate不支持顏色
複製代碼

懶加載
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

<img class="lazy" data-original="img/example.jpg" width="640" height="400">

$("img.lazy").lazyload();
複製代碼

自定義插件

Array.prototype.say = function() {
 console.log("dashu");
}
var arr = new Array();
arr.say();
複製代碼

jQuery.prototype.say = function(){
 console.log("dashu");
}
$(document).say();

$.fn == jQuery.prototype
$.fn.say = function(){
 console.log("dashu");
}
$(document).say();

// 鏈式編程
$.fn.say = function(){
 console.log("dashu");
 return this;
}
複製代碼