目标

能够说出什么是jQuery
能够说出jQuery的优点
能够简单使用jQuery
能够说出DOM对象和jQuery对象的区别

我学完后的回答:

封住好的武器技能库
简单，简洁，讲复杂的操作简单化
引入，使用
相当于是两位英雄，技能不互通，可以相互转换

1. jquery概述

1.1 jquery的概念

JavaScript库：library，是一个封装好的特定的集合？(方法和函数),从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate，hide。show，比如获取元素

简单来说：就是一个js文件，对原生js代码进行封装，快速使用封装好的功能

1.2 jquery概念

用更少的代码做更多的事

优点

轻量级
兼容好
事件，样式，动画
插件多
免费开源

1.3 使用

先去下载

https://jquery.com/download/

1.4 入口函数

$(document).ready(function(){
    $('div').hide();
})

$(function(){
    
})

等dom结构渲染完执行内部代码
相当于原生js中的DOMContentLoaded
不同于原生js中的load事件

1.5 jquery 的顶级对象$

jquery=$

1.6 dom对象和jq对象

原生js获取来的对象就是DOM对象
jq获得事jq对象
利用$包装了
事件和方法不能互通

两者可以互转

DOM 转jquery

$(DOM对象)

jq转dom

$('xxx')[index] index是索引号

$('xxx').get(index)

2. jquery常用api

2.1 目标

能够写出常用的jquery
能够操作jquery样式
能够写出常用的jquery动画
能够操作jquery属性
能够操作jquery元素
能够操作jquery元素尺寸位置

2.2 目录

jquery选择器
jquery样式操作
jquery效果
jquery属性操作
jquery文本属性值
jquery元素操作
jquery尺寸位置操作

2.3 jquery选择器

$('选择器')

jq设置样式

$('xxx').css('属性','值');

2.4 隐式迭代(重要)

遍历内部DOM元素的过程叫隐式迭代

给获取的所有元素遍历操作

2.5 筛选选择器

$('xxx:first') 第一个
:last 最后一个
eq(index) 第几个
:odd 奇数
:even 偶数

2.51 筛选方法(重点)

$('xx').parent(); 查找父级
children(selector) 亲儿子
finde('xxx') 相当于后代选择器
siblings('xxx') 兄弟，不包括自己
nextAll 之后的同辈元素
prevtAll 之前的同辈
hasClass('class' ) 检查是否含有特定类
eq() 相当于 $('xxx:eq(2)')

重点记住

parent 查找父级
children 查找儿子
find 后代选择
siblings兄弟不包括自己
eq 索引查找

2.52 jquery的排他思想

$(function(){
    // <!--当前变换-->
    $('button').click(function () {
        $(this).css('background-color','pink');
        $(this).siblings('button').css('background-color','')
    })

2.53 链式编程

写一起

2.6 样式操作

2.61 操作css方法

可以$().css
可以操作类，修改多个样式

1.参数只写属性名，则是返回属性值

$(this).css("color");

2．参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css("color" , "red");

2.62 设置类的样式

添加类

不能加点

    $(this).addClass('xxx')

移除类

    $(this).removeClass('xxx')

jq不会影响原先的类名

2.7 动画效果

显示隐藏

show
hide
toggle

滑动

slideDown
slideUp
slideToggle

淡入淡出

fadeIn
fadeOut
fadeToggle
fadeTo

自定义动画

animate

2.71 显示隐藏效果

语法规范

show([speed],[easing],[fn])

都可以省略
speed 速度
- slow 慢
- normal 正常
- fast 快
- 动画时长毫秒

hide 和show一样

2.72 滑动效果

slideDown 下滑动
slideUP 上滑动
slideToggle 滑动切换

2.73 事件切换

hover([over,]out)

over: 鼠标移到元素要出发的函数 = mouseenter
out：鼠标移出元素要出发的函数 = mouseleave

只一个一个就是每次调用

2.74 动画队列

动画一旦触发就会执行，多次就会排队执行

stop()

停止动画
写到动画前面，相当于停止结束上一次动画

2.75 淡入淡出效果

fadeIn()
fadeOut()
fadeToggle()

参数都可以省略
速度可调

fadeTo(speed,opacity)

opacity 透明度必须写 0-1
速度必须写
适合高亮显示

2.76 动画animate

语法

animate(params,[speed],[easing],[fn])

参数
params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。

2.77 手风琴效果演练

鼠标经过某个小li有两步操作∶
当前小li宽度变为224px，同时里面的小图片淡出，大图片淡入
其余兄弟小li宽度变为69px，小图片淡入，大图片淡出

2.8 jquery属性操作

可以查看属性的某个值

          console.log($('a').prop('href'));

获取自定义属性值

.attr()

修改的话就是

attr('xxx','aaa')

2.81 数据缓存data()

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。

2.9 内容文本值

.html()
.text()
.val() //表单的值
.parents('选择器') //可以返回指定祖先元素
.toFixed(2) //保留两位小数

3.0 元素操作

主要是遍历、创建、添加、删除元素操作。

3.1 遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历

$.each(function(index,domEle){xxx} )

$.each(方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
里面的函数有2个参数: index是每个元素的索引号; element 遍历内容

3.2 创建元素

语法：

$('<li></li>')

动态创建一个li

3.3 添加元素

内部添加

<!--添加到前面-->
element.append('内容')
<!--添加到后面-->
$('ul').prepend(li)

外部添加

<!--后面-->
   $('.test').after(div)

内部添加元素，生成之后，它们是父子关系。
外部添加元素，生成之后，他们是兄弟关系。

3.4 删除操作

  $('ul').remove() //删除元素本身 自s
  
  xxx.empty() //删除匹配的所有子节点,断子绝孙
  
 xxx. html('') ///元素删除和楼上一样

4.0 尺寸位置操作

4.1 尺寸

<!--得到宽和高-->
width() 
height()

innerWidth()
innerHeight() //包含padding

outerWidth()
outerHeight() // 包含padding border

<!--包含padding border margin-->
outerWidth(true)/outerHeight(true)

以上参数为空，则是获取相应值，返回的是数字型。
如果参数为数字，则是修改相应值。
参数可以不必写单位。

4.2 位置

offset() 距离文档的文职有.top.left属性 (能看也能改)
position() 带有父亲的坐标(只能看)
scrollTop()/scrollLeft() 被卷去的长度

5.0 事件

目标：

能够说出4种常见的注册事件
能够说出on绑定事件的优势
能够说出jQuery事件委派的优点以及方式
能够说出绑定事件与解绑事件

事件注册
事件处理
事件对象

5.1 事件注册

element.事件(function(){})

与原生差不多

click
mouseover
mouseout
blur
focus
change
keydown
keyup
resize
scroll等

5.2 事件on绑定

element.on(events，[selector],fn)

events: 空格隔开的事件
selector 子元素选择器

优点

可以绑定多个
可以当hover使用
事件委托(儿子的事情给爸爸做)
可以动态创建元素绑定事件

5.3 off解绑事件

off可以移除on添加的事件

可以解除所有

可以解除一个

.one 只能触发一次

5.4 自动触发事件 trigger

如轮播图

有些事件希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。

元素.事件()

元素.trigger('xxx')

.triggerHander 不会触发默认行为

5.5 事件对象

element.on(events,[selector],function(event){})

6.0 jquery 其他方法

能够说出jquery 对象的拷贝方法
能够说出多库共存的两种方法
能够使用jQuery插件

6.1 对象拷贝

$.extend([deep],target,object,)

deep true就是深拷贝
默认false浅拷贝
target是目标

什么是深拷贝和浅拷贝

浅拷贝

把复杂的数据地址给对象，用的同一个东西

一改全改

冲突的覆盖

深拷贝

完整复制过去

7.0 多库共存

冲突了用jQuery
改名

var xxx = $.noconflict()

7.1 jquery 插件

插件库

jQuery插件

图片懒加载

当页面滑动到可视区域，再显示图片

Jquery萌新速度上手攻略笔记

目标

目录