JQuery的学习

最新推荐文章于 2024-07-12 14:38:32 发布

liyang9999

最新推荐文章于 2024-07-12 14:38:32 发布

阅读量209

点赞数

文章标签： js css html

本文链接：https://blog.csdn.net/liyang9999/article/details/104399900

版权

JQuery的学习

一.JQuery的安装与使用

1.我们可以到该地址https://jquery.com/去下载JQuery，最新版本是3.4.1。

2.JQuery的版本分为两种：jquery.min.js和jquery-3.4.1.js

.min版本是压缩版，方便，容量小，加载更快，但都在一行显示，观看麻烦。

.js版本有缩进格式，方便程序员观看，但相对的容量大，加载相对.min更慢。

3.JQuery的核心

" $" 符号在 J Q u e r y 中代表 J Q u e r y 对象引用，我们可以通过$ 可以获取到JQuery对象，或调用JQuery的方法等…

二.JQuery包装集对象与Dom对象

1.Dom对象：通过元素的js方式获取的dom对象

2.JQuery包装集对象：通过JQuery方式获取的JQuery包装集对象

3.Jquery包装集对象与Dom对象

1.DOM对象 ——> Jquery对象

方式： $(dom对象)

2.Jquery对象 ——> DOM对象

方式：取下标：Jquery对象[下标]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Jquery包装集对象与Dom对象</title>
	</head>
	<body>
		<div id="mydiv">Hello</div>
	</body>
	<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
	<script type="text/javascript">
		// 通过原生JS方式获取dom对象  通过id属性值获取dom对象
		var divDom = document.getElementById("mydiv");
		console.log(divDom);
		var divDomtoJquery = $(divDom);
		console.log(divDomtoJquery);
		console.log("==========================");
		
		// 通过Jqueru方式获取Jquery包装集对象   通过id选择器获取
		var divJquery = $("#mydiv");
		console.log(divJquery);
		var divJqueryToDom = $("#mydiv")[0];
		console.log(divJqueryToDom);
		
	</script>
</html>

三.JQuery选择器

1.基础选择器

1.ID选择器：#id属性值重要

2.元素选择器：标签名重要

3.类选择器：.class属性值重要

4.组合选择器：选择器1，选择器2，选择器3…

5.选择所有元素：*

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基础选择器</title>
	</head>
	<body>
		
		<div id="mydiv1">id选择器1<span>span中的内容</span></div>
		<div id="mydiv1" class="blue">元素选择器</div>
		<span class="blue">样式选择器</span>
	</body>
	<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
	<script type="text/javascript">
		// id选择器				#id属性值
		var mydiv = $("#mydiv1");
		console.log(mydiv);
		
		// 元素名称选择器		标签名/标签名
		var spans = $("span");
		console.log(spans);
		
		// 类选择器				.class属性值	
		var blues = $(".blue");
		console.log(blues);
		
		// 选择所有元素			*
		var all = $("*");
		console.log(all);
		
		// 组合选择器
		var group = $("#mydiv1,.blue,div");
		console.log(group);
		
	</script>
</html>

2.属性选择器

1.$([属性名])：选择设置过指定属性名的元素

2.$([属性名=属性值]):选择设置过指定属性名为指定属性值的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>属性选择器</title>
	</head>
	<body>
		<div id="mydiv1" class="red">id选择器1<span>span中的内容</span></div>
		<div id="mydiv1" class="blue">元素选择器</div>
		<span class="blue">样式选择器</span>
		
	</body>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// 选择设置过指定属性名的元素
		var ids = $("[id]");
		console.log(ids);
		
		// 选择设置过指定属性名为指定属性值的元素
		var cls = $("[class='blue']");
		console.log(cls);
	</script>
</html>

3.层次选择器

1.后代选择器: ancestor descendant (空格) 重要

2.子代选择器: parent > child （大于号）

3.相邻选择器: prev + next （加号）

4.同辈选择器: prev ~ sibling （波浪号）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>层次选择器</title>
	</head>
	<body>
		<ul id="parent">
			<li>大伯
				<ol>
					<li>大儿子</li>
					<li>小女儿</li>
				</ol>
			</li>
			<li>二伯</li>
			<li>爸爸
				<ol>
					<li>大女儿</li>
					<li>小儿子</li>
				</ol>
			</li>
			<li>叔叔</li>
			<li>姑姑</li>
		</ul>
		<ul>
			<li>大伯伯</li>
		</ul>
		<ol>
			<li>小伯伯</li>
		</ol>
		<ul>
			<li>三伯伯</li>
		</ul>
		
	</body>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		// 后代选择器	ancestor descendant	（空格）
		var houdai = $("#parent li");
		console.log(houdai);
		
		// 子代选择器	parent > child	（大于号）
		var zidai = $("#parent > li");
		console.log(zidai);
		
		// 相邻选择器	prev + next		（加号）
		var xl = $("#parent + ul");
		console.log(xl);
		
		// 同辈选择器	prev ~ sibling  （波浪号）
		var tb = $("#parent ~ ul");
		console.log(tb);
	</script>
	
</html>

4.表单选择器与过滤选择器

1.表单选择器

1.  ：input ，选择所有的表单元素，包括input标签、select标签、textarea标签及button标签
2.   :  checked，选择所有复选框
3.   :   radio , 选择所有单选框

2.过滤选择器

checked，选择所有被选中的元素(复选框，单选框，下拉框)
selected，选择所有被选中的元素（下拉框）
eq(index),匹配该下标为指定值的元素
get(index),匹配该下标大于指定值的元素
even，匹配下标为偶数的元素
odd，匹配下标为奇数的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单选择器</title>
	</head>
	<body>
		<form id='myform' name="myform"  method="post">		
			<input type="hidden" name="uno" value="9999" disabled="disabled"/>
			姓名:<input type="text" id="uname" name="uname" /><br />
			密码:<input type="password" id="upwd" name="upwd" value="123456" /><br />
			年龄:<input type="radio" name="uage" value="0" checked="checked"/>小屁孩
				 <input type="radio" name="uage" value="1"/>你懂得  <br /> 
			爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
				 <input type="checkbox" name="ufav" value="爬床" checked="checked"/>爬床
				 <input type="checkbox" name="ufav" value="代码"/>代码<br />
			来自:<select id="ufrom" name="ufrom">
					<option value="-1" selected="selected">请选择</option>
					<option value="0">北京</option>
					<option value="1">上海</option>
				</select><br />
			简介:<textarea rows="10" cols="30" name="uintro"></textarea><br />
			头像:<input type="file"  /><br />
			<input type="image" src="http://www.baidu.com/img/bd_logo1.png" width="20" height="20"/>
			<button type="submit" onclick="return checkForm();">提交</button>
			<button type="reset" >重置</button>		
		</form>
		
	</body>
	<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
	<script type="text/javascript">
		// :input		选择所有的表单元素，包括input标签、select标签、textarea标签及button标签
		var inputs = $(":input");
		console.log(inputs);
		
		// 元素选择器
		var ipts = $("input");
		console.log(ipts);
		
		
		// :checkbox	选择所有的复选框
		var cks = $(":checkbox");
		console.log(cks);
		
		// 选择被选中的复选框
		var ckeds = $(":checkbox:checked");
		console.log(ckeds);
		
		// 获取所有被选中项（单选框和复选框、下拉框）
		var checkeds = $(":checked");
		console.log(checkeds);
		
		//获取被选中的下拉框
		var selected = $(":selected");
		console.log(selected);
		
		// 匹配下标为1 的复选框
		var ck = $(":checkbox:eq(1)");
		console.log(ck);
		
		// :gt(index)	匹配下标大于指定值的元素
		var gts = $("[name='ufav']:gt(0)");
		console.log(gts);
		
	</script>
</html>

四.JQuery的DOM操作

1.操作元素的属性

1.attr(属性名称) ：获取指定得属性值，操作checkbox，没值会返回一个undefined

2.prop(属性名称): 该返回的属性值只有两个true和false

attr和prop的区分：一般用于条件判断我们选择prop，有true和false更好判断，一般正常获取属性值使用attr

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.4.1.js"></script>
	</head>
	<body>
		<input type="checkbox" id="c1"  value="man" checked="checked"/>男
		<input type="checkbox" id="c2" value="woman" />女
	</body>
	<script>
		//prop方法
		var Cprop = $("#c1").prop('checked');
		console.log(Cprop);
		//attr方法
		var Cattr = $("#c1").attr('checked');
		console.log(Cattr);
	</script>
</html>

2.操作元素的样式

attr(“class”)
attr(“class”,“样式名”)
addClass(“样式名”)
css(“具体样式名”,“样式值”) 重要
css({“具体样式名”:“样式值”,“具体样式名”:“样式值”…})

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.4.1.js"></script>
		<style>
			div{
				width: 180px;
				padding: 8px;
			}
			.blue{
				background: blue;
			}
			.larger{
				font-size: 30px;
			}
			.green{
				background: green;
			}
			.red{
				background: red;
			}
		</style>
	</head>
	<body>
		<div id="conBule" class="blue larger">天蓝色</div>
		<div id="conRed" >大红色</div>
		<div id="remove" class="blue larger">天蓝色</div>
	</body>
	<script>
		//获取样式名
		var ClassName = $("#conBule").attr("class");
		console.log(ClassName);
		//设置样式名
		$("#conRed").attr("class",ClassName);
		$("#conRed").attr("class","red");
		//添加样式名
		$("#conRed").addClass("larger green");
		//添加具体的样式
		$("#remove").css("font-size","10px");
		//添加多个具体的样式
		$("#remove").css({"font-size":"20px","color":"green"},);
	</script>
</html>

3.操作元素的值

1.html() : 获取非表单元素的内容(包含元素中的html标签)

2.text() : 获取非表单元素的内容(不包含元素中的html标签)

3.val() : 获取表单元素的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.4.1.js"></script>
	</head>
	<body>
		<div id="html">孤独的我</div>
		<div id="text"></div>
		<input type="radio" value="孤独的我"/>
	</body>
	<script>
		$("#html").html("<span>你今天很漂亮<span>");
		$("#text").text("<span>你今天很漂亮<span>");
		var val = $("input[type=radio]").val();
		console.log(val);
	</script>
</html>

4.添加元素：

prepend：在被选元素内部的开头插入元素或内容，被追加的content 参数，可以是字符、HTML 元素标记。

prependTo：把 content 元素或内容加入 selector 元素开头

append：在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。

appendTo：把 content 元素或内容插入 selector 元素内，默认是在尾部

before：在元素前插入指定的元素

after：在元素后插入指定的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.4.1.js"></script>
		<style>
			.green{
				background: green;
			}
			.yellow{
				background: yellow;
			}
			.red{
				background: red;
			}
			.blue{
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<span class="yellow">男神</span>
		<span class="red">高富帅</span>
		<span class="green">奥特曼</span>
	</body>
	<script>
		//后追加
		$(".green").append("<span>名侦探柯南</span>");
		$("<h1>迪迦</h1>").appendTo($(".red"));
		//前追加
		$(".red").prepend("<span>海王</span>");
		//before
		$(".green").before('<span class="blue">鸡你太美</span>');
		$(".red").after('<span class="yellow">鸡你不美</span>')
	</script>
</html>

5.删除元素：

remove：删除所选元素或指定的子元素，包括整个标签和内容一起删。

<!DOCTYPE html> <html> 
 <head> 
  <meta charset="utf-8"> 
  <title>遍历元素</title> 
  <script src="../js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script> 
 </head> 
 <body> 
  <h3>删除元素</h3> 
  <span class="green">jquery<a>删除</a></span>         <span class="blue">javase</span>         <span class="green">http 协议</span>         <span class="blue">servlet</span> 
 </body> </html> <script type="text/javascript"> 
 //删除所选元素 或指定的子元素 
 //$("span").remove(); 
 //删除样式为 blue 的 span 
 //$("span.blue").remove(); 
 //清空元素

liyang9999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery的学习

JQuery的学习一.JQuery的安装与使用1.我们可以到该地址https://jquery.com/去下载JQuery，最新版本是3.4.1。2.JQuery的版本分为两种：jquery.min.js和jquery-3.4.1.js .min版本是压缩版，方便，容量小，加载更快，但都在一行显示，观看麻烦。 .js版本有缩进格式，方便程序员观看，但相对的容量大，加载相对.m...
复制链接

扫一扫