jQuery思维导图
2020-03-03 13:40:08 0 举报AI智能生成
jquery基础知识点思维导图
作者其他创作
大纲/内容
选择器
基本选择器
$(#one).css("backgroud","#000")
改变id为one的元素的背景色
改变id为one的元素的背景色
$(.one).css("backgroud","#000")
改变class为one的元素的背景色
改变class为one的元素的背景色
$(div).css("backgroud","#000")
改变元素名为div的背景色
改变元素名为div的背景色
$(*).css("backgroud","#000")
改变所有元素的背景色
改变所有元素的背景色
$(#one，.two).css("backgroud","#000")
改变id为one和class为two的元素的背景色
改变id为one和class为two的元素的背景色
层次选择器
$(body div).css("background","#000")
改变body里所有div的背景色
改变body里所有div的背景色
$(body>div).css("background","#000")
改变body内子元素div的背景色
改变body内子元素div的背景色
$(.one+div).css("background","#000")
改变class为one的下一个div元素（一个值）
改变class为one的下一个div元素（一个值）
$(.one~div).css("background","#000")
改变class为one的下一个所有div元素（所有值）
改变class为one的下一个所有div元素（所有值）
过滤选择器
基本过滤选择器
$("div:first")
获得div的第一个元素
获得div的第一个元素
$("div:last")
获得div的最后一个元素
获得div的最后一个元素
$("div:not（.one）")
获得div中class不为one的元素
获得div中class不为one的元素
$("div:even")
获得div中索引值为偶数的元素
获得div中索引值为偶数的元素
$("div:odd")
获得div中索引值为奇数的元素
获得div中索引值为奇数的元素
$("div:eq（3）")
获得div中索引值为3的元素
获得div中索引值为3的元素
$("div:gt（3）")
获得div中索引值大于3的元素
获得div中索引值大于3的元素
$("div:lt（3）")
获得div中索引值小于3的元素
获得div中索引值小于3的元素
$(":header")
获得所有的标题元素,例如<h1>
获得所有的标题元素,例如<h1>
$(":animated")
获得当前正在执行的动画
获得当前正在执行的动画
$(":focus")
获取当前焦点
获取当前焦点
内容过滤选择器
$("div:contain(demo)")
获得div中含有demo的元素
获得div中含有demo的元素
$("div:has('.demo')")
获得class为demo元素的div元素
获得class为demo元素的div元素
$("div:parent")
选取含有子元素或文本的元素
选取含有子元素或文本的元素
$("div:empty")
选取不包含子元素或空文本的元素
选取不包含子元素或空文本的元素
可见性过滤选择器
$("div:visible")
获得所有可见的div元素
获得所有可见的div元素
$("div:hidden")
获得所有隐藏的div元素
获得所有隐藏的div元素
属性过滤选择器
$("div[title]")
获得含有属性title的div元素
获得含有属性title的div元素
$("div[title=demo]")
获得含有属性title的值为demo的div元素
获得含有属性title的值为demo的div元素
$("div[title^=a]")
获得含有属性title以a开头的div元素
获得含有属性title以a开头的div元素
$("div[title$=a]")
获得含有属性title以a结尾的div元素
获得含有属性title以a结尾的div元素
$("div[title*=a]")
获得含有属性title以含有a的div元素
获得含有属性title以含有a的div元素
$("div[id][title^=a]")
获得含有属性title以a开头且含有id的div元素
获得含有属性title以a开头且含有id的div元素
$("div[title='b']")
获得属性title等于b，或者以b为前缀的元素（b-XXX）
获得属性title等于b，或者以b为前缀的元素（b-XXX）
$("div[title~='demo']")
获得title用空格隔开的值中包含demo的元素
获得title用空格隔开的值中包含demo的元素
子元素过滤选择器
$("div:nth-child(2) ")
获得div下的第2个子元素（正整数）
获得div下的第2个子元素（正整数）
$("div:first-child ")
获得div下的第一个子元素（正整数）
获得div下的第一个子元素（正整数）
$("div:last-child ")
获得div下的最后一个子元素（正整数）
获得div下的最后一个子元素（正整数）
$("div:only-child(")
获得div下的仅有一个子元素（正整数）
获得div下的仅有一个子元素（正整数）
表单对象属性过滤选择器
$("forml input:enable").val("这里变化了")
改变表单中可用input的值
改变表单中可用input的值
$("forml input:disabled").val("这里变化了")
改变表单中不可用input的值
改变表单中不可用input的值
$("input:checkbox").length
改变个数
改变个数
$("select:selected").text()
获取下拉框的内容
获取下拉框的内容
表单选择器
$(" :input") 获得表单中所有的<input><textarea><select><button>元素
$(" :text") 获得所有的单行文本框
$(":password") 获得所有的密码框
$(":radio") 获得所有的单选框
$(":checkbox") 获得所有的多选框
$("：submit") 获得所有的提交按钮
$(":image") 获得所有的图像按钮
$(":reset") 获得所有的重置按钮
$(" :button") 获得所有的按钮
$(":file") 获得所有的上传域
$(":hidden") 获得所有的不可见元素
DOM操作
普通的dom分类
DOM core
document.getElementByTagName("form")
element.getAttribute("src")
HTML-DOM
document.forms
element.src
CSS-DOM
element.style.color="red"
jQuery中的dom操作
查找节点
var $li=$("ul li:ep(1)") 查找元素节点
var demo=$("p").attr("title") 查找属性节点
创建节点
var $li=$("<li></li>") 创建li元素
var $li_attr=$("<li title="nihao"></li>")
创建属性节点
创建属性节点
var $li_text=$("<li>创建文本节点</li>")
插入节点
a.append(b) 向a内部后面插入节点 b
a.appendTo(b) 将a移入到指定元素b内部后面
a.prepend(b) 在a中内部前面添加b
a.prependTo(b) 将a添加到b的内部前面
a.after(b) 在a外部后面添加b
a.insertAfter(b) 将a添加到b的外部后面
a.before(b) 在a的外部前面添加b
a.insertBefore(b) 将a添加到b外部的前面
删除节点
remove（） 删除节点，返回的是删除的元素；可以后续使用
detach（） 删除节点，与remove类似，但是元素的事件和数据都保留
empty（） 清空节点，清空内部的对象
复制节点
clone（） 复制当前的节点
clone（true） 复制当前的节点以及绑定事件
替换节点
replaceWith（） 替换标签
replaceAll（）与replaceWith相同，只不过是颠倒参数位置
包裹节点
wrap（） 使用参数标签包裹使用对象（外侧包裹）
wrapAll（） 使用一个元素包裹所有匹配的元素（外侧包裹）
wrapInner（） 使用参数标签包裹适用对象的子内容（内侧包裹）
属性操作
attr（"title"） 获得属性值
样式操作
attr("class","xxx") 设置样式
addClass() 追加样式
removeClass() 移除样式
toggleClass（） 切换样式
hasClass（） 判断是否有样式
设置、获取HTML、文本和值
html（） 设置或获取HTML
text（） 设置或获取文办
val（） 设置或获取值
遍历节点
children（） 子元素集合
next（） 只获取某节点后一个同级DOM对象
prev（） 只获取某节点前一个同级DOM对象
sibings（） 取得匹配节点的所有同辈元素
parent() 集合父元素
parents（） 获得每个祖先元素
closest（） 从自身开始，逐渐向上匹配，返回最先匹配的祖先元素
css-dom操作
css("color") 获得指定的样式值
css("color","red") 设置指定样式
width() height()获得宽度和高度
offset（） 获得视窗的偏移值
postion（） 获得相对于最近的positive样式元素的位置
scrollTop（）和scrollLeft（） 获得滚动条顶端距离和左端距离
jQuery事件和动画
事件
事件加载
reday（）
window.onload 传统的页面加载完毕后会触发
$(document).ready jquery中DOM健在完成后就会触发
jquery reday()语法简写
$(function(){})
$().ready(function(){})
事件绑定
bind() 绑定事件
unbind（） 解绑事件
简写绑定事件：click mouseover mouseout
合成事件
hover（） 鼠标悬停事件
toggle（） 模拟鼠标连续事件，第一次触发第一个方法，第二次触发第二个方法
事件冒泡
$(element).bind("click",function(event){}) 事件对象
event.stopPropagation() 停止事件冒泡
event.preventDefault() 阻止默认事件
事件捕获与事件冒泡相反
event.type 事件类型
event.target 触发元素
event.relatedTarget 移动涉及的元素
event.pageX eventpageY 光标的X和y坐标
event.which 鼠标的左中右键
event.metaKey 键盘中的按键
移除事件
unbind（）
模拟操作
trigger（） 模拟触发绑定事件
triggerHandler（） 模拟触发事件，但是不会执行浏览器默认操作
其他用法
bind（‘1 2 3 4 ’）
动画
show和hide
show（） 显示元素
hide（） 隐藏元素
fadeIn和fadeOut
fadeIn（） 改变元素的透明度
fadeOut（） 改变元素的透明度
sildeUp和slideDown
slideIUp 元素由下收起，直到高度为0
slideDown 元素由上向下
animate（）模拟动画
stop（）停止动画
xxx.is(".animated") 判断是否处于动画
jQuery中的Ajax
Ajax的优劣
优点
不需要插件的支持 提高web程序的性能
优秀的用户体验 减轻服务器和宽度的压力
缺点
浏览器对XHLHttpRequest支持度不够
破坏浏览器的前进 后退按钮
对搜索引擎的支持不足
开发和调试工具的匮乏
Ajax的方法
load():load(url,data,callback) 载入HTML文档
get（）:$.get(url,data,callback,type) GET方式发送请求
post（）:$,post(url,data,callback,type) POST方式发送请求
getScript（）：￥getScript（'text.js',callback） 动态加载js
getJSON（）$.getJSON(‘text.json',function(data){}) 加载json打他为json内容
ajax（）：最基本的方法
url 请求地址
type 请求类型，默认get
timeout 超时时间
data 请求数据
dataType 返回数据类型
success 成功回调
complete 完成回调
0 条评论
下一页
