day10-JQuery&html5

最新推荐文章于 2024-10-04 06:11:34 发布

新人小程序猿

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量100

点赞数

分类专栏：前端学习文章标签： html html5 javascript css jquery

本文链接：https://blog.csdn.net/weixin_43697280/article/details/113664514

版权

前端学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

这篇博客介绍了JQuery与JavaScript在操作DOM上的区别，包括如何获取和修改属性、HTML、文本内容以及CSS样式。同时，详细阐述了事件绑定的概念，展示了click事件的使用，并提供了获取鼠标坐标的示例。此外，还提及了HTML5的新特性，如结构标签、音频、视频和canvas画布的使用。

摘要由CSDN通过智能技术生成

一、获取标签内的属性

JQuery获取属性与js不同
js使用document.getElementById()或者document.getElementByClassName()来获取属性，使用jq则是用$("")来获取id或者class，其次当需要修改标签内属性时也是可以直接修改的，相对于使用js的方法就会方便很多。

1、获取属性以及修改属性取值

在这里插入图片描述

2、获取html以及修改html代码

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$("p").html("<b>Hello</b>");
	});
});
</script>
</head>
<body>

<button>修改所有P元素的内容</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>

</body>
</html>

在这里插入图片描述
点击按钮后：

3、获取元素文本以及修改文本内容

在这里插入图片描述

4、读取或修改标签的value属性

注意：类似input标签，在获取input标签时时返回数组，所以需要eq()来设置是改变第几个标签的value值
在这里插入图片描述

5、修改css样式属性以及判断是否包含指定class

在这里插入图片描述

6、添加新元素

可以与javascript的javascript的添加新元素方法做下对比
jq添加使用到的是append()，js使用到的是appendChild()
在这里插入图片描述

7、删除元素

在这里插入图片描述

二、事件绑定

如下图：
绑定了click事件，bind可以省略不写
在这里插入图片描述
在第一点的第二小点的代码例子已经用到了
例子：

其次，还可以获取鼠标的位置：

关于获取鼠标坐标的纤细分析可以看一下墨城之左的博客

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function show_coords(event){
	var x=event.clientX;//鼠标相对于浏览器左上角x轴的坐标； 不随滚动条滚动而改变；
	var y=event.clientY;//鼠标相对于浏览器左上角y轴的坐标； 不随滚动条滚动而改变；
	var x1=event.screenX;//鼠标相对于显示器屏幕左上角x轴的坐标；
	var y1=event.screenY;//鼠标相对于显示器屏幕左上角y轴的坐标；
	var x2=event.offsetX;//鼠标相对于事件源左上角X轴的坐标；
	var y2=event.offsetY;//鼠标相对于事件源左上角Y轴的坐标；
	var x3=event.pageX;//鼠标相对于浏览器左上角x轴的坐标； 随滚动条滚动而改变；
	var y3=event.pageY;//鼠标相对于浏览器左上角y轴的坐标； 随滚动条滚动而改变；
	
	alert("X coords: " + x + ", Y coords: " + y+", \nx1 coords: " + x1 + ", Y1 coords: " + y1+", \nx2 coords: " + x2 + ", Y2 coords: " + y2+", \nx3 coords: " + x3 + ", Y3 coords: " + y3);
}
</script>
</head>
<body>

<p onmousedown="show_coords(event)">点击这一行。一个消息框会提示出鼠标指针的 x 和 y 坐标。</p>

</body>
</html>

在这里插入图片描述

三、html5

html5引入了很多比较方便的标签如：header、nav、footer、button等
在这里插入图片描述

1、主要结构标签：header、nav、content、aside、footer等

在这里插入图片描述

2、音频audio

使用标签可以导入音频，且会有默认样式
在这里插入图片描述

3、视频video

使用video标签导入视频，且还可以设置显示大小
在这里插入图片描述

4、画图canvas

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style type="text/css">
#myCanvas{
	border:1px solid black;
}
		
</style>
<script type="text/javascript">
function draw(event){
	vas canvas = document.getElementById("myCanvas");
	var pen = canvas.getContext("2d");
	pen.moveTo(50,50);
	pen.lineTo(300,300)
	pen.lineWidth=5;
	pen.strokeStyle = "red";
	pen.stroke();
}
window.onload = draw;

</script>
<body>
	<canvas id="myCanvas" width="860" height="480">浏览器不支持画布</canvas>
</body>
</html>