$工具&属性&CSS
阳文轩
今天要分享的是$工具&属性&CSS
先来说以下$工具，如下:
$.each()/$.trim()/$,type/$.isArray()/$.isFunction()/$.parseJSON() 就是这些，然后下面是一些使用的方法
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
//一 $工具方法
//1.1 $.each 遍历对象 数组
// 定义对象
var stu ={"name":"炎帝","age":39};
遍历对象
$.each(stu,function(k,v){
console.info(k,v);
})
console.info(stu.name.stu.age);
定义数组
var names = ["看美女","大傻呗","看帅哥"];
//遍历数组
$.each(names,function(i,n){
console.info(i,n);
})
//定义对象数组
var stus = [{"name":"炎帝","age":39},{"name":"黄帝","age":49}];
遍历对象数组
$.each(stus,function(i,stu){//下标,元素
console.info(stu.name,stu.age);
$.each(stu,function(k,v){
console.info(v);
})
})
//1.2 $.trim() 去除前后空格
var str = " zking ";
console.info($.trim(str).length);
//1.3 $.type() 得到变量的数据类型
var str = 12.6;
var stu ={"name":"炎帝","age":39};
var stus = [{"name":"炎帝","age":39},{"name":"黄帝","age":49}];
console.info($.type(stus));
//1.4 $.isArray()判断是否是数组
var stu ={"name":"炎帝","age":39};
var stus = [{"name":"炎帝","age":39},{"name":"黄帝","age":49}];
console.info($.isArray(stus));
//1.5 $.isFunction()判断是否是函数
var stus = [{"name":"炎帝","age":39},{"name":"黄帝","age":49}];
console.info($.isFunction(myf));
//1.6 $.parseJSON() 将json格式的字符串--->js的对象数组或者数组
var stuStr ='{"name":"黄帝","age":49}';
console.info($.type(stuStr));//string
var stu = $.parseJSON(stuStr);
console.info($.type(stu));json格式的字符串-->js对象
// console.info(stu.name,stu.age);
$.each(stu,function(k,v){
console.info(v);
})
//json格式的字符串-->js的对象数组
var stuStr = '[{"name":"炎帝","age":39},{"name":"黄帝","age":49}]';
// console.info($.type(stuStr));
var stus = $.parseJSON(stuStr);
// console.info($.type(stus));
//遍历对象数组stus
$.each(stus,function(a,b){
// consloe.info(b,name,b.age);
$.each(b,function(k,v){
console.info(v);
})
})
})
</head>
<body>
</body>
</html>用法呢也是很简单的，注释都有打出来
接下来要分享的是jQuery属性和css，首先还是和之前一样先写script，这次也要写CSS，所以要把CSS写在前面script前面，body那里也要写一些东西来测试这些方法
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.xx {
border: 5px solid gold;
}
.cc {
background-color: palevioletred;
}
.dd {
background-color: paleturquoise;
}
</style>
<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
//二 jQuery属性和css
//2.1 attr()拿属性值/设置属性值
// 拿值
var mpath = $("#aa").attr("width"); //拿值
console.info(mpath);
// 给某个属性设置值
$("#aa").attr("src", "img/3.jpg");
$("#aa").attr("width", "200px");
//2.2 removeAttr()移除某个属性对应属性值
$("#aa").removeAttr("width");
//2.3 addClass()增加样式值
$("#aa").addClass("xx");
//2.4 removeClass() 移除样式值
$("#aa").removeClass("xx"); //class仍然在
//prop()和attr()的区别
//给img增加name值
$("#aa").attr("mame", "abc");
$("#aa").prop("mame", "abc");
//attr()和addClass的区别
$("#aa").attr("class", "xyz");
样式的替换
$("#aa").addClass("xyz");
样式的叠加
//作业1:使用复选框实现全选功能
//全选功能
$("#ok").click(function() {
$(".aaa").prop("checked", true);
})
$("#nook").click(function() {
$(".aaa").prop("checked", false);
})
//2.5 val()拿值,设置值
//拿值
var aa = $("#bb").val();
console.info(aa);
//赋值
$("#bb").val("笑死");
//2.6html和tex()区别
var a = $("p").html(); //拿到其子标签
console.info(a);
var b = $("p").text(); //不会拿到子标签 只会打印纯文本
console.info(b);
//优化隔行换色
$("table tr:even").addClass("cc");
$("table tr:old").addClass("dd");
//css
$("p").css("background", "pink"); //键,值 单个
$("p").css({
"background": "yellow",
"color": "blue"
}); //{键：值，键：值} 多个属性
//拿值
$("p").css("background");
console.info(a)
})
</head>
<body>
<p>颜弟和<span>wifi</span>的乡村爱情故事</p>
<img src="img/2.jpg" width="400px" id="aa" class="jk" /><br />
<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 />
<input type="text" id="bb" />
<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>
</html>以上呢就是今天的全部内容，都标有注释，还是比较容易懂得哈，我这个还不是很全，后续还会发一些的
类似资料：