【无标题】

最新推荐文章于 2023-04-08 16:48:15 发布
```
最新推荐文章于 2023-04-08 16:48:15 发布
阅读量61
点赞数
CC 4.0 BY-SA版权
文章标签： javascript json jquery
本文链接：https://blog.youkuaiyun.com/csnbb/article/details/123560889
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
				<style type="text/css">
					.xx {
						border: 5px solid gold;
					}
		
					.cc {
						background-color: palevioletred;
					}
		
					.dd {
						background-color: paleturquoise;
					}
				</style>
				<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
				<script type="text/javascript">
					$(function() {
						//一 $工具方法
						//1.1 $.each 遍历对象 数组
						//定义对象
						// var stu ={"name":"炎帝","age":39};
						//遍历对象
						// 			$.each(stu,function(k,v){
						// 				console.info(k,v);
						// 				
						// 			})
						// console.info(stu.name.stu.age);
						//定义数组
						/* var names = ["看美女","大傻呗","看帅哥"];
						//遍历数组
						$.each(names,function(i,n){
							console.info(i,n);
						}) */
						//定义对象数组
						// var stus = [{"name":"炎帝","age":39},{"name":"黄帝","age":49}];
						//遍历对象数组
						// $.each(stus,function(i,stu){//下标,元素
						// console.info(stu.name,stu.age);
						/* $.each(stu,function(k,v){
							console.info(v);
						}) */
		
						// })
		
						//1.2  $.trim() 去除前后空格
						// 			var str = "   zking  ";
						// 			console.info($.trim(str).length);
		
		
						//1.3  $.type()  得到变量的数据类型
						/* var str = 12.6;
						var stu ={"name":"炎帝","age":39};
						var stus = [{"name":"炎帝","age":39},{"name":"黄帝","age":49}];
						console.info($.type(stus));
						 */
		
						//1.4 $.isArray()判断是否是数组
		
						// 			var stu ={"name":"炎帝","age":39};
						// 			var stus = [{"name":"炎帝","age":39},{"name":"黄帝","age":49}];
						// 			console.info($.isArray(stus));
		
		
						//1.5 $.isFunction()判断是否是函数
						// 		var stus = [{"name":"炎帝","age":39},{"name":"黄帝","age":49}];
						// 		console.info($.isFunction(myf));
		
		
		
						//1.6 $.parseJSON() 将json格式的字符串--->js的对象数组或者数组
						// var stuStr ='{"name":"黄帝","age":49}';
						// console.info($.type(stuStr));//string
						// var stu = $.parseJSON(stuStr);
						// console.info($.type(stu));json格式的字符串-->js对象
						// 		// console.info(stu.name,stu.age);
						// 		$.each(stu,function(k,v){
						// 			console.info(v);
						// 		})
		
						/* 	//json格式的字符串-->js的对象数组
							var stuStr = '[{"name":"炎帝","age":39},{"name":"黄帝","age":49}]';
							// console.info($.type(stuStr));
							var stus = $.parseJSON(stuStr);
							// console.info($.type(stus));
							//遍历对象数组stus
							$.each(stus,function(a,b){
								// consloe.info(b,name,b.age);
								$.each(b,function(k,v){
									console.info(v);
								})
								
							})
							 */
		
						//二 jQuery属性和css
						//2.1 attr()拿属性值/设置属性值
						// 拿值
						var mpath = $("#aa").attr("width"); //拿值
						console.info(mpath);
						// 给某个属性设置值
						$("#aa").attr("src", "img/3.jpg");
						$("#aa").attr("width", "200px");
		
						//2.2 removeAttr()移除某个属性对应属性值
						$("#aa").removeAttr("width");
		
						//2.3 addClass()增加样式值
						$("#aa").addClass("xx");
		
						//2.4 removeClass() 移除样式值
						$("#aa").removeClass("xx"); //class仍然在
		
		
						//prop()和attr()的区别
						//给img增加name值
						$("#aa").attr("mame", "abc");
						$("#aa").prop("mame", "abc");
		
		
						//attr()和addClass的区别
						$("#aa").attr("class", "xyz");
						样式的替换
						$("#aa").addClass("xyz");
						样式的叠加
		
						//作业1:使用复选框实现全选功能
						//全选功能
						$("#ok").click(function() {
							$(".aaa").prop("checked", true);
		
						})
						$("#nook").click(function() {
							$(".aaa").prop("checked", false);
		
						})
		
						//2.5 val()拿值,设置值
						//拿值
						var aa = $("#bb").val();
						console.info(aa);
						//赋值
						$("#bb").val("笑死");
		
						//2.6html和tex()区别
						var a = $("p").html(); //拿到其子标签
						console.info(a);
						var b = $("p").text(); //不会拿到子标签 只会打印纯文本
						console.info(b);
		
		
						//优化隔行换色
						$("table tr:even").addClass("cc");
						$("table tr:old").addClass("dd");
		
		
						//css
						$("p").css("background", "pink"); //键,值 单个
						$("p").css({
							"background": "yellow",
							"color": "blue"
						}); //{键：值，键：值} 多个属性
		
						//拿值
						$("p").css("background");
						console.info(a)
					})
		
		
					// 
					function myf() {
						alert(123);
		
					}
				</script>
			</head>
			<body>
				<p>颜弟和<span>wifi</span>的乡村爱情故事</p>
				<img src="img/2.jpg" width="400px" id="aa" class="jk" /><br />
				<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 />
				<input type="text" id="bb" />
				<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>
		</html>
jQuery笔记