jQuery 笔记01

jQuery

是JavaScript库，是一个js文件，封装了常用的方法，能够更加快速方便的操作dom

jQuery对象

‘$’或者jQuery是顶级对象，相当于原生js的window
使用jQuey获取dom元素得到的是jQuey对象，dom元素是以伪数组的形式存储

jQuery隐式迭代

$("div").css("color" , "red"); // 对于获取到的所有div元素都修改颜色为红色

jQuery对象和Dom对象相互转换

// dom对象转换成jQuery对象 ，用$封装就可以
var div = document.querySelector('div');
$(div) 
// jQuery对象转换成dom对象
$("div")[index];
$("div").get(index);

jQuery的入口函数

相当于原生js的domContentLoaded事件，即等到页面dom元素加载完成执行

// 1. 
$(function() {
    // 入口，等dom元素加载完成后调用
})
// 2. 
$(document).ready(function() {
    // 入口，dom元素加载完成后调用
})

jquery选择器

基础选择器

$("css选择器"); // 和css选择器基本一致

层级选择器

$("ul>li"); // 子代选择
$("ul li"); // 后代选择

筛选选择器

$("li:first"); // 选择第一个li
$("li:last");  // 选择最后一个li
$("li:eq(index)");  // 选择指定索引号的li 索引从0开始
$("li:odd");  // 选择索引为奇数的li
$("li:even");  //选择索引为偶数的li
$("input:checked"); // 选择被选中的表单元素

筛选方法

$("li").parent(); // 选择亲爸爸
$("li").parents(); // 返回所有祖先元素
$("ul").children("li"); // 选择亲儿子
$("ul").find("li"); // 选择后代
$(".first").siblings("li"); // 选择当前元素的兄弟li元素
$("li").eq(index); // 按索引号选择li
$(".first").nextAll(); // 选择当前元素之后的所有兄弟元素
$(".last").prevAll(); // 选择当前元素之前的所有兄弟元素
$("div").hasClass(".current"); // 判断一个元素有没有某一个类名

jQuery样式操作

1. 通过css方法修改样式

$("div").css("color"); // 获取样式
$("div").css("color" , "red"); // 修改样式
$("div").css({  // 修改多个样式，可以传入对象作为参数
    width: 200,
    height: 300,
    backgroundColor: "red"  // 驼峰命名
})

2. 通过添加修改类名修改样式

$("div").addClass("className"); // 添加类
$("div").removeClass("className"); // 删除类名
$("div").toggleClass("className"); // 切换类 有—>无 无——>有

jQuery 常用效果（动画）

• 显示隐藏

// 三个可选参数
// speed 速度slow normal fast 或指定动画时长 单位ms
// easing 运动曲线 swing linear 
// fn 回调函数 动画结束时执行
$("div").show([speed, [easing], [fn]])
$("div").hide([speed, [easing], [fn]])
$("div").toggle([speed, [easing], [fn]])

• 淡入淡出

$("div").fadeIn([speed, [easing], [fn]])
$("div").fadeOut([speed, [easing], [fn]])
$("div").fadeToggle([speed, [easing], [fn]])
$("div").fateTo(speed,opacity); // 变化到指定透明度 这个速度和透明度参数必须写

• 下拉上划

$("div").slideDown([speed, [easing], [fn]])
$("div").slideUp([speed, [easing], [fn]])
$("div").slideToggle([speed, [easing], [fn]])

• 自定义动画

// params参数：想要修改的样式，以对象形式传入
$("div").animate(params, [speed], [easing], [fn]);

jQuery 操作元素属性

1. 元素固有属性，比如a标签的href属性，input的type属性，通常用于对表单属性的获取和设置，比如checked、disabled、selected等

$("a").prop("href"); // 获取a标签的href属性
$("a").prop("href" , "http://baidu.com"); // 设置a标签的href属性

2. 元素自定义属性，比如给li标签添加的index属性

$("li").attr("index"); // 获取元素li的自定义属性index
$("li").attr("data-index"); // 也可以获取H5的自定义属性，以data开头的自定义属性
$("li").attr("index", "1"); // 设置自定义属性

3. data()方法缓存数据，可以在指定元素上存储数据，且不会修改dom元素结构，一旦刷新，数据丢失

$("div").data("name", "value"); // 向div元素存储数据，名为name，值为value
$("div").data("name"); // 获取数据
$("div").data("idnex"); // 可以获取元素的data-开头的H5自定义属性，且返回的是数字类型

获取和设置元素内容

1. html()方法，获取或设置元素的内容，包括标签，相当于原生js的innerHtml
2. text() 方法，不包括标签，相对于原生js的innerText
3. 表单元素的val() 方法，获取或设置表单元素的value值

jQuery 元素操作

主要包括遍历、创建、添加、删除 元素操作

遍历：

// 1. 遍历获取到的所有div
$("div").each(function(index, ele) {
   console.log(index); // 输出每一个div的索引号
   console.log(ele);  // 输出每一个dom元素对象
})
// 2. 第二种写法，主要用于处理数据，可以遍历对象和数组
$.each(obj, function(index, ele) {
})

创建

直接用$()进行封装创建元素

var div = $("<div></div>"); // 创建一个div元素
var li = $("<li></li>"); // 创建一个li元素

添加

// 内部添加，给指定元素添加子元素
$("ul").append(li); // 在末尾添加
$("ul").prepend(li); // 在开头添加

// 外部添加，将元素添加到指定元素的前面或者后面
$(".current").before(div);
$(".current").after(div);

删除

$("div").remove(); // 删除当前元素
$("ul").empty(); // 删除当前元素的所有子元素 清空
$("ul").html(""); // 效果同上 清空

jQuery事件

事件注册

1. 单个事件注册：元素.事件(function() {})
   click、mouseover、mouseout等
   hover（function(){}, function(){}）事件：相当于mouseover和mouseout
   change事件：表单元素发生变化时触发
2. on() 方法 ：在元素上绑定一个或多个事件

//1. 参数以对象的形式传入
$("div").on({
    click: function() {},
    mouseover: function() {},
    mouseout: function() {}
})
//2. 不同事件相同回调函数
$("div").on("mouseover mouseout", function() {
  // xxxxxxxxxx;
})

事件委托：给父元素注册事件，真正触发的是子元素

$("ul").on("click" , "li" , function() {
})

可以给未来动态创建的元素绑定事件

$("ul").on("click" , "li" , function() {});
$("ul").append($("<li>后来创建的</li>"));

解绑事件

$("div").off(); // 解除div上的所有绑定事件
$("div").off("click"); // 解除div的click事件
$("ul").off("click" , "li"); // 解绑事件委托

只触发一次事件

one()用法和on几乎一样

$("div").one("click" , function() {})

自动触发（调用）事件

// 1. ele.事件()可以调用事件
$("div").click();
// 2. trigger()方法可以调用事件处理函数，触发事件
$("div").trigger("click");
// 3. triggerHandler() 不会触发元素的默认行为
$("div").triggerHandler("click");

事件对象

jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。

$("div").on("click" , function(event) {
    // event 就是事件对象 用法和原生js基本一样
})

jQuery其他方法

对象拷贝

$.extend([deep] , targetObj , Obj1, [ObjN])
可选参数deep: 为true表示深拷贝，将原对象完全复制一份给新对象，修改新对象不会影响原对象
为false表示浅拷贝，将原对象中的复杂数据类型的地址拷贝给新对象，修改新对象会影响原对象
targetObj是目标对象
Obj是要拷贝的对象

jQuery多库共存

解决多个js库"$"命名冲突的问题

// 1. 用jQuery代替$
// 2. 用$.noConflict() 规定新的名称代替jQuery（$）
var suibian = $.noConflict();
suibian("div"); // 获取div

jQuery插件

​ jQuery 插件常用的网站：

• jQuery 插件库 http://www.jq22.com/
• jQuery 之家 http://www.htmleaf.com/

jQuery 插件使用步骤：

• 引入相关文件。（jQuery 文件 和 插件文件）
• 复制相关html、css、js (调用插件)

图片懒加载：EasyLazyLoad.js
图片的懒加载就是：当页面滑动到有图片的位置，图片才进行加载，用以提升页面打开的速度及用户体验。

全屏滚动: fullpage.js
http://www.dowebok.com/demo/2014/77/

bootstrap

jQuery 中的大小和位置

获取元素的宽高

• width(),height() : 不包括padding，border 和margin
• innerWidth(), innerHeight() : 包括padding
• outerWidth(), outerHeight() : 包括边框
• outerWidth(true), outerHeight(true) : 包括margin

元素位置

• offset() : 元素相对于文档document的位置
• position() : 元素相对于带有定位的父元素的位置
• scrollTop(),scrollLeft() : 元素被卷去的头部（左边）的大小