目录
一、思维导图
一、jQuery的$工具方法
二 、jQuery属性和CSS
一、思维导图
我是小陽,欢迎大家来看我的文章。我们先看一下思维导图来理一下思路,然后在进入方法讲解
一、jQuery的$工具方法
1.1$each():遍历数组,对象,对象数组中的数据
对象:
//定义对象
var stu={"name":"张小凡","age":38};
//遍历对象
/* $.each(stu,function(k,v){
console.info(v);
}) */
console.info(stu.name,stu.age);
结果如下:
两种遍历都是可以运行的
数组:
//定义数组
var names=["张小凡","张大凡","白大纯","沈以诚","白小纯"];
//遍历数组
$.each(names,function(i,n){
console.info(n);
})
结果如下:
对象数组:
//定义对象数组[{}]
var stus=[{"name":"张小凡","age":30},{"name":"白小纯","age":20}];
//遍历对象数组
$.each(stus, function(i, stu) {
// console.info(stu.name,stu.age);
$.each(stu, function(a, b) {
console.info(b);
})
})
结果如下:
由此可见$.each 遍历对象、数组 {一个键对应一个值,用:隔开,键与键之间用','隔开}
1.2 $.trim 去除前后空格
var str=" abc ";
// alert(str.length);
console.info($.trim(str).length);
结果:
1.3 $.type(obj) 得到变量的数据类型
var str =12.6;//number
var stu={"name":"张小凡","age":38};//object
var stus=[{"name":"张小凡","age":30},{"name":"张大凡","age":38}];//array
console.info($.type(stus));
结果如下:
1.4 $.isArray()判断是否是数组
var stu={"name":"白小纯","age":20};//false
var stus=[{"name":"白小纯","age":25},{"name":"白大纯","age":30}];//true
console.info($.isArray(stus));
结果如下:
1.5 $isFunction()判断是否是函数
注意:这里要代入函数的时候带括号为false,不带为true
var stus=[{"name":"张小凡","age":16},{"name":"张大凡","age":20}];
// console.info($.isFunction(myf));//true
console.info($.isFunction(myf()));//false
function myf(){
alert(1);
}
结果为:false;
1.6 $.parseJSON()将json格式的字符串-->js的对象或者数组(这里是重点!)
var stus='{"name":"张小凡","age":19}';
console.info($.type(stus));//string
var stu = $.parseJSON(stus);//not available
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);
})
})
结果入下:
二 、jQuery属性和CSS
2.1 attr() 拿属性值和设置属性值
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入jQuery类库 -->
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 另起一个script块 -->
<script type="text/javascript">
$(function() { //相当于window.onload
//2.1 attr() 拿属性值和设置属性值
var mpath = $("#aa").attr("src");//拿值
console.info(mpath);
//给某个属性设置值
$("#aa").attr("src","img/5.jpg");//设值
$("#aa").attr("width","100px");
})
</script>
</head>
<body>
<img src="img/1.png" width="200px" id="aa">
</body>
2.3 addClass() 增加样式值
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.xx {
border: 1px solid red;
}
</style>
<!-- 引入jQuery类库 -->
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 另起一个script块 -->
<script type="text/javascript">
$(function() { //相当于window.onload
//2.3 addClass() 增加样式值
$("#aa").addClass("xx");
})
</script>
</head>
<body>
<img src="img/1.png" width="200px" id="aa">
</body>
2.4 removeClass() 删除某个标签属性值
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.xx {
border: 1px solid red;
}
</style>
<!-- 引入jQuery类库 -->
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 另起一个script块 -->
<script type="text/javascript">
$(function() { //相当于window.onload
//2.3 addClass() 增加样式值
$("#aa").removeClass("xx");//class仍然在 值会被移除掉
})
</script>
</head>
<body>
<img src="img/1.png" width="200px" id="aa">
</body>
2.5 prop() 和attr类似 prop与attr的区别
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入jQuery类库 -->
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 另起一个script块 -->
<script type="text/javascript">
$(function() { //相当于window.onload
//2.5 prop() 和attr类似 prop与attr的区别
//给img标签增加name值
$("#aa").attr("name","abc");
$("#aa").prop("name","abc");
$("#ok").click(function(){
$(".aaa").prop("checked",true);
})
$("#nook").click(function(){
$(".aaa").prop("checked",false);
})
//注意:在为Boolean时 attr会进入之前的状态 但是prop不会
//attr和addClass的区别
//attr:会覆盖之前的样式
//addClass:会前调用原来的样式 再调用加的样式
})
</script>
</head>
<body>
<img src="img/1.png" width="200px" id="aa">
<input type="checkbox" class="aaa" value="凡人修仙传" />凡人修仙传
<input type="checkbox" class="aaa" value="写CSDN" />写CSDN
<input type="checkbox" class="aaa" value="喜欢玩手机" />喜欢玩手机
<input type="button" value="全选" id="ok" />
<input type="button" value="取消全选" id="nook" /><br />
</body>
2.6 val() 拿值 设值
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入jQuery类库 -->
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 另起一个script块 -->
<script type="text/javascript">
$(function() { //相当于window.onload
//2.6 val() 拿值 设值
var aa = $("#bb").val();//拿值
console.info(aa);
$("#cc").val("你好,世界");//设值
})
</script>
</head>
<body>
<input type="text" id="bb" value="你好" />
<input type="text" id="cc" />
</body>
结果如下:
2.7 html() 和text() 的区别
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入jQuery类库 -->
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 另起一个script块 -->
<script type="text/javascript">
$(function() { //相当于window.onload
//2.7 html() 和text() 的区别
var a = $("p").html();//会拿到子标签
console.info(a);
var b = $("p").text();//不会拿到子标签 只会打印纯文本
console.info(b);
})
</script>
</head>
<body>
<p>张小凡和<span>白小纯</span>的修仙故事</p>
</body>
如图:
优化隔行换色:
.使用[addClass()]属性;
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.cc {
background-color: azure;
}
.dd {
background-color: beige;
}
</style>
<!-- 引入jQuery类库 -->
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<!-- 另起一个script块 -->
<script type="text/javascript">
$(function() { //相当于window.onload
//优化隔行换色
$("table tr:even").addClass("cc");
$("table tr:odd").addClass("dd");
})
</script>
</head>
<body>
<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>
如图:
好了,我的讲解已经结束了,愿大家能健康的生活,一起通过论坛来进步,加油!我是小陽,欢迎大家来看我的文章。