jQuery中$.each()函数的用法引申实例?
jQuery中的$.each()函数比forEach更加强大,可以用来遍历JavaScript中的任意集合,借来下来我们会举几个jQuery中$.each()函数的用法引申实例,首先先来回顾一下遍历用法的基础:
$.each( collection, callback(indexInArray, valueOfElement) )
值得一提的是,forEach 可以很方便的遍历数组和 NodeList ,jQuery 中的 jQuery 对象本身已经部署了这类遍历方法,而在原生 JavaScript 中则可以使用 forEach 方法,但是 IE 并不支持,因此我们可以手动把 forEach 方法部署到数组和 NodeList 中:
if ( !Array.prototype.forEach ){
Array.prototype.forEach = function(fn, scope) {
for( var i = 0, len = this.length; i < len; ++i) {
fn.call(scope, this[i], i, this);
}
}
}
// 部署完毕后 IE 也可以使用 forEach 了
document.getElementsByTagName('p').forEach(function(e){
e.className = 'inner';
});
而jQuery中的$.each()函数则更加强大。$.each()函数和$(selector).each()不一样。$.each()函数可以用来遍历任何一个集合,不管是一个JavaScript对象或者是一个数组,如果是一个数组的话,回调函数每次传递一个数组的下标和这个下标所对应的数组的值(这个值也可以在函数体中通过this关键字获取,但是JavaScript通常会把this这个值当作一个对象即使他只是一个简单的字符串或者是一个数字),这个函数返回所遍历的对象,也就是这个函数的第一个参数,注意这里还是原来的那个数组,这是和map的区别。
其中collection代表目标数组,callback代表回调函数(自己定义),回调函数的参数第一个是数组的下标,第二个是数组的元素。当然我们也可以给回调函数只设定一个参数,这个参数一定是下标,而没有参数也是可以的。
dw怎么建立jquery?
关于这个问题,DW(Dreamweaver)可以通过以下步骤建立jQuery:
1. 在DW中创建一个新的HTML文档。
2. 在<head>标签中添加jQuery的CDN链接或下载jQuery库并将其保存在本地文件夹中,然后将其引用到HTML文档中。
3. 在HTML文档中添加<script>标签,并将jQuery代码放在其中。
例如,以下是一个简单的HTML文档,其中引用了jQuery库并使用了一些简单的jQuery代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>My jQuery Page</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<h1>My jQuery Page</h1>
<p>Click the button to hide this paragraph.</p>
<button id="hideBtn">Hide Paragraph</button>
<script>
$(document).ready(function(){
$("#hideBtn").click(function(){
$("p").hide();
});
});
</script>
</body>
</html>
```
在这个例子中,我们引用了jQuery库,并在文档的底部添加了一个jQuery代码块,该代码块使用了jQuery的$符号来选择和操作HTML元素。当用户单击按钮时,jQuery代码会隐藏页面中的段落元素。