jQuery $工具方法与Css属性方法

嘴强程序员

已于 2022-03-17 22:45:10 修改

阅读量1.1k

点赞数 2

文章标签： jquery css javascript

于 2022-03-17 22:36:18 首次发布

本文链接：https://blog.csdn.net/qq_62898618/article/details/123562181

版权

jQuery 中的函数与jQuery的一些方法

append 追加的方法

html 替代了js中的innerHTML属性可设置可获取

append 追加的方法

$("#oDiv").append($("<a href='#'>百度</a>"));

html 替代了js中的innerHTML属性可设置可获取

$("#oDiv").html("<p>标题一</p>");
$("#oDiv").html($("<a href='#'>百度</a>"));

$(js对象) 作用：转换作用

将一个原生态的jsdom对象转换成jQuery的dom对象
获取oDiv设置内容

oDiv 获取标签
console.log($(document.getElementById("oDiv")).html())

jQuery----->原生态js

注意：通过选择器获取的jQuery对象都是以伪数组的形式存储的
1.可以通过下标转换成js对象

var $oDiv = $("#oDiv");
// 通过下标过去
console.log($oDiv[0].innerHTML)
// 第二种方法 通过get方法 下标获取
console.log($oDiv.get(0).innerHTML)

1.each(); 遍历数组对象对象数组

$----类似java中的类
$()----类似java中的类的构造方法
$工具中的类方法
定义数组 var arr=[] var arr=Array();
定义一个数组存储五个名字

var name = ["张三", "里斯", "王五", "蛮子", "小六子"];
				//遍历数组
				$.each(name, function(index, names) {
					//第一种方法
					console.log(index, names);
					//第二种下标
					console.log(name[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) {
					$.each(stu, function(name, value) {
				 	console.log(name, value)
					})
				})

$工具代码

                2. trim 去掉两端空格
				var stu = "asd   ";
				console.log($.trim(stu).length)

				// 3.type(); 判断值类型
				var st = "asd   ";
				console.log($.type(st)) //返回String
				
				// 4.isArray(); 判断是否是一个数组
				var names = ["张三", "里斯", "王五", "蛮子", "小六子"];
				console.log($.isArray(names)) //返回布尔值类型 
				
				//5.isFunction() 判断是否是一个函数
				console.log($.isFunction(jQuery));
				
				// （6）parseJSON()  将满足json定义的字符串转换成一个对象或者对象数组
				var stu = "[\"aa\",\"bb\",\"cc\"]";
				var stu = '["aa","bb","cc"]';
				console.log($.type(stu))
				// 通过parseJSON转换
				var stuArr = $.parseJSON(stu)
				console.log($.type(stuArr));

jQuery中的加载函数的定义

$(document).ready(function(){  
     alert("第一种方法。");   
});
$(function(){  
    alert("第二种方法。");  
});

常用的一些方法

设置css与获取标签的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<style type="text/css">
		.oul {
			color: aqua;
			background-color: deeppink;
		}

		.ul {
			/* color: aqua;
			background-color: */
			antiquewhite;
			font-size: 20px;
		}
	</style>
	<body>
		<ul id="oul">
			<li id="1">I love mypu</li>
			<li>I love mypu</li>
			<li>I love mypu</li>
			<li>I love mypu</li>
			<li>I love mypu</li>
			<li>I love mypu</li>
			<li>I love mypu</li>
			<li>I love mypu</li>
			<li id="2" value="12">I love mypu</li>
			<input id="inputs" type="text" value="helloworld" />
			<input type="checkbox" value="123" checked="checked" />
		</ul>
		<script>
			// 原生态js中：  getAttribute()  setAttribute()  removeAttribute()
			// 1.attr 获取属性与设置属性
			// 获取li列中第一个标签的id值
			console.log($("#oul>li").first().attr("id"))
			// children 获取子节点
			console.log($("#oul").children().first().attr("id"))
			//设置属性
			$("#oul>li:first").attr("id", "3")
			// 移除属性  first 获取第一个 last 获取最后一个
			$("#oul>li:first").removeAttr("id");
			//addCalss 添加样式 可添加多个同一个标签上
			$("#oul>li:first").addClass("oul");
			$("#oul>li").eq(0).addClass("ul");
			//removeClass 移除某个样式
			$("#oul>li").eq(1).removeClass("ul")
			//清楚class这个属性
			$("#oul>li").eq(0).removeAttr("class")
			//html() 相当于源生js中的innerHTML |text()----> innerText|val()--->value属性
			console.log($("ul>li:last").html())
			console.log($("ul>li:last").text())
			console.log($("ul>li:last").val())
			// prop() 与attr类似，但是prop专门针对表格中的有boolean类型的标签
			console.log($("#oul>li:first").prop("id"));
			console.log($("input:last").prop("checked"));
		</script>
	</body>
</html>

jQuery中的鼠标移入移除事件演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.odd {
				background-color: #FFFF00;
			}
		</style>
	</head>
	<body>
		<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>

		</table>
	</body>
	<script type="text/javascript">
		// even 奇数 odd 偶数 过滤器
		// $("table>tbody>tr:gt(0):even").addClass("odd")
		//鼠标触碰事件 mouseover
		$("table>tbody>tr:gt(0)").mouseover(function() {
			$("table>tbody>tr:gt(0)").removeClass("odd");
			$(this).addClass("odd")
		})
		//鼠标离开触碰事件
		$("table>tbody>tr:gt(0)").mouseout(function() {
			$(this).removeClass("odd");

		})
	</script>
</html>

全选按钮的实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>
			
		</title>
		<script src="js/jquery-3.6.0.js"></script>
		
		
		
	</head>
	<body>
		<input type="checkbox" name="" id="box" value="全选" />全选
		<input type="checkbox" name="" id="" value="" />1
		<input type="checkbox" name="" id="" value="" />2
		<input type="checkbox" name="" id="" value="" />3
		<input type="checkbox" name="" id="" value="" />4
		<input type="checkbox" name="" id="" value="" />5
		<input type="checkbox" name="" id="" value="" />6
		<script>
		$("#box").click(function(){
			
			$("input:checkbox:gt(0)").each(function(){
				$(this).prop("checked",$("#box").prop("checked"));
			} )
			
		} )
		
		// 完善全选
		
		$("input:checkbox:gt(0)").click(function(){
			var c=true;
			$("input:checkbox:gt(0)").each(function(){
				
				console.log($(this).prop("checked"))
			   if(!$(this).prop("checked")){
				   c=false;
			   }
			
			} )
		$("#box").prop("checked",c);
		}
		)
		
	
		</script>
	</body>
	
</html>