jquery的api以及用法总结-数据/操作/事件
数据
- .data()
在匹配元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值
.data(obj) 一个用于更新数据的键/值对
.data()方法允许我们再dom元素上绑定任意类型的数据，避免了循环引用的内存的泄露风险
从div元素存储然后找回一个值
此例中可以将#log内存储的数据分别提取到span中
<div id="log">
the value is
<span></span>
and
<span></span>
</div>
$('#log').data('test', {
first: 16,
last: 'jianmei',
});
//将test的first内容添加到#log上
$('span:first').text($('#log').data('test').first);
$('span:last').text($('#log').data('test').last);
- .removeData()
在元素上移除绑定的数据
.removeData([name]),要移除的存储数据名
.removeData([list]),一个数组或者空间分隔的字符串命名要删除的数据块
<div id="log">
the value is
<span></span>
and
<span></span>
</div>
$('#log').data('test1', {
first: 16,
});
$('#log').data('test2', {
last: 'jianmei',
});
$('span:first').text($('#log').data('test1').first);
//移除绑定在#log上的test1数据
$('#log').removeData('test2');
$('span:last').text($('#log').data('test2').last);
操作
拷贝
.clone 创建一个匹配的元素集合的深度拷贝副本
.clone()方法深度复制所有匹配的元素集合，包括所有匹配元素，元素的下级元素，文字节点
当和插入方法联合使用的时候，.clone()对于复制页面上的元素很方便
__注意__:当使用clone的时候，在将它插入到文档之前，我们可以修改克隆后的元素或者元素内容
复制所有的b元素然后将他们插入到所有的段落中
<b>hello</b>
<p>have a good day</p>
// prependTo是将元素插入到前面
// $('b').clone().prependTo('p');
// appendTo是将元素插入到后面,就是添加的意思
$('b').clone().appendTo('p');
DOM插入、包裹
- .wrap()
在集合中匹配的每一个元素周围包裹一个html结构
在所有的p外面包裹一层div，此例中会有两个div
<p>have a good day</p>
<p>have a nice day</p>
//在p外面包裹一个class为demo的div
$('p').wrap("<div class = 'demo'></div>")
- wrapAll()
在集合中所有匹配元素的外面包裹一个html元素，此例中只有一个包裹在两个p元素怒外面的div，div的数量只有一个
<p>have a good day</p>
<p>have a nice day</p>
// 与wrap不同的是wrap是在匹配符合的每一个元素外面都要加一个div
// 而wrapAll只在所有匹配的元素外面加一层div
$('p').wrapAll("<div class = 'demo'></div>")
- wrapInner()
在匹配元素里的内容外包一层结构
选择所有的段落，包裹每一个匹配元素的内容
注意:wrap和wrapInner都是包裹每一个匹配的元素
但是不同的是wrap是在选择的每一个元素外包裹一层，但是wrapInner是在选择的每个元素的内容外包裹一层
<p>have a good day</p>
<p>have a nice day</p>
//包裹的是内容have a good day
$('p').wrapInner("<div class = 'demo'></div>")
DOM插入，内部插入
- append()
在每个匹配元素里面的末尾处插入参数内容
// 在div内插入p
$('div').append($('b'));
- appendTo()
将匹配的元素插入到目标元素的最后面
<b>hello</b>
<div class="demo"></div>
// 将p插入到div内
$('b').appendTo($('.demo'));
- html()
获取集合中第一个匹配元素的html内容或者设置每一个匹配元素的html内容
<div class="demo">123</div>
<div class="demo">123</div>
<div class="demo">123</div>
// 如果添加的是空的字符串,则代表清空div内的内容
// $('.demo').html('');
// 向div内添加内容
$('.demo').html('jianmei');
4.prepend()
将参数内容插入到每个匹配元素的前面（元素内部）
<b>hello</b>
<div class="demo">123</div>
// 在div内插入b
// b元素的内容会放在原本div内容的前面,跟append是相反的
$('.demo').prepend($('b'));
- prependTo()
将所有元素插入到目标前面（元素内）
<b>hello</b>
<div class="demo">123</div>
// 将b插入到div内
$('b').prependTo($('.demo'));
- text()
得到匹配元素集合中每个元素的文本内容，包括他们的后代，或者设置匹配元素集合中每一个元素的文本内容为指定的文本内容
<p>have a good day</p>
<p>have a nice day</p>
// 在段落p中添加文本
$('p').text('jianmeinew text');
DOM插入、外部插入
1、after()
在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点
<div class="demo">123</div>
<div class="demo">123</div>
// 在demo类之后插入p标签
// $('.demo').after('<p>jianmei</p>')
// 在demo类后插入所有的p
$('.demo').after($('p'));
2、 before和after的理论是一样的，根据参数的设定，在匹配的元素前面插入内容，外部插入
// 在demo类之前插入p标签
$('.demo').before('<p>jianmei</p>')
3、 insertAfter和after是一样的功能，主要是插入内容和目标的位置不同，
//将p插入到demo类之后
$('p').insertAfter('.demo');
4、 同理可知insertBefore的原理
// 将p插入demo类之前
$('p').insertBefore('.demo');
DOM移除
1、 detach(),从DOM中去掉所有匹配的元素
detach和remove方法一样，除了deach保存所有jquery数据和被移走的元素相关联
当需要移走一个数据，不久又将该元素插入DOM时，常用此方法。
<p>hello</p>
<p>you</p>
<button>meimei</button>
// 删除DOM中所有段落
$('p').click(function () {
$(this).toggleClass('.off');
});
var p;
$('button').click(function () {
if(p) {
p.appendTo('body');
p = null;
}else {
p = $('p').detach();
}
});
2、 remove() 将匹配元素集合从DOM中删除（同时删除的还有元素上的事件以及jquery数据）
可以移除任何想要移除的元素
将所有的段落从DOM
// 将所有段落从DOM中删除
$('button').click(function () {
$('p').remove();
})
3、 empty() 从DOM中移除集合中匹配元素的所有子节点
这个方法不仅移除子元素和后代元素，同时移除元素里的文本
<p>hello</p>
<p>you</p>
<button>meimei</button>
$('button').click(function () {
$('p').empty();
});
4、 unwrap() 将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置
在每个段落外层加上一个div或者删除div
点击按钮添加或者删除样式
<p>hello</p>
<p>you</p>
<button>meimei</button>
// 点击按钮给p的父级元素为demo样式的进行添加和删除操作
var pTags = $('p');
// 给button绑定事件
$('button').click(function () {
// 判断p的父级元素是否有demo样式
// 若有则删除
if(pTags.parent().is('.demo')) {
pTags.unwrap();
}
// 若没有则包裹一个demo样式的div
else{
pTags.wrap('<div class = "demo"></div>');
}
});
DOM替换
1、 replaceAll()
用集合的匹配元素替换每个目标元素
.replaceAll(target)
// 将所有的p替换成demo
$('button').click(function () {
$('<div class = "demo">div</div>').replaceAll($('p'));
})
2、 replaceAll()
用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
.replaceWith()可以从dom中移除内容，也可以在这个地方插入新的内容
// 点击按钮的时候,用div替换按钮
$('button').click(function () {
// 用div替换当前的button
$(this).replaceWith("<div class = 'demo'>" + $(this).text() + "</div>");
})
事件
浏览器事件
1、 .resize()
为js的resize事件绑定一个处理函数，或者触发元素上的该事件
例：当窗口大小改变时（改变后），查看窗口的宽度。
$(window).resize(function () {
$('body').prepend('<div>' + $(window).width() + '</div>');
})
2、 .scroll()
为js的scroll事件绑定一个处理函数，或者触发元素上的该事件
例：在页面滚动的时候触发一系列动作
$('p').clone().appendTo(document.body);
$('p').clone().appendTo(document.body);
$('p').clone().appendTo(document.body);
$('p').clone().appendTo(document.body);
$('p').clone().appendTo(document.body);
$(window).scroll(function () {
$('span').css({
'display':'inline'
}).fadeOut('slow');
})
3、 文档加载(holdReady())
暂停或恢复，延迟就绪事件，直到已加载加载
$.holdReady(true);
$.getScript(''),function () {
$.holdReady(false);
};
3、 ready()
当dom准备就绪的时候，指定一个函数来执行
例子：显示当dom加载的信息
$(document).ready(function () {
$('p').text("the dom is")
})
//当dom准备好了之后,就会绑定一个函数
$(document).ready(function () {
// 给button绑定一个函数,点击button,切换p的上滑与下滑 状态
$('button').click(function () {
$('p').slideToggle();
});
})
4、unload()
为js的unload事件绑定一个处理函数
例子：当离开页面时显示一个提示框
$(window).unload(function () {
return "bye now";
});
事件绑定
1、 bind()
为一个元素绑定一个事件处理程序
bind的基本用法：在p上绑定一个点击事件
$('p').bind('click', function () { alert('user clicked'); })
例子：为段落标签绑定单击事件
<p>ppp </p>
<span></span>
// 点击p将鼠标点击的位置写入span中
// 鼠标移入和移出时改变class样式
$('p').bind('click', function (event) {
$('span').text('clicked:' + event.pageX + ',' + event.pageY);
})
$('p').bind('mouseenter mouseleave', function (event) {
$(this).toggleClass('demo');
})
2、 delegate()
为所有匹配选择器的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素。
例子：点击添加另外一个段落，请注意,delegate()绑定所有段落的click事件，甚至是新的段落。
// delegate()
// 给p点击一个点击事件,每点击一次,就在前一个的后面加一个样式一样的p
$('body').delegate('p', 'click', function () {
$(this).after('<p>new paragraph</p>')
});
3、 off()
移除一个事件处理函数
例子：移除click事件
<p>ppp </p>
<p>移除之后</p>
<button>移除</button>
// ready(),当dom准备好了的时候,就加载背景颜色
$(document).ready(function () {
$('p').on('click', function () {
$(this).css('background-color', 'pink');
});
// 点击button移除click事件之后,就没有事件被绑定
$('button').click(function () {
$('p').off('click');
});
})
- one()
为元素的事件添加处理函数,处理函数在每个元素上每种事件类型最多执行一次
one()和on()是相同的,不同之处在于,对于给定的元素和事件类型,处理程序在第一次触发事件之后会被立即解除绑定
例子:点击任何一个段落,段落的字体大小只会改变一次
// 这里是one,所以这个事件只执行一次,点击效果只一次有效,如果是on绑定事件,正常状态可以点击多次实现效果
$(document).ready(function () {
$('p').one('click', function () {
$(this).animate({
fontSize: "+=6px"});
});
});
- trigger()
trigger()和triggerHandle()不同的是:trigger会触发默认事件
根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为
<input type="text" value="文本">
<button type="button">选中</button>
// 点击button选中input框的文本
$('input').ready(function () {
$('button').click(function () {
$('input').trigger('select');
})
})
- triggerHandle()与trigger方法类似,不同的是trigger会触发事件的默认行为,例如表单的提交.
表单事件
- blur()
当元素失去焦点的时候发生blur事件,该方法通常和focus一起使用
// 当input失去焦点弹出一个提示框
$(document).ready(function () {
$('input').blur(function () {
alert('失去了焦点');
})
})
- focus()方法和blur()方法用法差不多
// 获取焦点的时候,显示提示字
$(document).ready(function () {
$('input').focus(function () {
$('span').css({
'display':'inline',
}).fadeOut(2000);
})
})
- change() 当元素的值改变时发生change事件(仅适用于表单字段)
当输入框的值发生改变的时候,按下enter键或者在点击输入框外部,会弹出一个提示框
$(document).ready(function () {
$('input').change(function () {
alert('文本已经被修改');
})
})
- select()
为js的select事件绑定一个处理函数
例子:当输入框的文本被选中的时候,在div内显示文本
$(document).ready(function () {
$('input').select(function () {
$('div').text('select').show().fadeOut(2000)
})
})
- submit()
当提交表单时,会发生submit事件,该方法只适用于form元素
<form action="505-事件冒泡.html" method="post">
<input type="text">
<input type="text">
<input type="submit" value="提交"/>
</form>
$(document).ready(function () {
$('form').submit(function () {
alert('提交');
});
});
键盘事件
- keydown()和keyup()
与keydown事件相关的事件顺序
* keydown 键被按下的过程
* keypress 键被按下
* keyup 键被松开
例子:按下键盘输入的时候会改变输入框的颜色()
$(document).ready(function () {
$('input').keydown(function () {
$('input').css({
'background-color':'red',
});
});
$('input').keyup(function () {
$('input').css({
'background-color':'green',
})
})
});
- keypress()
例子:计算在input字段内按键次数
var i = 0;
$(document).ready(function () {
$('input').keypress(function () {
$('span').text(i += 1);
})
})
鼠标事件
- click()单次点击 dblclick()双击
2.鼠标的相关事件
$(document).ready(function () {
$('div').mousedown(function () {
$(this).css({
'border':'2px solid blue',
});
}).mouseout(function () {
$(this).css({
'border':'4px solid green',
})
}).mouseover(function () {
$(this).css({
'background':'pink',
})
}).mouseleave(function () {
$(this).css({
'background':'darkgrey',
})
}).mouseenter(function () {
$(this).css({
'background' :'red',
})
}).onmouseup(function () {
$(this).css({
'background' :'blue',
})
})
})
- mousemove()
// 获取鼠标移动的时候,鼠标在页面的位置
$(document).ready(function () {
$(document).mousemove(function (event) {
$('span').text(event.pageX + ',' + event.pageY);
});
});
- focusin()和focusout()
当元素或者在其内的任意元素,获得焦点时就会发生focusin事件
例: 当div元素或者其任意子元素获得焦点时,设置div元素的背景颜色
// focusin()和focusout
$(document).ready(function () {
$('nav.demo').focusin(function () {
$(this).css({
'background' : 'red',
});
});
$('nav.demo').focusout(function () {
$(this).css({
'background' : '#90EE90',
})
})
})
事件对象
1、event.currentTarget
该属性是在事件冒泡阶段内的当前dom元素，通常等于this
$(document).ready(function () {
$('button, div, p').click(function () {
// 因为这里是三个等号,相当于判断,故输出的值hi一个布尔值,event.currentTarget等于this,所以返回true
alert(event.currentTarget === this);
});
});
2、event.data()
包含当前执行的处理程序被绑定时传递到事件方法的可选数据
例：对每个p元素返回通过on方法传递的数据
这里还没懂
$(document).ready(function () {
$('p').each(function (i) {
$(this).on('click',{x:i},function (event) {
// index从0开始的
alert('num:' + $(this).index() + ',' + event.data.x);
});
});
});
3、event.isDefaultPrevented()
检查指定的事件是否调用了preventDefault()
例子：防止链接打开url，并检查preventDefault是否被调用
$(document).ready(function () {
$('nav').click(function(event) {
event.preventDefault();
// 如果被调用则会返回true
alert('是否调用：'+ event.isDefaultPrevented());
});
});
4、 event.pageX和event.pageY
返回鼠标的位置，分别是相对于文档的左边缘和上边缘
例：获取鼠标的位置
$(document).ready(function () {
$(document).mousemove(function (event) {
$('nav').text("x:" + event.pageX +"y:" + event.pageY);
})
})
5、 event.preventDefault()
阻止元素发生默认的行为：例如：当点击提交的时候阻止对表单的提交，阻止一下url的链接。
例子：防止链接打开url
$(document).ready(function () {
$('a').click(function (event) {
event.preventDefault();
});
});
5、event.which 返回指定事件上被按下的鼠标键或者按钮
例子：当你在以上输入框中输入内容时，div 中会陷入输入键的数字码。
$(document).ready(function () {
$('input').keydown(function (event) {
$('div').html('key:' + event.which);
})
})
效果
基础
1、hide()和show()
隐藏被选的元素，与css3的display：none类似，隐藏的元素不会被完全显示，不影响布局
例子：点击按钮隐藏/显示所有的p元素
<p>隐藏/显示的段落</p>
<button type="button" class = "btn1">隐藏</button>
<button type="button" class = "btn2">显示</button>
$(document).ready(function () {
$('.btn1').click(function () {
$('p').hide();
});
$('.btn2').click(function () {
$('p').show();
});
})
2、 toggle()
toggle方法添加两个或者多个函数，以响应被选元素的click事件之间的切换
例子：点击p元素进行颜色切换
<button type="button" class="btn3">toggle</button>
$('.btn3').click(function () {
$('p').toggle(function () {
$(this).css({
'background':'red',
});
});
})
自定义
1、 animate()
该方法通过css样式将元素从一个状态改变为另外一个状态
注意:一般使用"+=" "-="创建相对动画
例子：通过改变元素的高度，对元素应用动画
<button type="button" class="btn4">增加高度</button>
<button type="button" class="btn5">重置高度</button>
<div></div>
$(document).ready(function () {
$('.btn4').click(function () {
$('div').animate({
'height': '300px',
});
});
// 重置
$('.btn5').click(function () {
$('div').animate({
'height': '150px',
});
});
})
2、 delay()
对队列中的下一项执行的设置延迟
例子：隐藏再显示两个div，其中绿色的div在显示之前，有1秒的延迟
<button type="button" class="btn6">delay run</button>
<div class="item1"></div>
<div class="item2"></div>
$(document).ready(function () {
$('.btn6').click(function () {
//slideUp(300),300毫秒后将div收起，800ms进入
$('.item1').slideUp(300).fadeIn(800),
$('.item2').slideUp(300).delay(1000).fadeIn(800);
});
});
3、dequeue()和queue()
dequeue()方法从队列中移除下一个函数，然后执行函数，队列是一个或者多个等待运行的函数，通常和queue方法一起使用
queue()方法显示被选元素上要执行的函数队列
例：从队列中移除下一个函数，然后执行函数
注意：必须保证dequeue()方法在queue()添加的函数之内被调用，简单的说就是必须保证queue()函数内必须有dequeue()
<button type="button" class="btn7">run</button>
<div class="item1"></div>
$(document).ready(function () {
$('.btn7').click(function () {
var item1 = $('.item1');
item1.animate({
'height':'200',
'width':'200',
},'slow');
//执行队列
item1.queue(function () {
//css改变可要可不要，但是dequeue()必须在queue()方法之内
item1.css({
'background' :' pink',
});
item1.dequeue();
});
item1.animate({
'height':'100',
'width':'100',
},'slow');
})
})
4、 finish()
停止当前运行的动画，移除所有排队的动画，并为被选元素完成所有的动画
<button type="button" class="btn8">start</button>
<button type="button" class="btn9">stop</button>
<div class="item1"></div>
$(document).ready(function () {
$('.btn8').click(function () {
$('.item1').animate({
'height':'200'
},2000);
$('.item1').animate({
'width':'200'
},2000);
});
$('.btn9').click(function () {
$('.item1').finish();
});
});
5、 stop()
被选元素停止当前正在运行的动画
原理和finish差不多，不同的是finish会停止当前执行的动画并完成整个动画的过程，而stop就相当于按了暂停键，停止当前动画，点击开始的时候会接着之前动画轨迹进行运动。
渐变
1、 fadeIn 和 fadeOut
in是逐渐改变被选元素的不透明度，从隐藏到可见，即进入的过程
out是从可见到隐藏，即出去的过程
<button type="button" class="btn10">淡入</button>
<button type="button" class="btn11">淡出</button>
<br>
<div class="item2"></div>
$('.btn10').click(function () {
$('.item2').fadeIn(1000);
});
$('.btn11').click(function () {
$('.item2').fadeOut(1000);
})
2、 fadeToggle()
可以在fadeIn和fedeOut之间切换，如果元素已经淡出，则元素会被添加上淡出的效果，反之一样。
<button type="button" class="btn12">淡入/淡出</button>
<div class="item1"></div>
// 点击按钮,会自动判断当前元素的淡入淡出状态
$(document).ready(function () {
$('.btn12').click(function () {
$('.item1').fadeToggle(3000);
})
})
3、fadeTo()
允许渐变为给定的不透明度（0，1）
<button type="button" class="btn13">颜色变淡</button>
<br>
<div class="item2"></div>
<div class="item1"></div>
$(document).ready(function () {
$('.btn13').click(function () {
$('.item1').fadeTo('1000', 0.45);
$('.item2').fadeTo('2000', 0.15);
})
})
滑动
1、 slideDown()和slideUp()
down:以滑动的方式显示被选元素，放出展示
up:以滑动的方式隐藏被选元素，收起隐藏
<button type="button" class="btn14">隐藏</button>
<button type="button" class="btn15">显示</button>
<br>
<div class="item1"></div>
$(document).ready(function () {
$('.btn14').click(function () {
$('.item1').slideUp(2000);
});
$('.btn15').click(function () {
$('.item1').slideDown(2000);
});
})
2、slideToggle()
在被选元素上进行slideUp和slideDown之间进行切换
<button type="button" class="btn16">隐藏/显示</button>
$(document).ready(function () {
$('.btn16').click(function () {
$('.item1').slideToggle(1000);
});
});
