JQuery 详解（一）

最新推荐文章于 2022-06-01 15:33:11 发布

Modify_QmQ

最新推荐文章于 2022-06-01 15:33:11 发布

阅读量195

点赞数

本文链接：https://blog.csdn.net/qq_44973159/article/details/102545053

版权

一、JQuery的使用与安装 ,
第一步、我们需要导入JQuery的库，也就是 jq的cdn，可以直接百度（JQuery cdn）找到，或者如下代码提供的cdn

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
		</script>

指定的函数，$(document)表示加载当前HTML文档，ready()相当于main函数

<script type="text/javascript">
			$(document).ready(function() {
				// jQuery代码段
			});
		</script>

二、选择器（JQuery 选择器和 CSS 选择器）

JQuery 选择器 $（），通过以下三种方式选择HTML元素

使用元素名
使用属性名
使用css选择器

获取方法如下，与css的定义有异曲同工之处，id加上# ，classname 加上 .

//获取标签
$(h1)
//获取id
$("#div1")
//获取class类名
$(".class1")

CSS 选择器，用来修改HTML元素或文档的CSS属性
$ (" 标签 “).css(” 属性 “，” 值 ")；

//改变<div>元素文本的颜色,修改css的样式
$("div").css("color","red");
//修改多个属性
$("div").css("color":"red","font-size":"24px");

三、jQuery HTML
修改HTML元素内容的常用函数

函数	描述
html()	更改html元素的内容
remove()	删除选定元素
text()	返回指定元素的内容
val()	设置或返回指定元素的属性
attr()	设置或返回指定元素的内容和属性
prepend()	获取父元素

// html()  修改p标签的内容
	var a.html("<p>Helllo ChangSha</p>");
// remove() 删除id名为demo的标签
	$("#demo").remove();
//text() 返回p标签里的内容 innerHTML()同理
	$("p").text()

toggle 切换效果

<!DOCTYPE html>
<html>
	<meta charset="UTF-8">
	<head>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
		</script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("#demo2").toggle();
					$("#demo1").toggle();
				});
			});
		</script>
	</head>
	<body>
		<button type="button">切换</button>
		<p id="demo1">HELLO WORLD</p>
		<p id="demo2">HELLO CHANGSHA</p>
	</body>
</html>