Web前端JQuery入门实战案例

达叔娱乐 05-31 135

前言：

此刻小伙伴们对“jqueryoffno”大约比较关心，同学们都想要知道一些“jqueryoffno”的相关内容。那么小编在网络上汇集了一些对于“jqueryoffno””的相关内容，希望各位老铁们能喜欢，同学们一起来学习一下吧！

标题图

前端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>$ 其实就是一个函数 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 appendToprepend prependTobefore 作为兄弟元素前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()); // widthconsole.log($("div").innerWidth()); // padding +widthconsole.log($("div").outerWidth()); // padding+width+borderconsole.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 heightscrollTop scrollLeftoffset positionon("click", function(){})on("click", "p", function(){})off() off("click")click() trigger("click");e.stopPropagation()e.preventDefault()$.noConflict();

插件

插件支持颜色 jquery.color.jsanimate不支持颜色懒加载<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后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通

简书博客：达叔小生

结语

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

本文地址：http://www.longkongtuishu.com/caedfBAVsAFoCDw.html

标签： #jqueryoffno #jqueryanimate匀速