jQuery $工具方法&属性&CSS
【摘要】 前言上一篇文章跟大家分享了jQuery的入门和一些选择器，今天与大家分享jQuery的 $工具方法 、属性、 css首先让我们来看一下今天要分享的内容的思维导图一、$工具方法1、$.each()：用于遍历数组、对象、对象数组中的数据；（1）遍历对象$(function() { //一、$工具方法 //1.1$.each 遍历对象 数组 //定义对象 var stu =...
前言
上一篇文章跟大家分享了jQuery的入门和一些选择器，今天与大家分享jQuery的 $工具方法 、属性、 css
首先让我们来看一下今天要分享的内容的思维导图
一、$工具方法
1、$.each()：用于遍历数组、对象、对象数组中的数据；
（1）遍历对象
$(function() {
//一、$工具方法
//1.1$.each 遍历对象 数组
//定义对象
var stu = {"name":"张三","age":38};
//遍历对象 k指的是索引 v指的是元素
$.each(stu,function(k,v){
console.info(k,v);
})
})
（2）遍历数组
$(function() {
//定义数组
var stus= ["张三","李四","王五","赵六"];
//遍历数组
$.each(stus,function(i,n){
console.info(n);
})
})
（3）遍历对象数组
$(function() {
//定义对象数组 [{}]
var stus = [{"name":"张大三","age":38},{"name":"张小三","age":39}];
//遍历对象数组
$.each(stus, function(i, stu) {
//console.info(stu.name,stu.age);
$.each(stu, function(a, b) {
console.info(b);
})
})
})
2、$.trim()：用于去除前后的空格
$(function() {
// 1.2$.trim() 去除前后的空格
var str = " zking ";
console.info(str.length);
console.info($.trim(str).length);
})
3、$.type(obj) ：得到obj的数据类型
$(function() {
// 1.3 $.type(obj) 得到变量的数据类型
var str = 23.6;
var str1 = 23;
var stu = {"name":"张三","age":38};
var stus = [{"name":"张大三","age":38},{"name":"张小三","age":39}];
console.info($.type(stus));
})
注意： 不管是整数还是小数返回的数据类型都是number
4.$.isArray(obj)：判断是否是数组
$(function() {
// 1.4 $.isArray() 判断是否是数组
var stu = {"name": "张三","age": 38};
var stus = [{"name":"张大三","age":38},{"name":"张小三","age":39}];
console.info($.isArray(stu));
})
5.$.isFunction(obj)：判断是否是函数
$(function() {
//1.5 $.isFunction() 判断是否是函数
var stus = [{"name":"张大三","age":38},{"name":"张小三","age":39}];
console.info($.isFunction(myf));
function myf(){
alert(123);
}
})
6.$.parseJSON(obj)：解析json字符串转换为js对象/数组
$(function() {
//1.6 $.parseJSON() 将json格式的字符串-->js的对象或者数组
var stuStr = '{"name":"张三","age":38}';
console.info($.type(stuStr));string
var stu = $.parseJSON(stuStr);
console.info($.type(stu));//object json格式的字符串-->js对象
console.info(stu.name,stu.age);
$.each(stu,function(k,v){
console.info(v);
})
//将json格式的字符串-->js的对象数组
var stusStr = '[{"name":"张大三","age":38},{"name":"张小三","age":39}]';
console.info($.type(stusStr));string
var stus = $.parseJSON(stusStr);
console.info($.type(stus));array
//遍历
$.each(stus,function(a,b){
console.info(b.name,b.age);
$.each(b,function(k,v){
console.info(v);
})
})
})
二、属性
1.attr()：获取某个标签属性的值，或设置某个标签属性的值
$(function() {
var mpath = $("#aa").attr("src"); //拿值
console.info(mpath);
//给某个属性设置值
$("#aa").attr("width","100px");
})
<body>
<img src="img/logo.jpg" width="200px" id="aa">;
</body>
2.removeAttr()：删除某个标签
$(function() {
$("#aa").removeAttr("src");//无图片
})
<body>
<img src="img/logo.jpg" width="200px" id="aa">;
</body> 
3.addClass()：给某个标签添加class属性值
$(function() {
$("#aa").addClass("xx");
})
<body>
<img src="img/logo.jpg" width="200px" id="aa">;
</body> 
4.removeClass():删除某个标签class属性值
$(function() {
//2.4 removeClass() 删除某个标签属性值
$("#aa").removeClass("xx");//class仍然在 值会被移除掉
})
<body>
<img src="img/logo.jpg" width="200px" id="aa" class="xx">;
</body> 
5.prop():获取某个标签属性的值，或设置某个标签属性的值
注意：和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如多选
$(function() {
//给img标签增加name值
$("#aa").attr("name","abc");
$("#aa").prop("name","abc");
})
<body>
<img src="img/logo.jpg" width="200px" id="aa">;
</body>
6.html():获取某一个标签体内容（注意：该标签体中可以包含子标签）
7.text()：获取某一个标签体内容(注意：该标签体不能包含子标签)
$(function() {
//html() 和text() 的区别
var a = $("p").html();//会拿到子标签
console.info(a);
var b = $("p").text();//不会拿到子标签 只会打印纯文本
console.info(b);
})
<body>
<p>aa和<span>bb</span>的爱情故事</p>
</body>
8.val()：主要用户获取/设置输入框的值
$(function() {
var aa = $("#bb").val();//拿值
console.info(aa);
$("#cc").val("你好，世界");//设值
})
<body>
<input type="text" id="bb" value="你好" />
<input type="text" id="cc" />
</body>
三、css
$(function() {
$("p").css("background", "red"); //一个键,一个值
$("p").css({"background":"pink","color":"blue"})//{键:值,键:值} 多个用逗号隔开
//拿值
var a = $("p").css("background");
console.info(a);
})
<body>
<p>aa和<span>bb</span>的爱情故事</p>
</body>
四、案例
实现全选功能
$(function() {
$("#ok").click(function(){
$(".aaa").prop("checked",true);
})
$("#nook").click(function(){
$(".aaa").prop("checked",false);
})
//注意:在为Boolean时 attr会进入之前的状态 但是prop不会
})
<body>
<input type="checkbox" class="aaa" value="喜欢看电影" />喜欢看电影
<input type="checkbox" class="aaa" value="喜欢听歌" />喜欢听歌
<input type="checkbox" class="aaa" value="喜欢玩手机" />喜欢玩手机
<input type="button" value="全选" id="ok" />
<input type="button" value="取消全选" id="nook" /><br />
</body>注意:在为Boolean时 attr会进入之前的状态 但是prop不会
attr和addClass的区别
attr:会覆盖之前的样式
addClass:会前调用原来的样式 再调用加的样式
实现隔行换色
$(function() {
$("table tr:even").addClass("cc");
$("table tr:odd").addClass("dd");
})
<body>
<input type="checkbox" class="aaa" value="喜欢看电影" />喜欢看电影
<table border="1px" width="50%">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
总结
以上就是今天分享的内容，如果对你有帮助的就点个关注呗！
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）