jq总结

第一节 jQuery初步认知

jQuery概述

• JQuery概念

  • javascript概念

    • 基于Js语言的API和语法组织逻辑，通过内置window和document对象，来操作内存中的DOM元素

  • JQuery概念

    • 基于javascript的，同上，提高了代码的效率

• jQuery是什么:

  • 是一个javascript代码仓库，我们称之为javascript框架。

  • 是一个快速的简洁的javascript框架，可以简化查询DOM对象、处理事件、制作动画、处理Ajax交互过程。

  • 它可以帮我们做什么(有什么优势)

    • 轻量级、体积小，使用灵巧(只需引入一个js文件)
    • 强大的选择器
    • 出色的DOM操作的封装
    • 出色的浏览器兼容性
    • 可靠的事件处理机制
    • 完善的Ajax
    • 链式操作、隐式迭代
    • 方便的选择页面元素(模仿CSS选择器更精确、灵活)
    • 动态更改页面样式/页面内容(操作DOM，动态添加、移除样式)
    • 控制响应事件(动态添加响应事件)
    • 提供基本网页特效(提供已封装的网页特效方法)
    • 快速实现通信(ajax)
    • 易扩展、插件丰富

• 如何引入JQuery包

  • 引入本地的JQuery

  • 引入Google在线提供的库文件（稳定可靠高速）

  • 使用Google提供的API导入

  • 写第一个JQUery案例

    • 解释:在JQuery库中，$是JQuery的别名，$()等效于就jQuery()
    • 讲解$(function(){});

  • $是jQuery别名。如$()也可jQuery()这样写,相当于页面初始化函数，当页面加载完毕，会执行jQuery()。

  • 希望在做所有事情之前，JQuery操作DOM文档。必须确保在DOM载入完毕后开始执行，应该用ready事件做处理HTML文档的开始

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

    • 类似于js的window.onload事件函数，但是ready事件要先于onload事件执行
    • window.onload = function(){};

  • 为方便开发，jQuery简化这样的方法，直接用$()表示

  • JQuery的ready事件不等于Js的load：

    • 执行时机不同：load需要等外部图片和视频等全部加载才执行。ready是DOM绘制完毕后执行，先与外部文件
    • 用法不同：load只可写一次，ready可以多次

• **window.onload与$(document).ready()对比** window.onload |$(document).ready() | | | ------------- | --------------------- | -------------------------------------------------------------- | | 执行时机 | 必须等网页中所有内容加载完后(图片)才执行 | 网页中的DOM结构绘制完后就执行,可能DOM元素相关的东西并没有加载完 | | 编写个数 | 不能同时执行多个 | 能同时执行多个 | | 简化写法 | 无 | $(document).ready(function(){ //.. }); 推荐写法：$(function(){ });

• jQuery有哪些功能(API) ：

  • 选择器
  • 过滤器
  • 事件
  • 效果
  • ajax

• 简单的JQuery选择器：

  • JQuery基本选择器（ID选择器，标签选择器，类选择器，通配选择器和组选择器5种）
  • ID选择器：document.getElementById(id)与$("#id")对比(改变文字大小)---id唯一，返回单个元素
  • 标签选择器：document.getElementsByTagName(tagName)与$("tagname")对比---多个标签，返回数组
  • 类选择器:$(".className")--多个classname（改变背景图片）
  • 通配选择器：document.getElementsByTagName("")与$("")对比---指范围内的所有标签元素
  • 组选择器：$("seletor1,seletor2,seletor3")----无数量限制，用逗号分割

初步了解JQuery

• JQuery是什么

  • javascript用来干什么的：

    • 操作DOM对象
    • 动态操作样式css
    • 数据访问
    • 控制响应事件等

  • jQuery作用一样，只是更加快速简洁

  • 总结： $() jquery核心方法的作用和使用场景

  • 如果是一个字符串参数并且没有标签对（选择器） $(ul.nav")

  • 如果是一个字符串参数并且有标签对（创建html标签）$("<img>") --最终加到DOM树中$xx.append("");

  • 如果是传入一个element dom对象，直接包装为proxy对象返回 $(DOM对象)

  • 如果第一个参数是字符串，第二个是element dom对象的话，那么就是在element这个dom对象里面寻找选择器对应的元素并且代理 $("li",$DOM对象)

第二节 选择器

• 来回顾一下CSS常用的选择器

选择器	语法	描述
标签选择器	E{css规则}	以文档元素作为选择符
ID选择器	#ID{css规则}	ID作为选择符
类选择器	E.className{css规则}	class作为选择符
群组选择器	E1,E2,E3{css规则}	多个选择符应用同样的样式
后代选择器	E F{css规则}	元素E的任意后代元素F

• 基本过滤选择

选择器	说明	返回
:first	匹配找到的第1个元素	单个元素
:last	匹配找到的最后一个元素	单个元素
:eq	匹配一个给定索引值的元素	单个元素
:even	匹配所有索引值为偶数的元素	集合元素
: odd	匹配所有索引值为奇数的元素	集合元素
:gt(index)	匹配所有大于给定索引值的元素	集合元素
:lt(index)	匹配所有小于给定索引值的元素	集合元素
:not	去除所有与给定选择器匹配的元素	集合元素
:animated	选取当前正在执行动画的所有元素	集合元素
focus	选取当前正在获取焦点的元素	集合元素

• 内容过滤选择器

选择器	描述	返回
:contains(text)	选取含有文本内容为text的元素	集合元素
:empty	选取不包含子元素获取文本的空元素	集合元素
:has(selector)	选择含有选择器所匹配的元素的元素	集合元素
:parent	选取含有子元素或者文本的元素	集合元素

• 可见过滤选择器

选择器	描述	返回
:hidden	选择所有不可见的元素	集合元素
:visible	选取所有可见的元素	集合元素

• 属性过滤选择器

选择器	说明	返回
[attribute]	选取拥有此属性的元素	集合元素
[attribute=value]	选取属性值为value值的元素	集合元素
[attribue^=value]	选取属性的值以value开始的元素	集合元素
[attribue$=value]	选取属性的值以value结束的元素	集合元素

第四节 代理对象属性和样式操作

• 代理对象属性和样式操作

  • attr
  • prop(一般属性值是boolean的值或者不用设置属性值，一般使用)
  • css(最好不用，一般我用来做测试)
  • addClass / removeClass

• 操作原生DOM的时候用的方式：一次只能操作一个

  • 操作属性：setAttribute / getAttribute
  • 操作样式：style.xx = value
  • 操作类样式：className=''
  • 获取DOM的子元素children属性
  • DOM里面添加一个子元素appendChild()

• 操作jQuery代理对象的时候：批量操作DOM对象(全都是通过方法操作)

• 操作属性：attr()、prop()

  • attr和prop区别：如果属性的值是布尔类型的值 用prop操作 反之attr

• 操作样式：css()

• 操作类样式：addClass() removeClass()

• 操作DOM子元素：children()

• 添加子元素：append()

第五节 jQuery中DOM操作

• DOM是一种与浏览器、平台|语言无关的接口，使用该接口可以轻松的访问 页面中的所有的标准组件

• DOM操作的分类

  • DOM Core

    • DOM core并不专属于JavaScript，任何支持DOM的程序都可以使用
    • JavaScript 中的getElementByID() getElementsByTagName() getAttribute() setAttribute()等方法都是DOM Core的组成部分

  • HTML-DOM

  • • HTML -DOM的出现比DOM-Core还要早，它提供一些更简明的标志来描述HTML元素的属性

  • • 比如：使用HTML-DOM来获取某元素的src属性的方法

      • element.src

• CSS-DOM

  • 针对CSS的操作。在JavaScript中，主要用于获取和设置style对象的各种属性，通过改变style对象的属性，使网页呈现不同的效果

• 查找节点

  • 查找属性节点 attr() 可以获取各属性的值

• 创建节点

  • $(html)：根据传递的标记字符串，创建DOM对象

• 插入节点

方法	说明
append()	向每个匹配元素内部追加内容
appendTo()	颠倒append()的操作
prepend()	向每个匹配元素的内容内部前置内容
prependTo()	颠倒prepend()的操作
after()	向每个匹配元素之后插入内容
insertAfter()	颠倒after()的操作
before()	在每个匹配元素之前插入内容
insertBefore()	颠倒before()的操作

• 删除节点

• • jQuery提供了三种删除节点的方法 remove() detach() empty()

  • remove()方法

    • 当某个节点用此方法删除后，该节点所包含的所有后代节点将同时被删除，用remove()方法删除后，还是可以继续使用删除后的引用

• • detach()

    • 和remove()方法一样，也是从DOM中去掉所有匹配的元素，与remove()不同的是，所有绑定的事件、附加的数据等，都会被保留下来

  • empty()

    • empty()方法并不是删除节点，而是清空节点，它能清空元素中所有后代节点

• 复制节点

  • 使用clone()方法来完成
  • 在clone()方法中传递一个参数true，同时复制元素中所绑定的事件

• 替换节点

  • jQuery提供相应的方法 replaceWidth()

• 样式操作

  • 获取样式和设置样式 attr()

  • 追加样式 addClass()

  • 移除样式 removeClass()

  • 切换样式

    • toggle()方法只要是控制行为上的重复切换（如果元素是显示的，则隐藏；如果元素原来是隐藏的，则显示）
    • toggleClass()方法控制样式上的重复切换（如何类名存在，则删除它，如果类名不存在，则添加它）

  • 判断是否含有某个样式

    • hasClass()可以用来判断元素是否含有某个class,如有返回true 该方法等价于is()

• 设置和获取HTML、文本和值

• • html()

    • 此方法类似JavaScript中innerHTML属性，可以用来读取和设置某个元素中的HTML内容

  • text() 方法

    • 此方法类型JavaScript中innerHTML，用来读取和设置某个元素中的文本内容

• • val() 方法

    • 此方法类似JavaScript中的value属性，用来设置获取元素的值。无论是文本框、下拉列表还是单选框，都可以返回元素的值，如果元素多选，返回一个包含所有选择的值的数组

• 遍历节点

• • children() 方法

    • 该方法用来取得匹配元素的子元素集合
    • childre()方法只考虑子元素而不考虑其他后代元素

• • next() 方法

    • 该方法用于取得匹配元素后面紧邻的同辈元素

  • prev() 方法

    • 用于匹配元素前面紧邻的同辈元素

  • siblings() 方法

    • 用于匹配元素前后所有的同辈元素

  • parent() 方法

    • 获得集合中每个 元素的父级元素

  • parents() 方法

    • 获得集合中每个元素的祖先元素

CSS DOM操作

• CSS DOM技术简单的来说就是读取和设置style对象的各种属性
• 用css()方法获取元素的样式属性，可以同时设置多个样式属性
• CSS DOM中关于元素定位有几个常用的方法

• • offset() 方法

    • 它的作用是获取元素在当前视窗的相对偏移其中返回的对象包含两个属性，即top和left，他只对可见元素有效

• • position() 方法

    • 获取相对于最近的一个position()样式属性设置为relative或者absolute的祖父节点的相对偏移，与offset()一样，他返回的对象也包括两个属性，即top和left

  • scrollTop() 方法和scrollLeft方法

  • • 这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离

二、插入内容

• 内部插入

  • 向元素最后面插入节点：

    • append():向每个匹配的元素内部追加内容
    • appendTo():把所有匹配的元素追加到指定元素集合中，$("A").append("B") 等效$("B").appendTo("A")

  • 向元素最前面插入节点：

    • prepend（）：把每个匹配的元素内部前置内容
    • prependTo（）：把所有匹配的元素前置到另一个指定的元素集合中,$("A").prepend("B") 等效$("B").prependTo("A")

• 外部插入

  • after():在每个匹配的元素之后插入内容
  • before()：在每个匹配想元素之前插入内容
  • insertAfter()：将所有匹配的元素插入到另一个指定的元素集合后面，$A.insert($B) 等效 $B.insertAfter($A);
  • insertBefore()：将所有匹配的元素插入到另一个指定的元素集合前面 $A.before($B) 等效 $B.insertBefore($A);

三、删除内容

• 移除

  • remove():从DOM中删除所有匹配元素

• 清空

  • empty():删除匹配的元素集合中所有子节点内容

四、克隆内容：创建指定节点副本

• clone()

  • 注意：若clone（true）则是包括克隆元素的属性，事件等

五、替换内容

• • replaceWith():将所有匹配的元素替换成指定的元素
  • replaceAll():用匹配的元素替换掉指定元素
• 注意：两者效果一致，只是语法不同 $A.replaceAll($B) 等效于 $B.replaceWhith($A);

本节新知识

• JavaScript语言本身不支持动画设计，必须通过改变CSS来实现动画效果

显隐动画

• show():显示 hide():隐藏

  • 原理：hide()通过改变元素的高度宽度和不透明度，直到这三个属性值到0

  • show()从上到下增加元素的高度，从左到右增加元素宽度，从0到1增加透明度，直至内容完全可见

  • 参数：

    • show(speed,callback)

      • speed: 字符串或数字，表示动画将运行多久（slow=0.6/normal=0.4/fast=0.2）
      • callback: 动画完成时执行的方法

• 显示和隐藏式一对密不可分的动画形式

• 显隐切换

  • toggle():切换元素的可见状态

    • 原理：匹配元素的宽度、高度以及不透明度，同时进行动画，隐藏动画后将display设置为none

    • 参数：

      • toggle(speed)

      • toggle(speed,callback)

      • toggle(boolean)

        • speed: 字符串或数字，表示动画将运行多久（slow=0.6/normal=0.4/fast=0.2）
        • easing： 使用哪个缓冲函数来过渡的字符串(linear/swing)
        • callback： 动画完成时执行的方法
        • boolean:true为显示 false为隐藏

滑动

• 显隐滑动效果

  • slideDown():滑动隐藏

  • slidUp():滑动显示

  • 参数:

    • slideDown(speed,callback)
    • slidUp(speed,callback)

• 显隐切换滑动

  • slideToggle():显隐滑动切换

  • 参数:

    • slidUp(speed,callback)

渐变：通过改变不透明度

• 淡入淡出

  • fadeIn()

  • fadeOut()

  • 参数：

    • fadeIn(speed,callback)
    • fadeOut(speed,callback)

• 设置淡出透明效果

  • fadeTo()：以渐进的方式调整到指定透明度

  • 参数：

    • fadeTo(speed,opacity,callback)

• 渐变切换:结合fadeIn和fadeOut

  • fadeToggle()

  • 参数:

    • fadeOut(speed,callback)

• 自定义动画：animate()

  • 注意：在使用animate方法之前，为了影响该元素的top left bottom right样式属性，必须先把元素的position样式设置为relative或者absolute

  • 停止元素的动画

    • 很多时候需要停止匹配正在进行的动画，需要使用stop()

    • stop()语法结构：stop([clearQueue],[gotoEnd]);

      • 都是可选参数，为布尔值
      • 如果直接使用stop()方法，会立即停止当前正在进行的动画

  • 判断元素是否处于动画状态

    • 如果不处于动画状态，则为元素添加新的动画，否则不添加
      if(!$(element).is(":animated")){ //判断元素是否处于动画状态}
    • 这个方法在animate动画中经常被用到，需要注意

  • 延迟动画

    • 在动画执行过程中，如果你想对动画进行延迟操作，那么使用delay()

• 用animate模拟show():

  • show: 表示由透明到不透明

  • toggle: 切换

  • hide:表示由显示到隐藏

  • 动画方法总结

方法名	说明
hide()和show()	同时修改多个样式属性即高度和宽度和不透明度
fadeIn()和fadeOut()	只改变不透明度
slideUp()和slideDown()	只改变高度
fadeTo()	只改变不透明度
toggle()	用来代替show()和hide()方法，所以会同时修改多个属性即高度、宽度和不透明度
slideToggle()	用来代替slideUp和slideDown()方法，所以只能改变高度
fadeToggle()	用来代替fadeIn()和fadeOut方法，只能改变不透明度
animate()	属于自定义动画，以上各种动画方法都是调用了animate方法。此外，用animate方法还能自定义其他的样式属性，例如：left marginLeft scrollTop等