欢迎光临
我的个人博客网站

JQuery总结

目录

一、jQuery介绍

1、jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

2、jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“

jQuery引入

首先需要jQuery官网下载jQuery的文件,然后在HTML文件中引入这个文件,就可以使用这个文件中帮我们提供的jquery的接口了。

<script src="jQuery.js"></script> 

二、jQuery对象和DOM对象

jQuery 找到的标签对象称为 ——> jQuery对象

原生 JS 找到的标签对象称为 ——> DOM对象

DOM对象只能使用DOM对象的方法,不能使用jQuery对象的方法

jQuery对象也是,它不能使用DOM对象的方法

我们在声明一个jQuery对象变量的时候在变量名前面加上$:

var $variable = jQuery对像; var variable = DOM对象; 

jQuery对象转成DOM对象,通过一个jQuery对象+[0]索引零,就变成了DOM对象,就可以使用JS的代码方法了,DOM对象转换成jQuery对象:$(DOM对象),通过$符号包裹一下就可以了

$variable[0]; 

DOM 对象和 jQuery 对象互相转换:

jQuery对象转DOM对象 ——> jQuery对象[0]  示例:$('#d1')[0] DOM对象转jQuery对象 ——> $(dom对象) 

三、jQuery选择器

不管找什么标签,用什么选择器,都必须要写$(“”),引号里面再写选择器,通过jQuery找到的标签对象就是一个jQuery对象,用原生JS找到的标签对象叫做DOM对象

选择器找到的可能是多个标签,会放到数组里面,但还是jquery对象,能够直接使用jquery的方法,意思是找到的所有标签进行统一设置,如果要单独设置选中的所有标签中的某个标签,可以通过索引取值的方式找到,然后注意,通过索引取值拿到的标签,是个dom对象

基本选择器

和css一样

id选择器: $("#id");  标签选择器: $("tagName");  class选择器: $(".className");  配合使用: $("div.c1");  	// 找到有c1 class类的div标签  所有元素选择器: $("*");  组合选择器: $("#id, .className, tagName"); 

层级选择器

和css一样

x 和 y 可以为任意选择器

$("x y");		// x 的所有后代 y(子子孙孙) $("x > y");		// x 的所有儿子 y(儿子) $("x + y");		// 找到所有紧挨在 x 后面的 y $("x ~ y");		// x 之后所有的兄弟 y 

基本筛选器

选择之后进行过滤筛选

方式一:

:first 		// 第一个 :last 		// 最后一个 :eq(index)	// 索引等于index的那个元素 :even 		// 匹配所有索引值为偶数的元素,从 0 开始计数 :odd 		// 匹配所有索引值为奇数的元素,从 0 开始计数 :gt(index)	// 匹配所有大于给定索引值的元素 :lt(index)	// 匹配所有小于给定索引值的元素 :not(元素选择器)	// 移除所有满足not条件的标签 :has(元素选择器)	// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)   // 找到所有后代中有h1标签的div标签,意思是首先找到所有div标签,把这些div标签的后代中有h1的div标签筛选出来 $("div:has(h1)") // 找到所有后代中有c1样式类(类属性class='c1')的div标签 $("div:has(.c1)")  $("li:not(.c1)")		// 找到所有不包含c1样式类的li标签 $("li:not(:has(a))")	// 找到所有后代中不含a标签的li标签  例子: <ul>     <li id="1">上海</li>     <li id="2">成都</li>     <li id="3">泸州</li>     <li id="4">雅安</li>     <li id="5">北京</li> </ul>  $('li:first');	// 查找所有li标签中的第一个标签 

方式二:

和前面使用冒号的一样 :first等,只不过冒号的那个是写在选择器里面的,而下面的这几个是方法

.first() 	// 获取匹配的第一个元素 .last() 	// 获取匹配的最后一个元素 .not() 		// 从匹配元素的集合中删除与指定表达式匹配的元素 .has() 		// 保留包含特定后代的元素,去掉那些不含有指定后代的元素。 .eq() 		// 索引值等于指定值的元素  $('li').first();	// 查找所有li标签中的第一个标签 

属性选择器

[attribute] [attribute=value]		// 属性等于 [attribute!=value]		// 属性不等于   例子:多用于input标签 <input type="text"> <input type="password"> <input type="checkbox">      $("input[type='checkbox']");	// 取到checkbox类型的input标签 $("input[type!='text']");		// 取到类型不是text的input标签  

表单筛选器

多用于找form表单里面出现的input标签

找到的是type属性为这个值的input标签中

:text :password :file :radio :checkbox :submit :reset :button  例子:多用于input标签 <input type="text"> <input type="password"> <input type="checkbox">      $(':password')	// 找到input标签中type属性为password的标签 

表单对象属性筛选器

:enabled	// 可用的标签 :disabled	// 不可用的标签 :checked	// 选中的input标签 :selected	// 选中的option标签  例子1: <input type="text" disabled="disabled"> <input type="password"> $("input:enabled")  	// 找到可用的input标签  例子2: <select id="s1">   <option value="1">北京</option>   <option value="2">四川</option>   <option selected value="3">云南</option>	// 默认选中   <option value="4">深圳</option> </select> $(":selected")  	// 找到所有被选中的option 

筛选器方法

选择器或者筛选器选择出来的都是对象,而筛选器方法其实就是通过对象来调用一个进一步过滤作用的方法,写在对象后面加括号,不再是写在选择器里面的了。

下一个:

$('#l3').next();  			// 找到下一个兄弟标签 $('#l3').nextAll(); 		// 找到下面所有的兄弟标签 $('#l3').nextUntil('#l5');	// 往下直到找到id为l5的标签,不包含它  

上一个:

$("#id").prev()				// 找到上一个兄弟标签 $("#id").prevAll()			// 找到上面所有的兄弟标签 $("#id").prevUntil("#i2")	// 往上直到找到id为i2的标签,不包含它  

父亲元素:

$("#id").parent()	// 查找当前元素的父亲元素 $("#id").parents()  // 查找当前元素的所有的父辈元素(爷爷辈、祖先辈都找到) $("#id").parentsUntil('body')  // 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止,这里直到body标签,不包含body标签,基本选择器都可以放到这里面使用。  

儿子和兄弟元素:

$('ul').children(); 		// 找到当前标签的所有儿子标签 $('ul').children('#l3');  	// 找到符合后面这个选择器的儿子标签  $('#l5').siblings();		// 找到兄弟们,不包含自己 $('#l5').siblings('#l3'); 	// 找到符合后面这个选择器的兄弟标签  

查找:find

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

$('ul').find('#l3');  --> 类似于  $('ul #l3')  

过滤:filter

和find不同,find是找div标签的子子孙孙中找到一个符合条件的标签

// 从结果集中过滤出有c1样式类的,从所有的div标签中过滤出有class='c1'属性的div ('li').filter('.l3');  

四、标签操作

样式操作

样式类操作:

addClass();		// 添加指定的CSS类名。 removeClass();	// 移除指定的CSS类名。 hasClass();		// 判断样式存不存在 toggleClass();	// 切换CSS类名,如果有就移除,如果没有就添加。 

例子:

$('div.c1').addClass('c2'); $('div.c1').removeClass('c2'); $('div.c1').hasClass('c2'); $('div.c1').toggleClass('c2'); 

CSS样式:

// 原生js 标签.style.backgroundColor = 'black';  // jQuery $('.c1').css('background-color','red');   // 同时设置多个css样式 $('.c1').css({'background-color':'yellow','width':'200px'}) 

位置操作:

.offset()方法允许我们检索一个元素相对于文档(document)的当前位置。

.position()的差别在于: .position()获取相对于它最近的具有相对位置(position: relative 或 position: absolute)的父级元素的距离,如果找不到这样的元素,则返回相对于浏览器界面左上角的距离。

offset()	// 获取匹配元素在当前窗口的相对偏移或设置元素位置 position()	// 获取匹配元素相对父元素的偏移,不能设置位置 $(window).scrollTop();  	// 滚轮向下移动的距离 $(window).scrollLeft(); 	// 滚轮向左移动的距离  // 查看位置 $('.c2').position();  // 查看相对于父级元素位置 $('.c2').offset();    // 查看距离窗口左上角的绝对位置  // 设置位置 $('.c2').offset({'top':'20','left':'40'}); 

尺寸操作:

// 与盒子模型相关 $('.c1').height();  	// content 高度 $('.c1').width();   	// content 宽度 $('.c1').innerHeight();	// content 高度 + padding高度 $('.c1').innerWidth(); 	// content 宽度 + padding宽度 $('.c1').outerHeight();	// content 高度 + padding高度 + border高度 $('.c1').outerWidth();	// content 宽度 + padding宽度 + border宽度  

文本操作

HTML:

html()		// 取得第一个匹配元素的html内容,包含标签内容 html(val)	// 修改所有匹配元素的html内容,识别标签,能够表现出标签的效果  

文本值:

text()		// 取得所有匹配元素的内容,只有文本内容,没有标签 text(val)	// 修改所有匹配元素的内容,不识别标签,将标签作为文本插入进去  

例子:

$('.c1').text('<h3>hello Word</h3>'); $('.c1').html('<h3>hello Word</h3>');  

值操作

val()		// 取得第一个匹配元素的当前值 val(val)	// 修改所有匹配元素的值 val([val1, val2])	// 修改多选的checkbox、多选select的值  

实例一:获取值

<input type="text" class="c1">  ————>获取值:$('.c1').val();  <input type="checkbox" value="1"> // 获取被选中的值这样是不行的:$(':checkbox:checked').val(); // 需要循环取值 var d = $(':checkbox:checked'); for (var i=0;i<d.length;i++){     console.log(d.eq(i).val()); }  单选select ---> $('#city').val(); 多选select ---> $('#author').val(); 	// ["2", "3"]	  

实例二:设置值

<input type="text" class="c1">  ——>设置值:$('.c1').val('小杨');  <input type="checkbox" value="1">	——>设置值:$(':checkbox').val([1,3]); // 如果直接:$(':checkbox').val(1);这样的话会把所有的的value全部设置为1  单选select ---> $('#city').val('1'); // 或者——> option value='1' 多选select ---> $('#author').val(['2','3']);  

属性操作

用于ID自带属性等或自定义属性:

attr(attrName)				// 返回第一个匹配元素的属性值 attr(attrName, attrValue)	// 为所有匹配元素设置一个属性值 attr({k1: v1, k2:v2})		// 为所有匹配元素设置多个属性值 removeAttr(attrName)		// 从每一个匹配的元素中删除一个属性 

用于checkbox和radio

prop() 		// 获取属性 

实例:

// 设置单个属性 $('.c1').attr('id','d1');  // 设置多个属性 $('.c1').attr({name:'xiao',id:'d1'});  // 查看属性 $('.c1').attr('属性名');  // 删除属性 $('.c1').removeAttr('属性名');   // prop ——> 针对的是checkedselecteddisabled // 查看标签是否有checked属性,也就是是否被选中 attr ————> $(':checked').attr('checked');	// 返回:选中(checked),没选中(undefined) prop ————> $(':checked').prop('checked'); 	// 返回:选中(true),没选中(false)  // 通过设置属性的方式来设置是否选中: $(':radio').eq(2).prop('checked',true);  	// true和false不能加引号 $(':radio').eq(2).prop('checked',false); 

prop和attr的区别:

attr全称attribute(属性)

prop全称property(属性)

虽然都是属性,但他们所指的属性并不相同,attr所指的属性是HTML标签属性,而prop所指的是DOM对象属性,可以认为attr是显式的,而prop是隐式的。

简单总结:

1、对于标签上有的能看到的属性和自定义属性都用attr

2、对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。

具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()

文档操作

添加到指定元素–内部的后面

$(A).append(B)		// 把B追加到A $(A).appendTo(B)	// 把A追加到B  实例: // 添加字符串照样能识别标签 $('#d1').append('<a href="http://www.jd.com">京东</a>');  

添加到指定元素–内部的前面

$(A).prepend(B)		// 把B前置到A $(A).prependTo(B)	// 把A前置到B  实例: // 添加字符串照样能识别标签 $('#d1').perpend('<a href="http://www.jd.com">京东</a>');  

添加到指定元素–外部的后面

$(A).after(B)		// 把B放到A的后面 $(A).insertAfter(B)	// 把A放到B的后面  实例: // 添加字符串照样能识别标签 $('#d1').after('<a href="http://www.jd.com">京东</a>');  

添加到指定元素–外部的前面

$(A).before(B)			// 把B放到A的前面 $(A).insertBefore(B)	// 把A放到B的前面  

移除和清空元素

remove()	// 从DOM中删除所有匹配的元素。 empty()		// 删除匹配的元素集合中所有的子节点,包括文本被全部删除,但是匹配的元素还在  实例: $('div').remove();	// 移除div标签 $('div').empty();	// 清空div标签中的所有内容  

替换

replaceWith() replaceAll()  实例: var a = document.createElement('a') a.href = 'http://www.baidu.com'; a.innerText = '百度';  // 写法不一样效果一样 $('div').replaceWith(a);		// 将所有的div标签替换成a标签 $(a).replaceAll('div');			// 将所有的div标签替换成a标签  

克隆

clone()		// 克隆    实例: <button class="btn">按钮</button>  <script>     $('.btn').click(function (){         // var a = $(this).clone(); 	// 克隆标签         var a = $(this).clone(true);	// 连带事件一起克隆         $(this).after(a)     })  </script> 

五、事件

事件绑定方式

方式一:

<style> .c1{     height: 100px;     width: 100px;     background: red; } </style>  <div class="c1"></div>  <script>     $('.c1').click(function () {         $(this).css({backgroundColor:'green'})     }) </script> 

方式二:

<style> .c1{     height: 100px;     width: 100px;     background: red; } </style>  <div class="c1"></div>  <script>     $('.c1').on('click', function () {         $(this).css({backgroundColor:'green'})     }) </script> 

常用事件

click(function(){...})		// 左键点击的事件 hover(function(){...})		// 鼠标悬浮触发的事件 blur(function(){...})		// 失去光标(焦点)触发的事件 focus(function(){...})		// 获取光标触发的事件 change(function(){...}) 	// 内容发生变化,input,select等 keyup(function(){...}) 		// 键盘抬起触发的事件 keydown(function(){...})	// 键盘按下触发的事件  

**左键点击的事件:click **

$('.c1').click(function () { 	$(this).css({backgroundColor:'green'}) })  

获取光标触发的事件:focus —— 失去光标(焦点)触发的事件:blur

<style>     .c1{         height: 100px;         width: 100px;         background: red;     } </style>  <div class="c1" ></div> <input type="text">  <script>     $('[type="text"]').focus(function () {			// 获取光标事件         $('.c1').css({backgroundColor:'green'})     })      $('[type="text"]').blur(function () {			// 失去光标事件         $('.c1').css({backgroundColor:'red'})     }) </script>  

域内容发生改变时触发的事件:change ——内容发生变化,input,select等

<select name="" id="d1">     <option value="1">成都</option>     <option value="2">北京</option>     <option value="3">上海</option> </select>  <script>     $('#d1').change(function () {	         console.log($(this).val())     }) </script>  

input 实时监听事件:只要input框里面的值发生变化就触发某个事件,input事件不能直接绑定,必须用on绑定才行

<input type="text" id="d1">  <script>     $('#d1').on("input", function () {         console.log($(this).val())     }) </script>  

鼠标悬浮触发的事件:hover

<style>     .c1{         height: 100px;         width: 100px;         background: red;     } </style>  <div class="c1"></div>  <script>     $('.c1').hover(         // 第一步:鼠标放上去         function () {$(this).css({backgroundColor: 'yellow'});},         // 第二步:鼠标移走         function () {$(this).css({backgroundColor: 'red'});}     ) </script>  

鼠标悬浮触发的事件:mouseenter、mouseout——等同于hover

mouseover 和 mouseenter 的区别是:mouseover事件是如果该标签有子标签,那么移动到该标签或者移动到子标签时会连续触发,mmouseenter事件不管有没有子标签都只触发一次,表示鼠标进入这个对象

<style>     .c1{         height: 100px;         width: 100px;         background: red;     } </style>  <div class="c1"></div>  <script>     // 第一步:鼠标放上去     $('.c1').mouseenter(function () {         $(this).css({backgroundColor: 'yellow'})     })     // 第二部:鼠标移走     $('.c1').mouseout(function () {         $(this).css({backgroundColor: 'red'})     }) </script>  

键盘按下触发的事件:keydown

$(window).keydown(function (e) {     console.log(e.keyCode); 	//每个键都有一个keyCode值,通过不同的值来触发不同的事件 }) 

键盘抬起触发的事件:keyup

$(window).keyup(function (e) {     console.log(e.keyCode); }) 

移除事件:. off

.off( events [, selector ][,function(){}])  1.events: 事件 2.selector: 选择器(可选的) 3.function: 事件处理函数   off() 方法移除用 .on()绑定的事件处理程序。 $("li").off("click");就可以了  

事件冒泡

冒泡的意思就是因为HTML可以嵌套,如果你给儿子标签绑定了事件或者没有绑定点击事件,父级标签绑定了点击事件,那么你一点击子标签,不管子标签有没有绑定事件,都会触发父级标签的点击事件,如果有,会先触发子标签的点击事件,然后触发父级标签的点击事件,不管子标签有没有点击事件,都会一级一级的往上找点击事件

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style>         #d1{             background-color: red;             height: 200px;         }         #d2{             background-color: green;             height: 100px;             width: 100px;         }     </style>  </head> <body>  <div id="d1">     <div id="d2"></div> </div>  <script src="jquery.js"></script> <script>     $('#d1').click(function () {         alert('父级标签');     });     $('#d2').click(function () {         alert('子级标签');     }); </script>  </body> </html> 

阻止事件冒泡

就是为了阻止后续事件发生

1、return false;

$('#d1').click(function () {     alert('父级标签'); }); $('#d2').click(function () {     alert('子级标签');     return false }); 

2、e.stopPropagation( );

用事件对象的这个方法就能阻止冒泡 (Propagation:传递的意思)

$('#d1').click(function () {     alert('父级标签'); }); $('#d2').click(function (e) {	// 这个参数e(只是个形参)表示当前事件本身,这个事件也是一个对象     alert('子级标签');     e.stopPropagation(); }); 

事件委托

事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件,给未来将要添加进来的某些子标签自动绑定上事件。

例一:没有事件委托,只有第一个按钮可以触发事件,其他新添加的按钮虽然 class=c1 但是不能触发事件

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> </head> <body>  <div class="cc">     <button class="c1">添加按钮</button> </div>  <script src="jQuery.js"></script> <script>     $('.c1').click(function () {         var btn = document.createElement("button");		// 新建button标签         btn.innerText = '添加按钮';	         btn.className = 'c1'		// 给新标签添加class=c1         $(this).after(btn);			// 把新标签放在自己的后面     }) </script> </body> </html> 

列二:设置事件委托,每个新增按钮都可以触发事件

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title> </head> <body>  <div class="cc">     <button class="c1">添加按钮</button> </div>  <script src="jQuery.js"></script> <script>          // 将 'button.c1' 选择器中的标签的点击事件委托给了 $('div.cc')     $('div.cc').on('click','button.c1',function () {         var btn = document.createElement("button");         btn.innerText = '添加按钮';         btn.className = 'c1'         $(this).after(btn);     }) </script> </body> </html> 

六、补充

页面载入

JS 代码写到head标签和写道 body 标签下面的作用是不同的,写在 head 标签里面的话,如果你写了操作某个标签的内容的话,那个标签还没加载出来,先加载了你的 JS 代码,就找不到这个标签,所以不会生效,所以写在 body 标签最下面是一种解决办法,但还有另外两种方法:

方法一 :等页面上所有的元素都加载完,在执行这里面的 JS 代码

缺点:如果你自己写了两个 JS 文件,每个 JS 文件中都有一个 window.onload 的话,那么后引入的文件会把前面引入的文件的 window.onload 里面的 JS 代码全部覆盖掉,也会等到页面上的文档、图片、视频等所有资源都加载完才执行里面的 JS 代码,加载比较慢

window.onload=function(){     // JS的代码 } 

方法二(推荐):不存在覆盖问题,而且只要文档加载完就触发,不需要等着一些图片视频什么的,加载 JS 效果的速度快。

// 写法一: $(document).ready(function(){ 	// JS的代码 })  // 写法二:简写 $(function(){ 	// JS代码 }) 

$(document).ready 与 window.onload( ) 的区别

1、window.onload() 函数有覆盖现象,必须等待着图片资源加载完成之后才能调用

2、$(document).ready 的这个入口函数没有函数覆盖现象,文档加载完成之后就可以调用(建议使用此函数)

动画效果

基本动画

show()	--> $('.c1').show(5000)	// 5秒之后显示这个标签,显示过程有个动画 hide()	--> $('.c1').hide(5000)	// 5秒之后这个标签消失,消失过程有个动画 

滑动(拉窗帘一样)

slideDown()		--> $('.c1').slideDown(5000) slideUp()		--> $('.c1').slideUp(5000) slideToggle()	--> $('.c1').slideToggle(5000)	// 前两个互相切换 

淡入淡出(控制透明度)

fadeIn()		-->$('.c1').fadeIn(5000) fadeOut()		-->$('.c1').fadeOut(5000) fadeTo()		-->$('.c1').fadeTo(5000,0.2)	// 0.2是最后显示透明度 fadeToggle()	-->$('.c1').fadeToggle(5000)	// 前两项互相切换 

each 循环

$.each (可迭代对象,function (k,v) { 迭代结果操作 } )

function 里面可以接受两个参数,K 是索引,V 是每次循环的具体元素。

实例一:获取选中的值 <input type="checkbox" value="1">一 <input type="checkbox" value="2">二 <input type="checkbox" value="3">三 <input type="checkbox" value="4">四 <input type="checkbox" value="5">五  $.each($(':checkbox:checked'),function(k,v){     console.log(k,v.value); })  // 输出 0 "2" 1 "4" 2 "5"  实例二: var li =[10,20,30,40] $.each(li,function(k, v){     console.log(k, v); })  // 输出 0 10 1 20 2 30 3 40 

.each ( function (k,v) { 迭代结果操作 } )

描述:遍历一个jQuery对象,为每个匹配元素执行一个函数。

K 是索引,V 是每次循环的具体元素。

// 由于回调函数是在当前DOM元素为上下文的语境中触发的,所以关键字 this 总是指向这个元素。 // 为每一个li标签加class $("li").each(function(){   $(this).addClass("c1"); }); 

注意: jQuery的方法返回一个jQuery对象,遍历jQuery集合中的元素 — 被称为隐式迭代的过程。当这种情况发生时,它通常不需要显式地循环的 .each()方法:

也就是说,上面的例子没有必要使用each()方法,直接像下面这样写就可以了:

$("li").addClass("c1");  	// 对所有标签做统一操作 

终止 each 循环

在遍历过程中可以使用 return false提前结束each循环。

而直接使用return后面什么都不加,不写false,就是跳过本次循环的意思。

JS 和 jQuery 中的 for 循环也是通过他们两个来跳出当此循环或者终止循环

实例一:return false var a = [1,2,3,4,5,6,7,8] $.each(a, function(k,v){     if (v > 3){			// 大于3就结束循环         return false;     }else{         console.log(v);     } });  // 输出 1 2 3  实例二:return var a = [1,2,3,4,5,6,7,8] $.each(a, function(k,v){     if (v > 2 && v < 7){	// 在2-7之间的数字就跳过循环         return false;     }else{         console.log(v);     } });  // 输出 1 2 7 8 

.data( ) 方法

任意 jQuery 对象都有 data 方法,可以保存任意值,可以用来代替全局变量

.data(key, value):设置值

描述:在匹配的元素上存储任意相关数据。

$("div").data("age",18);	//给所有div标签都保存一个名为age,值为18 

.data(key):取值,没有的话返回undefined

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值

$("div").data("age");		//返回第一个div标签中保存的"age"的值 

可以保存标签

$('div.c1').data('a标签',$('a.c2')); $('.c1').data('a标签').text();	-->百度 

.removeData(key):删除

描述:移除存放在元素上的数据,不加key参数表示移除所有保存的数据。

$('.c1').removeData('a标签');		// 移除元素上存放’a标签‘对应的数据 
赞(0) 打赏
未经允许不得转载:张拓的天空 » JQuery总结
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏