合并_10jquery(3days)笔记

Posted 2020-07-10

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了合并_10jquery(3days)笔记相关的知识，希望对你有一定的参考价值。

2013-12-14 昨天内容回顾

json对象
1. php生成json对象
2. json_encode() php中的数组(关联)或对象可以生成json格式数据
3. json_decode() 反编码json格式数据
4. 在js里边处理php传过来的json数据需要转化为json对象
5. eval("var info="+json字符串信息)
FormData表单数据对象
1. html5新属性
2. var fd = new FormData(form节点对象);
3. 收集表单信息、也可以收集上传的附近信息
4. 如果没有表单，也可以把一些零散的信息收集起来传递给服务器端
5. var fd = new FormData();
6. fd.append(name,value);
7. fd.append(name,value);
8. 也可以收集上传附件的信息
9. var pic = document.getElementById(‘myhead‘).files[0]; //把具体附件信息收集起来
10. fd.append("mypic",pic); //收集单个附件信息
11. ?
上传大附件进度条
1. xhr2新特性
2. xhr.upload.onprogress = function(evt){}
3. onprogress会在0.05-0.1不断秒检查附件上传情况
4. 查看附件已经上传多少
5. 事件对象.loaded
6. 对象对象.total 附件总大小
显示被上传图片的缩略图
1. html5 新特性
2. URL
3. window.URL.createObjectURL(附件的资源信息files);
缓存解决
1. 在请求的url地址后边设置随机数
2. 设置header头，禁止浏览器缓存当前页面
【jQuery】
什么是jquery
????对javascript封装(javascript+DOM+BOM)的一个框架包
????可以为我们把js的浏览器兼容性处理好
????使用非常简便。
jquery宗旨：
????
????写得更少，做的更多
jquery版本
????1.2.6(26k) 1.3.2 1.4.2 1.4.4 1.6.0 1.9.0 1.10.2
????
????jquery-1.10.2.min.js-------压缩版本（没有回车和空格）
????jquery-1.10.2.js????-------开发版本（内部有许多注释、空格、回车）
?
什么时候出现
????2006年美国纽约
?
相关js框架
????prototype：方便功能扩展
yui(yahoo user inferface)yahoo用户接口
????页面布局比较擅长
????
extjs
页面效果非常绚丽，实用价值相对较少。
jquery(javascript query)
????query侧重查找(方便对页面元素节点对象进行查找)
插件支持
????时间选取器、表单验证等等
?
简单使用
????
?
【基本选择器】
1.1 #id
????id选择器
1.2 Element
????元素选择器
1.3 class
????class选择器
1.4 *
????通配符选择器
1.5 selector1, selector2, selectorN
????联合选择器
具体使用：

????
基本选择器来源于css样式使用
????????
?
【层次选择器】
2.1 ancestor descendant
????派生选择器
2.2 parent > child
????在给定的父元素下匹配所有子元素.
2.3 prev + next
????匹配紧接在所有prev 元素后的 next(下一个) 元素
2.4 prev ~ siblings
????匹配 prev 元素之后的所有 siblings 元素.
?
具体使用：
????

?
【选择器-简单过滤】

具体使用：
????

【选择器-内容过滤】
4.1 :contains(text)
????用法: $("div:contains(‘John‘)")
????匹配包含给定文本的元素
4.2 :empty
????用法: $("td:empty")
????匹配所有不包含子元素或者文本的空元素
4.3 :has(selector)
????用法: $("div:has(p)").addClass("test")
????匹配含有选择器所匹配的元素的元素
4.4 :parent
????用法: $("td:parent")
????匹配含有子元素或者文本的元素
具体使用：
????

?
【选择器-可见性过滤】
1. 元素可以如何隐藏
  <div style="display:none"></div> 节点隐藏
  <input type="hidden" name="username" /> 隐藏域
????<div style="visibility:hidden"></div>
?
????display:none;
????visibility:hidden;
????两种方式隐藏有何异同：
????页面都看不到以上元素
????第一种方式，不占据物理空间
????第二种方式，占据物理空间
1. 具体使用
3. display:none和 input type="hidden" 有起作用
?
?
总结：
基本（id class tag ）
层级
简单过滤（first eq() lt() gt() :odd :even）
内容过滤选择器
隐藏过滤选择器
?
【节点属性attribute操作】
?
<input type="text" name="username" value="张三" class="apple" />
attr() 对象方法使用
attr(名字); 获得指定属性信息
attr(名字，值); 给属性设置具体信息值
1. 获取属性值
  1. $("input").attr(‘name‘); //username
2. 设置属性新的值
3. 删除属性
4. 属性获取和设置具体使用：
?
1. 属性操作其他相关方法
?
【属性操作-类class】
<input type="text" class="apple">
对象.attr("class","orange");
?
addClass() 为节点设置class属性
removeClass() 删除节点的class属性值
toggleClass() 操作class属性有开关效果(有就删除，没有就添加)
?

?
【html()操作节点包含的内容(元素、文本)】
html() 获得和设置节点包含的内容
替换innerHTML使用

?
?
?
【text()操作节点包含的文本信息】
text() 与 html() 容易弄混。
两种区别：
1. html() 抓取内容，会把html标签和具体内容都抓取
2. text() 抓取内容，只负责抓取文本内容（没有html标签内容）
3. 两者给节点赋予内容
  1. 如果内容是纯文本内容，没有区别
  2. 如果内容带有html标签，html()可以把标签设置正确，也可以被浏览器解析
  3. text()会把html标签的<>转为符号实体
text()获得节点内容：
????
text()设置节点内容：
????
?
【简便操作方法val】
value----缩写 val
<input type="text" value="林肯" />
节点.attr("value",‘具体值‘); 通过attr操作value属性值
?
val() 可以获取或设置节点的value属性信息 addClass() removeClass()
?
具体使用：
????
?
【css()方法设置样式属性信息】

具体使用：
????
【宽度和高度设置】

?
?
【复选框全选、全不选、反选】
全选实现：
????
全不选实现：
????
反选实现：
????
?
【操作复选框】
1. 获得复选框已经选中项目的值
2. 自定义复选框选定情况
?
【下拉列表操作】
1. 获得被选中项目的值
2. 自定义选中的项目
?
【单选按钮操作】
1. 获得被选中项目的值
2. 设置具体选中的项目
?
attr() val()
可以获得或设置表单域信息
普通输入框<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<textarea></textarea> 可以使用其value属性
<select></select>
?
?
总结：
????1. 属性操作 attr() removeAttr()
????2. class属性 addClass() removeClass() toggleClass()
????3. html() text()
????4. val() value属性快捷操作方法
????5. css() 操作css样式方法
????6. 复选框、下拉列表、单选按钮三个表单域获取和设置
?
作业：
1. width() height()
2. 利用所学选择器实现页面效果(简单过滤选择器使用)
3. 利用jquery抓取(用户注册表单)form表单域的信息，利用ajax存入数据库
  1. 用户名、密码、qq号码、性别单选按钮、学历下拉列表、爱好复选框、
  2. 简介textarea
4. 复选框，制作一个单独开关"复选框"，控制其他所有复选框的选定情况。
?
2013-12-16 昨天内容回顾
基本选择器
1. <input type="text" id="apple" class="orange" value="张三" />
2. $("#apple") id选择器
3. $(".orange") class类选择器
4. $("input") tag元素标签选择器
5. $("*") 全部节点
6. $("sel1, sel2, sel3") 获得3个节点，联合选择器
层级选择器
1. 父子级、兄弟级别
2. $("sel1 sel2") 获得sel1下边的sel2子节点或者是二级、三级、四级节点等等
3. $("sel1 > sel2") 获得sel1 下边的 sel2子节点，只有一层父子关系
4. $("prev + next") 兄弟关系，next与prev在物理位置上是紧紧挨着
5. $("prev ~ next") 获得prev下边所有的next兄弟节点
6. sel 或 prev 或 next是普遍选择器 id class tag等
简单过滤选择器
1. :odd 下标奇数节点
2. :even 偶数
3. :gt(4) 下标大于4的节点
4. :lt(n) 下标小于n的节点
5. :eq(n) 下标等于n的节点
6. :first :last
7. :not(sel) 排除sel选择器节点
内容过滤选择器
1. :contains(cont) 获得节点标签内容包含cont的节点 <div>today is mondy</div>
2. :empty() 匹配空元素节点
3. :parent() $("div:parent") 匹配非空 <div></div><div>pig</div>
4. :has(sel) 匹配一个节点，该节点内部还有sel节点
节点属性操作
1. attr()
2. attr(name) 获取name属性信息
3. attr(name,value) 给name属性重新设置对应的值
4. attr(properties) 通过json对象可以给多个属性设置信息
5. removeAttr(name) 删除对应的属性
class类属性操作
1. attr(‘class‘) attr(‘class‘,‘apple‘)
2. addClass(name)
3. removeClass(name)
4. toggleClass(name); 有就删除、没有就设置上
html() 和 text()
1. <div><span>hello</span></div>
2. <p>world</p>
3. html() 获得节点包含的内容或重新设置节点内部的信息
4. 重新设置内部包含内容，html标签和文本都可以使用
5. text() 获得内容只可以获得文本内容
6. 重新给节点设置内容，也只针对文本内容起作用
7. 如果设置的内容里边有符号实体，<>就被转化为符号实体
val方法操作
1. attr("value")-------------val()
2. attr(‘value‘,‘xxx‘)-----------val(value)
3. val() 方便之处是：下拉列表、复选框、单选按钮都可以使用，灵活设置具体选中的项目
4. val([1,3,4])
css样式操作
1. css(样式属性名称) 获得节点的css样式信息
2. css(name,value) 设置节点对应的css样式信息
3. css(json对象) 同时设置多个css样式属性信息
?
【$符号由来】
$符号由来

????prototype框架也要使用$符号
?
????有的中间过渡的项目，同一个页面加载两个js框架包：prototype 、 jquery
????
????jquery有一个方法，可以帮组用户让出$符号的使用权，转而使用其他的符号
?
jquery如何让出$符号的使用权

?
【jquery对象与dom对象】
1. jquery对象创建的时候，内部如何封装(document.getElementById())
  $符号函数的样式：
  
  jquery对象可以通过 [下标] 转化为dom对象
2. jquery对象转化为dom对象
3. dom对象转化为jquery对象
????
????
1. $符号就是一个函数
?
?
【jquery对象分析】
jquery对象创建完毕本身有继承jquery.fn

?
jquery.fn通过extend复制继承得到了许多属性和方法

?
?
1. jquery对象为什么可以调用许多方法
?

jquery对象创建出来本身没有具体方法或属性可以供调用
但是它通过原型继承 jquery.fn，jquery.fn又通过extend复制继承，使得本身
有许多方法可以调用，这些方法也可以给jquery对象来使用
?
?
?
jquery具体使用方式(两种)
$("#apple").addClass(); jquery其中一种使用方式
$.get(‘‘) ajax方式使用
???????? 没有创建具体jquery对象
???????? $符号在jquery里边是一个方法，同时也是一个对象
???????? $.ajax() $.post() $.each()
???????? $其实就是jquery内部属性jQuery
???????? jQuery内部通过许多复制继承使得本身有许多方法调用
???????? 都可以通过$符号直接使用
????????
?
【each遍历方法】
数组、对象
for(){} : 数组
for-in :数组、对象
?
1. $.each具体使用
2. $.each遍历对象
3. $("li").each方法执行，该方法是对$.each()的封装方法
4. each()方法执行分析
5. jquery对象调用的each本质也是走的$.each()
【js函数执行的具体方式】
1. 作为普通函数执行
2. 对象方法执行
3. 实例化对象的构造函数执行
4. call() apply()执行
?

?
总结：
1. $符号由来
2. jquery对象创建
  1. jquery.fn.init() 继承 jquery.fn 继承extend 继承了其他许多方法
3. jquery对象与dom对象转化
  1. jquery对象[下标]-----------dom对象
  2. $(dom对象)---------------------jquery对象
4. each()遍历方法 $.each() jquery对象.each()
?
?
【属性选择器】
6.1 [attribute]用法: $("div[id]") ;
????匹配包含给定属性的元素
6.2 [attribute=value]用法: $("input[name=newsletter]").
????匹配给定的属性是某个特定值的元素
6.3 [attribute!=value]用法: $("input[name!=‘newsletter‘]").
????匹配给定的属性是不包含某个特定值的元素
6.4 [attribute^=value]用法: $("input[name^=‘news‘]")
????匹配给定的属性是以某些值开始的元素
6.5 [attribute$=value]用法: $("input[name$=‘letter‘]")
????匹配给定的属性是以某些值结尾的元素
6.6 [attribute*=value]用法: $("input[name*=‘man‘]")
????匹配给定的属性是以包含某些值的元素
6.7 [selector1][selector2][selectorN]
????$("input[id][name$=‘man‘]")
????复合属性选择器，需要同时满足多个条件时使用
具体使用：
????
????
?
?
【子元素选择器】
7.1 :nth-child(index/even/odd)
????匹配其父元素下的第N个子或奇偶元素
????‘:eq(index)‘ 只匹配一个元素，
????而这个将为每一个父元素匹配子元素。
????:nth-child从1开始的，而:eq()是从0算起的！
7.2 :first-child
????匹配其父元素下的第一个子元素
7.3 :last-child
????匹配其父元素下的最后一个子元素
7.4 :only-child
????如果某个元素是父元素中唯一的子元素，那将会被匹配
?
:eq(n)----------nth-child(n) 两种区别：
????前者从0开始计数下标
????后者从1开始计数
????前者把全部单元统一处理
????后者是匹配其父元素下的第n个元素
:first
:last

?
?
【载入事件】
<body onload="函数">
window.onload = 函数;
?
1. jquery 3三种不同加载事件体现
2. jquery加载事件与onload传统方式有和异同
  1. 前者可以定义多个、后者只有一个
????
1. jquery加载事件执行速度更快
  jquery的加载事件是页面全部内容在内存里边形成dom树结构后就马上执行。
  onload传统方式加载事件，页面全部内容在浏览器上全部呈现完毕才会执行。
????????
?
1. jquery加载事件为什么速度要快
  jquery在什么时候捕捉加载事件(内存里边dom树结构绘制完毕)
  是否可以通过js原生代码模拟jquery加载事件
?
【jquery事件设置使用】
focusin事件使用，父级会感知子级获得的焦点事件

?
scroll感知div卷起高度

【jquery处理dom节点】
dom document object model 文档对象模型
节点追加、删除、复制、替换等等
1. 节点追加(添加节点与被添加节点是"父子"关系)：

?
1. 兄弟关系节点追加
  2.1 after(content)
  ????在每个匹配的元素之后插入内容
  2.2 before(content)
  ????在每个匹配的元素之前插入内容
  2.3 insertAfter(content)
  ????把所有匹配的元素插入到另一个、指定的元素集合的后面
  2.4 insertBefore(content)
  ????把所有匹配的元素插入到另一个、指定的元素集合的前面
  ?
????
1. 节点替换
2. 节点删除
3. 节点复制
?
1. 子父节点追加(了解)
  3.1 wrap(html)
  ????把所有匹配的元素用其他元素的结构化标记包裹起来
  3.2 wrap(elem)
  ????把所有匹配的元素用其他元素的结构化标记包装起来
  3.3 wrapAll(html)
  ????将所有匹配的元素用单个元素包裹起来
  3.4 wrapAll(elem)
  ????将所有匹配的元素用单个元素包裹起来
  3.5 wrapInner(html)
  ????将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
  3.6 wrapInner(elem)
  ????将每一个匹配的元素的子内容(包括文本节点)用DOM元素包裹起来
  
  ?
总结：
1. 属性选择器 [属性名] [name=value]
2. 事件使用
  1. 加载事件
  2. 普通事件对象.事件(function(){});
3. dom节点操作
  1. 追加(父子、兄弟、子父)
  2. 删除 empty remove
  3. 复制 clone() clone(true)
  4. 替换
?
作业：
????1. 利用dom节点操作实现下拉列表左右项目互相移动
????
????
2．练习加载和普通事件使用
2013-12-17 昨天内容回顾
jquery对象与dom对象转化
1. $("#id")[下标]---------转化为dom对象
2. $(dom对象) ---------转化为jquery对象
jquery对象分析
1. jquery对象创建创建
2. jQuery.fn.init()
3. jQuery.fn.init.prototype = jQuery.fn; jquery对象通过原型链继承jQuery.fn
4. jQuery.fn本身有一些可以调用的方法，jQuery.fn还通过extend复制继承过来许多方法
each遍历方法
1. $.each(数组/对象, function(){});
2. $("li").each(function(){jquery对象被遍历this}); this代表当前dom节点对象
属性选择器
1. [attribute]
2. [name/type/id/value/class]
3. [name^=value] 找到属性以value开始的节点
4. [name*=value] 找到属性里边包含指定内容的节点
5. [name$=value] 属性值以value为结尾的节点
6. ?
加载事件
1. $(document).ready(function(){});
2. $().ready(function(){}); init
3. $(function(){事件加载处理程序}) 该方式是对第一种方式的封装
4. jquery加载事件与 onload传统事件对比
5. ① 前者使用可以同时加载多个
6. ② jquery执行速度更快 DOMContentloaded 触发加载事件
简单事件设置
1. click focus mouseover mouseout等等
2. $(对象).click(function(){事件处理程序}); 给jquery对象设置事件
3. $(对象).click();????触发对象的点击(具体)事件执行
节点的追加
1. 父子
  1. append() 主动追加、节点被追加在最后边
  2. prepend() 主动追击、节点被前置追加
  3. appendTo() 被动追加、后置
  4. prependTo() 被动追加、前置
2. 兄弟
  1. after() 把节点放到指定节点的下边作为自己的平级节点
  2. before() 前置追加
  3. insertAfter() 被动追加后置
  4. insertBefore 被动追加前置
节点删除
1. empty() 父节点删除子节点
2. remove() 删除匹配到的具体节点 $(对象).remove()
节点替换
1. replaceWith() 被动替换
2. replaceAll() 主动替换
节点复制
1. clone() 浅层复制，只复制节点本身，没有事件
2. clone(true) 深层复制，复制节点和具体事件
?
?
昨天作业
????
????

【事件绑定】
事件绑定使用较普通时间先进：
1. 同一对象、同一事件可以绑定多个处理过程
2. 同一对象可以同时绑定多个不同事件处理
3. 同一对象可以把许多不同事件绑定同一个处理
?
1. 事件触发
  $(对象).click(fn);
  $(对象).click(); 触发事件执行
  $(对象).trigger(‘事件类型‘);
?
1. 解除事件绑定
2. 事件绑定参数
【事件委派live】

?
【事件切换hover】
mouseover mouseout
三种实现：
????
????

【事件冒泡效果】
1. 事件冒泡阻止
2. 阻止浏览器默认动作
  triggerHandler(‘submit‘) 浏览器默认动作不会走
?
1. 单独使用js，事件冒泡、浏览器默认动过阻止
  阻止事件冒泡
  主流浏览器????event.stopPropagation()
  IE浏览器 window.event.cancelBubble = true;
  阻止浏览器默认动作
  ????????主流浏览器 event.preventDefault()
  ????????IE浏览器 window.event.returnValue = false;
  ?
4. 使用jquery
事件冒泡阻止：event.stopPropagation()
阻止浏览器默认动作：event.preventDefault()
以上两个方法是对js原生方法的重写方法。
?
?
【jquery动画效果处理】
1. 简单动画效果show() hide()

?
2. 垂直动画效果????
????
1. 淡入淡出效果
?
1. 动画原始方法animate使用
?
【ajax使用】
$.get()
$.post()
$.ajax()

????
【ajax+xml+dom实现省、市、区三级联动】
1. 制作一个xml数据信息
2. 获得省份信息
3. 从省份获得城市信息
?
【自定义jquery】
迷你版jquery
1. 对象创建
2. 方法封装
3. each方法封装

?
【jquery插件如何开发】
jQuery.fn.init()
jQuery.fn() 有许多方法供我们使用
jQuery 也有许多方法我们可以使用
?
jquery插件开发就是在增加jQuery.fn对应的方法
jQuery也可以增加方法供我们使用，也是插件形式
?
1. 演示：
2. 自己开发成熟插件
  
  插件使用：
3. 原理：
?
【使用成熟jquery插件】

?
总结：
1. 事件
  1. bind() live()
  2. unbind() die
2. 触发时间trigger triggerHandler
3. 事件切换hover(f1,f2)
4. 各种动画效果 show() hide() slideDown() slideUp fadeIn fadeOut
5. ajax使用 ($.get() $.post $.ajax(json参数))
6. 迷你版jquery封装(从更深的角度理解jquery)
7. jquery插件开发（jQuery.fn jQuery）
?
作业：
1. 利用jquery封装好的ajax实现用户注册用户名验证(是否被占用)
2. 练习成熟插件使用 (用户注册表单验证)
3. 绘制table表格，填充一些数据，鼠标滑过有tr颜色高亮显示
  使用两种不同方式分别实现(mouseover mouseout / hover)
?
?
?
?
?
?
?
?
?
?
?
?
?