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

2022-03-20 16:01:20 阅读：167 来源： 互联网

标签：jQuery 02 aa console name 复选框 info var 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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