Web前端基础---JQuery的页面加载+选择器+电子时钟案例

其他 2020-06-20 10:24:29 阅读次数: 0

jQuery

jQuery的页面加载

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery的使用方式</title>
		<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
		<script type="text/javascript">
			//页面加载方式一：
			jQuery(document).ready(function(){
				alert("这是最原始的方式");
			});
			
			//页面加载方式二：
			$(document).ready(function(){
				alert("这是第二种方式");
			});
			
			//页面加载方式三：
			$(function(){
				alert("这是第三种方式");
			});
		</script>
	</head>
	<body>
	</body>
</html>

DOM对象与jQuery对象转换

DOM对象：原生JS方法获取的对象
jQuery对象：通过jQuery方法获取的对象
两种对象的属性与方法不能混用

1、DOM 对象转成 jQuery 对象
var obj = document.getElementById("obj"); //DOM对象
var $obj = $(obj); //jQuery 对象
即：把js对象括号 然后前面加上$符号。
2、jQuery 对象转成 DOM 对象
var $obj = $("#obj"); //jQuery 对象
var obj = $obj.get(0); //DOM对象 ( $obj[0] 也可以 )

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery对象与JS对象</title>
		<script type="text/javascript" src="js/jquery-3.4.1.js" ></script>
		<script type="text/javascript">
			$(function(){
				//DOM对象
				var input1 = document.getElementById("username");
				//jQuery对象
				var input2 = $("#username");
				
				//DOM对象与jQuery对象的转换
				//直接使用$()就可以将DOM对象转换成jQuery对象
				var input1jQuery = $(input1);
				
			    //jQuery 对象转成 DOM 对象
				var input2DOM1 = input2[0];
				var input2DOM2 = input2.get(0);

				//两种对象的属性与方法不能混用
				var input1 = document.getElementById("username").value;
				var input2 = $("#username").val();
				alert(input1+","+input2);
			});
		</script>
	</head>
	<body>
		<input type="text" id="username" value="陈微"/>
	</body>
</html>

jQuery选择器

jQuery选择器分类：
    1、基本选择器
    2、层级选择器
    3、过滤选择器
    4、属性选择器
    5、表单选择器

1、基本选择器
使用频率最高的选择器
主要有：ID选择器，类选择器，标签选择器，全局选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基本选择器</title>
		<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
		<script type="text/javascript">
			$(function(){
				//css()方法：第一个参数是要修改的样式，第二个参数是样式的值
				//ID选择器
				$("#testid").css("color","red");
				//类选择器
				$(".testclass").css("color","orange");
				//标签选择器
				$("div").css("color","green");
				//全局选择器
				$("*").css("background-color","blue");
			});
		</script>
	</head>
	<body>
		<div id="testid">这是测试ID选择器的</div>
		<div class="testclass">这是测试类选择器的</div>
		<p class="testclass">这是测试类选择器的P标签</p>
	</body>
</html>


2、层次选择器
主要的关系：父子关系，兄弟关系，子孙关系
主要有：后代选择器，子元素选择器，同辈选择器，同辈相邻选择器
1)后代选择器：parent  child，使用空格。后代的特点：儿子，孙子，曾孙子...
2)子元素选择器：parent>child，使用>隔开。获取的是儿子元素
3)同辈元素选择器：兄~后面的同辈，使用~隔开。
4)同辈相邻元素选择器：兄+后面相邻的同辈元素，使用+隔开。注意：如果紧挨在兄后面的不是    你指定的元素，那么就不会选中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>层次选择器</title>
		<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
		<script type="text/javascript">
			$(function(){
				//后代选择器：选中id为big的标签中所有的span
				$("#big span").css("color","red");
				//子元素选择器：选中id为big的标签的span儿子
				$("#big>span").css("color","pink");
				//同辈选择器：选中id为big的标签后面的所有的元素
				$("#big~*").css("color","purple");
				//同辈相邻选择器：选中id为big的标签后面紧挨着的span
				$("#big+span").css("color","yellow");
			});
		</script>
	</head>
	<body>
		<div id="big">
			这是最大的DIV
			<p>
				<span>这是div中的p标签中的span</span>
			</p>
			<h1>这是div中的h1</h1>
			<span>这是div中的span</span>
		</div>
		<span>这是div后面的span</span>
		<h2>这是div后面的后面的h2</h2>
	</body>
</html>


3、过滤选择器
常用的过滤选择器：
:first   第一个
:last   最后一个
:eq(index)   根据指定的索引index来获取元素
:gt(index)		获取索引大于index的元素
:lt(index)		获取索引小于index的元素
:odd		获取索引为奇数的元素
:even 	获取索引为偶数的元素
:not()	获取不是***的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>过滤选择器</title>
		<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
		<script type="text/javascript">
			$(function(){
				//获取所有div中的第一个div
				$("div:first").css("color","red");
				
				//获取所有div中的最后一个div
				$("div:last").css("color","#008000");
				
				//获取所有div中索引为4的div
				$("div:eq(4)").css("color","yellow");
				
				//获取所有div中索引大于4的div
				$("div:gt(4)").css("color","blue");
				
				//获取所有div中索引小于4的div
				$("div:lt(4)").css("color","pink");
				
				//获取所有索引为奇数的div
				$("div:odd").css("color","orange");
				
				//获取所有索引为偶数的div
				$("div:even").css("color","orchid");
				
				//获取所有类名不是test的div元素
				$("div:not(.test)").css("color","darkgoldenrod");
			});
		</script>
	</head>
	<body>
		<div>第一个div</div>
		<div>第二个div</div>
		<div>第三个div</div>
		<div>第四个div</div>
		<div class="test">第五个div</div>
		<div>第六个div</div>
		<div>第七个div</div>
		<div>第八个div</div>
		<div>第九个div</div>
	</body>
</html>


4、属性选择器
根据标签的属性及属性值进行查询
[attribute]	   选中含有某属性的元素
[attribute=”某值”]	选中含有某属性且该属性值为某值的元素
[attribute!=”某值”]	选中含有某属性且该属性值不为某值的元素
[attribute^=”某值”]	选中含有某属性且该属性值以某值开头的元素
[attribute$=”某值”]	选中含有某属性且该属性值以某值结尾的元素
[attribute*=”某值”]	选中含有某属性且该属性值以含有某值的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>属性选择器</title>
		<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
		<script type="text/javascript">
			$(function(){
				//获取所有拥有title属性的div
				$("div[title]").css("color","red");
				
				//获取所有拥有title属性且属性值是abc的div
				$("div[title=abc]").css("color","deeppink");
				
				//获取所有拥有title属性且属性值不是abc的div
				$("div[title!=abc]").css("color","orangered");
				
				//获取所有拥有title属性且属性值以abc开头的div
				$("div[title^=abc]").css("color","cadetblue");
				
				//获取所有拥有title属性且属性值以abc结尾的div
				$("div[title$=abc]").css("color","lightseagreen");
				
				//获取所有拥有title属性且属性值含有abc的div
				$("div[title*=abc]").css("color","greenyellow");
			});
		</script>
	</head>
	<body>
		<div>第一个div</div>
		<div title="abc">第二个div</div>
		<div title="abcd">第三个div</div>
		<div title="dabc">第四个div</div>
		<div title="dabce">第五个div</div>
	</body>
</html>


5、表单选择器
分为基本表单选择器和表单过滤器
1）基本表单选择器
:input      $(":input")      	所有 <input> 元素 
:text 		$(":text") 			所有 type="text" 的 <input> 元素 
:password 	$(":password") 		所有 type="password" 的 <input> 元素 
:radio 		$(":radio") 		所有 type="radio" 的 <input> 元素 
:checkbox 	$(":checkbox") 		所有 type="checkbox" 的 <input> 元素 
:submit 	$(":submit") 		所有 type="submit" 的 <input> 元素 
:reset		$(":reset") 		所有 type="reset" 的 <input> 元素 
:button 	$(":button") 		所有 type="button" 的 <input> 元素 
:image 		$(":image") 		所有 type="image" 的 <input> 元素 
:file 		$(":file") 			所有 type="file" 的 <input> 元素 

2）表单过滤器
:enabled 	$(":enabled") 		所有激活的 input 元素 
:disabled 	$(":disabled") 		所有禁用的 input 元素 
:selected 	$(":selected") 		所有被选取的 input 元素 
:checked 	$(":checked") 		所有被选中的 input 元素 


:checked 主要针对单选按钮及复选框
:selected 主要针对下拉列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单选择器</title>
		<script type="text/javascript" src="js/jquery-3.5.1.js" ></script>
		<script type="text/javascript">
			$(function(){
				//选中文本框
				$(":text").css("background-color","red");
				
				//选中密码框
				$(":password").css("background-color","blue");
				
				//获取所有被选中的复选框
				console.log($(":checked"));
				
				//获取被选中的下拉列表
				console.log($(":selected"));
			});
		</script>
	</head>
	<body>
		用户名：<input type="text" /><br/>
		密码：<input type="password" /><br />
		
		<input type="checkbox" name="hobby" value="0" checked/ >篮球
		<input type="checkbox" name="hobby" value="1"/ >足球
		<input type="checkbox" name="hobby" value="2" checked/>排球
		<input type="checkbox" name="hobby" value="3" checked/>乒乓球<br />
		
		<select>
			<option>四川</option>
			<option selected>湖南</option>
			<option>长沙</option>
		</select>
		
		<select>
			<option>1999</option>
			<option selected>1998</option>
			<option>1997</option>
		</select>
	</body>
</html>

案例：电子时钟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>电子时钟</title>
	</head>
	<body>
		<div id="time"></div>
		<script type="text/javascript">
			function getTime(){
				var date = new Date();
				var year = date.getFullYear();
				//month的值是0-11
				var month = date.getMonth()+1;
				var day = date.getDate();
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();
				var time = year+"年"+month+"月"+day+"日&nbsp;&nbsp;"+hour+":"+minute+":"+second;
				document.getElementById("time").innerHTML = time;
			}
			getTime();
			setInterval(getTime,1000);
		</script>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_41401295/article/details/106862181
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022