0
点赞
收藏
分享

微信扫一扫

jQuery02(工具&属性&CSS)

今天你读书了吗 2022-03-17 阅读 42

《工具方法》

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"});//{键:值,键:值}  多个属性
举报

相关推荐

jQuery02($工具&属性&CSS)

jQuery02工具方法&属性CSS

jquery02

jQuery02

jQuery($工具&属性&CSS)

jQuery—$工具方法&属性&CSS

工具-jQuery属性和CSS

0 条评论