06 jQuery网页开发案例

0 说明

跳转b站黑马前端学习路线介绍
b站黑马jQuery视频教程
github相关代码

1 概述

jQuery是个封装的JavaScript库，还有prototype，yui，dojo，extjs，zepto（移动端），node，vue，react等
jQuery语法句式建议使用“”，容易阅读分辨。
1、 入口函数

// 2.  等着页面DOM加载完毕再去执行js 代码，$ 是jQuery的别称
$(function() {
     // $('div').hide();
     jQuery('div').hide();
 })

2、顶级对象$：jQuery对象的书写替代
3、jQuery对象与dom对象格式转换：
$(vid)[index].play()

2 常用API

2.1 jQuery 选择器

和js原生的css选择器写法类似,但是jQuery对象封装了很多方法。
1、隐式迭代：

// 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
$("ul li").css("color", "red");

2、css筛选选择器
与原生js筛选类似

// 偶数odd
$("ol li:odd").css("color","pink")
// 奇数even
$("ol li:even").css("color","blue")

parent(),children(“css选择器selector”),find(“”),siblings(“”),hasClass(“类名”)，eq(index，可传变量)
3、链式编程

2.2 jQuery css样式操作

1、css（）的参数只写属性名称，返回相应的属性值
2、css（属性名，属性值）。
3、css{},对象形式，复合属性用驼峰命名法
4、3的进阶，先写好，切换css样式名就好。addClass，removeClass，toggleClass（“类名”）。与js对类名的原生写法className有区别，不覆盖原来类名

2.3 jQuery 动画效果

阻止动画序列排队：stop
显示隐藏：show，hide，toggle
滑动：slideDown，slideUp，slideToggle

// 事件切换 hover  如果只写一个函数，那么鼠标经过和离开都会触发这个函数
 $(".nav>li").hover(function() {
       $(this).children("ul").slideToggle();
   });

淡入淡出：fadeIn，fadeOut，fadeToggle，fadeTo（speed，opacity）
animate（params，[speed],[easing:切换效果，默认swing，还有linear],[func()]）

2.4 jQuery 属性操作

1、固有属性prop(“属性名”，“属性值”)
2、自定义属性attr()
3、data

// 数据缓存 data() 这个里面的数据是存放在元素的内存里面
$("span").data("uname", "andy");
console.log($("span").data("uname"));
// 这个方法获取data-index h5自定义属性 第一个 不用写data-  而且返回的是数字型
console.log($("div").data("index"));

2.5 jQuery 文本属性值

html([“neirong”])
text()
input表单用val（）获取/设置
$(ele).each（func（index，domEle）{ }）:编辑domEle
$.each(ele,func（index，domEle）{ })：编辑ele

2.6 jQuery 元素操作

append（），prepend（），before（），after（）
remove（）删除元素，empty（）清空元素内容，html（“”）修改元素内容为空字符串

2.7 jQuery 尺寸、位置操作

1、尺寸
width()/height():最内层
innerWidth()/innerHeight()：包括padding
outerWidth()/outerHeight()：包括border
outerWidth(true)/outerHeight(true)：包括margin
2、位置
offset（）距离浏览器Document边沿，与父级无关，可以同时设置距离；
position（）距离父级，不可同时设置距离，
scrollTop()/Left() 卷去窗口的距离

案例01 电梯导航 控制变量（互斥锁）

 $("body, html").stop().animate({
    scrollTop: totop,
       // 互斥锁添加在动画的回调函数中，在动画完成之后（异步）才执行，避免了滑动造成的2此触发电梯导航效果
   }, function () {
       jieliu = true
   })

3 事件

3.1 jQuery 事件注册

$(ele).事件(func())

3.2 jQuery 事件处理 on

1、代码可读性更好

$(ele).on({
	shijian1:func()},
	shijian2:func()}
	)

2、事件委托

3、给未来动态创建的元素绑定事件

3.3 jQuery 事件委托

利用父子级关系，子级利用冒泡委托父级实现事件绑定
$("ul").on("click","li",function () { })

3.4 绑定与解绑

off解绑
$("ul").off("事件")
one绑定，写法类似on绑定，但是只执行一次

3.5 自动绑定事件

1、元素.click（事件）
2、元素.trigger（事件）
3、元素.triggerHandler（事件）——不会处罚默认行为

3.6 jQuery 事件对象

 $("div").on("click", function(event) {
     // console.log(event);
          console.log("点击了div");
          event.stopPropagation();
      })

3.7 jQuery其他方法

1、拷贝对象
$.extend([deep],targent,原对象)，会覆盖原对象的冲突内容。2、多库共存jquery的‘$`符号冲突问题

$(function() {
    function $(ele) {
        return document.querySelector(ele);
    }
    console.log($("div"));
    // 1. 如果$ 符号冲突 我们就使用 jQuery
    jQuery.each();
    // 2. 让jquery 释放对$ 控制权 让用自己决定
    var suibian = jQuery.noConflict();
    console.log(suibian("span"));
    suibian.each();
})

3、插件
juqery插件库里搜索对应的插件，比如：
瀑布流：pinterest_grid.js
图片资源懒加载：EasyLazyload.min.js
全屏滚动：fullPage.js
bootstrap等。

todolist案例

0、重点：数据操作的流程
1、localstorage，json字符串格式的数据（json.stringfy()/json.parse() ）
2、数组套对象，每次存取都对数组操作
3、重点按理，敲代码才能发现问题，自己对各种属性方法的不熟悉！！！