前端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 点赞

Web前端JQuery入门实战案例的更多相关文章

  1. 用grunt搭建自动化的web前端开发环境实战教程(详细步骤)

    用grunt搭建自动化的web前端开发环境实战教程(详细步骤) jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!前端自动化, ...

  2. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  3. Web前端小白入门指迷

    前注:这篇文章首发于我自己创办的服务于校园的技术分享 [西邮 Upper -- 004]Web前端小白入门指迷,写得很用心也就发在这里. 大前端之旅 大前端有很多种,Shell 前端,客户端前端,Ap ...

  4. web前端开发入门全套学习方法路径，兼职在家做网站也能月入上万！

    前端学习路径 1.WEB前端快速入门 在本阶段,我们需要掌握 HTML 与 CSS 基础,当然,也包含 H5 和 C3 的新特性.这个部分内容非常简单,而且非常容易掌握.相信你也更愿意学习这个部分,毕 ...

  5. Web前端JQuery面试题（一）

    Web前端JQuery面试题(一) 一:选择器 基本选择器 什么是#id,element,.class,*,selector1, selector2, selectorN? 答: 根据给定的id匹配一 ...

  6. Web前端JQuery面试题（三）

    Web前端JQuery面试题(三) 1.怎么阻止冒泡过程? stopPropagation(); // 阻止冒泡过程 2.ready()方法和onload()方法的区别? onload()方法要等页面 ...

  7. Web前端JQuery面试题（二）

    Web前端JQuery面试题(二) 1.请写出jquery的语法? <script type="text/javascript"> $(document).ready( ...

  8. 安全之路:Web渗透技术及实战案例解析(第2版)

    安全之路:Web渗透技术及实战案例解析(第2版)

  9. 学习web前端怎样入门？初学者赶紧看过来！

    web前端怎么样才能入门,首先我们要从什么是初级web前端工程师说起: 按照我的想法,我把前端工程师分为了入门.初级.中级.高级这四个级别, 入门级别指的是了解什么是前端(前端到底是什么其实很多人还是 ...

随机推荐

  1. Asp.net core 向Consul 注册服务

    Consul服务发现的使用方法:1. 在每台电脑上都以Client Mode的方式运行一个Consul代理, 这个代理只负责与Consul Cluster高效地交换最新注册信息(不参与Leader的选 ...

  2. bottle源码

    import sys __author__ = 'Marcel Hellkamp' __version__ = '0.13-dev' __license__ = 'MIT' ############# ...

  3. 安卓adb工具的安装方法

    adb是Android的一个很重要的调试工具,熟练掌握后可实现很多功能,比如有些手机的解锁.ROOT就会用到adb工具.可很多朋友都说不会安装,今天就从最开始的安装方法说起. adb工具其实不用安装, ...

  4. sublime包管理

    安装 到https://packagecontrol.io/installation#st3拷贝 import urllib.request,os,hashlib; h = '2915d1851351 ...

  5. Atom使用

    cmd-r 通过方法名查找 ctrl-option-g 跳转至光标所在方法或结构 安装 last-cursor-position 后 alt-- 返回至光标上一次所在位置

  6. java39

    String a= "hello.a.java;b.java;hello.java;hello.toha;"; //将每个分号的内容取出来 String[] res=a.split ...

  7. ThinkPHP 3.2.3+ORACLE插入数据BUG修复及支持获取自增Id的上次记录

    TP+ORACLE插入数据BUG修复以及获取自增Id支持getLastInsID方法 这些天在做Api接口时候,发现用TP操作Oracle数据库,发现查询修改删除都能执行, 但一旦执行插入操作老是报错 ...

  8. linux sort排序命令的高级用法(按多个列值进行排列)

    http://www.jquerycn.cn/a_9076 在linux中,使用sort按行进行排序是很简单的.不过有时,生活总是爱抛给你一个一个的问题.如果使用sort按多个列值排列,同时使用tab ...

  9. 信号量（Semaphore）

    在python的多线程体系中,一共有4种锁: 同步锁(互斥锁):Lock: 递归锁:RLock: 信号量:Semaphore: 同步条件锁:Condition. 信号量(semaphore)是一种可以 ...

  10. 线程中的join方法

    join方法的作用是同步线程. 1.不使用join方法:当设置多个线程时,在一般情况下(无守护线程,setDeamon=False),多个线程同时启动,主线程执行完,会等待其他子线程执行完,程序才会退 ...