jQuery

最新推荐文章于 2022-12-17 23:14:47 发布

纳米606

最新推荐文章于 2022-12-17 23:14:47 发布

阅读量159

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_38620301/article/details/104238692

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery

1.jQuery简介

jQuery是一个快速,简洁的JavaScript库,其宗旨是"writr Less, DO More" 即倡导写更少的代码,做更多的事情

优点:
- 轻量级,核心文件几十KB,不会影响页面加载速度
- 跨浏览器兼容,基本兼容了现在主流的浏览器
- 链式编程,隐式迭代
- 对事件,样式,动画支持,大大简化了DOM操作
- 封装了简单易用的Ajex操作
- 支持插件扩展开发.有丰富的第三方的插件,例如: 树形菜单,日期控件,轮播图等
- 免费开源

各个浏览器加载不同的jQuery版本,条件注释

<!--chrom firefor Safari opena IE9+ -->
<!--[if gt IE 8]-->
<script src = "jquery-3.3.3.min.js"></script>
<!--<!endif>-->

<!--IE8以及以下-->
<!--[if let IE 8]>
<script src = "jquery-1.12.4.min.js"></script>
<![endif]-->

$ 是jQuery的别称,在代码中可以用jQuery代替$,意识唯一的一个全局变量
$是 j Q u e r y 的顶级对象, 相当于原生 J a v a S c r i p t 中的 w i n d o w . 把元素利用$ 包装成jQuery对象,就可以调用jQuery的方法

//入口函数: 等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成
$(function() {
	... //此处是页面DOM加载完成的入口函数
	console.log($);		   // $ === query
    console.log(jQuery);		// 输出源代码148 - 153
    console.log($ === jQuery);		//true
})
===
$(document).ready(function(){
	...//此处是页面DOM加载完成的入口
	//与onload的区别: ready: DOM加载完毕后触发, onload: 页面的所有一切加载完就会触发

})

2. jQuery DOM对象

DOM对象与jQuery对象
- DOM对象: 用原生的JS获取过来的就是DOM对象
- jQuery对象: 用jQuery方式获取过来的对象是jQuery对象,本质: 通过$把DOM元素进行包装产生对象(伪数组形式存储)
  - 获取DOM对象: document.querySelector(‘div’);
  - 获取jQuery对象: $(‘div’)
DOM对象与jQuery对象相互转换
- DOM转换jQuery: $(‘div’)
- jQuery对象转成DOM对象:
  - $(‘div’)[index] index索引号
  - $(‘div’).get(index) index是索引

<div id = "box"></div>
$(document).ready(function(){
	// 原生JS获取
	var box = document.querySelector('#box');
	// jQuery获取
	var $box = $("#box");

	console.log(box == $box); //false

	//原生dom转换为jQuery dom
	$(box).css('box','2px solid red');

	//jQuery dom转换为JS原生DOM
		//jQuery dom对象是原生Dom对象的集合
	$box[0].backgroundColor = '#ff0000';
	
	//$参数是dom对象: 就会把该对象转换成jQuery对象
	$(box).width(200).height(200).background-color('red');
	//$参数是字符串: 则是jQuery选择器
	$('p').css('color','red');
	//$参数是标签,则是添加标签,后面要跟添加的位置
	$('<p>').html("writr Less, DO More").oppendTo("#box");
})

2.jQuery选择器

2.1 基本选择器

全选选择器 $("*");
ID选择器 $("#id");
类选择器 $(".class")
标签选择器 $(“div”)
并集选择器 $(“div,p,li”) div,p,li标签全部选中
交集选择器 $(“li.current”) li中的.current类名

2.2 层级选择器

后代选择器(包括孙子+) $(‘ul li’)
子代选择器(不包括孙子) $(‘ul>li’)
相邻的后面兄弟元素ol(最近的一个), $(‘ul+ol’)
ul后面的所有的兄弟元素ol被选中 $(‘ul~ol’)

2.3 筛选选择器

:first 获取第一个li元素
:last 获取最后一个li元素
:not(selector) 不选中selector,其余都被选中
:eq(index) 获取到li元素中索引号为index
:odd 获取奇数元素
:even 获取偶数元素
:gt(index) 相当于大于号 < >
:lt(index) 相当于小于号 > <:lt(index) 相当于小于号 > <
:header 选中所有的标题 h1-h6
:animated 正在执行动画元素
:focus 获取表单已经获取了焦距的
:root 1.9+ 过滤根元素,就是html
:target 1.9+ 过滤中锚点正在指向的元素
:lang 1.9+ 选中指定的语言

2.4 内容选择器

:contains(test) 选取文本含有内容为text的元素
:has(selector) 选取含有选择器所匹配的元素的元素(后代)
:empty 选取不包含子元素空文本的元素
:parent 选取含有子元素或者文本元素(不包含空文本)

2.5 可见性选择器

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

2.6 属性选择器

[attribute] 选取拥有此属性的元素
[attribute=value] 选取属性值为value
[attribute!=value] 选取属性值不为value
[attribute^=value] 选取属性值以value开始
[attribute$=value] 选取属性值以value结束
[attribute*=value] 选取属性值含有value
[attribute|=value] 选择元素有att属性,值以val或val-开头的元素
[attribute~=value] 选择元素有att属性,其中以空格分隔val,例:att=“one val"或者"val one”
[attrSel1] [attrSel2] [attrSelN] 多个属性选择器并集

2.7 子元素选择器

:first-child 选择父元素(同胞)中第一个子元素,不可以指定类型
:first-of-type1.9+ 选择父元素中第一个相同的子元素,可以指定类型
:last-child 选择父元素(同胞)中最后一个子元素,不可以指定类型
:last-of-type1.9+ 选择父元素中最后一个相同的子元素,可以指定类型
:nth-child(n可以使数字,公式,关键字:even(偶数) odd(奇数))
:nth-of-type()1.9+ 从前开始选择同胞元素
:nth-last-child()1.9+ 从一组同胞元素的最后一个开始往前算
:nth-last-of-type()1.9+ 从后向前的同胞元素中选择
:only-child 唯一子代标签(可以是后代),选择的那个后代元素必须是父类独生子
:only-of-type1.9+ 表示父元素有很多子元素,而且在子元素里面其中有一个是唯一的

2.8 表单选择器

:input 所有的表单控件(input,select,textarea,button)
:text 选中text文本表单控件
:password 选中password表单控件
:radio 选中radio控件
:checkbox 被选中checkbox控件,返回个数
:submit 选中submit控件,具有提交功能的按钮(button)
:image 选中type = image控件
:reset 选中reset控件
:button 选中button标签1,input: button控件
:file 选中file控件

2.9 表单对象选择器

:enabled 选中表单控件为enabled,一般默认为enabled,开启
:disabled 选中表单控件属性为disabled,关闭
:checked 选中多选表单控件属性为checked(√),
:selected 选中下拉表单控件属性为selected(默认选中)

2.10 混淆选择器

$.escapeSelector(selector)3.0+ 用于idName,className有特殊符号

// escape: 编码  Selector: 选择器 
<div class = ".box" id = "#box"></div>
$(document).ready(function(){
	$('#'+ $.escapeSelector('#box').width(100).height(100);
})

3. 属性

3.1 属性

attr(name|pro|key,val|fn) 操作所有的属性,包括自定义
- attr(‘name’) 获取属性名
- attr(‘name’,‘123’) 修改name属性值123
- attr(‘class’,‘123’) 添加属性class属性和值
- attr({‘class’:‘123’,‘id’:‘456’}); 修改,添加属性
- attr(“title”, function() { return this.src }); 参数key为回调函数
prop(n|p|k,v|f) 操作所有属性,不包括自定义
removeAttr(name)
removeProp(name) 不能删除自定义和内置的属性,

<body>
    <img src="10.jpg" alt="赵丽颖微博头像" title = "123" data-loading = "100.png"/>
    <script src = "jQuery.js"></script>
    <script type = "text/javascript">
        $(document).ready(function(){
        // 获取属性
            //获取地址
            console.log($('img').attr('src')); //写什么地址就获取什么地址
            console.log($('img').prop('src')); //绝对地址
            // 获取属性
            console.log($('img').attr('alt'));
            console.log($('img').prop('alt'));
            // 获取自定义属性
            console.log($('img').attr('data-loading')); //100.png
            console.log($('img').prop('data-loading')); //undefined
        // 修改属性值
           $('img').attr('title','123');
           $('img').prop('title','123');

           $('img').attr('data-loading','123');
           $('img').prop('data-loading','123'); //修改失败
           $('img').attr({'title':'abc','data-loading':'abcde'});

        // 添加属性值
            $('img').attr('class','123');
            $('img').prop('class','123');
            //添加自定义属性
            $('img').attr('data-name','123');
            $('img').prop('data-name','123'); //添加失败
            $('img').attr({'class':'123','id':'456'});

        // 删除属性
            $('img').removeAttr('alt');
            // removeProp只能删除Prop创建的自定义对象,但是创建出来的自定义对象不会出现在文档中,可以打印出来,removeProp删除的就是这个
            $('img').removeProp('alt'); //删除不了

            $('img').prop('class','123');
            $('img').removeProp('class'); //自己创建出来的内置属性也删除不了

            $('img').prop('data-item','one');
            console.log($('img').prop('data-item','one')); //可以打印出来,一个集合
            $('img').removeProp('data-item');
            console.log($('img').prop('data-item')); // undefined 已经删除
            //删除自定义属性
            $('img').removeAttr('data-loading');
            $('img').removeProp('data-loading'); // 删除data-loading属性失败

        })
    </script>
</body>

3.2 CSS类

addClass(class|fn) 添加class值
removeClass([class|fn]) 删除class值
hasClass(‘class’) 判断class值,返回true,false
toggleClass(class|fn[,sw]) 如果存在（不存在）就删除(添加)一个类;切换类

3.3 HTML代码/文本/值

html([val|fn])
- 不带参数: 等于innerHTML,里面的标签也会输出;获取元素内容
- 带参: 如果是字符串,就会更改里面的内容;参数如果是标签文本,会识别标签;设置元素内容
text([val|fn])
- 不带参数: 等于innerText,只会输出里面的文本(标签不输出)
- val如果是字符串,就会更改里面的内容;参数如果是标签文本,会把标签一起输出
val([val|fn|arr])
- 不带参数: 获取元素匹配的值,相当于.value,获取表单内容
- 带参: 更改value内容

4 样式操作

4.1 css操作

css(name|pro|[,val|fn])1.9*
- 读取属性值,带有单位的字符串
$(function(){ $(‘div’).css(‘width’)})
- 设置属性值
$(function(){ $(‘div’).css(‘width’, ‘200px’)})
- 参数是对象模式, 方便多改
$(function(){ $(‘div’).css( {“color”:“red”, “font-size”:“20px”})})

4.2 位置

offset([coordinates])
- 无参: $(‘div’).offset().left/top元素在页面中的坐标
- 有参: $(‘div’).offset({left:100, top: 100});改变元素位置,内部会添加一个相对定位
position(): 元素相对于父元素定位的坐标(只读)
scrollTop([val])
- 无参: 获取当前纵坐标滚动条的值
- 有参: 设置当前纵坐标滚动条的值
scrollLeft([val])
- 无参: 获取当前横坐标滚动条的值
- 有参: 设置当前横坐标滚动条的值

4.3 尺寸

height([val|fn])
- 无参: 元素盒子内容尺寸
- 有参: 设置盒子内容高
width([val|fn])
innerHeight() 盒子元素内容+padding
innerWidth() 盒子元素内容+padding
outerHeight([soptions]) 元素内容+ padding + border = 盒子大小
outerWidth([options]) 素内容+ padding + border = 盒子大小

5 筛选操作

5.1 过滤

eq(index|-index) 指定第几个被选择
first() 选择第一个
last() 选择最后一个
hasClass(class) 判断class值,返回true,false
filter(expr|obj|ele|fn|选择器) 只选中expr,其余不选
not(expr|ele|fn|选择器) 不选中sexpr,其余都被选中
is(expr|obj|ele|fn)
- 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true
map(callback) 返回新的集合,取决于返回值;后面调用无参get,返回纯数组
- $(‘ul li’).map(function(index, ele){returnn $(ele).html }).get()
has(expr|ele) 子代元素是否包含expr类
slice(start,[end]) 截取一组,组成新的集合

5.2 查找

children([expr])
- 无参: 选中所有子元素
- 有参: 选中子元素中所有的[expr]
closest(e|o|e)1.7*
- 无参: 谁也不选,意义不大
- 有参: 从所有的祖先元素和本身里面找出第一个满足条件的
find(e|o|e) 选取后代元素中的e
next([expr])
- 无参: 下一个兄弟元素
- 有参: 下一个兄弟元素expr
nextAll([expr])
- 无参: 后面所有兄弟元素
- 有参: 后面所有兄弟元素expr
nextUntil([e|e][,f])
- 无参: 后面的所有兄弟元素全部被选中
- 有参: 后面的兄弟元素被选中,直到满足条件,遇到兄弟元素为e
offsetParent() 返回第一个定位的祖先元素
parent([expr])
- 无参: 选中父元素(亲爸爸)
- 有参: 选中父元素为expr的亲爸爸
parents([expr])
- 无参: 找出所有的祖先元素,一直到html
- 有参: 只找祖先元素expr
parentsUntil([e|e][,f])
- 无参: 找出所有的祖先元素,一直到html
- 有参: 一直向上找祖先元素,直到找到e为止(不包含e)[li的亲爸爸开始,body)
prev([expr])
- 前面一个兄弟元素
- 指定类型前面一个兄弟类型
prevall([expr])
- 前面所有的兄弟元素
- 指定类型前面所有的兄弟元素
prevUntil([e|e][,f])
- 无参: 前面的所有兄弟元素全部被选中
- 有参: 前面的兄弟元素被选中,直到满足条件,遇到兄弟元素为e
siblings([expr])
- 无参: 排除自己,选择所有的兄弟元素
- 有参: 排除自己,选择所有兄弟元素expr

6.3 串联

add(e|e|h|o[,c])1.9*
- $(‘ul’).find(‘li’).add(‘p’) == ul li, p
- 把选中的元素加入当前集合; 把p标签加入ul li标签集合中
addBack()1.9+
- $(‘ul’).find(‘li’).find(‘a’).find(‘span’).addBack()
- 谁调用span就选择谁(a); 添加(u>li>a)集合到当前集合
contents() 返回所有子节点的集合
end() 返回最后一次破坏性操作的前一次dom(破坏性操作: 改变原来的dom)

7 核心

7.1 jQuery 核心函数

jQuery([sel,[context]])
jQuery(html,[ownerDoc])1.8*
jQuery(callback)
jQuery.holdReady(hold)3.2-

7.2 jQuery 对象访问

each(callback) 遍历
- $(‘div’).each(function(index,ele){console.log(index, ele)}) 输出索引,标签元素
- $. e a c h ($ (‘div’), function(index,ele){console.log(index, ele)}) 遍历数据和处理数据
length 返回集合中的数量
selector
context
get([index])
- 无参: 返回纯数组
- 有参: 返回指定的标签元素
index([selector|element]) 返回某个元素在父元素中的索引

7.3 数据缓存

data([key],[value])
removeData([name|list])1.7*
$.data(ele,[key],[val])1.8-

7.4 队列控制

queue(e,[q])
dequeue([queueName])
clearQueue([queueName])

7.5 插件机制

jQuery.fn.extend(object)
jQuery.extend(object)

7.6 多库共存

jQuery.noConflict([ex]) jQuery和其他的库不存在冲突,可以同时存在(把 $改成 j Q u e r y) - 自定义$ : var i = $.noConflict()

8 文档处理

8.1 内部插入

append(content|fn)
- $(‘ul’).append(‘
- 包裹
- ’) 子元素后面插入

appendTo(content)
- $(‘
- 包裹2
- ’).appendTo(‘ul’); 子元素后面插入
prepend(content|fn)
- $(‘ul’).prepend(‘
- 包裹
- ’) 子元素前面插入
prependTo(content)
- $(‘
- 包裹2
- ’).prependToTo(‘ul’); 子元素前面插入
8.2 外部插入
- after(content|fn)
  - $(‘ul’).after(‘
    - after
    ’) 兄弟元素后面插入
- before(content|fn)
  - $(‘ul’).before(‘
    - before
    ’) 兄弟元素前面插入
- insertAfter(content)
  - $(‘
    - after
    ’).after(‘ul’) 兄弟元素后面插入
- insertBefore(content)
  - $(‘
    - insertBefore
    ’).insertBefore(‘ul’) 兄弟元素前面插入
8.3 包裹
- wrap(html|ele|fn)
  - $(‘ul li’.)wrap(’’) 用a包起ul li的所有li元素,一对一
- unwrap()
  - $(‘ul li’).unwrap(); 去除包裹,去掉父元素
- wrapAll(html|ele)
  - $(‘ul li’).wrapAll(’’) 用a包起ul li的所有li元素,一对多
- wrapInner(html|ele|fn)
  - $(‘ul’).wrapinner(’’) 在ul里面创建a,a包含所有的li,成为li的父元素
8.4 替换
- replaceWith(content|fn) 将所有匹配的元素替换成指定的HTML或DOM元素。
  - $(“ul li”).first().replaceWith(‘
  - li替换了
  - ’)
replaceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素
- $(‘
- li被替换了
- ’).replaceAll(‘ul li:first’)
8.5 删除
- empty() 清空元素里面所有的内容
- remove([expr]) 删除自己与里面的内容,有返回值;用append()可以恢复,但是原来的事件没有
- detach([expr]) 删除自己与里面的内容,有返回值;用append()可以恢复,但是保留原来的事件
8.6 复制
- clone([Even[,deepEven]])
  - $(‘ul’).clone().appendTo(‘body’); //克隆到body里面
9 事件

9.1 页面载入
- ready(fn) 页面中DOM加载完就会触发
9.2 事件处理
- on(eve,[sel],[data],fn)1.7+
  - $(‘body’).on(‘click’, function(){})
  - $(‘body’).on(‘click’, function(){}).on(‘dblclick’, function(){})
  - $(‘body’).on({‘click’: function(){},‘dblclick’: function(){}})
  - $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsve',function(){$ (this).toggleClass(‘current’)})
- off(eve,[sel],[fn])1.7+ 解除事件绑定
  - $(‘body’).off(); body下全部解除
  - $(‘body’).off(‘click’); body下单击事件解除
- bind(type,[data],fn)3.0-
- one(type,[data],fn) 事件仅仅绑定一次,只会触发一次
  - $(‘body’).one(‘click’, function(){})
- unbind(t,[d|f])3.0-
- trigger(type,[data]) 自动触发元素
- triggerHandler(type, [data])
```
trigger和triggerHandler用法大致相同,
	区别: 1.triggerHandler: 1. 返回的不是jQuery Dom所以不能连贯操作;
							2. 无法触发元素自带事件,如:提交按钮,自带单击事件
							3. 只会触发集合中的第一个元素,触发一次
		 2. trigger: 1. 返回jQuery Dom,所以能连贯操作;
					 2. 可以触发元素自带事件,如:提交按钮,自带单击事件
					 3. 会触发集合中所有事件
```
9.3 事件委派
```
<ul>
	<li>属性</li>
</ul>
<input type="text">
<button>添加</button>
 $(document).ready(function(){
            $('ul').on('mouseover','li',function(){  //事件委派
                $(this).addClass('current');
            }).on('mouseout','li',function(){
                $(this).removeClass('current');
            })
            $('button').on('click', function(){ // 添加内容
                //console.log($('<li>'));
                $('<li>').html($('input').val()).appendTo('ul');
            })
        })
```
9.4 事件切换
- hover([over,]out) 相当于mouseenter和mouseleave的结合
- toggle([spe],[eas],[fn])1.9*
9.5 事件
- change([[data],fn]) 当元素的值发生改变时，会发生 change 事件,一般用于表单
- click([[data],fn]) 鼠标单击事件
- dblclick([[data],fn]) 鼠标双击
- error([[data],fn])
- focus([[data],fn]) 获取焦点
- blur([[data],fn]) 失去焦点事件
- focusin([data],fn) 获取焦点,绑定给输入框的父元素
- focusout([data],fn) 失去焦点,绑定给输入框的父元素
- keydown([[data],fn]) 键盘按下
- keypress([[data],fn])
- keyup([[data],fn])
- mousedown([[data],fn]) 鼠标按下
- mouseup([[data],fn]) 鼠标弹起
- mousemove([[data],fn]) 鼠标移动
- mouseenter([[data],fn]) 鼠标经过,类似于mouseover,但是不会冒泡
- mouseleave([[data],fn]) 鼠标离开,类似于mouseout,但是不会冒泡
- mouseout([[data],fn]) 鼠标离开
- mouseover([[data],fn]) 鼠标经过
- resize([[data],fn])
- scroll([[data],fn])
- select([[data],fn])
- submit([[data],fn])
- unload([[data],fn])
10 事件对象
- eve.currentTarget
- eve.data
- eve.delegateTarget1.7+
- eve.isDefaultPrevented()
- eve.isImmediatePropagationStopped()
- eve.isPropagationStopped()
- eve.namespace
- eve.pageX 返回鼠标X坐标
- eve.pageY 返回鼠标Y坐标
- eve.preventDefault() 阻止默认动作
- eve.relatedTarget
- eve.result
- eve.stopImmediatePropagation()
- eve.stopPropagation() 阻止事件冒泡或者return false
- eve.target 返回当前触发的元素
- eve.timeStamp
- eve.type 返回事件类型
- eve.which 返回键盘按键的ASCII码
- return false 既可以阻止事件冒泡,又可以阻止默认操作
11 效果

11.1 基本
- show([s,[e],[fn]]) 显示
- hide([s,[e],[fn]]) 隐藏
- toggle([s],[e],[fn]) 切换
show([speed,[easing],[fn]])
- 参数都可以省略
- speed:三种预定速度之一的字符串(“show”, “normal”, or, “fast”)或者表示动画时长的毫秒数值: 过渡效果
- easeing:(Optional)用来指定切换效果,默认是"swing",可用参数"linear"
- fn: 回调函数,在动画完成时执行函数,每个元素执行一次
基本效果CSS属性变化: 透明度(opacity), 元素大小及相关属性(padding,border,width,height,margin)

11.2 滑动
- slideDown([s],[e],[fn]) 滑动下拉显示
- slideUp([s,[e],[fn]]) 滑动下拉隐藏
- slideToggle([s],[e],[fn]) 切换
效果变化: height, padding-top, padding-top

11.3 淡入淡出
- fadeIn([s],[e],[fn]) 透明度降低,直到完全显示
- fadeOut([s],[e],[fn]) 透明度升高,直到完全隐藏
- fadeToggle([s,[e],[fn]]) 切换
- fadeTo([[s],o,[e],[fn]]) (0-1)半透明,1显示,0隐藏
  - 至少两个参数,第一个时间s,第二个透明度[0,…,1]
11.4 自定义
- animate(p,[s],[e],[fn])1.8* 自定义动画
  - 参数1: 数组表示定义的内容{‘width’: ‘20px’,‘padding’: ‘10px’},属性值可以设置成’toggle’
  - 参数2: 时间
  - 参数3: 切换效果,默认swing,可用参数linear
- stop([c],[j])1.7* 停止动画,一般写在动画的前面,解决动画队列问题,结束上一次动画
- delay(d,[q]) 延迟,参数时间
- finish([queue])1.9+ 动画完成
11.5 设置
- jQuery.fx.off = true 关闭页面所有动画
- jQuery.fx.interval 返回动画的帧数
11.6 动画队列
- 所有的动画操作会加入动画队列(一个个的来),一次执行
- 其他操作不会加入动画队列
11.7 jQuery动画与CSS3动画
- 兼容性: CSS3的动画和过渡需要IE9+,jQuery 1.几版本就可以用
- CSS3的动画或者过渡,必须给元素指定具体的CSS属性值
12 ajax

12.1 ajax 请求
- $.ajax(url,[settings])
- load(url,[data],[callback]) 载入远程HTML代码并插入DOM语句
  - url: 请求HTML页面的URL地址
  - data: 发送给服务器的key/value数据
  - callback: 请求完成时的回调函数,无论请求成功失败
- $.get(url,[data],[fn],[type])
- $.getJSON(url,[data],[fn])
- $.getScript(url,[callback])
- $.post(url,[data],[fn],[type])
12.2 ajax 事件
- ajaxComplete(callback)
- ajaxError(callback)
- ajaxSend(callback)
- ajaxStart(callback)
- ajaxStop(callback)
- ajaxSuccess(callback)
12.3其它
- $.ajaxPrefilter([type],fn)
- $.ajaxSetup([options])
- serialize() 表单方法
- serializearray()
13 核心

13.1 jQuery 核心函数
- jQuery([sel,[context]])
- jQuery(html,[ownerDoc])1.8*
- jQuery(callback)
- jQuery.holdReady(hold)3.2-
13.2 jQuery 对象访问
- each(callback)
- size()
- length
- selector
- context
- get([index])
- index([selector|element])
13.3 数据缓存
- data([key],[value]) 这个数据是存放在元素的内存中,一个参数: 获取属性的属性值,两个设置属性值;如果是h5自定义属性(data-index)就不用写data属性,返回是数字型
- removeData([name|list])1.7*
- $.data(ele,[key],[val])1.8-
13.4 队列控制
- queue(e,[q])
- dequeue([queueName])
- clearQueue([queueName])
13.5 插件机制
- jQuery.fn.extend(object)
- jQuery.extend(object)
13.6 多库共存
- jQuery.noConflict([ex])
14 工具

14.1 浏览器及特性检测

$.support
$.browser.version

14.2 数组和对象操作
- $.each(object,[callback]) 遍历
  - $. e a c h ($ (‘div’), function(index,ele){console.log(index, ele)}) 遍历数据和处理数据
- $. e x t e n d ([d], t g t, o b j 1, [o b j N]) 对象拷贝 - - >$ .extend(targer,obj),会覆盖目标对象原来的数据
  - d(1): 浅拷贝(false默认),浅拷贝是把地址拷贝的对象引用数据类型地址给目标,修改目标对象会影响原对象
  - d(2): 深拷贝(true),完全克隆(拷贝的是对象,不是地址),修改目标不会影响被拷贝的对象
- $.grep(array,fn,[invert]) 过滤数组,也可以遍历,有返回值
  - var s = $.grep(arr, function(item, index){return item % 2 == 0;})
- $.when(deferreds)
- $.makeArray(obj) 把类数组转为纯数组
  - var s = $. m a k e A r r a y ($ (‘li’))
- $.map(arr|obj,callback) 返回新的集合
  - var s = $.map(list, function(item, index){return item;})
- $.inArray(val,arr,[from]) 判断某个元素在数组中的位置
  - $.inArray(‘div’,arr)
- $.toArray() 返回纯数组
  - $(‘ul li’).toArray()
- $.merge(first,second) 合并数组
  - $.merge(list, [1,2,3])
- $.uniqueSort(array)3.0+
- $.parseXML(data)
14.3 函数操作
- $.noop
- $.proxy(function,context) 改变函数的this的指向
```
function fn(){console.log(this);}
var newFn = $.proxy(fn,{name: 'lili'});
newFn();  // this指向name:'lili'
```
14.4 测试操作
- $.contains(c,c)
- $.type(obj) 返回数据类型,与typeof有区别
- $.isFunction(obj) 判断是否为函数
- $.isEmptyObject(obj) 判断是否为空的对象,{}
- $.isPlainObject(obj) 判断是否为纯对象,{},数组,集合,jQueryDom不是纯对象
- $.isWindow(obj) 判断是否为window对象
- $.isNumeric(value)1.7+ 判断是否为真数字(NaN不是数字)
14.5 字符串操作
- $.trim(str) 去除所有空格
14.6 URL
- $.param(obj,[traditional]) 序列化成字符串
14.7 插件编写
- $.error(message)
- $.fn.jquery 返回jQuery版本

纳米606

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

jQuery1.jQuery简介jQuery是一个快速,简洁的JavaScript库,其宗旨是"writr Less, DO More" 即倡导写更少的代码,做更多的事情优点:轻量级,核心文件几十KB,不会影响页面加载速度跨浏览器兼容,基本兼容了现在主流的浏览器链式编程,隐式迭代对事件,样式,动画支持,大大简化了DOM操作封装了简单易用的Ajex操作支持插件扩展开发.有丰富的...
复制链接

扫一扫