jQuery

使用 CSS 选择器来识别一组文档元素，并返回一个对象表示这些元素。返回的对象提供了大量的方法来批量操作匹配的元素。

jQuery前戏

js不足

代码很麻烦，冗余
浏览器兼容性问题
入口函数只能写一个，写了多个，后面的会覆盖前面的问题
js的代码容错性比较差（比较容易出错）
实现一些简单的动画比较麻烦

什么是jquery？

jquery是一个js库。jquery就是一个js文件.

什么是js库？js库其实就是把一些我们常用到的方法封装到一个单独的js文件里面，当我们想用的时候，引入它。（common.js animate.js）

特点：

丰富强大的语法
高效的查询
一套有用的方法
强大的函数式编程技巧，批量操作元素集
简洁的语言用法

引包

1	<script src="jquery-1.12.4.js"></script>

全局函数

jQuery() 全局函数，对应于一个快捷名：$。jQuery() 是工厂函数，不使用 new 关键字。

入口函数

js入口函数

1	window.onload = function () {...};

jQuery入口函数1

1	$(document).ready(function () {...});

jQuery入口函数2（简化）

1	$(function () {...});

$符实质

$实质是一个函数，jQuery 对象是类数组对象。
参数是 function 、把 dom 元素 document 转成 jQuery 对象，选择器

jQuery 的调用方式

第一种：传递 CSS 选择器（字符串）给 $() 方法。选择器支持大部分 CSS3 选择器，也有自己扩展的。返回当前文档中匹配该选择器的元素集合。还可以将一个 jQuery 对象作为第二个参数传递给 $() 方法，返回该特定元素或元素子元素中匹配选择器的部分。第二个元素可选的。

第二种：传递一个 Element、Document 或 Window 对象给 $() 方法。将传入的内容封装成 jQuery 对象。

第三种：传递 HTML 文本字符串，会根据传入的文本创建好 HTML 元素并封装为 jQuery 对象返回。可以接收第二个参数，可以传递 Document 对象来指定与所创建元素相关联的文档。第二个参数还可以是 object 对象。

第四中：传入函数。

一些基础方法

size() 代替 length
get() 代替方括号索引
toArray() 将 jQuery 对象转成真正数组
each() 遍历，代替 for 循环
- 参数是回调函数，回调函数中的 this 指向遍历的元素，是原生的 DOM 对象。
- 还可以将索引，该元素传递给回调函数的第一个和第二个参数，第二个参数也是 DOM 对象。
- 返回调用自身的 jQuery 对象，可以用于链式编程
map() 和 Array.prototype.map() 方法很接近。
- 接收回调函数作为参数；
- 索引是回调函数的第一个参数，元素作为 this 值和回调函数的第二个参数。
- 如果回调函数返回 null 或 undefined，索引忽略。
- 回调函数返回数组或者伪数组
- map() 返回的 jQuery 对象可以不包括文档元素，但依旧可以像伪数组对象一样使用。
index() 接收一个参数，返回该元素在 jQuery 对象中的索引值。找不到返回 -1.
is() 接收一个选择器，选中元素至少有一个匹配该选择器，返回 true。

jQuery 对象的三个属性

selector 选择器字符串
context 传递给 $() 的第二个参数
jquery jQuery 的版本号

选择器

基本选择器

ID选择器 $("#id名");
类选择器 $(".类名");
标签选择器 $("标签名");
并集选择器 $("#curr,.cls");
交集选择器 $("li.cls");

层级选择器

子代选择器 $("#curr>.cls")
后代选择器 $("li cls")

过滤选择器

:odd;
:even;
:eq(0);
- jQuery对象

方法

$(this).css("backgroundColor", "pink").siblings("li").css("backgroundColor", "");
- 链式编程
$(this).find("li").css("backgroundColor", "");
css({});
- css设置样式
siblings();
- 兄弟元素
find();
- 后代元素
next();
- 下一个兄弟元素
parent();
- 父元素
show();
- 显示
hide();
- 影藏
index();
- 获取的是当前对象在它兄弟里面的索引/
`eq(0);
- 取到的是jQuery对象

隐式迭代

设置属性的操作的时候设置的是所有的元素
获取性操作不去遍历，直接获取第一个

类操作

添加类 addClass();
- 类名
移除类 removeClass();
- 类名
判断类 hasClass();
- 类名
切换 toggle();
- 类名，两个类名之间切换操作

动画

###显示、隐藏

show(); hide(); toggle();
- 参数speed,值为毫秒值

淡入、淡出

fadeIn(); fadeIn(); fadeToggle()；
- 不传参数的时候，有动画，normal;

滑入、滑出

slideUp(); slideUp(); slideToggle()；
- 不传参数的时候，有动画，normal;

自定义动画

1	$("#box").animate({"width":"400px","height":"400px", "left":"400px"},speed,easing);

停止动画 `stop();`

stop(clearQueue, jumpToEnd);
- 第一个参数是否清除动画队列 true, false，默认false;第二个参数是是否跳转到当前动画的最终效果 true, false

jQuery和js节点操作

js节点操作

var box = document.getElementById("box");
aNode.document.createElement("a");
box.appendChild(aNode);
aNode.innerHTML = "innerHtml";

jQuery 操作

append();
- 添加节点
appendTo()
- 添加节点
prepend();
- 添加节点
prependTo()
- 添加节点
after();
- 添加节点
before();
- 添加节点
insertAfter()
- 插入节点
insertBefore()
- 插入节点
replaceWith()
- 替换
add()
- 添加
first()
- 仅包含选中元素的第一个
eq()
- 只包含指定序号的单个元素
html();
- 不传参获取，传参设置
text();
- 不传参获取，传参设置
empty();
- 清空节点（清理门户）
remove();
- 删除节点（自杀）
clone();
- 深度复制，不复制事件
clone(true);
- 深度复制，并且复制事件
val();
- 获取值
val("abc");
- 设置值
next()
- 下一个节点
prev()
- 上一个节点
prevAll()
- 前面所有节点
nextAll()
- 后面所有节点
parent()
- 父节点
sibling()
- 兄弟节点
find()
- 后代节点
filer()
- 返回符合条件的jQuery对象
not()
- 排除元素
has()
- 是否有
gt()
- 参数是数字，返回大于参数的后面的元素
wrap()
- 包装每一个
wrapInner()
- 包装每一个元素的内容
wrapOuter()
- 将选中元素作为一组包装

jQuery属性操作

setAttribute("target", "_blank");
attr("title", "星期四");
- 用法和css用法是一样
attr(name, value);
- 用法和css用法是一样
attr({json});
- 用法和css用法是一样
css()
- 传入一个字符串参数，获取对应样式，注意，不能传入复合样式的属性，如 “font”
- 传入两个参数，设置样式
- 传入一个对象，设置样式

jQuery属性操作特例

布尔类型的属性：true false

checked
selected
disabled

在jquery里面，碰到布尔类型的属性的时候，不要用attr方法，应该prop方法

prop("checked");
- 用法和css用法是一样

jQuery获取属性值width系列（操作尺寸）

width();
- 能获取、设置
Innerwidth();
- 获取内部宽度（包括宽度和padding）
Outerwidth();
- 获取内部宽度（包括宽度和padding和border）
Outerwidth(true);
- 获取内部宽度（包括宽度和padding和border和margin）
height();
- 能获取、设置
Innerheight();
- 获取内部高度（包括高度和 padding）
Outerheight();
- 获取内部高度（包括高度和 padding 和 border）
Outerheight(true);
- 获取内部高度（包括高度和 padding 和 border 和 margin）

jQuery操作坐标

position();
- 只能获取不能设置，设置用 css 设置，找最近的有相对定位的的父盒子
offset();
- 相对与dom最左上角（获取、设置）
- 带有 left 属性和 top 属性
offsetParent()
- 最近定位的祖先元素
scrollTop();
- 设置卷去的距离（事件）
scrollLeft();
- 设置卷去的距离（事件）

$(window).scroll(function () {
  $(this).scrollTop();
  $(this).scrollLeft();
});

获取和设置 CSS 类

addClass()
- 添加类
removeClass()
- 删除类
toggleClass()
- 没有类则添加，否则删除
hasClass()
- 判断是否存在

设置或获取元素内容

html()
- 不传参获取
- 传参设置值，html格式字符串
text()
- 不传参获取
- 传参设置值，纯文本

jQuery事件

事件机制：
- 用户执行某一个操作，浏览器会相应用户的操作，执行某个函数
事件处理函数：
- 所谓的事件处理函数，就是响应用户的那个函数
用户事件：
- 就是事件名，用户可以注册的事件
注册事件：
- 就是赋值或调用addEventListener
响应事件：
- 做完操作调用某个方法

jQuery事件发展

简单事件绑定：不能同时注册两个事件

bind事件绑定

$("p").bind({
   "click": function () {
        alert("我执行了click");
   },"mouseenter": function () {
        alert("我执行了mouseenter");
   }
});

不支持动态创建元素

delegate事件（委托、委派、代理）

1
2
3

$("div").delegate("p", "click", function () {
  alert("我执行了委托事件");
});

on事件绑定

/*on给div注册委托事件*/
$("div").on("click", "p", function () {
}); 
/*on给div注册普通的点击事件*/
$("div").on("click", function () {
  alert("我触发了div本身的事件");
});

解除事件绑定

/*off是解除所有的事件,能解除委托事件*/
$("div").off();
/*解除click事件*/
$("div").off("click");
/*解除委托的click事件*/
$("div").off("click","**");

事件触发

trigger("focus");
- 触发获取焦点事件，会触发浏览器默认行为
triggerHandler("focus");
- 触发获取焦点事件，不会触发浏览器默认行为

事件对象event

click(function(event){...});
- 点击
keyCode = event.keyCode;
- 键盘码

阻止事件冒泡

方法1：

event.stopPropagation();

方法2：

return false;

阻止浏览器的默认行为

方法1：

event.preventDefault();

方法2：

return false;

事件

click(function(){...});
- 点击
scroll(function(){...});
- 鼠标滚轮事件
focus(function(){...});
- 获取焦点
mouseenter(function(){...});
- 鼠标经过
mouseleave(function(){...});
- 鼠标离开
keydown(function(event){var keyCode = event.keyCode;});
- 键盘按键按下
keyup(function(event){var keyCode = event.keyCode;});
- 键盘抬起

浏览器提供的事件

"onabort", "onblur", "oncancel", "oncanplay", 
"oncanplaythrough", "onchange", "onclick", "onclose",
"oncontextmenu", "oncuechange", "ondblclick", "ondrag", 
"ondragend", "ondragenter", "ondragleave", "ondragover",
"ondragstart", "ondrop", "ondurationchange", "onemptied",
"onended", "onerror", "onfocus", "oninput", "oninvalid", 
"onkeydown", "onkeypress", "onkeyup", "onload",
"onloadeddata", "onloadedmetadata", "onloadstart", "onmousedown", 
"onmouseenter", "onmouseleave", "onmousemove", "onmouseout", 
"onmouseover", "onmouseup", "onmousewheel", "onpause", 
"onplay", "onplaying", "onprogress", "onratechange", 
"onreset", "onresize", "onscroll", "onseeked", 
"onseeking", "onselect", "onshow", "onstalled", 
"onsubmit", "onsuspend", "ontimeupdate", "ontoggle", 
"onvolumechange", "onwaiting", "onbeforecopy", "onbeforecut", 
"onbeforepaste", "oncopy", "oncut", "onpaste", 
"onsearch", "onselectstart", "onwheel", "onwebkitfullscreenchange", 
"onwebkitfullscreenerror"

迭代

/*显式迭代：对每一个元素做不同的处理*/
for (var i = 0; i < $("li").length; i++) {
  var target = (i + 1) / 10;
  $("li").eq(i).css("opacity", target);
}
/*each();*/
$("li").each(function (index, element) {
  var target = (index + 1) / 10;
  $(element).css("opacity", target);
});

插件

懒加载插件

<img class="lazy" data-original="23.jpg" alt="">
<script src="jquery-1.12.4.js" type="text/javascript"></script>
<script src="plugins/jquery.lazyload.js" type="text/javascript"></script>
<script>
    $(function () {$("img.lazy").lazyload();});
</script>

fullpage插件

引入文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.fullPage.js"></script>

html

<div id="fullpage">
  <div class="section">第一屏</div>
  <div class="section">第二屏</div>
  <div class="section">
    <div class="slide">第三屏的第一屏</div>
    <div class="slide">第三屏的第二屏</div>
    <div class="slide">第三屏的第三屏</div>
    <div class="slide">第三屏的第四屏</div>
  </div>
  <div class="section">第四屏</div>
</div>

js

$(function(){
  $('#fullpage').fullpage({
    'verticalCentered': false,
    'css3': true,
    'sectionsColor': ['#254875', '#00FF00', '#254587', '#695684'],
    anchors: ['page1', 'page2', 'page3', 'page4'],
    'navigation': true,
    'navigationPosition': 'right',
    'navigationTooltips': ['fullPage.js', 'Powerful', 'Amazing', 'Simple']
  });
});

可选配置

选项
方法
回调函数

jqueryUI插件

jqueryUI插件官网

引入文件

1
2
3

<link rel="stylesheet" href="plugins/jquery-ui.css" />
<script src="jquery-1.12.4.js"></script>
<script src="plugins/jquery-ui.js"></script>

html

<body>
<div class="drag-wrapper">
    <div class="drag-bar">可拖动、排序、变形的新闻模块</div>
    <div class="resize-item">
        <div class="sort-wrapper">
            <ul class="sort-item">
                <li>这是第1条新闻!</li>
                <li>这是第2条新闻!</li>
                <li>这是第3条新闻!</li>
            </ul>
        </div>
    </div>
</div>
</body>

js

<script>
    $(function () {
        $(".drag-wrapper").draggable({"handle":".drag-bar"});
        $(".resize-item").resizable({"handles":"s"});
        $(".sort-item").sortable({"opacity":"0.5"});
    });
</script>

插件制作

制作插件：就是给jquery对象添加方法。

$.fn.fnName = function(){}

jQuery前戏

js不足

什么是jquery？

引包

全局函数

入口函数

js入口函数

jQuery入口函数1

jQuery入口函数2（简化）

$符实质

一些基础方法

选择器

基本选择器

层级选择器

过滤选择器

方法

隐式迭代

类操作

动画

淡入、淡出

滑入、滑出

自定义动画

停止动画 stop();

jQuery和js节点操作

js节点操作

jQuery 操作

jQuery属性操作

jQuery属性操作特例

jQuery获取属性值width系列（操作尺寸）

jQuery操作坐标

获取和设置 CSS 类

设置或获取元素内容

jQuery事件

jQuery事件发展

on事件绑定

解除事件绑定

事件触发

事件对象event

阻止事件冒泡

阻止浏览器的默认行为

事件

浏览器提供的事件

迭代

插件

懒加载插件

fullpage插件

引入文件

html

js

可选配置

jqueryUI插件

引入文件

html

js

插件制作

停止动画 `stop();`