一：jQuery的方法
- $.each();遍历指定的数组或对象
- $.trim();去除字符串两边的空格
- $.type();得到数据的类型
- $.isArray();判断是否是数组
- $.isFunction();判断是否是函数
- $.parseJSON();解析json字符串转换为对象或数组
方法使用的案例：
$(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>二：jQuery的属性
1.attr();设置某个标签的值或获取某个标签的值
2.removeAttr();//删除某个标签属性
3.addClass();//给某个标签添加class属性值
4.removeClass();//删除某个class属性的值
5.prop()和attr()类似，区别prop用于属性为Boolean类型的情况比如多远
6.html();获取某一个标签体类容，可以包含子标签内容(包含标签名)/设置
7.text();获取某一个标签内容，可以包含子标签内容(不包括标签名)/设置
8.val();获取用户输入框的内容/设置
属性使用的案例：
<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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
