《工具方法》
1.$.each():遍历数组,对象,对象数组中的数据
提示: 数组用[] 对象用{}
//定义对象
var stu = {"name":"哈哈哈","age":13};
//遍历对象
$.each(stu,function(k,v){
console.info(v);
})
console.info(stu.name,stu.age);
//定义对象数组[{},{}]
var stus = [{"name": "嘿嘿嘿","age": 37}, {"name": "哈哈哈","age": 22}];
//遍历对象数组
$.each(stus, function(i,stu) { //下标,元素
console.info(stu.name, stu.age);
$.each(stu, function(k, v) {
console.info(v);
})
})
2.$.trim():去除字符串两边的空格
3.$.type(obj):得到数据的类型
4.$.isArray(obj):判断是否是数组
5.$.isFunction(obj):判断是否是函数
6.$.parseJSON(obj):解析json字符串转换为js对象/数组
<案例演示>
//1.2$.trim() 去除前后空格
var str = " zking ";
console.info($.trim(str).length);
//1.3 $.type() 得到变量的数据类型
var str = 12.6;
var stu = {"name":"哈哈哈","age":13};
var stus = [{"name": "嘿嘿嘿","age": 37},{"age": 22}];
console.info($.type(stus));
//1.4$.isArray() 判断是否是数组
var stu = {"name":"哈哈哈","age":13};
var stus = [{"name": "嘿嘿嘿","age": 37},{"age": 22}];
console.info($.isArray(stus));
//1.5 $.isfunction() 判断是否是函数
var stus = [{"name": "嘿嘿嘿","age": 37},{"age": 22}];
console.info($.isFunction(myf()));
function myf(){
}
《jQuery属性和CSS》
《属性》
1.attr():获取某个标签属性的值,或设置某个标签属性的值
var mpath = $("#aa").attr("src");//拿值
console.info(mpath);
//给属性设置值
$("#aa").attr("src","img/1.JPG");
$("#aa").attr("width","200px");
<2.removeAttr():删除某个标签属性>
--------拿到id值调用removeAttr()------
<3.addClass():给某个标签添加class属性值>
-------首先在头部定义一个样式,其次拿到需要增加样式的id值,最后调用addClass(),括号里放样式
4.removeClass():删除某个标签class属性值
$("#aa").removeClass("xx");
提示:样式被移除,Class仍然存在
补充:attr()和addClass的区别
$("#aa").attr("class","xyz");//样式覆盖(替换)
$("#aa").addClass("xyz");//样式叠加
5.prop():和attr()类似,区别在于prop用于属性值为Boolean类型的情况,比如多选
代码演示:<全选功能>
提示:attr不适合用在boolean类型的时候就用prop(因为attr会进入执行状态)
思路:首先定义两个函数,其次拿到全选的id值,点击全选时为true(选中状态)
最后拿到取消全选的id值,点击时为false(取消选中)
$("#ok").click(function(){
$(".aaa").prop("checked",true);
})
$("#nook").click(function(){
$(".aaa").prop("checked",false);
})
6.html():获取某一个标签体内容(注意:该标签体中可以包含子标签)
7.text():获取某一个标签体内容(注意:该标签体不能包含子标签)
二者的区别
var a = $("p").html();//拿到其子标签
console.info(a);
var b = $("p").text();//不会拿到子标签 只会打印纯文本
console.info(b);
8.val():主要用户获取/设置输入框的值
《CSS:设置标签的样式》
1.获取样式值
2.获取单个样式值
3.获取多个样式值
案例1:
$("p").css("background","rgba(255,0,0,0.5)");//键,值 单个属性
$("p").css({"background":"pink","color":"blue"});//{键:值,键:值} 多个属性