JQuery
2017-01-24 15:13:13 0 举报AI智能生成
jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作。通过使用jQuery，开发者可以更轻松地编写跨浏览器兼容的代码，提高开发效率。jQuery的设计目标是使Web开发更加简单、快速。 请注意，上述描述仅包含基本信息，实际使用中可能需要根据具体需求进行深入学习和实践。
作者其他创作
大纲/内容
API通用特点
1. 几乎所有API自带forEach的效果
对$("...")结果对象执行的操作，相当于自动应用到结果中每个元素上
2. 每个API都返回jQuery对象本身
$("...")之后可使用链式操作反复调动多个API
为什么链式操作
1. 避免重复创建jq对象
每次调用$都会创建新的jq对象
2. 节省变量的使用
3. 很多API两用
传一个参数是读取属性值，传两个参数就是修改属性值
修改
属性
访问attribute属性
获取
var value=$("...").attr("属性名")
修改
只修改一个属性
$("...").attr("属性名",值)
同时修改多个属性
$("...").attr({
属性名:值,
属性名:值,
})
访问三大状态
包括: disabled checked selected
$("...").prop(...)
用法同attr()
移除属性
$("...").removeAttr/removeProp("属性名")
内容
html内容
$("...").html(["html代码片段"])
两用
文本内容
$("...").text([“文本内容”])
两用
表单元素内容
$("...").val(["值"])
两用
清除内容
$("...").empty()
样式
直接修改css属性
获取css样式(计算后的样式)
$("...").css("css属性名")
相当于getComputedStyle
修改css样式
只修改一个css样式:
$("...").css("css属性名",值)
相当于elem.style
为每个元素的css属性动态生成不同的值
$("...").css("css属性名", function(i){return 值})
i会依次获得每个元素的下标
返回值会被依次设置到每个元素的指定css属性
同时修改多个css样式:
$("...").css({
css属性名:值,
css属性名:值,
...
})
通过修改class批量修改样式
判断是否包含指定class
$("...").hasClass("类名")
添加class
$("...").addClass("类名")
移除class
$("...").removeClass("类名")
切换class
$("...").toggleClass("类名")
if(.hasClass(...)) .removeClass(...)
else .addClass(...)
添加，删除，替换和复制
添加
1. 创建新元素
var $newElem=$("html代码片段")
2. 将新元素添加到DOM树
结尾/开头插入
$(parent).append/prepend($newElem)
在某个child前后插入
$(child).before/after($newElem)
删除
$("...").remove()
替换
$("现有元素").replaceWith("新元素html代码")
用右替换左
$("新元素html代码").replaceAll("现有元素")
用左替换右
复制/克隆
$("...").clone()
浅克隆
仅复制属性，不复制行为
$("...").clone(true)
深克隆
即复制属性，又复制行为
事件
.bind("事件名",fn)
.unbind('事件名',fn)
.unbind('事件名')
.unbind()
.one("事件名",fn)
简化版
$("...").事件名(function(e){...})
利用冒泡
$("parent").delegate("selector","事件名",fn)
简化了利用冒泡中:
1. 用selector代替了if判断
2. this->e.target
$(...).undelegate(...)
废弃
$("selector").live/die("事件名",fn)
终极简化
仅为一个元素绑定事件
$("...").on("事件名",fn)
利用冒泡/事件委托
$("parent").on("事件名","selector",fn)
$(...).off(...)
同unbind/undelegate
this
普通事件绑定
this->触发事件的当前元素
利用冒泡
this->e.target
DOM对象
$(this)
jq对象
模拟触发
$("...").trigger("事件名")
模拟触发所有选中元素的指定事件
页面加载后触发
只要DOM内容加载完成就触发
只要等待HTML , js
$(document).ready(fn)
domcontentloaded
早
$().ready(fn)
$(fn)
整个页面加载完才执行
等待HTML，CSS，JS，图片...
window.onload=function(){...}
晚
其实
只要将script代码放在body结尾就可以实现DOM加载后就执行
.hover
等效于同时绑定两个事件: onmouseover和onmouseout
如何
.hover(fn_over, fn_out)
如果fn_over和fn_out的行为可统一成一样的
简写
.hover(fn)
fn即响应over，又响应out
动画效果
简单:
显示隐藏
$("...").show/hide/toggle(speed,easing,callback)
上下滑动
$("...").slideUp/slideDown/slideToggle(speed,easing,callback)
淡入淡出
$("...").fadeIn/fadeOut/fadeToggle(speed,easing,callback)
问题：
不便于维护
解决
其实都应该用
class + transition
万能
$("...").animate({
css属性: 目标值,
css属性: 目标值,
...
},speed,easing,callback)
多个css属性并发改变
问题
仅对单数值类型的属性有效
对颜色,字体,C3的变换...无效
callback中的this->正在播放动画的DOM元素
多个动画排队执行
$("...").animate().animate()...
停止:
$("...").stop(true)
清空动画队列
选择器:
:animated
匹配所有正在执行动画效果的元素
问题:
底层依然是定时器动画，效率低
解决:
animate.css
什么是
快速，简洁的第三方js库
为什么
1. DOM操作的终极简化
核心DOM: 万能, 但繁琐
HTML DOM: 简单，但不是万能
jQuery: 对DOM操作的终极简化
1. DOM操作
增，删，改，查
2. 事件
3. 动画效果
4. Ajax
2. 屏蔽了浏览器兼容性问题
凡是jQuery允许使用的，都屏蔽了兼容性问题
版本
1.x
兼容IE8
jquery.js
未压缩过的代码
可读性好
学习用
大
jquery.min.js
压缩版本
小
毫无可读性
删除注释
去掉换行和空字符
极简化变量名
2.x
不再兼容IE8
如何:
先引入jquery.js, 再编写自定义脚本
2种方法
1. 将jquery.js下载到服务器本地，在script中使用服务器路径
2. 使用CDN网络上共享的jquery.js
生产环境中用的最多
jQuery对象
封装DOM对象，并提供对DOM对象执行操作的简化版API
何时
DOM对象不包含，也不能使用jQuery简化版API
只有将DOM对象封装进jQuery对象后，才能使用简化版API
如何
2种
1. 用$(“selector”)直接查找
返回包含找到的DOM对象的集合
jQuery对象
2. 如果已经获得一个DOM对象
先用$(DOM对象)封装DOM对象为jQuery对象
强调:
1. 尽量减少使用$(...)的次数
每$(...)一次就新创建一个jQuery对象
2. 尽量减少查找的次数
所有查找都是遍历，反复查找，效率低
解决
如果一个jQuery结果对象可能被反复使用，就临时保存在变量中
查找
基本选择器
#id .class element * 选择器1,选择器2
同CSS
层次选择器
选择器1空格选择器2 > + ~
同CSS
过滤选择器
基本过滤(位置过滤)
根据元素在查找结果集合中的下标选择元素
和元素在其父元素下的位置无关
:first/last
选择结果集合中第一个/最后一个元素
:even/odd
选择结果集合中下标为偶数或奇数的元素
强调:
下标从0开始
:eq/gt/lt(i)
选择结果集合中下标等于/大于/小于i位置的元素
子元素过滤
同CSS
根据元素在其父元素中的位置选择
和元素在查找结果中的位置无关
:first-child
:last-child
:nth-child(n/odd/even/2n/2n+1)
强调:
下标从1开始，且仅限于当前父元素内
:only-child
否定选择器:
:not(任意selector)
内容过滤
:contains(文本)
:empty
:parent
:not(:empty)
:has('selector')
可见性过滤
:visible
:hidden
display:none
input type="hidden"
属性过滤
同CSS
[属性名]
[属性名=值]
[属性名!=值]
[属性名^=开头]
[属性名$=结尾]
[属性名*=值]
[属性选择器1][属性选择器2]...
表单过滤
:input
input, select, textarea, button
如果只想查找一种表单元素
可用元素选择器
:type属性
:text :password :checkbox :radio :button :submit :reset :image :file
表单属性过滤
:disabled :enabled :checked :selected
同CSS
节点间关系
父子关系
$("...").children(["selector"])
仅找*直接*子元素中符合selector条件的
$("...").find("selector")
在*所有后代*中查找符合selector条件的
$("...").parent()
获得当前元素的父元素
兄弟关系
$("...").next/prev(["selector"])
紧邻的前一个或后一个兄弟元素
必须紧邻
$("...").nextAll/prevAll(["selector"])
之后/之前所有符合条件的兄弟
$("...").siblings(["selector"])
除自己之外的所有兄弟
封装自定义插件
添加jQuery全局函数
jQuery库在加载时仅会向window中注入一个对象jQuery
jQuery全局函数
直接保存在jQuery库中，不需要查询结果就可直接调用的函数
vs window全局函数
保存在window下，容易造成全局污染
vs jQuery实例方法
保存在查询结果对象的原型对象(jQuery.fn)中的方法
必须先查询结果集合，再用结果集合调用
this->指jQuery查询结果集合
不用再$(this)
鄙视
$.each
存储
直接保存在jQuery工厂函数上
使用
可遍历任意类数组对象和数组
不仅限于jQuery的查询结果
$(...).each
存储
jQuery查询结果对象的原型对象(jQuery.fn)中
使用
只能用jQuery查询结果对象调用
其它类数组对象和数组不能调用
何时
只要为jQuery添加通用的工具函数，都要定义在jQuery全局
封装自定义Widget
封装
前提:
使用jquery+css成功实现过部件的完整效果
Step1:
css拷贝到部件的css文件中
尽量少的使用元素名和id
应该用class和自定义扩展属性代替
Step2:
部件的js中
1. 判断是否提前加载了jQuery
2. 为jQuery.fn添加实例方法
向当前元素及其子元素上侵入class或data-*扩展属性
为data-*的元素绑定事件
使用
1. 引入部件css
2. 按部件要求编写HTML内容
3. 引入jquery
再引入部件js
4. 自定义脚本
查找父元素，调用部件函数
0 条评论
下一页
为你推荐
查看更多
