jquery的api以及⽤法总结-数据操作事件数据
1. .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);
2. .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);
操作jquery在线教程外包
拷贝
.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插⼊、包裹
1. .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>")
2. 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>")
3. 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插⼊，内部插⼊
1. append()
在每个匹配元素⾥⾯的末尾处插⼊参数内容
// 在div内插⼊p
$('div').append($('b'));
2. appendTo()
将匹配的元素插⼊到⽬标元素的最后⾯
<b>hello</b>
<div class="demo"></div>
// 将p插⼊到div内
$('b').appendTo($('.demo'));
3. 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'));
5. prependTo()
将所有元素插⼊到⽬标前⾯（元素内）
<b>hello</b>
<div class="demo">123</div>
// 将b插⼊到div内
$('b').prependTo($('.demo'));
6. 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) {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。