jQuery

最新推荐文章于 2024-08-17 22:16:20 发布

YangKen_liu

最新推荐文章于 2024-08-17 22:16:20 发布

阅读量61

点赞数

分类专栏： jQuery 文章标签： eclipse

本文链接：https://blog.csdn.net/YangKen_liu/article/details/123911775

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>$工具方法&属性CSS</title>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.xx{undefined
border: solid red 5px;
}
.aaa{undefined
background-color: blue;
}
.bbb{undefined
background-color: chartreuse;
}
</style>
<script type="text/javascript">
$(function(){undefined
/* //一.$工具方法
//1.1 $.each()遍历数组对象的数据
//定义对象{}
var stu = {"name": "哈哈","age": 18};
//遍历对象
//console.info(stu.name,stu.age);
$.each(stu,function(i,j){//i 下标 j 值变量自定义
console.info(j);
}) */

/* //定义数组[]
var names = ["欧阳钦", "欧阳建敏", "欧阳俊雄"];
//遍历数组
$.each(names, function(i,n){//下标,元素
console.info(n);
}) */

/* //定义对象数组[{}，{}]
var stus=[{"name": "哈哈","age": 18},{"name": "哈哈","age": 18}];
//遍历对象数组
$.each(stus,function(i,j){undefined
// console.info(s.name,s.age);方式一
$.each(j,function(o,p){//方式二
console.info(p);
})
}) */

/* //1.2 $.trim()去除前后空格
var str=" zking ";
console.info($.trim(str).length); */

/* //1.3 $.type() 得到数据类型
var stu = {"name": "哈哈","age": 18};
var stus=[{"name": "哈哈","age": 18},{"name": "呵呵","age": 18}];
var str=1.5;
console.info($.type(str)); */

/* //1.4 isFunction() 判断是否是函数
var stu = {"name": "哈哈","age": 18};
console.info($.isFunction(stu));
console.info($.isFunction(mya)); */

/* //1.5 isArray() 判断是否是数组
var stu = {"name": "哈哈","age": 18};
var stus=[{"name": "哈哈","age": 18},{"name": "呵呵","age": 18}];
console.info($.isArray(stus)); */

/* //1.6 $parseJSON() 解析json格式的字符串-->js的数组/对象
//定义对象字符串
var stuStr='var stus=[{"name": "哈哈","age": 18},{"name": "呵呵","age": 18}];';
//console.info($.type(stuStr));
//对象字符串-->对象
var stu=$.parseJSON(stuStr);
//console.info($.type(stu));
//console.info(stu.name,stu.age);
$.each(stu,function(i,j){undefined
console.info(j);
}) */

/* //定义对象数组的字符串
var stuStr='[{"name": "哈哈","age": 18},{"name": "呵呵","age": 18}]';
//转成js对象数组
//console.info($.type(stuStr));
var stus=$.parseJSON(stuStr);
// console.info($.type(stus));
//遍历对象数组
$.each(stus,function(i,j){undefined
$.each(j,function(o,p){undefined
console.info(p);
})
}) */

//二属性和CSS
/* //2.1 atter()拿值取值
//var path=$("#aa").attr("src");
//console.info(path);
//设值
$("#aa").attr("src","img/2.jpg");
$("#aa").attr("width","400px"); */

/* //2.2 removeAtter() 移除属性值
$("#aa").removeAttr("src");
$("#aa").removeAttr("width"); */

/* // 2.3 addClass() 动态增加样式
$("#aa").addClass("xx");//样式叠加
// $("#aa").attr("class","xx");//样式替换 */

/* //2.4 removeClass() 删除对应的样式
$("#aa").removeClass("xx"); */

/* //2.5 prop()和attr的区别属性值是boolean类型的时候
//给图片增加name值
//$("#aa").attr("name","abc");
//$("#aa").prop("name","abc");
$("#ok").click(function(){undefined
$(".abc").prop("checked",true);
})
$("#nook").click(function(){undefined
$(".abc").prop("checked",false);
}) */

/* //案例3:优化表格隔行换色
$("table tr:even").addClass("aaa");
$("table tr:odd").addClass("bbb"); */

/* //2.6 html()和text()的区别
var a=$("p").html();//会包含标签
console.info(a);
var b=$("p").text();//只打印纯文本
console.info(b); */

/* //2.7 val() 拿值设值
//拿文本框的value值
//var a=$("#cc").val();
//alert(a);
//赋值
// $("#cc").val("呵呵呵呵"); */

/* //CSS
//1.设置值
//rgb 三原色红绿蓝 a透明度只能在0-1之间
$("p").css("background","rgba(225,0,0,0.5)");//单属性
//$("p").css({"background":"red","color":"red"});//多属性
//2.拿值
var a=$("p").css("background");
console.info(a); */

})
function mya(){undefined
alert(0);
}
</script>
</head>
<body>
<input type="text" value="dddd" id="cc"/>
<p>心痛<span>一秒钟</span></p>
<img src="img/1.jpg" width="50%" id="aa" class="yy"/>
<hr />
<input type="button" value="全选" id="ok" />
<input type="button" value="取消全选" id="nook" />
<input type="checkbox" class="abc" value="植物大战僵尸">植物大战僵尸
<input type="checkbox" class="abc" value="植物大战僵尸1">植物大战僵尸1
<input type="checkbox" class="abc" value="植物大战僵尸2">植物大战僵尸2
<table border="1px" width="50%">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>

YangKen_liu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

案例<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>$工具方法&属性CSS</title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> ...
复制链接

扫一扫