5.7 jq-01基础简介，环境搭建，常用属性等

本文介绍了jQuery的基础知识，包括jQuery的简介、使用方法、环境搭建。详细讲解了jQuery的选择器、属性操作、CSS样式操作和事件绑定。举例展示了如何遍历jQuery对象、转换JS对象以及操作DOM。此外，还讨论了jQuery中的属性设置、显示与隐藏元素的方法，并提供了事件处理程序的实例。

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

文章目录

- 1 jq-01基础

1 jq-01基础

1.1 jQuery简介

什么是jQuery
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：
HTML 元素
选取HTML 元素
操作CSS
操作HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Jquery就是封装好的js 本质上还是js

1.2 jQuery使用

1.搭建jQuery环境

在这里插入图片描述

2 jQuery语法：

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法：
$(selector).action()
jQuery(selector).action()
美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作

jQuery选择器 主要用来获取元素对象

3.jQuery属性操作

在这里插入图片描述
上述方法，如果括号中带有参数那么就表示设置/修改属性如果括号中不写参数：就表示获取数据

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）val() - 设置或返回表单字段的值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery/jquery-3.4.1.js"></script>
	</head>
	<body>
		<div id="abc">
			sdcsdc
			<div id="dd">
				sdc
			</div>
			<div id="cc">
				ee
			</div>
			<span>23232323
				<span>lllllllll</span></span>
			<span>sdcscsdwc</span>
			<span>hnyghnynhtyn</span>
		</div>
		<script type="text/javascript">
			// console.log($("#abc")) > 子元素   空格 所有的后代元素
			console.log($("#abc>span").length)
			console.log($("#abc  div").length)
		</script>
	</body>
</html>

attr()/prop()-法也用于设置/改变属性值。
这两个方法作用一样，一般来说可以使用attr() 来操作标签中自定义的属性，prop()一般用来操作标签中本身自带的属性例如（id,class name,value）,自定义的属性使用prop无法操作;

hide()–隐藏 ===》display:none;
show()–显示 ===》display:block/inline;

在这里插入图片描述

4 jQuery对象的遍历，要注意js对象和jQuery对象的区别和转换

全选<input type="checkbox" name="" id="all" value="" onclick="ad()"/>
			1<input type="checkbox" name="" id="" value="" />
			2<input type="checkbox" name="" id="" value="" />
			<script type="text/javascript">
			function ad(){
				let als = $("#all").prop("checked");
				let ck = $(":checkbox");
				ck.each(function(){
					$(this).prop("checked",als);
				})
				
			}
				
			</script>

$(“选择器”)——获取的jquery对象。

jquery对象是对js对象的封装。一个jquery对象中封装了0 1 或者多个js对象。里边含有一个js对象的数组。

jquery对象是jquery封装后的对象，不能使用js的属性和方法。

js转换成jquery：
$(js对象)—返回时jquery对象
jquery转换成js：
jquery对象[下标]–返回的是js对象 jquery对象.get(下标)

5 jQuery操作CSS样式

在这里插入图片描述

6 jQuery事件绑定

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：在元素上移动鼠标。选取单选按钮点击元素事件的绑定三种方法：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery/jquery-3.4.1.js"></script>
		<style type="text/css">
			span {
				color: red;
				display: none;
			}
		</style>
	</head>
	<body>
		<form action="https://www.baidu.com/" method="post" onsubmit="return verify()">
			用户名：<input type="text" name="" id="username" value="" onblur="userverify()" /><span id="usermsg"></span><br>
			密码：<input type="password" name="" id="pwd" value="" onblur="pwdverify()" /><span id="pwdmsg"></span><br>
			<input type="submit" value="提交" />
		</form>
		<script type="text/javascript">
			function verify() {
				if (userverify() & pwdverify()) {
					return true;
				}else{
					return false;
				}
			}
			function userverify() {
				let zz = /^[0-9]+$/;
				if (zz.test($("#username").val())) {
					return true;
				} else {
					if ($("#username").val() == "") {
						// alert($("#usermsg").text())
						$("#usermsg").text("不能为空");
						$("#usermsg").css("display","inline")
						return false;
					} else {
						$("#usermsg").text("格式不正确");
						$("#usermsg").css("display","inline")
						return false;
					}
				}	
			}
			function pwdverify() {
				let zz = /^[0-9]+$/;
				if (zz.test(pwd.value)) {
					return true;
				} else {
					if ($("#pwd").val() == "") {
						$("#pwdmsg").text("不能为空")
						$("#pwdmsg").css("display","inline")
						return false;
					} else {
						$("#pwdmsg").text("请输入数字");
						$("#pwdmsg").css("display","inline")
						return false;
					}
				}
			}
		</script>
	</body>
</html>