JQuery知识点总结

概述

轻量级的JavaScript库

功能

• html元素元素选取/操作
• css操作
• html事件函数
• JavaScript特效动画
• DOM遍历与修改
• ajax网络请求
• utilities 工具集
  引入

建议使用国内的 百度 新浪等CDN地址

或者下载在网页同一目录

ps:小程序不支持jquery：没有DOM api
React一般不用jquery：jquery的几个功能，修改DOM，监听事件，网络请求，工具函数；react 网络请求axios 工具集lodash等 有自己的生态圈

选择器

$(selector).action()

$(this).hide()隐藏当前元素
$("p") p标签
$("p.test") p标签 class=‘test’
$("#test") id='test'
$("*") 全部元素
$("p:first") 第一个p元素
$("ul li:first")第一个ul的第一个li元素
$("ul li:first-child") 选取每个ul的第一个li元素
$("['href']")属性有href元素
$("a[target='_blank']")
$(":button") 所有type等于button的元素
$("tr:even")tr偶数
$("tr:odd")tr奇数
jquery选择器是xpath和css的结合

效果

淡入淡出&滑动

toggle（）切换隐藏显示
fadeIn() 慢慢显示 fadeIn("slow/fast") fadeIn(3000)
fadeOut() 与fadeIn相反
fadeToggle() 切换
fadeTo("slow",0.5) 渐变到指定透明度

slideUp(speed,callback)
slideUp() 向上滑动
slideDown() 向下滑动
slideToggle 切换

动画

animate
$(selector).animate({params},speed,callback)
params是css属性
$('div').animate({left:'25px'})

扩展：
相对值写法 width:'+=250px'
使用预定义值 height:'toggle'
使用队列 编写多个animate
jquery链写法(相同元素) $("#nice").css("color","red").slideUp(2000)

stop(stopEnd,goToStop)停止动画
stopEnd:停止该元素所有动画 包括队列还未执行的
goToStop 立即完成动画

ps:默认情况，所有元素都有静态位置，不能移动，要移动需要设置relative absoule fixed
属性写法使用驼峰，eg：paddingLeft

HTML

捕获

html() 标签内容 包含标签
text() 标签内容 不包含标签 
val() input的value值
attr('href') 获取属性值
attr('href','http://www.baidu.com') 设置属性值
attr('href',function(i,originValue){})回调函数

添加元素

append 结尾添加
preappend 开头添加
after 之后添加
before 之前添加

删除元素

remove 删除元素
empty 情况元素
remove('.nice') 过滤元素

操作css

addClass("blue important") 增加元素
removeClass("blue") 移除元素
toggleClass() 添加和删除切换
css() 设置/返回
$("p").css('background-color') 返回
css('background','yellow') 一个
css('background':'yellow','font-size':'200%')多个

尺寸

width 元素宽度(包括padding)
innerWidth 元素实际宽度
outterWidth 元素宽度(包括margin)

DOM遍历

父级
parent 父元素
parents 所有祖先
parentsUntil 两个给定元素的所有父元素
$('p').parentsUntil('div')

子级
children('p.a')返回class=a 直接子元素p
find('span') 寻找所有标签为span的后代元素

同胞
sliblings 所有同胞元素

过滤
firt 第一个
last 最后一个
eq(0) 第一个
filter 过滤条件
not 与filter想法

next nextAll nextUntil pre preAll preUntil

AJAX

load(url,data,callback)
从服务器加载数据，并把返回数据插入被选元素
post
get