jQuery—$工具方法&属性&CSS
1 思维导图
2 常用属性和工具方法
2.1 工具方法
1.$.each();遍历指定的数组或对象等…
2.$.trim();去除字符串两边的空格
3.$.type();得到数据的类型
4.$.isArray();判断是否是数组
5.$.isFunction();判断是否是函数
6.$.parseJSON();解析json字符串转换为对象或数组
2.2 属性
7.attr();设置某个标签的值或获取某个标签的值
8.removeAttr();//删除某个标签属性
9.addClass();//给某个标签添加class属性值
10.removeClass();//删除某个class属性的值
11.prop()和attr()类似,区别prop用于属性为Boolean类型的情况比如多远
12.html();获取某一个标签体类容,可以包含子标签内容(包含标签名)/设置
13.text();获取某一个标签内容,可以包含子标签内容(不包括标签名)/设置
14.val();获取用户输入框的内容/设置
2.3 案例
$(function(){
//定义数组[]
var arrays=["sd","aa","da","eqda"];
//定义对象{"键":"值"}键值对,键一定要用双引号包裹,值:如果是数值类型则不需要双引号,字符串需要双引号。
var p={"name":"张三","sex":"男","age":18};
//定义对象数组
var ps=[
{"name":"张三","sex":"男","age":18},
{"name":"李四","sex":"男","age":18},
{"name":"王五","sex":"男","age":18},
];
//遍历数组:下标和值
$.each(arrays,function(i,v){//参数:下标和值
console.info(i+"__"+v);
})
//遍历对象:键key 和 值value
$.each(p,function(k,v){
console.info(k+"__"+v);
})
//遍历对象数组
$.each(ps,function(i,v){//参数:下标和值
console.info(v.name+"__"+v.age);
// //进一步的遍历对象数组里面的每个对象
$.each(v,function(k,v){//参数:键和值
console.info(i+"__"+k+"__"+v);
})
})
//获取对象长度
var str=" asbhaj ";
console.info($.trim(str).length); //trim()去除两边字符串的空格
//得到数据的类型$.type(obj)
var a=12;
var b=12.2;
var c="dafa";
var d=true;
var e='da';
var f=[2213,332,545,1,22];
var g={"name":"王五","sex":"男","age":18};
console.info("a="+$.type(a));
console.info("b="+$.type(b));
console.info("c="+$.type(c));
console.info("d="+$.type(d));
console.info("e="+$.type(e));
console.info("f="+$.type(f));
console.info("g="+$.type(g));
var f=[123,231,646];
var g={"name":"李四"};
//判断是否是数组$.isArray(obj)
console.info($.isArray(g));
//判断是否是函数$.isFunction(obj)
// 这里写一个函数
function da(){
}
console.info($.isfunction(da));
//解析json字符串转换为js对象/数组$.parseJSON(obj)
var g={"name":"王五","sex":"男","age":18};
//将JSON字符串,g转换成js对象或者数组
console.info(g);
var str1=$.parseJSON(g);
console.info("str1__"+$.type(str1));
var ps ='[{"name":"张三","sex":"男","age":18},{"name":"李四","sex":"男","age":18},{"name":"王五","sex":"男","age":18},]';
console.info($.type(ps));
var str2=$.parseJSON(ps);
console.info("str2__"+$.type(str2));
})
</script>
3 属性的使用方法CSS
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<style type="text/css">
/* 这个是最后一个案例的css */
/* 奇数行颜色 */
.a{
background-color: green;
}
/* 偶数行颜色 */
.b{
background-color: yellow;
}
</style>
<script type="text/javascript">
$(function() {
// 1.attr():
// 1.1获取id为sa的img元素的src属性值。
var sa = $("#sa").attr("src");
console.info(sa);
// 1.2动态的给a元素设置href属性值。
$("a").attr("href", "https://www.baidu.com/");
// 2.removeAttr():移除“百度”的超链接属性。
$("a").removeAttr("href");
// 3.addClass():给a标签添加一个sb类名。
$("a").addClass("sb");
// 4.removeClass():删除a标签的sb类名。
$("a").removeClass("sb");
// 5.prop():给a标签添加一个name属性。
//prop:多用于属性值为boolean类的属性
$("a").prop("name","na");
$("a").attr("href","https://www.baidu.com/");
// 6.案例:全选和取消全选。
// 全选
$("#qx").click(function(){
var cas=$(".ca");
$.each(cas,function(i,v){
$(v).prop("checked",true);
})
});
//反选 取消全选
$("#fx").click(function(){
var cas=$(".ca");
$.each(cas,function(i,v){
$(v).prop("checked",false);
})
});
// 7.html()、text()、val():
var ca=$("#da").val();
console.info(ca)
// 7.1通过text()属性获取span标签里的内容。
var sa=$("#sp").text();
console.info(sa);
//7.2通过text()重新设置span标签里的内容。
$("#sp").text("这是修改的内容");
// 7.3通过html()属性获取body标签里的内容。
var sa=$("body").html();
console.info(sa);
// 8.案例:使用jQuery属性优化表格隔行换色案例。
// 奇数行按钮,下标为偶数
$('#js').click(function(){
$("table tr:even").attr("class","a");
})
// 偶数行按钮,下标为奇数
$('#os').click(function(){
$("table tr:odd").attr("class","b");
})
})
</script>
</head>
<body>
<input type="text" id="da" value="文本框">
<span id="sp">
<h1>嗨!</h1>我是span行级标签
</span><br />
<img src="img/10.jpeg" id="sa" />
<img src="img/9.jpeg" id="sb" />
<a href="http://www.baidu.com" class="sa">百度</a><br />
<div id="da">这是一个超级div</div>
<table border="1px" width="300px" height="200px" align="center">
<tr>
<td>名字<input type="checkbox" class="ca" /></td>
<td>性别<input type="checkbox" class="ca"/></td>
<td>年龄<input type="checkbox" class="ca"/></td>
<td>地址<input type="checkbox" class="ca"/></td>
</tr>
<tr>
<td>张三<input type="checkbox" class="ca"/></td>
<td>男<input type="checkbox" class="ca"/></td>
<td>12<input type="checkbox" class="ca"/></td>
<td>湖南<input type="checkbox" class="ca"/></td>
</tr>
<tr>
<td>李四<input type="checkbox" class="ca"/></td>
<td>女<input type="checkbox" class="ca"/></td>
<td>13<input type="checkbox" class="ca"/></td>
<td>长沙<input type="checkbox" class="ca"/></td>
</tr>
<tr>
<td>王五<input type="checkbox" class="ca" /></td>
<td>男<input type="checkbox" class="ca"/></td>
<td>18<input type="checkbox" class="ca"/></td>
<td>岳阳<input type="checkbox" class="ca"/></td>
</tr>
<tr>
<td>麻子<input type="checkbox" class="ca"/></td>
<td>女<input type="checkbox" class="ca"/></td>
<td>19<input type="checkbox" class="ca"/></td>
<td>邵阳<input type="checkbox" class="ca"/></td>
</tr>
</table>
<center>
<input type="button" value="奇数行" id="js" />
<input type="button" value="偶数行" id="os" />
<input type="button" value="全选" id="qx" />
<input type="button" value="反选" id="fx" />
</center>
</body>