jQuery——工具及属性（案例）

1. 1. $.each();

遍历数组，对象，对象数组中的数据

首先来看一下今天的第一个工具，each()。这个我们上节课好像用过。什么时候用的？大家还记得吗？在遍历多选框的时候我们用的就是each()。each顾名思义 大家都明白是用来遍历的，今天我们就主要用each()来遍历一下数组 和 对象。怎么遍历数组和对象呢？咱们来看一下。

1. 1. 1. 遍历数组

我们先来定义一个数组，jQuery里定义数组，大家都知道怎么写吗？不知道？不怕，来看我给你们写一下。

var names = ["张三","李四","王二"];

在jQuery中定义数组用中括号来括起来，里面其实就和咱们java中的代码差不多了，值，逗号，值，逗号。

遍历数组也很简单，直接写$.each()，只不过大家要注意，在这个小括号里面有两部分，分别表示要遍历的数组名，和回调函数。回调函数里面还有两个参数，第一个参数表示索引，第二个参数表示数组元素，具体来看我怎么写：

$.each(names,function(i,name){

console.info(i,name);

})

在这里names表示我们的数组名，回调函数中的i表示数组元素索引，name表示数组中的每一个元素，我们刷新页面按F12来看一下console打印的结果

1. 1. 1. 遍历对象

接着我们再来看一下怎么遍历对象，说到这里 就有人纳闷了，对象还需要遍历吗？遍历对象的啥呀？哎，遍历对象其实就是遍历对象中的属性。所以大家可别搞晕了。那么同样的我们先来定义一个对象，上面说了定义数组用中括号，那么定义对象该咋写？用大括号。来直接看我写：

var student = {"name":"张三","age":18,"sex":"男"};

大家要注意，定义对象，大括号里面写 属性 然后 冒号 跟属性值，然后逗号隔开，再写第二个属性 和值，如果有多个属性，就以此类推。大家来看一下这句代码里面定义的对象中分别定义了哪几个属性？总共定义了三个属性和值，分别是 name属性 值为 张三，age属性 值为18，sex属性 值为 男。

定义完对象，接着看怎么遍历。遍历对象 和 上面的遍历数组又有点不太一样了，同样的each()里面有两部分，分别是对象名 和 回调函数，但是到回调函数中的参数是 以 键值对形式来表示对象中的 属性 和 值。具体怎么写，来看一下：

$.each(student,function(k,v){

console.info(k,v);

})

这里面student表示上面定义的对象名，k表示属性，v表示属性的值

1. 1. 1. 遍历对象集合

我们再来看一下遍历对象集合，也就是我们所说的对象数组，说白了其实还是什么呀？对，还是数组，只不过这个数组里面放的是对象。来看一下，对象集合又是怎么定义的。定义数组用中括号，定义对象用大括号，现在我们要定义一个数组中放着对象，那大括号和中括号就都得用上了。

var students = [

{"name":"张1","age":18,"sex":"男"},

{"name":"张2","age":18,"sex":"男"},

{"name":"张3","age":18,"sex":"男"}

];
这段代码定义了一个名为students 的数组，里面有三个对象。每个对象分别有三个属性和对应的属性值。

1. 1. 1. 1. 对象集合遍历方式1

我们来看一下怎么遍历，我们要想找到数组中的每一个对象的属性，那么就得先遍历数组，刚说到遍历数组怎么写来着？我们可不可以遍历数组，找到每一个对象，然后再接着遍历对象。是不是就刚好把我们的对象数组给遍历出来了。我们来试一下。

//遍历对象集合

$.each(students,function(i,student){

//1、遍历集合中的 每一个对象

$.each(student,function(k,v){

console.info(k,v);

})

})

这里面外层的each()用来遍历数组students，找到数组中的每一个对象，然后第二个each()来遍历每一个对象。来实现遍历对象数组的效果。

1. 1. 1. 1. 对象集合遍历方式2

其实还有一种相对来说简单一点的遍历方法，我们遍历数组找到每一个对象后，我们既然知道是对象了，那么可不可以直接用对象来点属性调用属性。我们来试一下：

$.each(students,function(i,student){

//2、直接对象点属性

console.info(student.name,student.age,student.sex);

})

这里同样的先遍历数组，找到对象，然后直接对象名.属性名 获得对象的属性值

1. 1. $.trim();

来看一下trim()这个我们基本上已经说了同名的方法好几次了。去除首部和尾部的空格。

我们再来试一下：

var str = "  zking edu   ";

console.info("长度:"+str.length);//输出长度14

console.info("去空格之后的长度:"+$.trim(str).length);//输出长度9

这个就不说那么多了，大家下去都试一下

1. 1. $.type(obj);

这里还有一个type，type是什么意思？哎 类型 对的，这个就是来判断数据类型的，咋用呢？

var str = "zking";

console.info($.type(str ));//打印string

var age = 18;

console.info($.type(age));//打印number

变量str是什么类型？是字符串那么就打印string, 变量age是数字，就打印number

我们接着往下看

1. 1. $.isArray(obj);

isArray，is 是的意思，Array是啥？数组的意思。那么这个很明显了。判断是不是数组，如果是就返回true，如果不是就返回啥？False。我们来试一下：

var str = "asddas";

console.info($.isArray(str));

var st = ["呵呵","哈哈","嘿嘿"];

console.info($.isArray(st));//打印true

这段代码会打印什么结果？true 还是false？

1. 1. $.isFunction(obj);

还有一个isFunction 哎，对了 这个就是判断是不是函数的，简单的很。咋写？

console.info($.isFunction(sleep));

console.info($.isFunction(str));

我们写在事件外边写个函数。是函数就输出啥？true,否则就是输出false

1. 1. $.parseJSON(obj);

接下来我们讲一下工具方法的最后一个，也是比较重要的一个。JSON。这个我们在后面还会重点使用。parseJSON干嘛用的？简单点来说 就是把一个字符串格式的对象，或者字符串格式的对象数组，再转换回对象或者对象数组。

1. 1. 1. JSON字符串转换为对象

我们先来试一下把JSON字符串转换为对象。先定义一个对象的字符串：

var jsonStr = '{"name":"张三","age":19,"sex":"男"}';

接下来怎么转换？很简单！

var student = $.parseJSON(jsonStr);

直接使用parseJSON方法来转换，我们用each()来遍历一下试试:

$.each(student,function(k,v){

console.info(k,v);

})

这个就是JSON字符串转换对象

1. 1. 1. JSON字符串转换为对象数组

我们再来看一下把JSON字符串转换为对象数组，同样的，我们先定义一个对象数组的字符串

var jsonStr = '[{"name":"张1","age":18,"sex":"男"},{"name":"张2","age":18,"sex":" 男"},{"name":"张3","age":18,"sex":"男"}]';

这个地方一定注意，定义对象数组的字符串时，必须要写在一行内，不能换行。接着直接使用parseJSON方法来转换：

var students = $.parseJSON(jsonStr);

再遍历一下对象数组:

$.each(students,function(i,student){

console.info(student.name,student.age,student.sex);

})

1. 属性

属性我们主要讲怎么来获取到标签元素的属性值和设置标签元素的属性值

1. 1. attr();

attr 就是attribute缩写 属性的意思，很简单，获取到某一个属性。我们直接来看怎么用。我们先写一个超链接：

<a href="http://www.baidu.com" id="bd">百度一下</a>

超链接a标签中有两个属性，一个href属性，一个id属性。现在我们就用attr()来获取到a标签的href属性值。

var href = $("#bd").attr("href");

console.info(href);

找到id为bd的元素，获取到href属性值;

上面是获取到属性值，那么我们可以给属性赋值吗？同样的 我们来写：

$("#bd").attr("href","http://www.baidu.com");

直接给指定的属性赋值。就是这么简单

1. 1. removeAttr();

那么我们可以添加一个属性，给属性赋值。也可以删除属性。

$("#bd").removeAttr("href");

直接删除标签的href属性

1. 1. addClass();

addClass顾名思义 是不是添加一个class属性，我们来试一下：

$("#bd").addClass("bai");

直接添加成功，那么我们直接用上面的attr()来添加class属性不是也可以吗？这两个有什么区别呢？大家可以试一下，一个是追加名字，一个是直接覆盖

1. 1. removeClass();

移出class属性值，这个不建议用。移出属性，我们一般用removeAttr()就好了。我们来看一下为什么不建议用removeClass()来移出class属性。

$("#bd").removeClass();

刷新页面看效果，只是移出了class属性的值，还留下一个class。我们一般删除属性和值全部删除掉，不要这样留一个属性名。

1. 1. prop();

prop()效果和attr()效果基本类型，区别只在于当属性的值为boolean类型的时候要用prop();我们来看一下例如：

爱好:

<input type="checkbox" class="hobby" name="" id="" value="吃饭" />吃饭

<input type="checkbox" class="hobby" name="" id="" value="睡觉" />睡觉

<input type="checkbox" class="hobby" name="" id="" value="打豆豆" />打豆豆

<br>

<input type="button" name="all" id="all" value="全选" />

<input type="button" name="noall" id="noall" value="全不选" />

我们给两个按钮添加点击事件，点击全选所有多选框就被选中，点击全不选，所有多选框就取消选中

$("#all").click(function(){

$(".hobby").attr("checked",true);

})

$("#noall").click(function(){

$(".hobby").attr("checked",false);

})

当我们用attr()时 很明显就有Bug了，先选中一个，然后再点击全选，全不选，会发现就有瑕疵了。所以当属性的值为boolean类型的时候，我们用prop();

$("#all").click(function(){

$(".hobby").prop("checked",true);

})

$("#noall").click(function(){

$(".hobby").prop("checked",false);

})
大家一定要注意prop()什么情况下必须用

html();text();val();

1. 1. 案例演示表格颜色隔行

我们直接把上节课说的隔行换色实现一下

$("table tr:odd").css("background","green");

这样直接给标签添加属性，设置背景色实现。但是这样的话网页会给每一个标签都添加行内样式，页面的行内样式代码就太多了。所以我们一般不这样写。

我们可以先写一个内部样式

<style type="text/css">

.oddStyle{

background-color:green ;

}

</style>

然后再通过用attr()给标签添加class属性值，来实现样式效果

$("table tr:odd").attr("class","oddStyle");

这样的话，我们至少给标签添加一个class属性就OK了

1. CSS
   1. css();设置标签的css样式

接着我们继续学习CSS

1. 1. 1. 获取样式值

这个用的比较少，大家可以了解一下，获取到样式的值:

var color = $("p").css("color");

console.info(color);

这个是获取到p标签的 color样式值

1. 1. 1. 设置单个样式

设置单个样式，我们其实一直在写。用小括号括起来

$("p").css("color","red");

我就不多说了

1. 1. 1. 设置多个样式

设置多个样式时，样式用大括号括起来，每一个样式属性赋值用冒号，结束用逗号隔开

例如：

$("p").css({"background":"pink","color":"red"});

最后

以上就是悦耳大雁为你收集整理的jQuery——工具及属性（案例）的全部内容，希望文章能够帮你解决jQuery——工具及属性（案例）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。