【无标题】

最新推荐文章于 2025-05-03 10:56:02 发布
巴枝子
最新推荐文章于 2025-05-03 10:56:02 发布
阅读量215
点赞数 1
文章标签： java
本文链接：https://blog.youkuaiyun.com/fddggghrr/article/details/123591664
版权
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery02:$工具方法&属性</title>
		<style type="text/css">
		.xx{
			border:solid red 5px;
		}
		.aaa{
			background-color:#FF0000 ;
		}
		.bbb{
			background-color: brown;
		}
		</style>
		<script src="" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				//1.工具方法
				//1.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(name,function(){//小标 ，元素
				// 	console.info(n);
				// })		
				//定义对象数组  [{},{}]
   // 				var stuStr=[{"name":大美女","age":38},{"name":"小牛逼","age":18}];
			// 	$.each(s,function(k,v){
			// 		console.info(v);
			// 	})
			// 
			
			//1.2 4.trim(去前后空格)
			// var str=" zking ";
			// console.info($.trim(str).length);
			
			//1.3 $.type() 得到数据类型
			// var stu={"name":"牛逼","age":38};
			// var stusStr=[{"name":大美女","age":38},{"name":"小牛逼","age":18}];
			// var str-1.5;
			// console.info($.type(stus));
			 
			//1.4 $.inFuntion() 判断是否是函数
			// var stu={"name":"牛逼","age":38};
			//1.5 $.isArray() 判断是否是数组
			// console.info($.isFunction(myf);
			// var stu={"name":"牛逼","age":38};
			// var stusStr=[{"name":大美女","age":38},{"name":"小牛逼","age":18}];
			// console.info($.isArray(stus));
			
			//1.6 $.parseJSON() 解析json格式的字符串-->js的数组/对象
			//定义对象字符串
			// var stusStr='{"name":"牛逼","age":38}';
			// console.info($.type(stuStr));
			//对象字符串--->对象
			// var stu=$.parseJON(stuStr);
			// console.info($.type(stu));
			// console.info(stu.name,stu.age);			
			// $.each(stu,function(k,v){
			// 	console.info(v);
			// })
			
			//定义一个对象数组的字符串
			var stusStr='[{"name":大美女","age":38},{"name":"小牛逼","age":18}]';
			//转换js对象数组
			// console.info($.type(stusStr));
			var stus=$.parseJSON(stusStr);
			// console.info($.type(stus));
			//遍历对象数组
			// $.each(stus function(a,b){
			// 	console.info(b.name,b.age)
			// })
			
			
			
			// 二、属性和css
			// 2.1 attr() 拿值  设值
			// var mpath=$('#aa').attr("src");
			// console.info(mpath);//拿值
			
			// 设值
			// $("#aa").attr("src","");
			// $("#aa").attr("width","20px");
			
			//2.2 removeAttr() 移除属性值
			// $("#aa").removeAttr("src");
			// $("#aa").removeAttr("width");
			
			//2.3 addClass() 动态增加样式
			// $("#aa").addClass("xx");//样式的叠加
			// $("#aa").attr("class","xx");//样式的替换
			
			//2.4 removeClass() 删除对应样式
			// $("#aa").removeClass("xx");
			
			//prop和attr的区别 prop适合用于属性值属性值是boolean类型的时候
			// 给图片增加name值
			// $("#aa").attr("name","abc");
			// $("#aa").prop("name","abc");
			//作业1：用复选框实现全选功能 考虑完整
			// 作业2：
			// $("#aa").prop("name","abc"(){
				// $(".abc").prop("checked",true);
			// })
			// $("#aa").prop("name","abc"(){
				// $(".abc").prop("checked",false);
				
				
			// })
			
			//案例3：优化表格隔行换色
			// $("table tr:even").addClass("aaa");
			// $("table tr:odd").addClass("bbb");
			
			//2.6html()和text()的区别
			// var a=$("p").html();//会包含子标签
			// console.info(a);
			// vra b=$("p").text();只会打印文本
			// console.info(b);
			
			//2.7 val()
			//拿文本框的value值
			// var a=$("#wc").val();
			// console.info(a);
			 //赋值
			 // $("#wc").val("哈哈哈");
			 //css
			 //1.设置值
			 $("p").css("background","#FFCD42");//单属性
			 // $("p").css({"backgroud":"yellow","color":"red"})//多属性
			 //2.拿值
			 var a=$("p").css("background");
			 console.info(a);
			 })
			function muf(){
				alert(123);
			}
		</script>
	</head>
	<body>
		<input type="text" value="非" id="wc"/>
		<p>心痛他们仨个<span></span>1秒钟</p>
		<img src="img/2.jpg" width="300px" id="yy"/>
		<hr />
		<input type="button" value="全选" id="ok"/>
		<input type="button" value="取消" id="ok" id="nook"/>
		<input type="checkbox" class="abc" value="植物大战僵尸"/>植物大战僵尸
		<input type="checkbox" class="abc" value="牛逼大战僵尸"/>牛逼大战僵尸
		<input type="checkbox" class="abc" value="maoma大战僵尸"/>maoma大战僵尸
		<pre>
			
			
		</pre>
	</body>
</html>