首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Web前端JQuery入门实战案例

Web前端JQuery入门实战案例

作者头像
达达前端
发布2019-07-03 15:16:21
3.9K0
发布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),ajaxDOM,更简单,容易使用的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>

mouseentermouseover

<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

scrollTopscrollLeft的方法

设置或者获取垂直滚动条的位置

// 获取页面被卷曲的高度
$(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 删除

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

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

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 基本选择器
  • 层级选择器
  • 结言
  • 结语
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档