Web前端JQuery入门实战案例

达达前端

发布于 2019-07-03 15:16:21

4K0

发布于 2019-07-03 15:16:21

文章被收录于专栏：达达前端

前端jquery入门到实战

为什么要学习Jquery?因为生活。

案例：

<!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>

jquery

快速的，轻量级的，功能丰富的 js 库。动画(animation)，ajax，DOM，更简单，容易使用的api。

jquery api 文档

开发环境，测试环境，生产环境

git svn

$(function(){
 // 写jquery入口函数的第二种方法
});

jq对象和Dom对象

<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;
}

结言

好了，欢迎在留言区留言，与大家分享你的经验和心得。

感谢你学习今天的内容，如果你觉得这篇文章对你有帮助的话，也欢迎把它分享给更多的朋友，感谢。

达叔小生：往后余生，唯独有你 You and me, we are family ! 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通简书博客：达叔小生 https://www.jianshu.com/u/c785ece603d1

结语

下面我将继续对其他知识深入讲解，有兴趣可以继续关注
小礼物走一走 or 点赞

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019.02.24 ，如有侵权请联系 cloudcommunity@tencent.com 删除

php

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

php