JQuery基础
Posted zdqc
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery基础相关的知识，希望对你有一定的参考价值。
1.jquery介绍
1.jQuery是一个轻量级的、兼容多浏览器的javascript库。
2.jQuery使用户能够更方便地处理html Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“
jq的内容
- 选择器
- 筛选器
- 样式操作
- 文本操作
- 属性操作
- 文档处理
- 事件
- 动画效果
- 插件
- each、data、Ajax
2.jquery引入
下载链接：jQuery官网 https://jquery.com/
中文文档：jQuery AP中文文档
<script src="jquery.js"></script>jquey方法找到的标签对象称为jquery对象
原生js找到的标签对象称之为DOM对象
dom对象只能调用dom对象的方法,jquery对象只能用jquery方法,不能互通
jquery对象和dom对象互相转换
jQuery对象转成DOM对象
$('#d1')[0] -- dom对象dom对象转换为jquery对象
$(dom对象) -- jquery对象3.基础选择器
不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器
id选择器：$("#id")
标签选择器：$("tagName")
class选择器：$(".className")
配合使用：$("div.c1") // 找到有c1 class类的div标签
所有元素选择器：$("*")
组合选择器$("#id, .className, tagName")4.层级选择器
x和y可以为任意选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y5.基本筛选器
:first // 第一个
:last // 最后一个
:eq(index) // 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 1 开始计数
:gt(index) // 匹配所有大于给定索引值的元素
:lt(index) // 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)示例写法:
$("div:has(h1)")// 找到div下所有后代中有h1标签的div标签，
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签6.简单绑定事件
// 绑定事件的方法
$('#btn').click(function ()
$('.mode,.shadow').removeClass('hide');
$('.mode,.shadow').addClass('hide');
)7.属性选择器
[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标签8.表单筛选器
多用于找form表单里面出现的input标签，当然通过属性选择器找肯定也是没问题的，这样就是写着简单一些
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button 简单示例:
找到type为text的input标签:$(‘:text‘)
<div>用户名: <input type="text"></div>
<div>密码: <input type="password"></div>
<div>
sex:
<input type="radio" name="sex">男
<input type="radio" name="sex">女
<input type="radio" name="sex">不详
</div>9.表单对象属性
:enabled #可用的
:disabled #不可用的
:checked #默认
:selected #下拉框示例:
<select name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
操作:
找到可以用的标签 -- $(‘:enabled‘)
找select标签被选中的option标签 $(‘:selected‘)
10.筛选器方法
下,上元素
$("#id").next() #下
$("#id").nextAll()
$("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含它
$("#id").prev() #上
$("#id").prevAll()
$("#id").prevUntil("#i2")举例
<ul>
<li>1</li>
<li>2</li>
<li class="c1">3</li>
<li>4</li>
<li>5</li>
<li class="c2">6</li>
<li>7</li>
</ul>
示例:
$('li:first').next() 找到第一个标签的下一个标签
$('.c2').prevUntil('.c1')父元素
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用儿子和兄弟元素：
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选查找find,找的是后代
$("div").find("p") -- 等价于$("div p")
筛选filter
$("div").filter(".c1") -- 等价于 $("div.c1") // 从结果集中过滤出有c1样式类的，从所有的div标签中过滤出有class='c1'属性的div，和find不同，find是找div标签的子子孙孙中找到一个符合条件的标签
方法:(同:)
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
11.类操作
addClass(); // 添加指定的CSS类名。
removeClass(); // 移除指定的CSS类名。
hasClass(); // 判断样式存不存在
toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。
$('.mode,.shadow').removeClass('hide');
12.css操作
单个方式:
$('div').css('background-color','green');
多个方式:
$('div').css('backgroundcolor':'yellow','width':'400px');
13.位置操作
offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置
position() //获取匹配元素相对父元素的偏移，不能设置位置 相对位置
offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和 position()的差别在于position()获取相对于它最近的具有相对位置(position:relative或position:absolute)的父级元素的距离，如果找不到这样的元素，则返回相对于浏览器的距离
示例:
$('.c2').offset(); 查看位置
$('.c2').offset(top:100,left:200); 设置位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body
margin: 0;
.c1
background-color: red;
height: 100px;
width: 100px;
display: inline-block;
.c2
background-color: green;
height: 100px;
width: 100px;
display: inline-block;
</style>
</head>
<body>
<div class="cc">
<div class="c1"></div><div class="c2"></div>
</div>
<script src="jquey.js"></script>
</body>
</html>$(window).scrollTop() //滚轮向下移动的距离
$(window).scrollLeft() //滚轮向左移动的距离
滚动例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1,.c3
background-color: red;
height: 500px;
width: 200px;
.c2
background-color: green;
height: 500px;
width: 200px;
#back_top
height: 40px;
width: 80px;
position: fixed;
right: 40px;
bottom: 40px;
background-color: black;
text-align: center;
line-height: 40px;
#back_top a
color:white;
text-decoration: none;
.hide
display: none;
</style>
</head>
<body>
<a name="xxx">这是顶部位置</a>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<span id="back_top" class="hide">
<a href="#xxx">回到顶部</a>
</span>
</body>
<script src="jquery.js"></script>
<script>
$(window).scroll(function ()
if ($(window).scrollTop() >= 200)
$('#back_top').removeClass('hide');
else
$('#back_top').addClass('hide');
)
</script>
</html>
14.尺寸
height() //盒子模型content的大小，就是我们设置的标签的高度和宽度
width()
innerHeight() //内容content高度 + 两个padding的高度
innerWidth()
outerHeight() //内容高度 + 两个padding的高度 + 两个border的高度，不包括margin的高度，因为margin不是标签的，是标签和标签之间的距离
outerWidth()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1
width: 100px;
height: 100px;
padding: 20px 30px;
border: 2px solid red;
</style>
</head>
<body>
<div class="c1"></div>
</body>
<script src="jquery.js"></script>
</html>
操作:
$('.c1').height();
$('.c1').width();
$('.c1').innerWidth();
$('.c1').outerWidth();15.文本操作
html()// 取得第一个匹配元素的html内容，包含标签内容
html(val)// 设置所有匹配元素的html内容，识别标签，能够表现出标签的效果
text()// 取得所有匹配元素的内容，只有文本内容，没有标签
text(val)// 设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去
示例:
取值
$('.c1').html();
$('.c1').text();
设置值
$('.c1').text('<a href="">百度</a>');
$('.c1').html('<a href="">百度</a>');
16.值操作
文本输入框:
$('#username').val();
$('#username').val('xxx');
input,type=radio单选框:
$('[type="radio"]:checked').val();
#首先找到被选中的标签,再进行取值
$(':radio').val(['1']) 找到所有的radio,然后通过val设置值,达到一个选中的效果.
给单选或者多选框设置值的时候,只要val方法中的值和标签的value属性对应的值相同时,那么这个标签就会被选中.
此处有坑:$(':radio').val('1');这样设置值,不带中括号的,意思是将所有的input,type=radio的标签的value属性的值设置为1.
input,type=checkbox多选框:
通过val方法不能直接获取多选的值,只能拿到一个,想拿到多个项的值,需要循环取值
var d = $('[type="checkbox"]:checked');
for (var i=0;i<d.length;i++)
console.log(d.eq(i) .val());
$(':checkbox').val(['1','2']); #只加一个也要加[]
下拉框
单选下拉框select: -- $('#s1').val();
多选下拉框select: -- $('#s2').val(); -- ['1','2']
单选下拉框select: -- $('#s1').val(['3']);
多选下拉框select: -- $('#s2').val(['1','2']);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cc
color: red;
</style>
</head>
<body>
用户名:
<input type="text" id="i1"><span id="bj" class="cc"></span>
<br>
密码:
<input type="password" id="i2"><span id="jg" class="cc"></span>
<br>
<button>提交</button>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$('button').click(function ()
var a = $('#i1').val()
var b = $('#i2').val()
if (a.length === 0)
$('#i1').siblings('#bj').text("用户名禁止为空")
if (b.length === 0)
$('#i2').siblings('#jg').text("密码不能为空")
)
</script>
</html>
17.属性操作
设置属性: -- $('#d1').attr('age1':'18','age2':'19');
单个设置: --$('#d1').attr('age1','18');
查看属性值: -- $('#d1').attr('age1');
删除属性: -- $('#d1').removeAttr('age1'); 括号里面写属性名称prop和attr方法的区别:
1.对于标签上有的能看到的属性和自定义属性都用attr
2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
3.prop具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()举例
attr():
查看值,checked 选中--'checked' 没选中--undefined
$('#nv').attr('checked':'checked');
设置值,attr无法完成取消选中
$('#nv').attr('checked':'undefined');
$('#nv').attr('checked':undefined);
prop():
查看值,checked 选中--true 没选中--false
$(':checkbox').prop('checked');
设置值:
$(':checkbox').prop('checked',true); #全选
$(':checkbox').prop('checked',false); #全部取消<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button class="all">全选</button>
<button class="res">反选</button>
<button class="xxx">取消</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td ><input type="checkbox"></td>
<td>zbb</td>
<td>linux,python</td>
</tr>
</tbody>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>zxy</td>
<td>me</td>
</tr>
</tbody>
</table>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$('.all').click(function ()
$(':checkbox').prop('checked',true);
);
$('.xxx').click(function ()
$(':checkbox').prop('checked',false);
);
$(".res").click(function ()
var all =$(':checkbox');
for (var i=0;i<all.length;i++)
// 获取原来的选中与否的状态
var status = $(all[i]).prop('checked');
$(all[i]).prop('checked', !status);
);
</script>
</html>
18.文档处理
1.添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
例子:创建标签
方式1:
var a = document.createElement('a');
$(a).text('百度');
$(a).attr('href','http://www.baidu.com');
$('#d1').append(a);
方式2:(重点)
$('#d1').append('<a href="xx">京东</a>');
appendto示例
$(a).appendTo('#d1');
2.添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
3.添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
4.添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
5.移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还在
$('#d1').remove();
$('#d1').empty();
6.替换
replaceWith()
replaceAll()
例子:
$('#d1').replaceWith(a); #用a替换前面的标签
$(a).replaceAll('#d1');
7.克隆(复制标签)
clone()// 参数，看下面的示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>宝刀屠龙</title>
</head>
<body>
<button class="btn">点击抽奖,再来一把</button>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$('.btn').click(function ()
var btnn = $(this).clone(true);
//true 可以复制事件
$(this).after(btnn)
)
</script>
</html>
19.事件绑定
绑定事件的两种方式:
$("#d1").click(function ()
$(this).css('background-color','green');
)
// 方式2
$('#d1').on('click',function ()
$(this).css('background-color','green');
)
20.常用事件
click(function()...) #点击
hover(function()...) #悬浮
blur(function()...) #获取光标触发事件
focus(function()...) #失去光标触发事件
change(function()...) #域内容发生变化，input，select等
keyup(function()...) #kedown键盘按键操作
mouseover 和 mouseenter的区别是：
mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，
mmouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1
background-color: red;
height: 200px;
width: 200px;
#d2
background-color: green;
height: 200px;
width: 200px;
.dd1
background-color: yellow;
height: 40px;
width: 40px;
.dd2
background-color: pink;
height: 40px;
width: 40px;
</style>
</head>
<body>
<div id="d1">
<div class="dd1"></div>
</div>
<div id="d2">
<div class="dd2"></div>
</div>
用户名:<input type="text" id="username">
<br>
<!--<select name="" id="s1">-->
<!-- <option value="1">上海</option>-->
<!-- <option value="2">深圳</option>-->
<!-- <option value="3">贵州</option>-->
<!--</select>-->
<input type="text" id="xxx">
</body>
<script src="jquery.js"></script>
<script>
// 绑定事件的方式1
// $("#d1").click(function ()
// $(this).css('background-color','green');
// )
// 方式2
// $('#d1').on('click',function ()
// $(this).css('background-color','green');
// );
//
// // 获取光标触发的事件
// $('#username').focus(function ()
// $(this).css('background-color','green');
// );
// // 失去光标触发的事件
// $('#username').blur(function ()
// $(this).css('background-color','white');
// );
// // 域内容发生变化触发的事件,一般用于select标签
// $('#s1').change(function ()
// // $('#d1').css('background-color','black');
// console.log('xxxxx')
//
// );
// $('#xxx').change(function ()
// console.log($(this).val());
// )
// 输入内容实时触发的事件,input事件只能on绑定
// $('#xxx').on('input',function ()
// console.log($(this).val());
// );
//
// //绑定多个事件 事件名称空格间隔
// $('#xxx').on('input blur',function ()
// console.log($(this).val());
// )
// 鼠标进入触发的事件
// $('#d1').mouseenter(function ()
// $(this).css('background-color','green');
// );
// // 鼠标离开触发的事件
// $('#d1').mouseout(function ()
// $(this).css('background-color','red');
// );
// hover事件 鼠标进进出出的事件
// $('#d1').hover(
// // 鼠标进入
// function ()
// $(this).css('background-color','green');
// ,
// // 鼠标离开
// function ()
// $(this).css('background-color','red');
//
// );
$('#d1').mouseenter(function ()
console.log('xxx');
);
$('#d2').mouseover(function ()
console.log('ooo');
);
// 键盘按下
// $(window).keydown(function (e)
// console.log(e.keyCode);
//
// );
// 键盘抬起
$(window).keyup(function (e)
console.log(e.keyCode);
);
</script>
</html>shift 同时选中例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist\css\bootstrap.css">
</head>
<body>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>zb</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>bb</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>zbb</td>
<td>
<select>
<option value="1">上线</option>
<option value="2">下线</option>
<option value="3">停职</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
var a = false;
//shift按下的时候
$(window).keydown(function (e)
console.log(e.keyCode);
if (e.keyCode === 16)
a =true
);
//抬起的时候
$(window).keyup(function (e)
console.log(e.keyCode);
if (e.keyCode === 16)
a =false
);
//操作标签发生改变时
$('select').change(function ()
//判断#标签是否被选中
var bb = $(this).parent().siblings().first().find(':checkbox').prop('checked');
if (a && bb)
//拿到鼠标操作select单个标签的值
var value = $(this).val();
//所有被选中的设置值
var all = $("input:checked").parent().parent().find("select");
all.val(value);
);
</script>
</html>
21.移除事件（不常用）
.off( events [, selector ][,function()])
off() 方法移除用 .on()绑定的事件处理程序。
$("li").off("click")；就可以了22.事件冒泡
事件冒泡,子标签和父标签(祖先标签)绑定了相同的事件,比如点击事件,那么当你点击子标签时,会一层一层的往上触发父级或者祖父级等等的事件$('.c1').click(function ()
alert('父级标签!!!');
);
$('.c2').click(function (e)
alert('子标签~~~');
// 阻止事件冒泡(阻止事件发生)
return false; //方式1
// e.stopPropagation() // 方式2
)23.事件委托
将子标签（子子孙孙）的点击事件委托给了父级标签
但是这里注意一点，你console.log(this)；会发现this还是触发事件的那个子标签
<div id="d1">
<button class="btn">屠龙宝刀,点击就送!</button>.
</div>
// 事件委托
$('#d1').on('click','.btn',function ()
// $(this)是你点击的儿子标签
var a= $(this).clone();
$('#d1').append(a);
);
员工删除示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cc
top: 0;
width: 100%;
height: 100%;
z-index: 100;
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
.hide
display: none;
.md
top: 40%;
left: 40%;
width: 400px;
height: 300px;
position: absolute;
background-color: antiquewhite;
z-index: 110;
</style>
</head>
<body>
<button id="btn">新增</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>吴老板</td>
<td>开三轮车</td>
<td><button>开除</button></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>盖伦</td>
<td>拖拉机</td>
<td><button>开除</button></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>猪女</td>
<td>骑猪</td>
<td><button>开除</button></td>
</tr>
</tbody>
</table>
<div class="cc hide"></div> <!--灰色隐藏框/-->
<div class="md hide"> <!--新增对话框-->
姓名：
<input type="text" id="name">
<br>
爱好：
<input type="text" id="hobby">
<br>
<button id="qx" type="button">取消</button>
<button id="tj" type="button">提交</button>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
//开除按钮功能 只能任务委托
$('table').on('click','button',function ()
$(this).parent().parent().remove();
);
//新增功能按钮
$("#btn").click(function ()
$('.cc,.md').removeClass('hide');
);
//对话框取消按钮
$('#qx').click(function ()
$("#name,#hobby").val('');
$('.cc,.md').addClass('hide');
);
//对话框提交按钮
$('#tj').click(function ()
var name = $("#name").val();
var hobby = $("#hobby").val();
$("#name,#hobby").val('');
$('.cc,.md').addClass('hide');
var trEle = `
<tr>
<td><input type="checkbox"></td>
<td>$name</td>
<td>$hobby</td>
<td><button>开除</button></td>
</tr>
`
$('tbody').append(trEle)
)
</script>
</html>24.页面载入
window.onload:
原生js的window.onload事件:// onload 等待页面所有内容加载完成之后自动触发的事件
window.onload = function()
$('.c1').click(function ()
$(this).addClass('c2');
);
;jquery页面载入:
$(function ()
$('.c1').click(function ()
$(this).addClass('c2');
);
)与window.onload的区别
1.window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
2.jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
25.each
循环数组:
var a = [11,22,33];
$.each(a,function(k,v)
console.log(k,v);
)
#k=索引 v=值
循环标签对象:
$('li').each(function(k,v)
console.log(k,$(v).text());
)
return false；终止循环
在遍历过程中可以使用 return false提前结束each循环。 类似于break
而直接使用return;后面什么都不加，不写false，就是跳过本次循环的意思 类似与continue26.data
任意jQuery对象都有data方法，可以保存任意值，可以用来代替全局变量
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key, value): 设置值
描述：在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
.data(key): 取值，没有的话返回undefined
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。
$("div").data("k");//返回第一个div标签中保存的"k"的值
removeData(key):
描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。
$("div").removeData("k"); //移除元素上存放k对应的数据
举例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1
height: 100px;
width: 100px;
background-color: red;
</style>
</head>
<body>
<div class="c1"></div>
</body>
<script src="jquery.js"></script>
<script>
$('.c1').data('username','1');
function f()
$('.c1').data('username');
</script>
</html>
以上是关于JQuery基础的主要内容，如果未能解决你的问题，请参考以下文章