jquery each—jquery each遍历数组 收藏 0

Javascript中判断数组的正确姿势

51RGB

在 Javascript 中，如何判断一个变量是否是数组？

最好的方式是用 ES5 提供的 Array.isArray 方法（毕竟原生的才是最屌的）：

var a = [0, 1, 2];

console.log(Array.isArray(a)); // true

但是鉴于低版本 IE 不支持 ES5，如需兼容，需要想想别的办法。

typeof？

我们都知道，数组是特殊的对象，所以数组的 typeof 结果也是 object，而因为 的结果也是 object，所以如需用 typeof 运算符来判断数组，需要这么写：

var a = [0, 1, 2];

// 是 object 同时排除 、排除纯对象

console.log(typeof a === \’object\’ & a !== && Object.prototype.toString.call(a) !== \'[object Object]\’); // true

instanceof？

来回忆下 instanceof 运算符的使用方式。a instanceof b，如果返回 true，表示 a 是 b 的一个实例。那么如果 a instanceof Array 返回 true，是不是就说明 a 是 数组类型呢？跟 instanceof 师出同门的还有 constructor，是否同样可以判断呢？

var a = [0, 1, 2];

console.log(a instanceof Array); // true 就是数组？

console.log(a.constructor === Array); // true 数组？

答案是否定的，需要注意嵌套 frame 的情况。

index.htm 代码：

window.onload = function {

var a = window.frames[0].a;

console.log(a instanceof Array); // false

console.log(a.constructor === Array); // false

};

a.htm 代码：

window.a = [1, 2, 3];

我们看到 index.htm 代码中，变量 a 确实是一个数组，但是 a instanceof Array 的结果却是 false。

这是因为每个 frame 都有一套自己的执行环境，跨 frame 实例化的对象彼此不共享原型链。如果打印 a instanceof window.frames[0].Array，那么结果就是 true 了。

特性嗅探？

var a = [0, 1, 2];

if (a.sort) {

// 是数组

}

也不靠谱，万一某个对象正好有值为 sort 的 key 呢？

var a = {sort: \’me\’};

if (a.sort) {

// 数组？

// 其实我真的不是数组

}

正确的姿势是使用 Object.prototype.toString 判断：

var a = [0, 1, 2];

console.log(Object.prototype.toString.call(a) === \'[object Array]\’); // true

事实上，这也是一些类库进行数组（甚至其他类型）判断的主流方式。

比如在 jQuery 中进行数组判断的相关代码（PS：摘自 jQuery 1.10.1，最近版本的 jQuery 只保留了 Array.isArray()，没有对不支持 ES5 的浏览器做兼容）：

isArray: Array.isArray || function( obj ) {

return jQuery.type(obj) === \”array\”;

},

type: function( obj ) {

if ( obj == ) {

return String( obj );

}

return typeof obj === \”object\” || typeof obj === \”function\” ?

class2type[ core_toString.call(obj) ] || \”object\” :

typeof obj;

},

jQuery.each(\”Boolean Number String Function Array Date RegExp Object Error\”.split(\” \”), function(i, name) {

class2type[ \”[object \” + name + \”]\” ] = name.toLowerCase;

});

代码很清晰，如支持原生的 Array.isArray，则直接判断，不支持的话调用 toString 进行判断。同时可以看到很多其他类型变量的判断也是基于 toString 方法。当然这里说的 toString 均是 Object 原型链上的 toString 方法。

console.log(Object.prototype.toString.call(10)); // [object Number]

console.log(Object.prototype.toString.call(\’hello\’)); // [object String]

console.log(Object.prototype.toString.call(true)); // [object Boolean]

console.log(Object.prototype.toString.call([])); // [object Array]

console.log(Object.prototype.toString.call({})); // [object Object]

console.log(Object.prototype.toString.call(function{})); // [object Function]

console.log(Object.prototype.toString.call(/a/g)); // [object RegExp]

console.log(Object.prototype.toString.call); // [object ]

console.log(Object.prototype.toString.call(undefined)); // [object Undefined]

console.log(Object.prototype.toString.call(new Date)); // [object Date]

Object.prototype.toString 为何能返回这样类型的字符串？

ECMA-262：

Object.prototype.toString When the toString method is called, the following steps are taken:

1. Get the [[Class]] property of this object.

2. Compute a string value by concatenating the three strings “[object “, Result (1), and “]”.

3. Return Result (2)

上面的规范定义了 Object.prototype.toString 的行为：首先，取得对象的一个内部属性[[Class]]，然后依据这个属性，返回一个类似于 “[object Array]” 的字符串作为结果（[[]]用来表示语言内部用到的、外部不可直接访问的属性，称为 “内部属性”）。利用这个方法，再配合 call，我们可以取得任何对象的内部属性 [[Class]]，然后把类型检测转化为字符串比较，以达到我们的目的。还是先来看看在 ECMA 标准中 Array 的描述吧：

new Array([ item0[, item1 [,…]]])

The [[Class]] property of the newly constructed object is set to “Array”.

所以 Javascript 中判断数组的函数可以这样写：

function isArray(a) {

Array.isArray ? Array.isArray(a) : Object.prototype.toString.call(a) === \'[object Array]\’;

}

Read More：

• Javascript数组类型检测：编写更强壮的isArray函数

• JavaScript:Object.prototype.toString方法的原理

作者：韩子迟

网址：http://www.cnblogs.com/zichi/p/5103842.html

想认识志同道合的朋友一起学习web

加入我们的学习QQ群 190166743

丰富的学习资源，周一到周四免费直播公开课

每天直播公开课在线视频和下载

你可能感兴趣的精彩内容

微信：UI设计自学平台加关注

长按关注：《UI设计自学平台》

↓↓↓

jQuery入门看这一篇就够了！超详细！（三）

“这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

再坚持一下

这世间的温柔都在等你

– 2023.06.14 –

今天我们接着来看jQuery遍历的操作方法、事件和动画的基础操作，最后再简单介绍一下jQuery插件，希望能够帮助大家更好地掌握jQuery，那么我们就开始吧，别忘了收藏呦！

方法描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。

需求描述：获取每一个li元素并把每一个li元素的标签及内容输出

<ul>

<p>我是段落1</p>

<li>列表项1</li>

<li id=\”two\”>列表项2</li>

<li>列表项3</li>

<p>我是段落2</p>

</ul>

$(\’li\’).each(function (index, element) {

console.log(index, element);

});

方法描述：获取匹配元素集合中第一个元素。

需求描述：设置ul下第一个li的背景为红色

<ul>

<li>列表项1</li>

<li id=\”two\”>列表项2</li>

<li>列表项3</li>

</ul>

$(\’ul>li\’).first().css(\’background\’, \’red\’);

方法描述：获取匹配元素集合中最后一个元素。

需求描述：设置ul下最后一个li的背景为红色

<ul>

<li>列表项1</li>

<li id=\”two\”>列表项2</li>

<li>列表项3</li>

</ul>

$(\’ul>li\’).last().css(\’background\’, \’red\’);

方法描述：获取匹配元素集合中指定位置索引的一个元素。

注意：索引下标从0开始

需求描述：设置ul下第二个li的背景为红色

<ul>

<li>列表项1</li>

<li id=\”two\”>列表项2</li>

<li>列表项3</li>

</ul>

$(\’ul>li\’).eq(1).css(\’background\’, \’red\’);

方法描述：从匹配的元素集合中移除指定的元素。

需求描述：设置ul下li标签的背景为红色，排除第二个li

<ul>

<li>列表项1</li>

<li id=\”two\”>列表项2</li>

<li>列表项3</li>

</ul>

var two = $(\’ul>li\’).eq(1);

$(\’ul>li\’).not(two).css(\’background\’, \’red\’);

方法描述：筛选元素集合中匹配表达式或通过传递函数测试的元素集合。

需求描述：查找所有id为two的li标签设置其背景为红色

<ul>

<li>列表项1</li>

<li id=\”two\”>列表项2</li>

<li>列表项3</li>

</ul>

$(\’ul>li\’).filter(\'[id=two]\’).css(\’background\’, \’red\’);

方法描述：为 JavaScript 的 “resize” 事件绑定一个处理函数，或者触发元素上的该事件。

需求描述：当浏览器窗口的尺寸改变时，控制台输出“浏览器尺寸改变了”

$(window).resize(function () {

console.log(\’浏览器尺寸改变了\’);

});

方法描述：为 JavaScript 的 “scroll” 事件绑定一个处理函数，或者触发元素上的该事件。

需求描述：当浏览器窗口的滚动条滚动时，控制台输出“浏览器滚动条改变了”

body {

height: 2000px;

}

$(window).scroll(function () {

console.log(\’浏览器滚动条改变了\’);

});

方法描述：在选定的元素上绑定一个或多个事件处理函数。

需求描述：为按钮添加单击事件，当按钮单击的时候，向控制台输出“按钮被单击了”

<button>按钮</button>

$(\’button\’).on(\’click\’,function () {

console.log(\’按钮被单击了\’);

});

方法描述： 移除一个事件处理函数。

需求描述：为按钮添加单击事件，然后再解绑，这时候你在点击按钮看看是不是不会输出信息了

<button>按钮</button>

$(\’button\’).on(\’click\’,function () {

console.log(\’按钮被单击了\’);

});

$(\’button\’).off(\’click\’);

方法描述：设置事件委托。

需求描述：为ul下的所有li添加单击事件，要求将该单击事件委托给ul，当单击li时，所对应的li背景变为红色

<ul>

<li>1111</li>

<li>2222</li>

<li>3333</li>

<li>4444</li>

</ul>

$(\’ul\’).delegate(\’li\’, \’click\’, function () {

this.style.background = \’red\’;

});

方法描述：移除事件委托。

需求描述：要求移除上一节中设置的事件委托，然后在分别点击li进行验证是否移除事件委托

<ul>

<li>1111</li>

<li>2222</li>

<li>3333</li>

<li>4444</li>

</ul>

// 设置事件委托

$(\’ul\’).delegate(\’li\’, \’click\’, function () {

this.style.background = \’red\’;

});

// 移除事件委托

$(\’ul\’).undelegate(\’click\’);

方法描述：当获取焦点时触发所绑定的函数。

需求描述：当文本框获取焦点时，设置其背景为红色

<input type=\”text\”>

$(\’:text\’).focus(function () {

$(this).css(\’background\’, \’red\’);

});

方法描述：当失去焦点时触发所绑定的函数。

需求描述：当文本框获取焦点时，设置其背景为红色，当文本框失去焦点时，设置其背景为绿色

<input type=\”text\”>

$(\’:text\’).focus(function () {

$(this).css(\’background\’, \’red\’);

});

$(\’:text\’).blur(function () {

$(this).css(\’background\’, \’green\’);

});

方法描述：当内容改变时触发所绑定的函数。

需求描述：当文本框内容改变时，就向控制台输出当前文本框的内容

<input type=\”text\”>

$(\’:text\’).change(function () {

console.log($(this).val());

});

需求描述：当选择框的内容改变时，就向控制台输出当前选中项的内容

<select>

<option>河北</option>

<option>河南</option>

<option>上海</option>

<option>北京</option>

<option>广东</option>

</select>

$(\’select\’).change(function () {

console.log($(this).val());

});

方法描述：当内容选择时触发所绑定的函数。

需求描述：当文本框的内容被选择时，就向控制台输出当前文本框的内容

<input type=\”text\” value=\”123456\”>

$(\’input\’).select(function () {

console.log($(this).val());

});

方法描述：当表单提交时触发所绑定的函数。

需求描述：当表单提交的时候，弹出对话框“表单提交了”

<form action=\”#\”>

<input type=\”submit\”>

</form>

$(\’form\’).submit(function () {

alert(\’表单提交了\’);

});

方法描述：当鼠标单击时调用所绑定的函数。

需求描述：为按钮绑定一个单击函数，然后点击按钮，在控制台输出“按钮被单击了”

<button>按钮</button>

$(\’button\’).click(function () {

console.log(\’按钮被单击了\’);

});

方法描述：当鼠标双击时调用所绑定的函数。

需求描述：为按钮绑定一个双击函数，然后双击按钮，在控制台输出“按钮被单击了”

<button>按钮</button>

$(\’button\’).dblclick(function () {

console.log(\’按钮被双击了\’);

});

方法描述：当鼠标左键按下的时候调用所绑定的函数。

需求描述：当鼠标左键按下的时候，控制台输出“鼠标左键按下”

<button>按钮</button>

$(\’button\’).mousedown(function () {

console.log(\’鼠标左键按下\’);

});

方法描述：当鼠标左键松开的时候调用所绑定的函数。

需求描述：当鼠标左键松开的时候，控制台输出“鼠标左键松开”

<button>按钮</button>

$(\’button\’).mouseup(function () {

console.log(\’鼠标左键松开\’);

});

方法描述：当鼠标进入目标元素的时候调用所绑定的函数。

需求描述：创建两个div，当鼠标移到外层div的时候，向控制台输出“mouse enter”

.outer {

width: 200px;

height: 200px;

background: coral;

}

.inner {

width: 100px;

height: 100px;

background: pink;

}

<div class=\”outer\”>

<div class=\”inner\”></div>

</div>

$(\’.outer\’).mouseenter(function () {

console.log(\’mouse enter\’);

});

方法描述：当鼠标离开目标元素的时候调用所绑定的函数。

需求描述：创建两个div，当鼠标移出外层div的时候，向控制台输出“mouse leave”

.outer {

width: 200px;

height: 200px;

background: coral;

}

.inner {

width: 100px;

height: 100px;

background: pink;

}

<div class=\”outer\”>

<div class=\”inner\”></div>

</div>

$(\’.outer\’).mouseleave(function () {

console.log(\’mouse leave\’);

});

mouseover()

方法描述：当鼠标进入目标元素的时候调用所绑定的函数。

注意：mouseenter事件和mouseover的不同之处是事件的冒泡的方式。mouseenter 事件只会在绑定它的元素上被调用，而不会在后代节点上被触发。

需求描述：创建两个div，当鼠标移到外层div的时候，向控制台输出“mouse over”，鼠标移到内层div的时候，向控制台输出“mouse over”，当鼠标移到外层div的时候，向控制台输出“mouse over”

.outer {

width: 200px;

height: 200px;

background: coral;

}

.inner {

width: 100px;

height: 100px;

background: pink;

}

<div class=\”outer\”>

<div class=\”inner\”></div>

</div>

$(\’.outer\’).mouseover(function () {

console.log(\’mouse over\’);

});

mouseout()

方法描述：当鼠标离开目标元素的时候调用所绑定的函数。

注意：mouseleave事件和mouseout的不同之处是事件的冒泡的方式。mouseleave 事件只会在绑定它的元素上被调用，而不会在后代节点上被触发。

需求描述：创建两个div，当鼠标移出外层div的时候，向控制台输出“mouse out”

.outer {

width: 200px;

height: 200px;

background: coral;

}

.inner {

width: 100px;

height: 100px;

background: pink;

}

<div class=\”outer\”>

<div class=\”inner\”></div>

</div>

$(\’.outer\’).mouseout(function () {

console.log(\’mouse out\’);

});

方法描述：当鼠标指针在元素内移动时，mousemove事件就会被触发，任何HTML元素都可以接受此事件。

需求描述：鼠标在div内移动，获取当前鼠标相对div的位置坐标

.outer {

width: 200px;

height: 200px;

background: black;

position: absolute;

left: 20px;

top: 20px;

}

<div class=\”outer\”></div>

$(\’.outer\’).mousemove(function (event) {

console.log(event.offsetX, event.offsetY);

});

hover()

方法描述：.hover()方法是同时绑定 mouseenter和 mouseleave事件。

需求描述：当鼠标进入div设置背景为红色，当鼠标移出div设置背景为绿色，默认背景为黑色

.outer {

width: 200px;

height: 200px;

background: black;

}

<div class=\”outer\”></div>

$(\’.outer\’).hover(function () {

$(this).css(\’background\’, \’red\’);

}, function () {

$(this).css(\’background\’, \’green\’);

});

方法描述：当键盘按键按下的时候调用绑定的函数。

需求描述：当键盘按键按下的时候，输出当前的按键

<input type=\”text\”>

$(\’:text\’).keydown(function (event) {

console.log(event.key);

});

方法描述：当键盘按键松开的时候调用绑定的函数。

需求描述：当键盘按键松开的时候，输出当前的按键

<input type=\”text\”>

$(\’:text\’).keyup(function (event) {

console.log(event.key);

});

方法描述：keypress与keydown类似，当键盘按键按下的时候调用绑定的函数。

需求描述：当键盘按键按下的时候，输出当前的按键

<input type=\”text\”>

$(\’:text\’).keypress(function (event) {

console.log(event.key);

});

方法描述：隐藏元素。

需求描述：创建一个显示div，然后隐藏该元素

.box {

width: 200px;

height: 200px;

background: coral;

display: block;

}

<div class=\”box\”></div>

$(\’.box\’).hide();

方法描述：显示元素。

需求描述：创建一个隐藏div，然后显示该元素

.box {

width: 200px;

height: 200px;

background: coral;

display: none;

}

<div class=\”box\”></div>

$(\’.box\’).show();

方法描述：如果隐藏就设置为显示，如果显示就设置为隐藏。

需求描述：创建一个按钮，控制div显示和隐藏

.box {

width: 200px;

height: 200px;

background: coral;

display: block;

}

<button>隐藏/显示</button>

<div class=\”box\”></div>

$(\’button\’).click(function () {

$(\’.box\’).toggle();

});

方法描述：通过淡入的方式显示匹配元素。

需求描述：创建一个按钮，控制div缓慢淡入

.box {

width: 200px;

height: 200px;

background: coral;

display: none;

}

<button>淡入</button>

<div class=\”box\”></div>

$(\’button\’).click(function () {

$(\’.box\’).fadeIn(\’slow\’);

});

方法描述：通过淡出的方式隐藏匹配元素。

需求描述：创建一个按钮，控制div缓慢淡出

.box {

width: 200px;

height: 200px;

background: coral;

display: block;

}

<button>淡出</button>

<div class=\”box\”></div>

$(\’button\’).click(function () {

$(\’.box\’).fadeOut(\’slow\’);

});

方法描述：用淡入淡出动画显示或隐藏一个匹配元素。

需求描述：创建一个按钮，控制div淡入和淡出

.box {

width: 200px;

height: 200px;

background: coral;

display: block;

}

<button>淡出/淡入</button>

<div class=\”box\”></div>

$(\’button\’).click(function () {

$(\’.box\’).fadeToggle(\’slow\’);

});

方法描述：用滑动动画显示一个匹配元素。

需求描述：创建一个按钮，控制div滑动显示

.box {

width: 200px;

height: 200px;

background: coral;

display: none;

}

<button>滑动显示</button>

<div class=\”box\”></div>

$(\’button\’).click(function () {

$(\’.box\’).slideDown();

});

方法描述：用滑动动画隐藏一个匹配元素。

需求描述：创建一个按钮，控制div滑动隐藏

.box {

width: 200px;

height: 200px;

background: coral;

display: block;

}

<button>滑动隐藏</button>

<div class=\”box\”></div>

$(\’button\’).click(function () {

$(\’.box\’).slideUp();

});

方法描述：用滑动动画显示或隐藏一个匹配元素。

需求描述：创建一个按钮，控制div滑动显示和滑动隐藏

.box {

width: 200px;

height: 200px;

background: coral;

display: block;

}

<button>滑动隐藏/滑动显示</button>

<div class=\”box\”></div>

$(\’button\’).click(function () {

$(\’.box\’).slideToggle();

});

方法描述：根据一组 CSS 属性，执行自定义动画，并且支持链式调用。

需求描述：创建一个div，默认div宽高100px，背景颜色为黑色，先让div宽度变为200px，再让div高度变为200px

.box {

width: 100px;

height: 100px;

background: black;

}

<button>自定义动画</button>

<div class=\”box\”></div>

$(\’.box\’)

.animate({

width: \’200\’

})

.animate({

height: \’200\’,

});

方法描述：停止匹配元素当前正在运行的动画。

给 jQuery工具 添加4个工具方法：

• min(a, b) : 返回较小的值
• max(c, d) : 返回较大的值
• leftTrim() : 去掉字符串左边的空格
• rightTrim() : 去掉字符串右边的空格

如何实现呢？请参考以下代码：

// 扩展jQuery工具的方法

$.extend({

min: function (a, b) {

return a < b ? a : b

},

max: function (a, b) {

return a > b ? a : b

},

leftTrim: function (str) {

return str.replace(/^\\s+/, \’\’)

},

rightTrim: function (str) {

return str.replace(/\\s+$/, \’\’)

}

});

// 测试扩展jQuery工具的方法

console.log($.min(3, 5));

console.log($.max(3, 5));

console.log(\’—–\’ + $.leftTrim(\’ hello \’) + \’—–\’);

console.log(\’—–\’ + $.rightTrim(\’ hello \’) + \’—–\’);

给 jQuery对象 添加3个功能方法：

• checkAll() : 全选
• unCheckAll() : 全不选
• reverseCheck() : 全反选

如何实现呢？请参考以下代码：

// 扩展jQuery对象的方法

$.fn.extend({

checkAll: function () {

this.prop(\’checked\’, true);

},

unCheckAll: function () {

this.prop(\’checked\’, false);

},

reverseCheck: function () {

this.each(function () {

this.checked = !this.checked;

});

}

});

<input type=\”checkbox\” name=\”items\” value=\”足球\”/>足球

<input type=\”checkbox\” name=\”items\” value=\”篮球\”/>篮球

<input type=\”checkbox\” name=\”items\” value=\”羽毛球\”/>羽毛球

<input type=\”checkbox\” name=\”items\” value=\”乒乓球\”/>乒乓球

<br/>

<input type=\”button\” id=\”checkedAllBtn\” value=\”全 选\”/>

<input type=\”button\” id=\”checkedNoBtn\” value=\”全不选\”/>

<input type=\”button\” id=\”reverseCheckedBtn\” value=\”全反选\”/>

// 测试扩展jQuery对象的方法

var $items = $(\’:checkbox[name=items]\’);

$(\’#checkedAllBtn\’).click(function () {

$items.checkAll();

});

$(\’#checkedNoBtn\’).click(function () {

$items.unCheckAll();

});

$(\’#reverseCheckedBtn\’).click(function () {

$items.reverseCheck();

});

到这里，jQuery的相关知识点就讲完啦，大家学的怎么样了呀，总共3期内容找不到的可以去主页查看，基础的知识点掌握了也要多找些项目实际操练哦！

今天就先讲到这里了，更多Java基础知识持续更新中，欢迎一起学Java！

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com