高手来看一下jquery中怎么用for来简化下面程序,我自己用for写的都不能,但是单个拿出来写就可以 很啰嗦

高手来看一下jquery中怎么用for来简化下面程序,我自己用for写的都不能,但是单个拿出来写就可以 很啰嗦,第1张

$("#hotcarul li")mouseover(function(){

  $(this)siblings('li')removeClass('current');

  $(this)addClass("current");

});

// 全部 tab

var tabs = $("tab11,tab12,tab13,tab14");

// 全部 #tab-

var contents = $("#tab-11,#tab-12,#tab-13,#tab-14");

contentsaddClass("tab-content-item");

tabsmouseover(function(){

  contentsremoveClass("current");

  

  var matchs = thisclassNamematch(/tab(\d+)/);

  if(matchs && matchslength === 2){

    // matchs => ['tab' , ''];

    $("#tab-" + matchs[1])addClass("current");

  }

});

两者的主要区别:

1、在build/webpackdevconfjs和build/webpackprodconfjs中配置即可。

2、在模块中使用的时候代码如下:plugins:[//这里是需要导入的插件列表,定意思jquery为全局参数newwebpackProvidePlugin({$:'jquery',jquery:'jquery','windowjQuery':'jquery',jQuery:'jquery'})]

可以使用import的这种写法:importjQueryfrom'jQuery'ready:function()

{varself=this;jQuery(window)resize(function(){self$refsthisherechartdrawChart();})}。

3、jquery 理解成js的封装,使js更加简洁,快捷。它把相同的 *** 作封装起来,使用的时候直接调用。

js是脚本语言 有自己的变量和方法,多用于表单验证和与用户的交互性以及动态效果 功能强大

但是有时候使用起来很麻烦,所以就出了 jquery框架,它是对js常用的方法进行封装处理 形成自己的一套结构,使用的时候 需要加载jquery库 使用更少的代码 能做更多的事。

在MVC应用程序中使用Jquery

当使用Visual Studio项目模版创建新的ASPNET MVC项目时,它会默认生成使用Jquery需要的所有内容,每个新项目中都回包含一个Scripts文件夹,里面带有很多个js文件。

JQuery核心库是一个名为Jquery-<version>js的文件,所以Jquery的版本是171,这个文件中包含了JQuery源代码的可注释版本。

精简的JavaScript脚本文件在客户端的行为以及实现的功能与非精简文件一样,然而,由于精简文件叫较小,因此通常都是尽可能的向客户端发送精简文件。

ASPNET MVC应用程序中默认的布局试图(_Layoutcshtml)通常情况下用下面的脚本标签引用Jquery的精简版本。

在节点中放置脚本

向输出中注入脚本的另一种方式是定义用来防治脚本的Razor节。

可以在引用布局的任何视图中添加脚本姐,用来向该试图的头部注入特定的脚本:Indexcshtml。

按F5运行网站,打开网站首页,添加的jqueryvalidatejs文件显示在引用JS的最下面了。

Scripts目录下的其他文件

除了Jquery核心库之外,Scripts目录中还包含两个Jquery插件:Jquery UI和Jquery验证,这些扩展增加了Jquery核心库的能力。

$each(array,

[callback])

遍历

不同于例遍

jQuery

对象的

$each()

方法,此方法可用于例遍任何对象(不仅仅是数组哦~)

回调函数拥有两个参数:第一个为对象的成员或数组的索引,

第二个为对应变量或内容

如果需要退出

each

循环可使回调函数返回

false,

其它返回值将被忽略

each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但比for循环强大在数组中,它可以轻松的攻取数组索引及对应的值例:

使用方法如下:

复制代码

代码如下:

var

arr

=

['javascript',

'php',

'java',

'c++',

'c#',

'perl',

'vb',

'html',

'css',

'objective-c'];

$each(arr,

function(key,

val)

{

//

firebug

console

consolelog('index

in

arr:'

+

key

+

",

corresponding

value:"

+

val);

//

如果想退出循环

//

return

false;

});

再来个测试程序:

[/code]

var

fruit

=

['苹果','香蕉','橙子','哈密瓜','芒果'];

//用原生getElementsByTagName获取h2元素的对象集合

var

h2obj=documentgetElementsByTagName('h2');

//$each()遍历数组

$('input#js_each')click(function(){

$each(fruit,function(key,val){

//回调函数有两个参数,第一个是元素索引,第二个为当前值

alert('fruit数组中,索引:'+key+'对应的值为:'+val);

});

});

[/code]

相对于原生的forin,each更强壮一点

forin也可以遍历数组,并返回对应索引,但值是需要通过arrName[key]来获取;

$grep(array,

callback,

[invert])过滤

使用过滤函数过滤数组元素此函数至少传递两个参数(第三个参数为true或false,对过滤函数返回值取反,个人觉得用处不大):

待过滤数组和过滤函数

过滤函数必须返回

true

以保留元素或

false

以删除元素

另外,过滤函数还可以是可设置为一个字条串(个人不推荐,欲了解自行查阅);

复制代码

代码如下:

v[code]ar

temp

=

[];

temp

=

$grep(arr,

function(val,

key)

{

if(valindexOf('c')

!=

-1)

return

true;

//

如果[invert]参数不给或为false,

$grep只收集回调函数返回true的数组元素

//

反之[invert]参数为true,

$grep收集回调函数返回false的数组元素

},

false);

consoledir(temp);

再来个测试程序:

复制代码

代码如下:

//$grep()过滤数组

$('input#js_grep')click(function(){

$grep(fruit,function(val,key){

//过滤函数有两个参数,第一个为当前元素,第二个为元素索引

if(val=='芒果'){

alert('数组值为

芒果

的下标是:

'+key);

}

});

var

_moziGt1=$grep(fruit,function(val,key){

return

key>1;

});

alert('fruit数组中索引值大于1的元素为:

'+_moziGt1);

var

_moziLt1=$grep(fruit,function(val,key){

return

key>1;

},true);

//此处传入了第三个可靠参数,对过滤函数中的返回值取反

alert('fruit数组中索引值小于等于1的元素为:

'+_moziLt1);

});

$map(array,[callback])按给定条件转换数组

作为参数的转换函数会为每个数组元素调用,

而且会给这个转换函数传递一个表示被转换的元素作为参数

转换函数可以返回转换后的值、null(删除数组中的项目)或一个包含值的数组,

并扩展至原始数组中这个是个很强大的方法,但并不常用

它可以根据特定条件,更新数组元素值,或根据原值扩展一个新的副本元素

复制代码

代码如下:

//16之前的版本只支持数组

temp

=

$map(arr,

function(val,

key)

{

//返回null,返回的数组长度减1

if(val

===

'vb')

return

null;

return

val;

});

consoledir(temp);

//16开始支持json格式的object

var

obj

=

{key1:

'val1',

key2:

'val2',

key3:

'val3'};

temp

=

$map(obj,

function(val,

key)

{

return

val;

});

consoledir(temp);

再来个测试程序:

复制代码

代码如下:

//$map()按给定条件转换数组

$('input#js_map')click(function(){

var

_mapArrA=$map(fruit,function(val){

return

val+'[新加]';

});

var

_mapArrB=$map(fruit,function(val){

return

val=='苹果'

'[只给苹果加]'+val

:

val;

});

var

_mapArrC=$map(fruit,function(val){

//为数组元素扩展一个新元素

return

[val,(val+'[扩展]')];

});

alert('在每个元素后面加\'[新加]\'字符后的数组为:

'+

_mapArrA);

alert('只给元素

苹果

添加字符后的数组为:

'+

_mapArrB);

alert('为原数组中每个元素,扩展一个添加字符\'[新加]\'的元素,返回的数组为

'+_mapArrC);

});

$inArray(val,array)判断值是否存在于数组中

确定第一个参数在数组中的位置,

从0开始计数(如果没有找到则返回

-1

)记得indexOf()方法了吗

indexOf()返回字符串的首次出现位置,而$inArray()返回的是传入参数在数组中的位置,同样的,如果找到的,返回的是一个大于或等于0的值,若未找到则返回-1现在,

知道怎么用了吧

有了它,

判断某个值是否存在于数组中,就变得轻而易举了

复制代码

代码如下:

//返回元素在数组中的位置,0为起始位置,返回-1则未找到该元素

consolelog($inArray('javascript',

arr));

测试程序:

[code]

//$inArray判断值是否在数组中,不存在返回-1,存在则返回对应索引值

$('input#js_inarray')click(function(){

var

_exist=$inArray('芒果',fruit);

var

_inexistence=$inArray('榴莲',fruit)

if(_exist>=0){

alert('芒果

存在于数组fruit中,其在数组中索引值是:

'+_exist);

}

if(_inexistence<

0){

alert('榴莲

不存在于数组fruit中!,返回值为:

'+_inexistence+'!');

}

});

以上就是关于高手来看一下jquery中怎么用for来简化下面程序,我自己用for写的都不能,但是单个拿出来写就可以 很啰嗦全部的内容,包括:高手来看一下jquery中怎么用for来简化下面程序,我自己用for写的都不能,但是单个拿出来写就可以 很啰嗦、js与Jquery的区别是什么、如何在MVC应用程序中使用Jquery等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/zz/9623508.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-30
下一篇2023-04-30

发表评论

登录后才能评论

评论列表(0条)

    保存