jQuery基础笔记 each和data(7)
day56
参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-11-0
each
jQuery.each(collection, callback(indexInArray, valueOfElement)):
描述:一个通用的迭代函数,它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length - 1。其他对象通过其属性名进行迭代。
li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//index是索引,ele是每次循环的具体元素。
})
输出:
010
120
230
340
示例:
11each循环示例.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>each循环示例</title>
</head>
<body> <div>111</div>
<div>222</div>
<div>333</div>
<div>444</div>
<div>555</div>
<script src="jquery-3.2.1.min.js"></script>
</body>
</html>
实践:
each遍历数组:
不能用break退出:
.data()
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key, value):
描述:在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k,值为100
.data(key):
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)
或 HTML5 data-*
属性设置。
$("div").data("k");//返回第一个div标签中保存的"k"的值
插件(了解即可)
jQuery.extend(object)
jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。
示例:

<script>
jQuery.extend({
min:function(a, b){return a < b ? a : b;},
max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
</script>

实践:
以上为给jQuery添加的方法。
以下为给jQuery对象添加的方法。
jQuery.fn.extend(object)
一个对象的内容合并到jQuery的原型,以提供新的jQuery实例方法。

<script>
jQuery.fn.extend({
check:function(){
return this.each(function(){this.checked =true;});
},
uncheck:function(){
return this.each(function(){this.checked =false;});
}
});
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>

实践:
单独写在文件中的扩展:

(function(jq){
jq.extend({
funcName:function(){
...
},
});
})(jQuery);

jQuery基础笔记 each和data(7)的更多相关文章
- jQuery基础笔记(1)
day54 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html 1. 为什么要学jQuery? MySQL Python ...
- jquery基础 笔记一
一. 1. vsdoc: 在Visual Studio中需要引入此版本的jquery类库才能启用智能感知.如:jquery-1.3.2-vsdoc2.js<body> <div id ...
- jQuery基础笔记 事件(6)
day56 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-6 事件 ***** 1. 目前为止学过的绑定 ...
- jQuery基础笔记(4)
day55 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-9-3 文本操作 HTML代码: html()// 取得第一个匹配 ...
- jQuery基础笔记(3)
day55 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-8-0 操作标签 样式操作 样式类 addClass();// 添 ...
- jQuery基础笔记(2)
day54 筛选器 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-7-5 筛选器方法 下一个元素: $("#id& ...
- jquery基础 笔记三
一. 操作"DOM属性" 在jQuery中没有包装操作"DOM属性"的函数, 因为使用javascript获取和设置"DOM属性"都很简单. ...
- jquery基础 笔记二
动态创建元素 关于使用HTML DOM创建元素本文不做详细介绍, 下面举一个简单的例子: //使用Dom标准创建元素 var select = document.createElement(" ...
- Jquery基础笔记
1.$(function(){ 等价于 window.onload=function(){ }) } 2 ...
随机推荐
- iOS.Compiler
1. 在Xcode4.6下创建的工程, 在Xcode5下build&run, 然后提示以下error. 难不成要在Xcode5下重新创建工程? Xcode cannot run using t ...
- Web前端工程师常去的15个技术网站
1.CSDN 网址:https://www.csdn.net/ 简介: CSDN (Chinese Software Developer Network) 创立于1999年,是中国最大的IT社区和服务 ...
- 摹客项目在2018年工信部"创客中国"名列10强并荣获二等奖
2018“创客中国”互联网+大数据创新创业大赛(暨2018创客中国产业投资峰会)8月19日在厦门进行了总决赛.大赛由国家工业和信息化部.厦门市人民政府主办,厦门文广集团等承办.工信部信息中心领导.厦门 ...
- 20155233 2016-2017-2 《Java程序设计》第8周学习总结
20155233 2016-2017-2 <Java程序设计>第8周学习总结 学习目标 了解NIO 会使用Channel.Buffer与NIO2 会使用日志API.国际化 会使用正则表达式 ...
- jQuery DataTables插件分页允许输入页码跳转
背景说明 项目中使用jQuery DataTables插件来实现分页表格,但是默认的分页样式不能输入页码进行跳转,在页数非常多的时候使用很不方便,最主要的还是没有达到产品部门的设计要求,所以我需要寻找 ...
- hdu-1050(贪心+模拟)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1050 思路:由图可知,1对应2,3对应4,以此类推,如果x,y是偶数则变为奇数: 每次输入两个区间,找 ...
- 29. What Makes a True Leader ? 合格的领导者由何物决定 ?
29. What Makes a True Leader ? 合格的领导者由何物决定 ? ① Reading leadership literature,you'd sometimes think t ...
- org.eclipse.ui.PartInitException: Unable to open editor, unknown editor ID: org.xmen.ui.text.XMLTextEditor
无法打开struts模式的编译xml的编译器,然后打开.project文件,编辑最后一行,找到<natures>结点,增加一条<nature>com.genuitec.ecli ...
- (动态规划 最长有序子序列)Monkey and Banana --HDU --1069
链接: http://acm.hdu.edu.cn/showproblem.php?pid=1069 http://acm.hust.edu.cn/vjudge/contest/view.action ...
- Spring组件扫描 <context:component-scan/>
目录(?)[-] 总结 使用方式 扫描controller下所以类 扫描符合条件Controller的类推荐 我们在SpringMVC开发项目中,有的用注解和XML配置Bean,这两种都各有自己的优势 ...