jQuery教程

jQuery入门之工具方法&CSS属性及方法

本文主要是介绍jQuery入门之工具方法&CSS属性及方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、$工具方法

1、$.each()：用于遍历数组、对象、对象数组中的数据；

（1）遍历对象

$(function() {
			//一、$工具方法
			//1.1$.each 遍历对象 数组
			//定义对象
			var stu = {"name":"张三","age":38};
			//遍历对象 k指的是索引 v指的是元素
			$.each(stu,function(k,v){
				console.info(k,v);
			})
})

（2）遍历数组

$(function() {
			//定义数组
			var stus= ["张三","李四","王五","赵六"];
			//遍历数组
			$.each(stus,function(i,n){
				console.info(n);
			}) 
})

（3）遍历对象数组

$(function() {
			//定义对象数组 [{}]
			var stus = [{"name":"张大三","age":38},{"name":"张小三","age":39}];
			//遍历对象数组
			$.each(stus, function(i, stu) {
				//console.info(stu.name,stu.age);
				$.each(stu, function(a, b) {
					console.info(b);
				})
			})
})

2、$.trim()：用于去除前后的空格

$(function() {
			// 1.2$.trim() 去除前后的空格
			var str = "   zking  ";
			console.info(str.length);
			console.info($.trim(str).length);
})

3、$.type(obj) ：得到obj的数据类型
 

$(function() {
			// 1.3 $.type(obj) 得到变量的数据类型
			var str = 23.6;
            var str1 = 23;
			var stu = {"name":"张三","age":38};
			var stus = [{"name":"张大三","age":38},{"name":"张小三","age":39}];
			console.info($.type(stus));
})

注意： 不管是整数还是小数返回的数据类型都是number

4.$.isArray(obj)：判断是否是数组

$(function() {
			// 1.4 $.isArray() 判断是否是数组
			var stu = {"name": "张三","age": 38};
			var stus = [{"name":"张大三","age":38},{"name":"张小三","age":39}];
			console.info($.isArray(stu));
})

5.$.isFunction(obj)：判断是否是函数

$(function() {
			//1.5 $.isFunction()  判断是否是函数
			var stus = [{"name":"张大三","age":38},{"name":"张小三","age":39}];
			console.info($.isFunction(myf));
					
			function myf(){
				alert(123);
			}
})

6.$.parseJSON(obj)：解析json字符串转换为js对象/数组

$(function() {
			//1.6 $.parseJSON() 将json格式的字符串-->js的对象或者数组
			var stuStr = '{"name":"张三","age":38}';
			console.info($.type(stuStr));string
			var stu = $.parseJSON(stuStr);
			console.info($.type(stu));//object  json格式的字符串-->js对象
			console.info(stu.name,stu.age);
			$.each(stu,function(k,v){
				console.info(v);
			})
 
 
			//将json格式的字符串-->js的对象数组
			var stusStr = '[{"name":"张大三","age":38},{"name":"张小三","age":39}]';
			console.info($.type(stusStr));string
			var stus = $.parseJSON(stusStr);
			console.info($.type(stus));array
			//遍历
			$.each(stus,function(a,b){
			    console.info(b.name,b.age);
				$.each(b,function(k,v){
					console.info(v);
				})
			}) 
 
})

二、属性

1.attr()：获取某个标签属性的值，或设置某个标签属性的值

$(function() {
		var mpath = $("#aa").attr("src"); //拿值
		console.info(mpath);
		//给某个属性设置值
		$("#aa").attr("width","100px");
 
})
<body>
<img src="img/logo.jpg" width="200px" id="aa">;
</body>

2.removeAttr()：删除某个标签

$(function() {
	$("#aa").removeAttr("src");//无图片
 
})
<body>
<img src="img/logo.jpg" width="200px" id="aa">;
</body>

3.addClass()：给某个标签添加class属性值

$(function() {
	$("#aa").addClass("xx");
 
})
<body>
<img src="img/logo.jpg" width="200px" id="aa">;
</body>

4.removeClass():删除某个标签class属性值

$(function() {
	//2.4 removeClass() 删除某个标签属性值
	$("#aa").removeClass("xx");//class仍然在 值会被移除掉
 
})
<body>
<img src="img/logo.jpg" width="200px" id="aa" class="xx">;
</body>

5.prop():获取某个标签属性的值，或设置某个标签属性的值

注意：和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如多选

$(function() {
	//给img标签增加name值
	$("#aa").attr("name","abc");
	$("#aa").prop("name","abc");
})
<body>
<img src="img/logo.jpg" width="200px" id="aa">;
</body>

6.html():获取某一个标签体内容（注意：该标签体中可以包含子标签）

               // html()
				var a = $("p").html(); //拿到其子标签
				console.info(a);

7.text()：获取某一个标签体内容(注意：该标签体不能包含子标签)

$(function() {
	//html() 和text() 的区别
	    var a = $("p").html();//会拿到子标签
		console.info(a);
		var b = $("p").text();//不会拿到子标签 只会打印纯文本
		console.info(b);
 
})
<body>
<p>aa和<span>bb</span>的爱情故事</p>
</body>

8.val()：主要用户获取/设置输入框的值

$(function() {
	var aa = $("#bb").val();//拿值
	console.info(aa);
	$("#cc").val("你好，世界");//设值
 
})
<body>
<input type="text" id="bb" value="你好" />
<input type="text" id="cc" />
</body>

三、css

$(function() {
	$("p").css("background", "red"); //一个键,一个值
			$("p").css({"background":"pink","color":"blue"})//{键:值,键:值} 多个用逗号隔开
			//拿值
			var a = $("p").css("background");
			console.info(a);
 
})
<body>
<p>aa和<span>bb</span>的爱情故事</p>
</body>

四、案例

实现全选功能

$(function() {
	 $("#ok").click(function(){
				$(".aaa").prop("checked",true);
			})
			
			$("#nook").click(function(){
				$(".aaa").prop("checked",false);
			}) 
			//注意:在为Boolean时 attr会进入之前的状态 但是prop不会
 
})
<body>
<input type="checkbox" class="aaa" value="喜欢看电影" />喜欢看电影
		<input type="checkbox" class="aaa" value="喜欢听歌" />喜欢听歌
		<input type="checkbox" class="aaa" value="喜欢玩手机" />喜欢玩手机
		<input type="button" value="全选" id="ok" />
		<input type="button" value="取消全选" id="nook" /><br />
</body>

注意:在为Boolean时 attr会进入之前的状态 但是prop不会

            attr和addClass的区别
            attr:会覆盖之前的样式
            addClass:会前调用原来的样式 再调用加的样式

实现隔行换色

$(function() {
	$("table tr:even").addClass("cc");
							$("table tr:odd").addClass("dd");
 
})
<body>
<input type="checkbox" class="aaa" value="喜欢看电影" />喜欢看电影
		<table border="1px" width="50%">
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
		</table>
</body>

以上就是今天的全部内容，如果有帮助到你就请点个赞再走呗！

这篇关于jQuery入门之工具方法&CSS属性及方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航