前端（JQuery）

最新推荐文章于 2024-06-24 20:44:34 发布

康康的码农之路

最新推荐文章于 2024-06-24 20:44:34 发布

阅读量101

点赞数

分类专栏： java Web笔记

本文链接：https://blog.csdn.net/qq_39892275/article/details/118580505

版权

java Web笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

前端今天主要讲了jQuery的知识点（Day04）

什么是jQuery以及怎么引入html
jQuery强大的css选择器
jQuery下的DOM操作

一. jQuery认知

什么是jQuery
jQuery是一个快速的，简介的javaScript框架。它封装JavaScript代码，提供一种简单的JavaScript设计模式，优化html文档操作（dom）,事件处理，动画设计和Ajax交互。
可以去官网下载它的文档
jQuery的引入
（1）使用script标签引入，<script src="js/jquery-3.6.0.js"></script>
（2）可以在各个位置引用，注意它的加载顺序和之前的script一样
（3）不要在引入的标签继续书写代码，不被识别
jQuery的核心对象
（1） jQuery的核心对象是 $或者jQuery 例如 $(“选择器”) ==> jQuery对象
（2）核心对象本质上是个方法，该方法支持传递选择器，来得到对应的标签，返回值是 jQuery对象！
特点
不管传递什么类型的选择器，它都可以加载，jQuery里面不管有几个标签，都可以直接操作这个对象，因为它设置了隐式循环。

  $("#d").css("color", "red");

jQuery中的文档加载

方法一：

<body>
$(function(){
    # $("#d").css("color", "red");
})
</body>

  方法二：

<body>
$(function(){
 # $("#d").css("color", "red");
})
</body>

对比之前js原生态的文档加载方式

<body>
window.οnlοad=function(){
var div = document.getElementsByTagName("div")[0];
            div.style.color = "red";
}
</body>

js中的文档加载方式和jQuery中的文档加载方式有什么区别？
（1） js中你的文档加载方式只有一种，而jQuery中的文档加载方式有两种。
（2） js中的文档加载只能执行一次，不管写几遍，它也是执行一次。但是jQuery中文档的记载方式可以执行多次
（3） js中的文档加载必须等到页面所有元素执行完毕才可以执行，而jQuery中的文档加载方式只需要等到html中的DOM结构执行完毕就可以执行

jQuery对象和js对象的转换
（1） js对象-> jQuery对象
var div1 = document.getElementsByTagName(“div”)[0];//js对象
$(div1).css(“color”, “red”);// jQuery对象
（2）jQuery对象 ->js对象
var divs = $(“div”);//jQuery对象
有两种方式将jQuery对象转化成js对象
1. jQuery对象[下标]：var div1 = divs[0];
2. jQuery对象.get(下标)：var div2 = divs.get(1);

二.JQuery强大的css选择器

基本选择器（标签（标签名）、id（#）、类class（.类名）、通配选择器（*））

   <script>
    id选择器
    $("#d").css("color", "red");
    类class选择器
    $(".c").css("font-size", "20px");
    标签选择器
    $("div").css("font-weight", "bold");
    *通配选择器
    $("*").css("text-align", "center");
    </script>

层级选择器（后代选择器，子代选择器，相邻兄弟选择器，一般兄弟选择器）

    <script>
    //后代选择器
    $("#big p").css("color", "red");
    //子代选择器
    $("#big > p").css("font-size", "30px");
    //相邻兄弟
    $("#wa + span").css("color", "gold");
    //一般兄弟
    $("#wa ~ span").css("font-size", "30px");
    </script>

注意：书写的时候，通过类名或者标签名定位第一个标签位置，后面的就可以通过写标签进行批量操作。相邻兄弟和一般兄弟选择器都是向下取。

过滤选择器
注：过滤选择器可以找到特定元素的位置，需要用到下标，下标都是从0开始的
:first 第一个
:last 最后一个
:eq(下标) 指定索引下的
:gt(下标) 大于指定索引下的所有
:lt(下标) 小于指定索引下的所有
:odd 奇数下标下的所以
:even 偶数下标下的所有
:not() 除去括号内的

<script>
    //获取第一个div
    $("div:first").css("color", "red");
    //获取最后一个div
    $("div:last").css("color", "pink");
    //获取指定下标下的div，第四个
    $("div:eq(3)").css("color", "yellow");
    //获取下标小于指定下标的div
    $("div:lt(3)").css("font-size", "25px");
    //获取下标大于指定下标的div
    $("div:gt(3)").css("font-size", "35px");
    //奇数下标的
    $("div:odd").css("font-weight", "bold");
    //偶数下标的
    $("div:even").css("font-style", "italic");
    //去除
    $("div:not(.c)").css("letter-spacing", "10px");
</script>

表单选择器
（1）基本表单选择器
:input 所有的input元素
:text 所有类型为text的input元素
$(“input:text”) 找所有类型为text文本输入框的input标签
:password
:checkbox
:radio
（2）过滤表单选择器（重点）
:checked 选择被选中的单选框或者复选框
:selected 选择被选中的option下拉选项
:enabled 选择可用的表单元素
:disabled 选择禁用的表单元素

<script>
    找到可用的input标签
    $("input:enabled").css("border", "3px blue solid");
    找到禁用的input标签
    $("input:disabled").css("border", "3px red solid");
    找到被选中的单选框或者复选框
    console.log($("input:checked").length);
    找到被选中的下拉选项option
    console.log($("option:selected").val());
</script>

特殊选择器（this选择器）
注： this是js对象，如果我们想要在jQuery中使用this的话，需要用$(this)来表示

     <script>
    //为div添加点击事件
    $("div").click(function() {
        //改变div的背景颜色
        $(this).css("background-color", "blue");
    })
</script>

三. jQuery下的DOM操作

样式操作
（1）操作标签中的css样式（两种方法）

（1）css()
     css("样式名称", "值") 一个样式赋值
     
（2）css({
         "样式名称": "值",
         "样式名称": "值",
         ... 最后一组不要加逗号！
     }) 一次性改变多个样式

<script>
  $("div").css("color", "red");
    $("div").css({
   "font-size": "30px",
   "font-weight": "bold"
    })
 </script>

（2）类名操作
addClass() 添加类名
removeClass() 删除类名
toggleClass() 切换类型，有则删，无则加
类名写在双引号中，多个类名空格隔开！

<script>
   类操作
   $("div").addClass("italic spacing");
   //$("div").removeClass("italic");
   $("div").toggleClass("italic");
   </script>

(3) 事件绑定
jQuery中的事件绑定和js中的不太一样，去掉on就行
$(document).click(function() {}

属性操作
(1)在js中，我们改变标签中的属性值都是通过：
标签.行间属性名 = “值”
标签.setAttribute(“行间属性名”, “行间属性值”)。
(2)在jQuery中我们改变标签名是通过属性的方法prop();
prop(“行间属性名”) 获取行间属性的值
prop(“行间属性名”, “行间属性值”) 赋值、修改行间属性
内容操作
（1）在js中，我们操作文本标签内容的方式为：
表单元素标签：value
普通标签：innerText、innerHTML
（2）在jQuery中操作标签文本的方法
表单元素标签：val();
普通标签：text();html();
以上三个方式如果在不适用参数，那就是在取值获取文本内容。
例如

$("input").val();
           $("div").text();

如果有参数，就是在赋值
例如：

$("input").val("和尚");
          $("div").text("和尚");

文档操作
（1）添加操作
先创建要添加的标签，然后用jQuery对象添加
var a = $(“html结构”);
var a = $(“百度”);
然后用方法把jQuery对象添加进去到标签的各个地方
内部添加的方法
A,append(B); B.appendTo(A); 把B添加到A内部的最后面
A,prepend(B); B.prependTo(A); 把B添加到A内部的最前面
外部添加的方法
A.after(B); B.insertAfter(A)；在A同级以下紧挨着的位置添加B;
A.before(B); A.insertBefore(B); 在A同级以上紧挨着的地方添加B；

记忆方法： A内部的最后面是B ； A的后面是B； B添加到A的后面； B插入到A的后面
A,append(B); A.after(B); B.appendTo(A); B.insertAfter(A)；
第二种同理记忆方法
内部添加是
append appendTo 内部最后面
perpend prependTo 内部最前面
同级添加是
after insertAfter 同级最后面
before insertBefore 同级最前面
后面添加是
append appendTo 内部添加
after insertAfter 外部添加
前面添加
perpend prependTo 内部添加
before inserBefore 外部添加

（2）删除操作
删除操作的方法有三个’
empty();它的本质是清空文本内容而不是删除
remove(); 它的作用是删除一切删除内容标签结构（“支持标签传递”）
detach(); 它的作用的保留结构如果再添加回标签会保留它的结构（例如点击事件什么的）

jQuery的遍历操作
有两种方式
(1) jQuery对象集合.each(function(index,element){
遍历的代码
})
index 是下标索引 element是获取到的每个js对象
(2)$.each(jQuery对象集合,function(){
遍历的代码
})
index 是下标索引 element是获取到的每个js对象

四. jQuery中动画效果

根据控制属性实现动画效果

通过改变标签的height,width,不透明度opacity 这三个css样式来实现动画效果
三个方法：show(),hide(),toggle();
其中togle();是切换show()和hide()方法中的动画效果
通过改变标签的不透明度opacity来实现动画效果
三个方法：fadeIn()淡入显示 fadeOut()淡出显示 fadeToggle();
fadeToggle():是切换fadeIn()和fadeOut()的
通过改变标签的height来实现动画效果
三个方法：slideDown();slideUp(); slideToggle();
slideToggle();是切换slideDown();和slideUp方法的；

自定义动画

用于创建自定义动画的函数
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象的中的每一个属性都可以表示一个可变化的样式属性。
所有的属性都必须用驼峰形式比如用marginLeft代替margin-left
函数animate(params,[speed],[fn])
参数解析
1.params:一组包含作为动画属性和终值的样式属性和乃其值的集合
2.speed：三种预定速度之一的字符串（”slow“,“normal”,or"fast"）或表示动画时长的毫秒数值（如：1000）
3.fn:在动画完成时执行的函数，每个元素执行一次

 <script>
    $("div").click(function() {
        /*
            animate方法，自定义动画，需要给定动画效果
            动画效果的给定，就是设定样式的改变
        */
        $(this).animate({
            "left": "500px",
            "top": "100px"
        }, 2000, function() {
            $(this).hide(1000);
        })
    })
</script>

五.jQuery表单校验插件validation

针对表单校验的问题，jQuery提供了一个插件，叫做validation，这个插件内置了许多默认的校验规则，我们针对某些常见的或者通用的校验内容，可以直接给定其提供的校验规则，而不需要再书写额外的校验代码，提高了开发效率！

使用步骤
（1）下载
下载地址：
https://github.com/jquery-validation/jquery-validation/releases/download/1.17.0/jquery-validation-1.17.0.zip
帮助文档地址：
https://jqueryvalidation.org/documentation/
（2）查看下载后的目录结构

（3）如何使用该校验插件呢？
导入jQuery文件：jquery-3.1.1.js
该文件要优先导入，因为核心的校验脚本中的语法格式是jQuery
核心的校验脚本js文件：jquery.validate.js
语言包：messages_zh.js
为了能够让校验的结果以中文形式显示，我们需要导入中文的语言包
（4）使用插件中提供的校验规则，完成数据校验
我们首先需要知道有哪些常见的校验规则：

校验的第一种方式，将插件中提供的规则，直接书写在标签的行间属性中！
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单校验插件的使用方式1</title>
	</head>
	<body>
		<form action="#" method="get">
			用户名：<input type="text" name="username" id="username"
				 placeholder="请输入6~15长度的字符串" required="true"
				 rangelength="[6, 15]" /><br />
			密码：<input type="password" name="password" id="password"
				placeholder="请输入密码，最小长度为6位" required="true"
				minlength="6" /><br />
			确认密码：<input type="password" name="cpwd" id="cpwd"
				placeholder="请再次输入密码" required="true"
				equalTo="#password" /><br />
			邮箱：<input type="text" name="email" id="email"
				 placeholder="请输入电子邮箱" required="true"
				 email="email" /><br />
			生日：<input type="text" name="birthday" id="birthday"
				placeholder="请输入生日" required="true"
				dateISO="yyyy-MM-dd" /><br />
			<input type="submit" value="提交" />
		</form>
	</body>
	<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
	<script type="text/javascript" src="js/jquery.validate.js"></script>
	<script type="text/javascript" src="js/messages_zh.js"></script>
	<script type="text/javascript">
		/*
		 	为了让添加在表单form中的校验规则生效，我们需要让表单标签form
		 	执行validate()校验方法！
		 */
		$("form").validate();
	</script>
</html>

校验方式的第二种，不在表单内部的标签中添加校验规则，将规则及校验的显示文本都在js内部填写！我们可以自定义校验提示文本，而且可以去指定提示文本的样式！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单校验插件的使用方式2</title>
		<style type="text/css">
			.e {
				color: red;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<form action="#" method="get">
			用户名：<input type="text" name="username" id="username"
				 placeholder="请输入6~15长度的字符串" /><br />
			密码：<input type="password" name="password" id="password"
				placeholder="请输入密码，最小长度为6位" /><br />
			确认密码：<input type="password" name="cpwd" id="cpwd"
				placeholder="请再次输入密码" /><br />
			邮箱：<input type="text" name="email" id="email"
				 placeholder="请输入电子邮箱" /><br />
			生日：<input type="text" name="birthday" id="birthday"
				placeholder="请输入生日" /><br />
			<input type="submit" value="提交" />
		</form>
	</body>
	<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
	<script type="text/javascript" src="js/jquery.validate.js"></script>
	<script type="text/javascript" src="js/messages_zh.js"></script>
	<script type="text/javascript">
		/*
		 	为了让添加在表单form中的校验规则生效，我们需要让表单标签form
		 	执行validate()校验方法！
		 */
		$("form").validate({
			//表示规则的关键字rules
			rules: {
				"username": {
					required: true,
					rangelength: [6, 15]
				},
				"password": {
					required: true,
					minlength: 6
				},
				"cpwd": {
					required: true,
					equalTo: "#password"
				},
				"email": {
					required: true,
					email: "email"
				},
				"birthday": {
					required: true,
					dateISO: "yyyy-MM-dd"
				}
			},
			//表示文本提示的关键字messages
			messages: {
				"username": {
					required: "用户名不能为空",
					rangelength: "用户名的长度为6~15位"
				},
				"password": {
					required: "密码不能为空",
					minlength: "密码长度最小为6位"
				},
				"cpwd": {
					required: "确认密码不能为空",
					equalTo: "两次密码不一致"
				},
				"email": {
					required: "邮箱不能为空",
					email: "邮箱格式不正确"
				},
				"birthday": {
					required: "生日不能为空",
					dateISO: "生日格式不正确"
				}
			},
			//表示文本提示样式的关键字errorClass
			errorClass: "e"
		});
	</script>
</html>

康康的码农之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端（JQuery）

前端今天主要讲了jQuery的知识点（Day04）什么是jQuery以及怎么引入htmljQuery强大的css选择器jQuery下的DOM操作一. jQuery认知什么是jQueryjQuery是一个快速的，简介的javaScript框架。它封装JavaScript代码，提供一种简单的JavaScript设计模式，优化html文档操作（dom）,事件处理，动画设计和Ajax交互。可以去官网下载它的文档jQuery的引入（1）使用script标签引入，<script src
复制链接

扫一扫