轻量级框架应用

文章目录

• 第一章 JQuery
• 第一节 什么是jQuery
• 第二节 主要功能

选择器

• 第一节 基本选择器
• 第二节 属性选择器
• 第三节 位置选择器
• 第四节 后代选择器
• 子代选择器
• 第六节 选择器对象
• 第七节 选择器对象遍历应用
• 第八节 子元素 表单 表单对象 属性选择器
• 子元素
• 表单
• 表单对象属性

层级选择器

第三章 DOM操作

• 第一节 查找获取
• 第二节 插入
• 内部插入
• 外部插入

第三节 包裹

替换

第五节 删除

第六节clone

第四章 筛选

• 第一节 过滤
• 第二节 查找
• 第三节串联

第五章 jquery事件

• 第一节 页面载入
• 第二节 绑定绑定
• 第三节 鼠标事件
• 第四节 键盘事件
• 第五节 表单事件
• 第六节 文档窗口事件
• 第七节 事件冒泡

第六章 效果

• 第二节 标签操作
• 标签内容操作
• 标签属性的操作
• 标签样式操作

第三节 基本 滑动 淡入淡出

第四节 自定义动画

第七章 AJAX

第一章 JQuery

第一节 什么是jQuery

jQuery是一个JavaScript库，它通过封装原生的JavaScript函数得到一整套定义好的方法。

WRITE LESS,DO MORE；可以用最少的代码，完成更多复杂而困难的功能，从而得到了开发者的青睐

作者是John Resig，于2006年创建的一个开源项目，随着越来越多开发者的加入jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。

第二节 主要功能

简化javascript语句，丰富的DOM选择器，简单的事件，封装的方法，Ajax的支持，好兼容性

极大简化你的js代码量，提高效率

选择器

第一节 基本选择器

• id选择器
  $(’#idname’)

• class选择器

  $(’.clsname’)

• 标签选择器

  $(‘lable’)

• 通配符选择器

第二节 属性选择器

• $[attribute]：匹配给定属性的元素
• $[attribute=value]：匹配给定属性是某个特定元素
• $[attribute!=value]：不是某个特定元素
• $[attribute^=value]：某些值开始
• [attribute[attribute[attribute=value]：某些值结尾
• $[attribute*=value]：包含某些值

$[\'href\']=选取所有带有 href 属性的元素$[\'href=\"#\"\']=选取href属性为#的元素

第三节 位置选择器

：first 匹配第一个元素

：last 匹配最后一个选择器

：not 去除所有给定选择器匹配的元素

：even 匹配索引为偶数的元素从0开始计数

：odd 匹配单数

：eq 匹配给定索引

：gt 匹配大于给定索引元素great

：lt 匹配所有小于给定索引light

第四节 后代选择器

给定祖先下匹配元素，后代选择器的愈发是选择器 空格 选择器

$(\"selector1 slctor2 ...\")

子代选择器

给定父元素下所以匹配的 子 元素；规定的父与子的关系

$(\"slctor1 > slctor2...\")

第六节 选择器对象

选择器寻找页面元素，里面存放着html节点。

$(\"slctor\").each(func(index)){this}	遍历$(\"slctor\").find(x);	选择器内子元素$(\"slctor\").not(x);		去除某个或多个$(\"slctor\").add()在选择器中追加节点

第七节 选择器对象遍历应用

• 遍历

有5个li，每一个li加上title属性。此时需要遍历着五个li，然后追加title

第八节 子元素 表单 表单对象 属性选择器

子元素

• : first-child 匹配第一个子元素
• : last-child 最后一个子元素
• : first-of-type 选择相同元素名称的第一个兄弟
• : last-of-type 选择最后一个
• : nth-child 匹配父元素下的第N个子或奇偶元素
• : nth-last-child() 选择所以其父元素的第N个子元素，计数从最后到第一个
• : nth-last-of-type() 选择所以它们父级元素的第n个子，计数last到first
• : nth-of-type()选择同属一个父元素之下且标签相同的子元素的第n个
• : only-child 如果某个元素是父元素的唯一子，那么将匹配
• :only-of-type 选择所以没有兄弟的元素，且具有相同的元素名称的元素

表单

input

text

password

radio

checkbox

submit

image

reset

button

file

hidden：隐藏域

表单对象属性

enabled 可用

disabled

checked 被选中元素

selected 匹配所以选中option

层级选择器

//所有后代$(\"div span\")//匹配直接元素$(div>span)//匹配所以进阶prev后的next$(\"prev+next\");//匹配prev所有同辈 siblings$(\"prev~siblings\");

第三章 DOM操作

第一节 查找获取

• text()-返回或设置所选元素文本内容
• html()-返回设置所选元素内容(包括html标记)

text域html的不同在于 text 与html的区别

val();设置或返回字段 值value

第二节 插入

内部插入

append() 向匹配元素内部追加内容

appendTo（） 把所有匹配元素追加到另一个set

prepend（） 向每个匹配元素前置内容

prependTo（） 把所以匹配元素前置到另一指定set

外部插入

after（）在每个匹配元素后插入

before（）之前

insertAfter（）所以匹配的元素插入到另一个指定元素set后

insertBefore（）set前

第三节 包裹

wrap(); 把所以匹配元素用其他元素的结构化标记包裹起

unwrap(); 这个方法移出元素的父，快速取消wrap()

wrapAll(); 将所有匹配元素用单个元素包裹起来

wrapInner(); 将每一个匹配的元素子内容（包括文本节点）用一个html结构包裹起来

替换

repalceWith（）；将所以匹配元素替换指定html或dom

replaceAll（）；用匹配的元素替换掉所以选择器匹配元素

第五节 删除

remove（）；从dom删除匹配元素

empty（）；删除匹配元素集合所有子节点

第六节clone

clone（） 克隆匹配的dom并且选择副本

第四章 筛选

第一节 过滤

eq();获取第N个元素

first（）获取第一个元素

last（）

hasClass（）检查当前元素是否含有某个特定类（return true）

filter（）筛选出指定表达式匹配元素集合

is（） 匹配元素集合 若值横扫有一个和元素符合这个给定表达式return true

has（）保留特定后代元素，去掉不匹配

not（）删除指定表达式匹配元素

slice（start，end）选取匹配子集

第二节 查找

children（） 取得包含匹配元素或集合中每一个元素的子集合

closest() 从元素本身开始逐级向上匹配，返回最先匹配元素

find（） 搜索所有与指定表达式匹配的元素

next（） 取得摆撼匹配的元素集合中每一个元素紧邻的后面同辈元素集合

nextall（） 返回当前之后的同辈

bextUntil（）返回当前元素之后的同辈知道某个元素

offsetParent() 返回第一个匹配元素用于定位的父节点

parent（） 取得一个包含所有元素的唯一父元素的元素集合

parents（） 取得一盒包含所有匹配元素祖先元素的元素集合

parentsUntil（）

prev（） 取得一个包含匹配元素集合中每一个元素紧邻的前一个同辈元素的元素集合

prevall（） 差杂货当前元素之前所有的同辈元素

prevUntil（）查找当前元素之前所有的同辈元素，知道遇到匹配元素为止

siblings（） 取得一个包含匹配元素的集合个中每一个元素的兄弟元素集合

第三节串联

add（） 把与表达式匹配元素添加到jquery对象中

end（） 回到最近的一个“破坏性”操作之前；即将匹配元素撤销至上次状态

第五章 jquery事件

第一节 页面载入

ready(func)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数

$(document).ready(function(){})简写$(function(){})

第二节 绑定绑定

on()在选择元素绑定一个或多个事件处理函数

$(\"#box\").on(\"click\",function(){//})

off()

$(\"#box\").off(\"click\",function(){//})

第三节 鼠标事件

• click()
• dbclick()
• mouseup()
• hover()

第四节 键盘事件

keydown();

keypress();

第五节 表单事件

submit();

change();

第六节 文档窗口事件

scroll(); 滚动指定元素时

resize(); 调整窗口大小

第七节 事件冒泡

略

第六章 效果

获取元素框高：

$(\"slctor\").width() | innerWidth()| outerWidth()$(\"slctor\").height()|innerHeight()|outerHeight()

其中宽高分别三个方法

width() height()	指元素里内容宽高innerWidth() innerHeight()	元素里面内容宽高加上内边距宽高outerWidth() outerHeight()	指元素里内容的宽高加上内边距的宽高和边框

获取窗口宽高方法

$(window).width();$(window).height();

第二节 标签操作

标签内容操作

lable.value；

标签的值，具体为输入框中的值或文本框中的值等等

$(slctor).val([])

标签属性的操作

.attr()

$(selector).attr(attribute)

$(选择器).attr(属性名[,值]) attr 是 Attribute 的前四个字母，方法里面有两个参数，其一属性名是比如操 作的是 title 属性，那属性名就写 title，其二值，如果是设置属性的值，就将值写 在第二个参数的位置，如果是获取属性的值，就不用加第二个参数

标签样式操作

.css(attr[,val])	设置或返回被选元素的一个或多个样式属性.addClass(类别名)		增加.removeClass(类别名)	去除.toggleClass(类别名)   交替使用类别样式=有这个类别样式就去除，没有就追加

第三节 基本 滑动 淡入淡出

show();

hide();

slidDown()向下滑动显示;

slideUp();向上滑动收起隐藏

slideUp()向上滑动收起隐藏

slideToggle()交替滑动状态

fadeIn() 淡入

fadeOut() 淡出

fadeTo()动画指定到透明度

fadeToggle() 交替淡出 淡入

第四节 自定义动画

animate(); 自定义动画

stop(): 停止所有指定元素运行动画

delay(); 设置延时来推迟执行

finish() 停止当前正在运行动画，删除所有排队动画，并完成所有排队中动画

第七章 AJAX

​ ?
end