jQuery-02($工具方法&属性和CSS)

一、$工具方法
1.  $.each()遍历数组.对象的数据
    定义对象{}

var stu={"name":"小明","age":38};

遍历对象

console.info(stu.name,stu.age);//方式一
$.each(stu,function(k,v){//key 键 ，value 值（内容）
	console.info(v);
	})//方式二

定义数组[]

var names=["小明","小红","小刚","大熊"];

遍历数组

$.each(names,function(a,n){//下标、元素
	console.info(n);
	})

定义对象数组[{},{}]

var stus=[{"name":"中华田园犬","age":9},{"name":"狮子狗","age":18}];

遍历对象数组

$.each(stus,function(i,s){
console.info(s.name,s.age);
})//方式一
$.each(s,function(a,b){
console.info(a,b);
})//方式二

2.  $.trim()去除前后空格

var str="   zking   ";
console.info($.trim(str));//如果不确定 可以用.length 试一试

3.  $.type得到数据类型

var stu={"name":"小明","age":"28"};
	console.info($.type(stu));//对象

4.   $.isFuntion()判断是否是函数

var stu={"name":"小明","age":"28"};
	console.info($.inFuntion(stu))//返回false;
	假设有一个名为myf的函数
	console.info($.inFuntion(myf))//返回true;

5.    $.isArray() 判断是否是数组

var strs=[{"name":"中华田园犬","age":9},{"name":"狮子狗","age":18}];
	console.info($.isArray(strs));//true

定义对象字符串

1.6 $.parseJSON 解析json格式的字符串-->js的数组/对象    

var stuStr='{"name":"牛逼","age":38}';
var stu=$.parseJSON(stuStr);
console.info(stu);
$.each(stu,function(k,v){
console.info(v);
})
var strs=[{"name":"大牛逼","age":38},{"name":"小牛逼","age":18}];
//转成js对象数组
console.info($.type(stus));
var strStr=$.parseJSON(stus);
//遍历数组
$.each(stuStr,function(k,b){
console.info(b.name,b.age)
})

二.属性与css

2.1 attr()拿值 设值

var mpath = $("#aa").attr("src");
console.info(mpath); //拿值

//设值
$("#aa").attr("src", "img/1.jpg"); //改变图片
$("#aa").attr("width", "200px"); //改变宽度

2.2 removeAttr() 移除属性值

$("#aa").removeAttr("src");//移除图片路径
$("#aa").removeAttr("width");//移除宽度

2.3 prop和attr的区别 属性值是boolean类型的时候
给图片增加name值

$("#aa").attr("name","abc");
$("#aa").prop("name","abc")
$("#ok").click(function(){
$(".abc").attr("checked",true);
})$("#nook").click(function(){$(".abc").attr("checked",false);
})

2.4 html()与text()的标签

var a=$("p").html();//会包含子标签
var b=$("p").text();//只会打印纯文本

2.5val()拿值 设值

拿文本框的value值

var a=$("#wc").val();
console.info(a);

设置文本框的value值

$("#wc").val("嘿嘿嘿");//赋值

CSS的设置值

$("p").css("background","red");//单属性 //多属性参考上期

拿值

$("p").css("background");

总结：jQuery的很多方法都可以一单双用（一个单词可以不一样的用法，大部分是带参与不带参 参数的多少决定的）

根据今天学过的知识与之前的只是结合做出以下案例

一、

全选<input type="checkbox" id="aa">
        <input type="checkbox" class="bb">
        <input type="checkbox" class="bb">
        <input type="checkbox" class="bb">
        <input type="checkbox" class="bb">

1.完成全选按钮的全选事件与取消全选事件（用jQuery做）

$(function(){
//拿到全选按钮
$("#aa").click(function(){//全选框获得点击事件
    if($("#aa").is(":checked")==false){//得到全选框的全选状态 如果等于未选中
            $(".bb").prop("checked",false);//所有复选框状态为未选中
        }else{//否则（上面条件不成立）
            $(".bb").prop("checked","true");//所有复选框的状态为选中
        }
    })
})

2.完善全选（把所有复选框的状态与全选框关联）

这里我总结了两种方法

第一种:核心思路：

1.给所有复选框增加点击事件

2.判断选中的复选框的长度与所有复选框的长度

3.如果相等（证明所有复选框已经选中）全选按钮就选中

否则相反

//给所有复选框增加点击事件
$(".bb").click(function(){
    if($(".bb:checked").length!=$(".bb").length){//把选中状态的复选框长度与所有复选框长度比较
    $("#aa").prop("checked",false);//不相等
}else{
    $("#aa").prop("checked",true);//相等
}
})

第二种：

1.设置每一个复选框的点击事件

2.遍历复选框对象的下标

3.根据下标进行判断（一个没选中 全选就未选中）

否则全选选中

$(".bb").click(function() {//给所有复选框增加点击事件
							var bb = $(".bb");
							var f=true;//假设法
							$.each(bb, function(k, v) {//遍历所有复选框
							if (bb[k].checked == false) {//根据下标判断每一个复选框的状态
								$("#aa").prop("checked", false);//有一个复选框的状态未选中
									f=false;//假设就变成false
								} else {//否则（上述不成立）
									$("#aa").prop("checked", f);//假设为true 全选选中
								}
							})
						})

标签：jQuery,02,aa,console,name,复选框,info,var,CSS
来源： https://blog.csdn.net/weixin_66939060/article/details/123613745