Front-end——jQuery对象的功能函数介绍

最新推荐文章于 2022-06-25 14:34:25 发布

Star星屹程序设计

最新推荐文章于 2022-06-25 14:34:25 发布

阅读量336

点赞数

分类专栏： HTML+CSS+JS+jQuery+Vue+XML

本文链接：https://blog.csdn.net/weixin_42067873/article/details/112545998

版权

HTML+CSS+JS+jQuery+Vue+XML 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

1、show() & hide()

show():负责让jquery对象包含的所有DOM对象关联的标签在浏览上显示，等价于style="display:block"

hide():负责让jquery对象包含的所有DOM对象关联的标签在浏览上隐藏，等价于style="display:none"

设置标签显示或者隐藏的时间：$("div").hide(延时值)——》单位是：ms

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title></title>
		<style>
			#app{
				height: 200px;
				width: 200px;
				background:#0000FF;
				border: 2px solid #000000;
			}
		</style>
		<script src="js/jquery-3.5.1.min.js"></script>
	</head>
	
	<body>
		<div id="app">我是一个div</div>
		
		<input type="button" value="隐藏DIV" onclick="fun1()"/>
		<input type="button" value="显示DIV" onclick="fun2()"/>
		<script>
			function fun1(){
				$("div").hide(3000)
			}
			
			function fun2(){
				$("div").show(3000)
			}
		</script>
	</body>
</html>

2、remove() & empty()

empty：将当前标签子标签进行清除处理（只清楚子标签）

remove：将当前标签及其子标签一并删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title></title>
		<script src="js/jquery-3.5.1.min.js"></script>
	</head>
	
	<body>
		父标签1:<select id="one">
				<option value="">子标签1</option>
				<option value="">子标签2</option>
			 </select>
			 
		父标签2:<select id="two">
				<option value="">子标签1</option>
				<option value="">子标签2</option>
			 </select><br>
		<input type="button" value="父标签1及其子标签一并删除" onclick="fun1()"/>
		<input type="button" value="仅删除父标签2的所有子标签" onclick="fun2()"/>
		
		<script>
			function fun1(){
				$("#one").remove()
			}
			
			function fun2(){
				$("#two").clear()
			}
		</script>
	</body>
</html>

3、append() & appendTo()

 1.共同点:都是操作标签中innerHTML属性，为当前标签添加子标签

 2.append():  父标签.append（子标签）；父标签给自己找了一个子标签

   appendTo(): 子标签.appendTo(父标签); 子标签给自己找了一个父标签

4、属性操作函数

1. val函数: value
   1) $obj.val(): 读取jquery对象中第一个DOM对象的【value属性值】

   2) $obj.val(值):为jquery对象中所有DOM对象的[value属性]进行统一赋值


2.prop函数: 工作状态属性：checked,disabled,selected

   1) $obj.prop("checked",true)：为jquery对象中所有DOM对象的checked属性值赋值为true

   2) $obj.prop("checked")：读取jquery对象中第一个DOM对象的【checked属性值】


3.attr函数: 基本属性  id  name  title  rowspan

   1) $obj.attr("name","ck")：为jquery对象中所有DOM对象的【name属性】统一赋值为[ck]

   2) $obj.attr("title")：读取jquery对象中第一个DOM对象的【title属性】的值

4.text函数：操作属性innerText，双目标签的文本显示内容，如：<div>123<div>     <br/>123

   1)$obj.text("123"):为jquery对象中所有DOM对象的innerText属性赋值为"123"

   2)$obj.text():读取jquery对象中所有DOM对象的innerText属性内容，拼接为一个字符串返回