jQuery 基础学习

这篇文章主要讲了 jQuery 事件的注册，绑定，解绑或者其他方法，jQuery 插件 元素位置操作等
这是初学者写下的笔记，如果错误，欢迎前来指正

jQuery 事件

事件注册

  • 事件绑定语法：
element.事件(function() {});
  • 事件用 on() 绑定事件
element.on(events,[selector],fn);
  • 例如我想绑定一个鼠标点击和鼠标经过事件
$("div").on({
    mouseenter: function() {
        $(this).css("background","skyblue");
    },
    click: function() {
        $(this).css("background","pink");
    }
});
  • 1.on 可以绑定多个事件
  • 如果你事件处理程序恰好相同 (下面这个例子和事件切换 hover 有点像啊)
$("div").on("mouseover mouseout", function() {});
  • 2.on 可以实现事件委派的操作：把原来绑定在子元素的事件绑定在父元素上
$("ul li").click();
// li 触发冒泡到父元素上执行方法
$("ul").on("click", "li", function() {
    console.log("noobMing");
});
  • 这里事件是绑定在 ul 身上的，但是触发事件的是 li (不用在每个 li 上绑定事件，节约空间)
  • on 可以替换老版本的 bind(), live(), delegate() 等方法
  • 3.on可以给动态创建的元素绑定事件 (.click 是没有办法绑定 之后动态生成的元素的)
$("ol li").click(function() {
    alert("我不能绑定动态元素");
});

$("ol").on("click", "li", function() {
    alert("我能绑定动态元素");
});

var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
  • 只有绑定事件在创建元素之前的情况 .click 才不能绑定事件，如果写在后面的话两个都可以绑定
  • 可能后续版本修复了这个问题，但是还是推荐给动态生成的标签使用 on 来绑定事件

事件解绑

$("div").off();
  • 没有参数时是把所有的事件解绑
  • 想要解除哪个事件就把那个事件作为参数传进去就可以了
// 解除 click 事件
$("div").off("click");
  • 解除事件委托：
$("ul").on("click","li",function() {
    alert("这个事件被解除了");
});
// 解除这个事件委托
$("ul").off("click","li");
  • 有的事件只想触发一次，可以用 one() 绑定事件，这样绑定的事件只会触发一次
$("div").one("click",function() {
    alert("我只能触发一次");
});

自动触发事件

  • 像轮播图的自动播放一样，隔一段时间轮播图会自动向下播放一张图片 (自动点击向右的按钮)，jQuery 帮我们封装好要用的东西
  • 自动触发事件有三种格式：
// 触发元素的点击事件
element.click();
// 自动触发模式
element.trigger("事件");
// 第三种触发模式 (这种触发方式不会触发元素的默认行为)
element.triggerHandler("事件");
  • 元素默认行为：例如 input 标签的文本框 (text)，用普通事件输入文字后会出现一个一闪一闪的小光标，但是如果使用 triggerHandler 事件以后他就不会触发默认事件 (光标)

事件对象

  • 在事件被触发的时候，就会有事件对象的产生
// 这里回调函数里的 event 就是事件对象
element.on(events,[selector],function(event) {});
  • 事件对象可以阻止默认行为：event.preventDefault() 或者 return false
  • 阻止冒泡：event.stopPropagation()

jQuery 的其他方法

jQuery 对象拷贝

  • 把某个对象给另外一个对象使用，可以使用 $.entend 方法
$.extend([deep],target,obj1,[objN]);
  • deep：true 为深拷贝，默认 false 为浅拷贝
  • target：要拷贝到的目标对象
  • object1：被拷贝的对象
  • 如果源对象中已经有同名属性，再向里面拷贝的话会将同名属性给覆盖掉。如果不是同名的会一起被保存到目标对象里
  • 深拷贝和浅拷贝的区别：浅拷贝是把被拷贝里面的复杂数据类型的地址拷贝给目标对象 (修改源对象会影响拷贝的对象)，而深拷贝是新开辟一个空间储存整个数据对象
  • 如果是拷贝复杂数据类型，浅拷贝的话会将同名的复杂数据类型覆盖掉，而深拷贝会将两个复杂数据类型合并起来 (前提是不冲突，冲突之后也会被覆盖掉)
  • 例如：
let obj = {
    msg: {
        name: "noobMing"
    }
};
let test = {
    msg: {
        test: "hello jQuary"
    }
};

// 浅拷贝会把整个 msg 覆盖掉
$.extend(obj, test);
console.log(obj);
// 返回 msg: {
//     test: "hello jQuary"
// }

// 而深拷贝会像拷贝一样把两个对象合并
$.extend(true, obj, test);
console.log(obj);
// 返回：msg: {
//     test: "hello jQuary"
//     name: "noobMing"
// }

多库共存

  • 当其他库也用 $ 做标识符可能会引起冲突
  • 解决方法：可以用 jQuery 代替 $ 符号
  • jQuery 还支持规定新的变量名称，例如：var xx = $.noConflict()，就可以使用其他符号替换 $

jQuery 插件

图片懒加载
  • 可以通过插件 (EasyLasyload.js) 来实现懒加载的效果
  • 当我们的页面滑动到可视区域再加载图片
全屏滚动插件
  • 全屏滚动的效果：没有滚动条，只是通过按钮或者滚轮来切换页面
  • 可以用来做个人简历！
  • 这个项目在 Github 上 fullPage.js

案例 toDoList

  • 本地储存 localStorage 按下回车还是点击复选框，都是把本地储存的数据加载到页面中，保证即使关闭这个页面也不会丢失数据
  • 可以在开发者工具中的 Application 中查看保存的数据
  • 本地存储里面只能存储字符串的数据格式，所以要把 JSON 格式的对象转换成字符串格式，需要用到 JSON.stringify() 方法
  • 取出时使用 JSON.parse() 转换成对象格式
  • 储存数据的方法：localStorage.setItem(); 读出数据的方法：`local
  • 回车的 keycode 是 13
  • 向数组中追加元素的方法 push()
  • 当我在写输出部分的时候遇到了一个问题，第一次输出会很正常，但是第二次第三次输出就会把之前的都给输出出来，用 chrome 自带的浏览器 debug 根本不行，我观察到他第一次输出一个，第二次输出两个，所以我判断他是每输出一次就会将本地存储都输出一次，才导致的重复输出，所以只要在每次输出之前将 ol 里面清空就可以避免这个问题的发生
  • 在写的时候还有一个小问题是我没有解决的，我把同一个函数绑定到两个事件上的时候，这时同一个事件只能触发一次，然而把两个事件写到一块的时候这个问题就消失了，现在也没有办法重现这个问题

jQuery 尺寸位置操作

尺寸操作

  • jQuery 可以得到或设置元素的大小

属性

解释

width() / height()

获取元素的宽高值，只算width 和 height

innerWidth() / innerHeight()

包含 padding 的宽高

outerWidth() / outerHeight()

包含 padding 和 border 的宽高值

outerWidth(true) / outerHeight(true)

包含 padding border margin 的宽高值

  • 注意，这些都是方法
  • 设置元素大小：
// 获取元素大小 (返回数字形)
$("div").width();
// 设置元素大小
$("div").width(300);

位置操作

  • 位置操作主要有三组函数 offset()，position()，scrollTop() / scrollLeft()
  • offset 返回相对于文档的偏移坐标 (返回的是一个对象，里面有 left 和 top 两个属性)
  • 也可以设置距离文档的距离：
$("div").offset({top: 200,left: 200});
  • position 可以返回相对于带有定位的父级偏移坐标，如果父级没有定位则以文档为准 (返回的也是一个对象)
  • position 只能获取，不能设置 (只读)
  • scrollTop() / scrollLeft() 获取元素被卷去的头部和左侧
// 获取整个页面移动的距离
$(document).scrollTop();
  • 也可以通过设置参数来让页面滚动到指定位置
  • 只有元素才能做动画，所以想让整个页面滚动回文档首时需要写 $("body,html").stop().animate({scrollTop:0})