0
点赞
收藏
分享

微信扫一扫

jQuery($工具方法&CSS属性及方法)

Gascognya 2022-03-17 阅读 52
jquery

1.$工具方法

2.jQuery属性和CSS

        1.属性

        2.CSS


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 导入jQuery库 -->
		<style>
			.demo1 {
				border: 1px solid red;
			}

			.demo2 {
				background-color: yellow;
			}
			.even{
				 background-color: #FF0000;
			}
			.odd{
				background-color: #FFFF00;
			}
		</style>
		<script language="JavaScript" type="text/javascript" src="js/jquery-3.6.0.js" charset="UTF-8"></script>
		<script>
			function add() {

			}



			// $("标签")  创建标签  (/\)
			// console.log($("<a href = '#'>百度以下</a>"))

			$(function() {
				// append 内部追加  替代了js中的appendChild方法
				// $("#oDiv").append($("<a href = '#'>百度以下</a>"));

				// html 替代了js中的innerHTML属性  可设置可获取
				// $("#oDiv").html($("<a href = '#'>百度以下</a>"))

				// $(js对象)  作用:转换作用  
				// 将一个原生态的jsdom对象转换成jQuery的dom对象
				// 获取oDiv设置内容
				// console.log(document.getElementById('oDiv').html());
				// console.log($(document.getElementById('oDiv')).html());

				// jQuery----->原生态js
				// 注意:通过选择器获取的jQuery对象都是以伪数组的形式存储的
				// 1.可以通过下标转换成js对象
				// var $oDiv = $("#oDiv");
				// console.log($oDiv[0].innerHTML)
				// console.log($oDiv.innerHTML);
				// 2.可以通过get方法+下标获取
				// console.log($oDiv.get(0).innerHTML);



				// $----类似java中的类
				// $()----类似java中的类的构造方法



				// 1.$工具中的类方法(静态方法)
				// (1)each()  遍历数组  对象  对象数组

				// a.数组的定义
				// aa. var arr = []
				// bb. var arr = new Array();

				// 定义一个数组存储5个姓名
				// var names = ["张三","里斯","王五","蛮子","小六子"];
				// $.each(names,function(index,name){
				// 	// console.log(index,name);//获取每一个元素
				// 	// console.log(name);
				// 	console.log(names[index]);
				// });

				// 对象{}
				// var student = {
				// 	"name":"张三",
				// 	"sex":"男",
				// 	"age":18
				// }
				// $.each(student,function(name,value){
				// 	console.log(name,value);
				// });

				// var students = [
				// 	{
				// 		"name":"张三",
				// 		"sex":"男",
				// 		"age":18
				// 	},
				// 	{
				// 		"name":"张三2",
				// 		"sex":"女",
				// 		"age":19
				// 	}
				// ]
				// $.each(students,function(index,stu){
				// 	// console.log(index,stu);
				// 	$.each(stu,function(name,value){
				// 		console.log(name,value);
				// 	});
				// });
				// (2)trim()   去掉字符串两端的空格
				// var str = "   a  sd  ";
				// console.log(str.length)
				// console.log($.trim(str).length)

				// 遍历  非空格拼接  charAt()

				// (3)type()   判断值类型

				// console.log($.type("东方不败"));
				// console.log($.type(jQuery));
				// (4)isArray()  判断是否是一个数组
				// console.log($.isArray(names));
				// (5)isFunction()  判断是否是一个函数
				// console.log($.isFunction(add))
				// (6)parseJSON()  将满足json定义的字符串转换成一个对象或者对象数组
				//AJAX--无刷新技术
				// var stu = "[\"aa\",\"bb\",\"cc\"]";
				// var stu = '["aa","bb","cc"]';
				// console.log($.type(stu))
				// // 通过parseJSON转换
				// var stuArr = $.parseJSON(stu)
				// console.log($.type(stuArr));

				// var stus = '[{"name":"zkingzz"},{"name":"zkingcc"}]';
				// console.log($.type(stus))
				// console.log($.type($.parseJSON(stus)));
			});
		</script>
	</head>
	<body>
		<div id="oDiv" style="border: 1px solid red;height: 20px;">
			helloworld
		</div>

		<hr>
		<h3>jQuery中属性和CSS操作</h3>
		<ul id="oUl1">
			<li id="one">1.attr:设置或者获取标签的属性</li>
			<li class="demo1">2.removeAttr:移除属性(属性和值都会移除)</li>
			<li>3.addClass:添加样式 会叠加</li>
			<li>4.removeClass移除指定的样式</li>
			<li>5.html():获取或者设置标签的内容 包含子标签</li>
			<li>6.text(): <span id="sid">获取或者设置标签的内容 不包含子标签</span></li>
			<li>7.val() 获取或者设置表单元素中的value值</li>
			<li>8.prop() 与attr类似,但是prop专门针对表格中的有boolean类型的标签</li>
			<input id="inputs" type="text" value="helloworld" />
			<input type="checkbox" value="123" checked="checked" />
		</ul>
		<script type="text/javascript">
			// 原生态js中:  getAttribute()  setAttribute()  removeAttribute()
			// 1.attr
			// 获取第一个li的id属性值
			// console.log($("#oUl1>li:first").attr("id"));
			// 另类操作
			// console.log($("#oUl1>li").first().attr("id"));
			// console.log($("#oUl1").children().first().attr("id"));
			// 设置属性
			// $("#oUl1>li:first").attr("id","sb");
			// 移除属性
			// $("#oUl1>li:first").removeAttr("id");
			// addClass
			// $("#oUl1>li:eq(1)").addClass("demo2");
			// $("#oUl1>li").eq(1).addClass("demo2");
			// removeClass  移除demo1的样式
			// $("#oUl1>li:eq(1)").removeClass("demo1")
			// $("#oUl1>li:eq(1)").removeAttr("class")

			// console.log($("#sid").parent().html());
			// console.log($("#sid").parent().text());
			// console.log($("#sid").parent().val());

			// console.log($("#inputs").html())
			// console.log($("#inputs").text())
			// console.log($("#inputs").val())
			// prop
			// console.log($("#oUl1>li:first").prop("id"));
			// console.log($("input:last").prop("checked"));
		</script>
		
		<h4>案例:表格隔行换颜色</h4>
		<table border="1" width="100%" height="400">
			<tr style="background-color: aqua;">
				<th>&nbsp;</th>
				<th>&nbsp;</th>
				<th>&nbsp;</th>
				<th>&nbsp;</th>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
		</table>
		<script>
			// 表格隔行换颜色
			// $("table>tbody>tr:gt(0):even").addClass("even")
			// $("table>tbody>tr:gt(0):odd").addClass("odd")
		
			$("table>tbody>tr:gt(0)").mouseover(function(){
				$("table>tbody>tr:gt(0)").removeClass("odd");
				$(this).addClass("odd");
			});
			$("table>tbody>tr:gt(0)").mouseout(function(){
				$("table>tbody>tr:gt(0)").removeClass("odd");
			});
		
		
		
		</script>
		
		<h3>案例:全选案例</h3>
		<button>全选</button>
		<button>取消全选</button>
		<input type = "checkbox" value = "aaa">aaa
		<input type = "checkbox" value = "bbb">bbb
		<input type = "checkbox" value = "ccc">ccc
		<input type = "checkbox" value = "ddd">ddd
		<input type = "checkbox" value = "eee">eee
		<script>
			$("button:first").click(function(){
				//获取所有的复选框
				$("input:checkbox:gt(0)").each(function(){
					// console.log($(this).val());
					$(this).prop("checked",true);
				});
			});
		
			$("button:last").click(function(){
				//获取所有的复选框
				$("input:checkbox:gt(0)").each(function(){
					// console.log($(this).val());
					$(this).prop("checked",false);
				});
			});
		</script>
		
		
		<script>
			// 获取表格中第一行tr的背景颜色
			// 复合属性:有多个值(背景,是否平铺等等)
			console.log($("table>tbody>tr:first").css("backgroundColor"))
			
		</script>
		
		
		<!-- 位置 -->
		<div id="demo3" style="border: 1px solid red; width: 100px; height: 100px;position: absolute;left: 100px;top:100px;background-color: blue;">
			
			<div style="width: 30px;height: 30px;background-color: red;position: relative;left: 20px;top: 30px;"></div>
			
		</div>
		<script>
			// offset()  获取指定标签相对整个大容器(body)的一个相对距离(top  left)
			console.log($("#demo3").offset().left);
			console.log($("#demo3").offset().top);
			
			// position()  获取指定标签相对于父标签的位置
			console.log($("#demo3>div").position().top);
			console.log($("#demo3>div").position().left);
			
			// scroll  获取滚动条被滚去的距离
			
			$(document).scroll(function(){
				console.log($(this).scrollTop());
			});
			
			
		</script>
		<br><br><br><br><br><br><br><br><br><br><br><br><br>
	</body>
</html>
举报

相关推荐

0 条评论