jquery 红包 jquery导包

转载

mob64ca14038b36 2023-09-09 10:22:38

文章标签 jquery 红包 jquery java 选择器属性值 文章分类 jQuery 前端开发

JQuery

Jquery的使用

Jquery的使用
1. 下载Jquery的核心JS文件（http://www.juqery.com）
2. 在需要使用Jquery的页面引入JS文件

Jquery对象
"$“代表的是Jquery对象的引用，相当于"jQuery”

$ ==> jQuery

注：只有Jquery对象才能使用Jquery提供的方法。

Jquery包装集对象与Dom对象互相转换
Jquery包装集对象转 Dom对象：
获取Jquery包装集的下标
Dom对象转 Jquery包装集对象：
$(Dom对象)

当获取元素对象，元素不存在时，
通过document获取的值，返回null （通过判断返回值是否为null，来得知元素是否存在）
通过Jquery获取的值，返回空包装集（通过判断包装集的长度length，来得知元素是否存在，存在至少length为1

<div id="mydiv">hello</div>
		 
		 <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		 
		 <script type="text/javascript">
		 	// 获取div
			var div = $("#mydiv");
			var div2 = jQuery("#mydiv");
			console.log(div);
			console.log(div2);
			
			console.log("------------");
			
			// Dom对象：通过document获取 div
			var divDom = document.getElementById("mydiv");
			console.log(divDom);
			
			// Jquery包装集对象：通过jquery选择器获取 div
			var divJquery = $("#mydiv");
			console.log(divJquery);
			
			console.log("====Jquery包装集对象与Dom对象互相转换=====");
			// 将Dom对象转换成Jquery包装集对象，使用$()将dom对象括起来
			var domToJquery = $(divDom);
			console.log(domToJquery);
			// 将Jquery包装集对象转换成Dom对象，获取Jquery包装集对象的下标
			var jqueryToDom = divJquery[0];
			console.log(jqueryToDom);
			
			console.log("------------");
			
			// 获取不存在的元素
			// Dom对象
			console.log(document.getElementById("test"));
			// jquery对象
			console.log($("#test"));
			
			
		 </script>
	</body>
</html>

JQery选择器

基础选择器

基础选择器
id选择器 $("#id属性值") 获取指定id属性值的元素。如果出现多个同名id，只会获取第个。
类选择器 $(".class属性值") 获取指定class属性值的元素
元素选择器 $(“标签名/元素名”) 获取指定标签名的元素

通用选择器 $("*") 获取所有的元素
组合选择器 $jquery 红包 jquery导包_jquery 红包$

<div id="mydiv1">id选择器1<span>span中的内容</span></div>
		<div id="mydiv1" class="blue">元素选择器</div>
		<span class="blue">样式选择器</span>
		
		
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// id选择器			$("#id属性值") 
			var mydiv1 = $("#mydiv1");
			console.log(mydiv1);
			
			// 类选择器			$(.class属性值)	
			var clas = $(".blue");
			console.log(clas);
			
			// 元素选择器		$("标签名/元素名") 
			var divs = $("div");
			console.log(divs);
			
			// 通用选择器       $("*")	
			var all = $("*");
			console.log(all);
			
			// 组合选择器       $("选择器1,选择器2...")
			var group = $("#mydiv1,.blue,div");
			console.log(group);
			
			
			
			
		</script>
	</body>
</html>

层次选择器

1.后代选择器空格
$(“指定元素元素名”) 获取指定元素的所有指定子元素（包含子元素及子元素的子元素）

子代选择器大于号 >
$(“指定元素 > 元素名”) 获取指定元素的所有指定第一代子元素（只会选择第一级子元素）
相邻选择器加号 +
$(“指定元素 + 元素名”) 获取指定元素的下一个指定元素（只会找一个元素）
同辈选择器波浪号 ~
$(“指定元素 ~ 元素名”) 获取指定元素后面的所有指定元素

<ul id="food">
		      <li>水果
		          <ul>
		              <li>香蕉</li>
		              <li>苹果</li>
		              <li>梨</li>
		          </ul>
		      </li>
		      <li>蔬菜
		          <ul>
		              <li>白菜</li>
		              <li>油菜</li>
		              <li>卷心菜</li>
		          </ul>
		      </li>
		  </ul>
		 <hr>
		 
		 <div>选择器1</div>
		 <div id="mydiv">选择器2</div>
		 <span>选择器span</span>
		 <div>选择器3</div>
		 <div>选择器4</div>
		 
		 
		 <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		 <script type="text/javascript">
		 	// 后代选择器 空格
			var hd = $("#food li");
			console.log(hd);
			
			// 子代选择器 大于号 >
			var zd = $("#food > li");
			console.log(zd);
			
			// 相邻选择器 加号 +
			var xl = $("#mydiv + div");
			console.log(xl);
			
			// 同辈选择器 波浪号~
			var tb = $("#mydiv ~ div");
			console.log(tb);
			
			
		 </script>
		 
	</body>
</html>

表单选择器

表单选择器（type）
:input 表单元素器选择所有的表单元素，包含input元素、textarea元素、selecte元素
:radio 单选框选择器
:checbox 多选框选择器

input input元素选择器选择所有的input元素

格式:
$(":类型")

<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="爬床"/>爬床
				 <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>
		
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// :input
			var forms = $(":input");
			console.log(forms);
			// input
			var inputs = $("input");
			console.log(inputs);
			
			// 获取所有的单选框
			var radios = $(":radio");
			console.log(radios);
			
		</script>
		 
	</body>
</html>

属性选择器

[属性名] $("[属性名]") 获取所有设置过指定属性名的元素
[属性名=‘属性值’] $("[属性名=‘属性值’]") 获取所有设置过指定属性名为指定值的元素

过滤选择器

:checked $(":checked") 获取选中状态为选中的元素（单选框与复选框）
:selected $(":selected") 获取选中状态为选中的元素（下拉框）
:gt(index) $(":gt(index)") 获取下标大于指定值的元素
:eq(index) $(":eq(index)") 获取下标等于指定值的元素
:odd $(":odd") 获取所有的奇数下标
:even $(":even") 获取所有的偶数下标

<form id='myform' name="myform"  method="post">
		 	<input type="hidden" name="uno" value="9999" disabled="disabled"/>
		 	姓名:<input type="text" id="uname" class="blue" 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="radio" name="usex" value="0" checked="checked"/>男
		 		 <input type="radio" name="usex" value="1"/>女  <br /> 
		 	爱好:<input type="checkbox" name="ufav" value="篮球"/>篮球
		 		 <input type="checkbox" name="ufav" value="爬床"/>爬床
		 		 <input type="checkbox" name="ufav" value="代码"/>代码<br />
		 	来自:<select id="ufrom" name="ufrom" class="blue" multiple="multiple">
		 			<option value="-1" >请选择</option>
		 			<option value="0" selected="selected">北京</option>
		 			<option value="1" selected="selected">上海</option>
					<option value="2">杭州</option>
					<option value="3" selected="selected">深圳</option>
		 		</select><br />
		 	简介:<textarea rows="10" cols="30" name="uintro"></textarea><br />
		 	头像:<input type="file"  /><br />
		 	<button type="submit" onclick="return checkForm();">提交</button>
		 	<button type="reset" >重置</button>		
		 </form>
		 
		 <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		 <script type="text/javascript">
		 	// [属性名]		$("[属性名]")  
			var test = $("[name]");
			console.log(test);
			// [属性名='属性值']	$("[属性名='属性值']")
			var test2 = $("[name='ufav']");
			console.log(test2);
			
			// 多种选择器结合使用  （获取name为usex的被选中的单选框）
			var test3 = $(":radio[name='usex']:checked");
			console.log(test3);
			
			// :selected
			// $("#ufrom option") 获取下拉框所有的下拉选项
			// $("#ufrom option:selected") 获取下拉框所有的被选中的下拉选项
			// $("#ufrom option:selected:eq(0)") 获取下拉框被选中的第一个下拉选项
			var ufrom = $("#ufrom option:selected:gt(0)");
			console.log(ufrom);
			
			
			
		 </script>
	</body>
</html>

JQuery操作元素的属性

attr()
设置属性对象.attr(“属性名”,“属性值”);
获取属性 var 属性值 = 对象.attr(“属性名”);
prop()
设置属性对象.prop(“属性名”,“属性值”);
获取属性 var 属性值 = 对象.prop(“属性名”);

区别：
1. 固有属性
元素本身就拥有的属性
attr()和prop()都可以操作固有属性
2. 返回值是布尔类型的属性
checked、selected、disabled
prop()操作返回值是布尔类型的属性
3. 自定义属性
用户自己定义的属性
attr()可以操作，prop()不可以操作

总结：如果属性的返回值是布尔类型，选择prop方法；否则使用attr方法

<form action="" id="myform">
			<input type="checkbox" name="ch" id="ck1" checked="checked" aa="AA"/> aa
			<input type="checkbox" name="ch" id="ck2" />	bb
		</form>
		
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/**
			 * 固有属性
			 */
			/* 获取属性  */
			// attr()
			var name1 = $("#ck1").attr("name");
			console.log(name1);
			// prop()
			var name2 = $("#ck1").prop("name");
			console.log(name2);
			/* 设置属性  */
			// $("#ck2").attr("checked", "checked");
			// $("#ck2").prop("checked", "checked");
			
			/**
			 * 返回值是布尔类型的属性
			 */
			/* 获取属性 */
			// attr
			var cked1 = $("#ck1").attr("checked");
			console.log(cked1);
			// prop
			var cked2 = $("#ck1").prop("checked");
			console.log(cked2);
			// attr
			var cked3 = $("#ck2").attr("checked");
			console.log(cked3);
			// prop
			var cked4 = $("#ck2").prop("checked");
			console.log(cked4);
			/* 设置属性  */
			// attr
			// $("#ck2").attr('checked','checked');
			// prop
			// $("#ck2").prop("checked", true);
			$("#ck1").prop("checked",false);
			
			/**
			 * 自定义属性
			 */
			/* 获取属性  */
			// attr
			var aa1 = $("#ck1").attr("aa");
			console.log(aa1);
			// prop
			var aa2 = $("#ck1").prop("aa");
			console.log(aa2);
			/* 设置属性 */
			// attr
			$("#ck1").attr("bb","BB");
			// prop
			$("#ck1").prop("cc","CC");
		
		</script>
	
	</body>
</html>

操作元素的样式

操作元素的样式
1. 获取元素的样式名
attr(“class”)
2. 设置元素的样式（将原本的样式值修改成新的值，所以会将原本的样式覆盖）
attr(“class”,“样式名”)
3. 添加元素的样式（在原本的样式基础上追加新的样式）
addClass(“样式名”)
4. 添加具体的样式（样式通过style属性添加）
css()
添加一个具体的样式 css(“样式名”,“样式值”)
添加多个具体的样式 css({“样式名”:“样式值”,“样式名”:“样式值”})
5. 移除样式
removeClass(“样式名”)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作元素的样式</title>
		<style type="text/css">
			div{
				padding: 8px;
				width: 180px;
			}
			.blue{
				background: blue;
			}
			.larger{
				font-size: 30px;
			}
			.green {
				background : green;
			}
			.red{
				background: red;
			}
		</style>
	</head>
	<body>
		<!-- 
			操作元素的样式
				1. 获取元素的样式名
					attr("class")
				2. 设置元素的样式 （将原本的样式值修改成新的值，所以会将原本的样式覆盖）
					attr("class","样式名")
				3. 添加元素的样式 （在原本的样式基础上追加新的样式）
					addClass("样式名")
				4. 添加具体的样式 （样式通过style属性添加）
					css()
						添加一个具体的样式  css("样式名","样式值")
						添加多个具体的样式  css({"样式名":"样式值","样式名":"样式值"})
				5. 移除样式
					removeClass("样式名")
		 
		 -->
		<h3>css()方法设置元素样式</h3>
		<div id="conBlue" class="blue larger">天蓝色</div>
		<div id="conRed">大红色</div>
		<div id="remove" class="blue larger">天蓝色</div>
		
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 1. 获取元素的样式名
			console.log($("#conBlue").attr("class"));
			// 2. 设置元素的样式 （将原本的样式值修改成新的值，所以会将原本的样式覆盖）
			$("#conBlue").attr("class","green");
			
			$("#conRed").attr("class","larger");
			
			// 3. 添加元素的样式 （在原本的样式基础上追加新的样式）
			$("#conRed").addClass("red");
			
			// 4. 添加具体的样式
			// $("#conRed").css("color","blue");
			$("#conRed").css({"color":"blue","background":"pink"});
			
			// 5. 移除样式
			$("#remove").removeClass("larger");
			
		</script>
	</body>
</html>

操作元素的内容

val() 操作表单元素的值
取值：var 值 = 表单元素对象.val();
赋值：表单元素对象.val(值);
html() 操作非表单元素的内容（包含html标签）
取值：var 内容 = 对象.html();
赋值：对象.html(内容);
text() 操作非表单元素的文本内容（不包含html标签）
取值：var 内容 = 对象.text();
赋值：对象.text(内容);

<input type="text" name="uname" id="uname" value="oop" />
		 <div id="html"></div>
		 <div id="text"></div>
		 
		 <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		 <script type="text/javascript">
			 /* val() 操作表单元素的值 */
		 	// 通过原生JS获取值
			console.log(document.getElementById("uname").value);
			// 通过Jquery方式获取
			console.log($("#uname").val());
			// 赋值
			$("#uname").val("面向对象");
			// document.getElementById("uname").value = "面向对象";
			
			
			
			/* html() 操作非表单元素的内容 （包含html标签） */
			// 赋值
			$("#html").html("Hello");
			$("#html").html("<h2>Hello</h2>");
			// 取值
			console.log($("#html").html());
			
			/* text() 操作非表单元素的文本内容 （不包含html标签） */
			// 赋值
			$("#text").text("Hello");
			$("#text").text("<h2>Hello</h2>");
			// 取值
			console.log($("#html").text());
			
			
		 </script>
		 
	</body>
</html>

创建和添加元素

创建元素

$(“元素标签”)

添加元素

对象.before(“内容”) 前追加，在元素的同级追加，内容可以是对象、html或字符串等
对象.after(“内容”) 后追加，在元素的同级追加，内容可以是对象、html或字符串等

对象.prepend(“内容”) 在元素的内部最前面追加子元素，内容可以是对象、html或字符串等
对象.append(“内容”); 在元素的内部最后面追加子元素，内容可以是对象、html或字符串等

$(“内容”).prependTo(对象) 在元素的内部最前面追加子元素，内容可以是对象、html或字符串等
$(“内容”).appendTo(对象) 在元素的内部最后面追加子元素，内容可以是对象、html或字符串等

注：
追加元素时（同级添加和子元素添加）
如果元素不存在，则创建元素，并添加
如果元素存在，则会获取已存在的元素，并剪切到新的位置

<h6>before()方法前追加</h6>
		 <h6>after()方法后追加</h6>
		 <span class="red">男神</span>
		 <span class="blue">偶像</span>
		 
		<h6>prepend()方法前追加子元素内容</h6>
		<h6>prependTo()方法前追加子元素内容</h6>
		<h6>append()方法后追加子元素内容</h6>
		<h6>appendTo()方法后追加子元素内容</h6>
		
		<div class="green">
			 <span >小鲜肉</span>
		</div> 
		 
		 <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		 <script type="text/javascript">
			// 定义html字符串
			var htmlTxt = "<p>这是一个段落</p>";
			console.log(htmlTxt);
			// 将html字符串转换成Jquery对象
			var htmlJquery = $(htmlTxt);
			console.log(htmlJquery);
			console.log(htmlJquery.html());
			
			
			console.log("---------同级追加-----------");
			// 得到目标对象
			var ns = $(".red");
			// 准备要追加的内容
			var span = "<span class='pink'>女神</span>";
			// 将内容追加到指定元素前面
			// ns.before(span);
			// 将内容追加到指定元素后面
			ns.after(span);
			
			// 得到要追加的元素（已存在的元素）
			var blue = $(".blue");
			// 追加已有元素
			ns.before(blue);
			
			
			console.log("-----------子元素追加-----------");
			// 准备要追加的元素
			var sp = "<span>老腊肉</span>";
			// prepend() 前面追加子元素
			//$(".green").prepend(sp);
			// append() 后面追加子元素
			var sp2 = "<span>小奶狗</span>";
			//$(".green").append(sp2);
			
			// prependTo()
			$(sp).prependTo($(".green"));
			// appendTo()
			$(sp2).appendTo($(".green"));
			
			// 追加已存在的元素
			$(".green").append($(".blue"));
			
		 </script>
	</body>
</html>

删除元素

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

<h3>删除元素</h3>
		 <span class="green">jquery<a>删除</a></span>
		 <span class="blue">javase</span>
		 <span class="green">http协议</span>
		 <span class="blue">servlet</span>
		 
		 <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		 <script type="text/javascript">
		 	
			// 删除元素 删除class属性为green的元素
			$(".green").remove();
			// 清空元素
			$(".blue").empty();
			
		 </script>
	</body>
</html>

遍历元素

 each()
  对象.each(function(index,element){
  // index:下标
  // element:元素，dom元素
  // this：元素，dom元素
  });

<h3>遍历元素 each()</h3>
		 <span class="green">jquery</span>
		 <span class="green">javase</span>
		 <span class="green">http协议</span>
		 <span class="green">servlet</span>
		 
		 <script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		 <script type="text/javascript">
		 	
			$(".green").each(function(index,element){
				// this 是dom对象
				// console.log(this);
				// console.log(this.innerHTML);
				// console.log($(this).html());
				console.log("下标：" + index);
				console.log(element);
				console.log($(element));
			});
			
			
		 </script>
	</body>
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。