jQuery API

最新推荐文章于 2024-06-26 08:15:00 发布

kxzhang1221

最新推荐文章于 2024-06-26 08:15:00 发布

阅读量319

点赞数

本文链接：https://blog.csdn.net/kxzhang1221/article/details/79542433

版权

jQuery API

一选择器

$() -- 里面可以写css选择器、原生dom、jquery对象、null/undefined、函数function(){}、selector/content等。

jQuery都是函数式（函数调用）。

jquery和js的关系: 不能混用,但是可以一起存在——this。

1.1 基本选择器

*	All selector
.class	getElementsByClassName()
element	getElementsByTagName()
#id	getElementById()
selector, selector……

1.2 层级选择器

parent > child	子代选择器第一代
ancestor descendant	后代选择器
prev + next	next()
prev ~ sibling	nextAll()

1.3 基本筛选器

:first	选取第一个元素
:last	选取最后一个元素
:eq(index)	选取索引等于index的元素 (index从0开始)
:gt(index)	选取索引大于index的元素
:lt(index)	选取索引小于index的元素
:odd	选取索引是奇数的元素
:even	选取索引是偶数的元素
:not(指定选择器)	去除所有与给定选择器匹配的元素
:header()
:animated
:lang()
:root
:target

1.4 内容筛选器

:contains(指定文本值)
:has(selector)	选取含有选择器所匹配的元素
:empty	选取不包含子元素或文本的空元素
:parent	选取含有子元素或文本的元素

1.5 可见筛选器

:hidden	选取不可见的元素
:visible	选取可见的元素

1.6 属性选择器

[attr]	拥有此属性的元素
[attr = value]	属性值为value的元素
[attr != value]	属性值不为value的元素
[attr ^= value]	属性值以value开始的元素
[attr $= value]	属性值以value结束的元素
[attr *= value]	属性值含有value的元素
[attr1] [attr2]...[attrN]	多条件选择器
[attr ~= value]
[attr \|= value]

1.7 子元素筛选器

:first-child	:first
:first-of-type
:last-child	:last
:last-of-type
:nth-child(num\|表达式\|even\|odd)	:eq(index)
:nth-last-child(num\|表达式\|even\|odd)	倒数
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type()

1.8 表单选择器

:checked	选取所有被选中的元素(单选框、复选框)
:disabled	选取所有不可用元素
:enabled	选取所有可用元素
:selected	选取所有被选中的选项元素(下拉列表)
:button	选取所有按钮
:checkbox	选取所有多选框
:input	选取所有input、textarea、select、button元素
:password	选取所有密码框
:radio	选取所有单选框
:submit	选取所有提交按钮
:text	选取单行文本框
:focus
:file
:image
:reset

二属性/CSS

2.1 属性

.attr()	getAttribute() 和setAttribute()
.prop()	JS中原生的对象属性获取和设置方式
jQuery认为：attribute的checked、selected、disabled就是表示该属性初始状态的值，property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)
.removeAttr()
.removeProp()

2.2 CSS

.addClass()	添加样式, 参数可以是function
.css()
.hasClass()	判断是否含有某一样式
.removeClass()	移除样式, 参数可以是function
.toggleClass()	删除或者添加类名 (没有就添加,有就删除--循环变换)
jQuery.cssHooks
jQuery.cssNumber
jQuery.escapeSelector()

2.3 获取HTML、文本、值

.html()	innerHTML 读取或设置某元素的HTML
.text()	innerText 读取或设置某元素的text
.val()	获取或设置元素的值

2.4 尺寸

.height()
.width()	获取宽度 content
.innerHeight()
.innerWidth()	获取宽度 content + padding
.outerHeight()
.outerWidth()	获取宽度 content + padding + border 实际宽度
参数为true，加上content + padding + border + margin

2.5 位置

.offset()	left/top 相对于当前视窗的相对偏移
.offsetParent()	查找最近的已定位的父级元素
.position()	left/top 相对于最近已定位的父级的相对偏移
.scrollLeft()	滚动条距左边的距离
.scrollTop()	滚动条距顶端的距离
fixed == $(window).scrollTop + top(定位的高度)

2.6 数据

jQuery.data()
.data()
jQuery.hasData()
jQuery.removeData()
.removeData()

三 DOM操作

3.1 复制节点

.clone()

参数:true 复制绑定的事件; false:不复制绑定的事件

3.2 查找节点

查找元素节点	$(selector)
查找属性节点	$(selector).attr()

3.3 创建节点

创建元素节点	$( html )
创建文本节点	$(‘<p>文本</p>’)
创捷属性节点	$(‘<p class=”p”>文本</p>’)

3.4 DOM插入、包裹

.wrap()	单独包裹所有元素
.wrapAll()	用一个元素包裹所有匹配元素
.wrapInner()	$(A).wrapInner(B) => A包裹B,B包裹A的内容

3.5 DOM插入、内部插入

.append()	D.append(C): D里添加C(添加到最后一个子元素后) appendChild()
.appendTo()	C.appendTo(D): C添加到D的里面 (添加到最后一个子元素后)
.prepend()	添加第一个元素前
.prependTo()	添加到第一个元素前

3.6 DOM插入、外部插入

.after()
.insertAfter()
.before()	B.before(A) A在 B的前面 (有剪切的功能) 主体B
.insertBefore()	A.insertBefore(B) A插入到 B的前面 (有剪切的功能) 主体A

——返回的主体不同，方便之后链式调用

3.7 DOM移除

.datach()	把元素删除后返回; 保存绑定的事件
.remove()	把元素删除后返回; 不保存绑定的事件
.empty()	清空元素节点的内容
.unwrap()

3.8 DOM替换

.replaceAll()	$(A).replaceAll(B) – A替换B
.replaceWith()	$(A).replaceWith(B) – B替换A

四遍历

4.1 筛选

.eq()
.filter()
.first()
.last()
.has()
.is()
.map()
.not()
.slice()	截取算头不算尾

4.2 各种遍历

.add()	A.add(B): 集中操作A B
.contents()
.each()	each(function(index[, ele]) { }) //ele == this
.end()	回退操作，返回上前一个对象 prevObject

4.3 树遍历

.children()	取得匹配元素的子元素集合
.find()
.next()	获取匹配元素后面紧邻的同辈节点
.prev()	获取匹配元素前面紧邻的同辈节点
.siblings()	获取匹配元素前后所有的同辈节点
.parent()	获取集合中每个匹配元素的父级元素(上一级)
.parents()	获取集合中每个匹配元素的祖先元素
.closest()	查找最近的祖先节点先找自身,再向上查找必须带参数
.addBack()
.nextAll()	获取匹配元素后的所有同辈节点
.nextUntil()
.parentsUntil()
.prevAll()	获取匹配元素前的所有同辈节点
.prevUntil()

五事件

事件对象 e -> e.pageX相对于文档而言 e.clientX相对于浏览器窗口而言 e.which哪个键或按钮 e.button哪个鼠标按键被按下。

5.1 浏览器事件

.resize()
.scroll()

5.2 文档加载

.holdReady()
.ready()	$(function(){ }) 或 $([document]).ready(function() { })

5.3 事件绑定

.bind()	bind(type [, data], fn ) -- event.data -- 可多次调用
.off()	解除绑定事件
.on()	绑定事件 == addEventListener()
.unbind()	unbind([type], [data]) – 移除绑定的事件
$(“div”).on(‘click’, 事件源对象event, {data}, function() {}) —— e.data == {data}
.one()	事件只绑定一次
.trigger()	模拟操作、自定义事件
.triggerHandler()
.undelegate()
.delegate()

5.4 表单事件

.blur()	当元素失去焦点
.focus()	当元素得到焦点
.change()
.select()
.submit()

5.5 键盘事件

.keydown()
.keypress()
.keyup()

5.6 鼠标事件

.click()	点击事件
.hover()	hover(enter, leave) – 模拟光标悬停事件
.contextmenu()	右键菜单事件
.dblclick()
.focusin()
.focusout()
.mousedown()
.mouseenter()
.mouseleave()
.mousemove()
.mouseout()
.mouseover()
.mouseup()

5.7 事件对象

event.type	获取事件类型
event.which	获取鼠标的左(1)、中(2)、右(3)键
event.data	事件对象数据
event.stopPropagation()	阻止事件冒泡
event.target	获取到触发事件的元素
event.pageX	获取光标的x坐标(加上滚动条的宽)
event.pageY	获取光标的y坐标(加上滚动条的高)
event.preventDefault()	阻止默认行为
event.isDefaultPrevented()
event.isImmediatePropagationStopped()
event.isPropagationStopped()
event.namespace
event.relatedTarget
event.result
event.stopImmediatePropagation()
event.timeStamp
event.currentTarget

六效果

6.1 基础事件

.hide()	display: none;	同时修改多个样式属性: 高度、宽度、不透明度
.show()	display: 原来的值;	同时修改多个样式属性: 高度、宽度、不透明度
.toggle()	toggle(fn1, fn2, fnN) – 模拟鼠标连续点击事件(切换元素可见状态)

6.2 自定义事件

.animate()	animate(params, speed, callback) -- 链式调用 == 顺序动画
.clearQueue()
.delay()	延迟动画
.dequeue()
jQuery.dequeue()
.finish()
jQuery.fx.interval
jQuery.fx.off
.queue()
jQuery.queue()
.stop()	stop([clearQueue], [gotoEnd]) clearQueue 清空未完成的动画队列 gotoEnd 是否直接将正在执行的动画跳转到末状态

6.3 渐变事件

.fadeIn()	不透明度增加	只改变不透明度
.fadeOut()	不透明度减小到display: none;
.fadeTo()	改变不透明度到一个制定值
.fadeToggle()	通过不透明度变化来切换匹配元素的可见性

6.4 滑动事件

.slideDown()	由下到上隐藏	只改变元素的高度
.slideUp()	由上到下显示	只改变元素的高度
.slideToggle()	通过高度变化来切换匹配元素的可见性

七 Ajax

Ajax优势: 不需要插件支持、优秀的用户体验、提高web程序的性能、减轻服务器和带宽的负担；

Ajax的不足：浏览器对XMLHttpRequest对象的支持度不足、破坏浏览器前进、后退按钮的正常功能、对搜索引擎的支持的不足、开发和调试工具的缺乏；

XMLHttpRequest对象：是Ajax实现的关键——发送异步请求、接收响应及执行回调。

7.1 全局Ajax事件处理程序

.ajaxComplete()	Ajax请求完成时执行函数
.ajaxError()	Ajax请求发生错误时执行函数
.ajaxSend()	Ajax请求发送前执行的函数
.ajaxStart()	ajax请求开始前
.ajaxStop()	ajax请求停止后
.ajaxSuccess()	Ajax请求成功时执行的函数

7.2 辅助函数

$.param()	用来对一个数组或对象按照key/value进行序列化
.serialize()	序列化元素=>将DOM元素内容序列化为字符串用于Ajax请求
.serializeArray()	将DOM元素序列化返回JSON格式数据

7.3 底层接口第一层方法

jQuery.ajax()
jQuery.ajaxSetup()

7.4 快捷方法

jQuery.get()
jQuery.getJSON()
jQuery.getScript()
.load()
jQuery.post()

7.5 .load()

load(url[, data] [, callback])		载入远程的静态的HTML代码并插入DOM中
参数	data	没有data—GET 有data—POST
参数	callback	callback(请求返回的内容, 请求状态, XMLHttpRequest对象)

7.6 $.get()

$.get(URL,[data],[fn],[dataType])			以get的方式向服务器请求数据
参数	url		请求文件的地址
	data		请求参数（）
	fn		回调函数
	dataType		文件类型(html \| xml \|json \|script \|text)
公式
	textStatus	success		成功
		error		失败
		not found		没有找到
		notModified		没有修改

7.7 $.post()

$.post(url,data,fn,dataType)			以post的方式请求数据
参数	url	请求文件的地址
	data	请求参数（）
	fn	回调函数
	dataType	文件类型(html \| xml \|json \|script \|text)

GET和POST的区别
安全性	post的安全性高于post；以get方式请求，请求参数会拼接到url后面，安全性性低；以post方式请求，请求参数会包裹在请求体中，安全性更高
数量区别	get方式传输的数据量小，规定不能超过2kb； post方式请求数据量大，没有限制。
传输速度	get的传输速度高于post

7.8 $.getScript()

$.getScript(url,fn)

向服务器请求脚本文件

参数

url

地址

回调函数fn

function(){

脚本文件加载完毕之后会调用

}

7.9 $.getJson()

$.getJSON("url",data,fn)

请求json数据

原生js的

json跨域请求

第一步

创建script标签，并将其添加到body中

第二步

请求数据

7.10 $.ajax()

jQuery 底层 AJAX 实现，结构为：$.ajax(options)

对象options内容：

url	请求地址
type	"get \| post \| put \| delete " 默认是get
data	请求参数 {"id":"123","pwd":"123456"},
dataType	请求数据类型"html \| text \| json \| xml \| script \| jsonp ",
success	function(data,dataTextStatus,jqxhr){},
error	error:function(jqxhr,textStatus,error)

八核心

定义在函数上的方法叫工具方法；

定义在原型上的方法叫实例方法；

8.1 jQuery 对象

jQuery()
jQuery.noConflict()	把$控制权交给其他库 var wquery = $.noConflict()
jQuery.when()

8.2 使用工具

jQuery.contains()
jQuery.each()
jQuery.extend()	插件扩展1提供新的jQuery工具方法
jQuery.fn.extend()	插件扩展2提供新的jQuery实例方法记住是实例不是工具方法
jQuery.globalEval()
jQuery.grep()
jQuery.inArray()
jQuery.isArray()
jQuery.isEmptyObject()
jQuery.isFunction()
jQuery.isNUmeric()
jQuery.isPlainObject()
jQuery.isWindow()
jQuery.isXMLDoc()
jQuery.makeArray()	把类数组转换为数组
jQuery.map()
jQuery.noop()
jQuery.now()
jQuery.parseHTML()
jQuery.parseJSON()	字符串转换成json
jQuery.parseXML()
jQuery.proxy()	改变this指针方向参数1：function,参数 2:函数执行期上下文
jQuery.ready
jQuery.readyException()
jQuery.support
jQuery.trim()	消除字符串两边的空格
jQuery.type()	判断类型
jQuery.unique()

8.3 DOM元素方法

.get()
.index()
.toArray()

8.4 内部构件

.jquery()
jQuery.error()
.length
.pushStack()
.selector

8.5 延迟对象

deferred.always()
deferred.catch()
deferred.done()
deferred.fail()
deferred.notify()
deferred.notifyWith()
deferred.progress()
deferred.promise()
deferred.reject()
deferred.rejectWith()
deferred.resolve()
deferred.resolveWith()
deferred.state()
deferred.then()
.promise()

8.6 回调对象

jQuery.Callbacks()
callbacks.add()
callbacks.disable()
callbacks.empty()
callbacks.fire()
callbacks.fired()
callbacks.fireWith()
callbacks.has()
callbacks.lock()
callbacks.locked()
callbacks.remove()