Web前端JQuery入门实战案例

前端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.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>

$ 其实就是一个函数 functiontypeof $$();

参数不同，功能不同

$(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 点赞