Java学习笔记day42

最新推荐文章于 2024-07-17 21:40:42 发布
最新推荐文章于 2024-07-17 21:40:42 发布
阅读量311 收藏
点赞数
分类专栏： Java学习记录 文章标签： 学习 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kouzai8880/article/details/128159548
版权

JQuery基础

简介

一个JavaScript的框架，简化了JS的语法和操作，定义了HTML属性操作、样式操作、DOM操作等相关函数，实现了对ajax异步请求封装。提供了很多预定义函数的JS文件。

作用

简化部分JavaScript开发

使用步骤

1.引入JQuery
2.编写代码

引入JQuery

方式1: 引入本地JQuery文件
1.下载JQuery文件
    地址1:http://code.jquery.com/jquery-3.6.0.js
    地址2:http://code.jquery.com/jquery-3.6.0.min.js
2.将JQuery文件存放在js文件夹下
3.在使用JQuery文件的html中使用script标签进行引入
方式2: 通过script标签直接引入JQuery的网络地址
<script type="text/javascript" src="http://code.jquery.com/jquery-3.6.0.js"></script>

核心函数

jQuery()函数,选择器函数,用于获取HTML文档中的元素,简写为$()
作用1: 寻找标签
语法: $("选择器")
示例: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span id="span">span标签</span>
<br/>
<p class="p">p标签1</p>
<p class="p">p标签2</p>
</body>
<script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    $("#span")//寻找当前网页中id值为span的标签
    $(".p")//寻找当前网页中class值为p的标签
</script>
</html>
作用2: 创建标签
语法: $("标签")
示例: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
    <p>p标签</p>
</div>
</body>
<script type="text/javascript">
    var h = $("<h1>德玛西亚</h1>");
    $("#box").append(h);
</script>
</html>
作用3: 入口函数
作用: 类似于window.onload = function(){}; 当页面加载完成后执行
语法1: $(document).ready(function(){});
语法2: $(function(){});
示例: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(document).ready(function () {
        });
        $(function () {
        });
    </script>
</head>
<body>
<div id="box">
    <p>p标签</p>
</div>
</body>
</html>
作用4: 将DOM对象转换为JQuery对象
语法: $(DOM对象)
示例: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            var p = document.getElementById("p");
            console.log("p的dom对象:" + p);
            var p2 = $(p);
			//dom对象转换为jquery对象
            console.log("p的jquery对象:" + p2);
			//jquery对象转换为dom对象
            console.log("p2转换为dom对象:" + p2[0]);
        });
    </script>
</head>
<body>
<div id="box">
    <p id="p">p标签</p>
</div>
</body>
</html>

注意: JQuery无法使用DOM对象提供的属性与方法

选择器

基本选择器
id选择器: #id
class选择器: .class
标签选择器: 标签名
通配选择器: *
伪类选择器
鼠标悬浮
获取焦点
...
复合选择器
selector1 selector2: 后代选择器,选择所有selector1匹配的元素里面的匹配selector2的元素
selector1 > selector2: 子元素选择器,选择匹配selector1元素的子标签中匹配selector2的元素
selector1,selector2: 选择所有匹配selector1和selector2的元素(并集)
selector1 + selector2: 匹配所有紧接在selector1元素后的selector2元素
selector1 ~ selector2: 匹配所有在selector1元素后的selector2元素

示例: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div p {
            color: red;
        }

        div > p {
            color: green;
        }

        #box01 p, #p {
            font-size: 20px;
        }

        #box02 + #p {
            color: orange;
        }

        #box02 ~ #p {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div id="box01">
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
</div>
<hr/>
<div id="box02">
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
</div>
<p id="p">div外的p标签</p>
</body>
</html>
属性选择器
语法: 
    选择器[属性名]
    选择器[属性名=属性值]
示例: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        input[type=password] {
            background: red;
        }

        input[type] {
            display: block;
            height: 100px;
        }
    </style>
</head>
<body>
<input type="text"/>
<input type="password"/>
</body>
</html>

JQuery选择器筛选

语法
选择器筛选语法说明
$("selector: first ")匹配selector选择的元素集合中的第一个
$("selector: last ")匹配selector选择的元素集合中的最后一个
$("selector: odd ")匹配selector选择的元素集合中索引为奇数的元素(1,3,5,7,…)
$("selector: even ")匹配selector选择的元素集合中索引为偶数的元素(0,2,4,6,…)
$("selector: eq(index) ")匹配selector选择的元素集合中索引为index的元素
$("selector: lt(index) ")匹配selector选择的元素集合中索引小于index的元素
$("selector: gt(index) ")匹配selector选择的元素集合中索引大于index的元素
$("selector [attrName=attrValue] ")匹配selector选择的元素集合中attrName属性值为attrValue的元素
$("selector [attrName!=attrValue] ")匹配selector选择的元素集合中attrName属性值不为attrValue的元素
示例
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.6.0.min.js" type="text/javascript"
            charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $("p:first").css("color", "red");
            $("p:last").css("color", "orange");
            $("p:odd").css("font-size", "30px");
            $("p:even").css("text-decoration", "underline");
            $("input[type=text]").css("background", "red");
            $("input[type!=text]").css("background", "green");
        });
    </script>
</head>
<body>
<div id="box01">
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
</div>
<hr/>
<div id="box02">
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
</div>
<p id="p">div外的p标签</p>
<input type="text"/>
<br/>
<input type="password"/>
</body>
</html>

JQuery操作内容

获取内容
    语法1: $("选择器").text()
    语法2: $("选择器").html()
修改内容
    语法1: $("选择器").text(修改后的内容)
    语法2: $("选择器").html(修改后的内容)
    注意: 会替换标签中原内容

示例: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <script src="js/jquery-3.6.0.min.js" type="text/javascript"
            charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            //类似于DOM的innerText
            console.log($("#box").text());
            //类似于DOM的innerHTML
            console.log($("#box").html());
            //$("#box").text("jquery对象修改内容<hr />")
            //$("#box").html("jquery对象修改内容<hr />")
            //追加
            $("#box").html($("#box").html() + "JQuery追加的内容<hr />");
        });
    </script>
</head>
<body>
<div id="box">
    <p id="p">p标签</p>
</div>
</body>
</html>

JQuery操作属性

一般属性
语法: attr()
示例: 
//1.获取元素属性值
var v1 = $("#img").attr("src");
var v2 = $("#img").attr("width");
//2.设置元素属性
$("#img").attr("src","imgs/img01.png");
$("#img").attr("width","200px");

value属性
语法: val()
示例: 
//1.获取元素value属性值
var v = $("#userName").val();
//2.设置元素的value属性值
$("#userName").val("这是设置的值");

获取单选按钮选中的值
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.6.0.js" type="text/javascript"
            charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                var sex = $("input[name=sex]:checked").val();
                alert(sex);
            });
        });
    </script>
</head>
<body>
<p>
<p>1.选择您的性别?</p>
<input type="radio" value="男" name="sex"/>
男
<br/>
<input type="radio" value="女" name="sex"/>
女
<br/>
<input id="btn" type="button" value="提交"/>
</p>
</body>
</html>

获取多选按钮选中的值
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.6.0.js" type="text/javascript"
            charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                var vs = $("input[name=like]:checked");
                var values = new Array();
                for (var i = 0; i < vs.length; i++) {
                    values[i] = vs[i].value;
                }
                alert(values);
            });
        });
    </script>
</head>
<body>
<p>
<p>1.选择您的爱好?</p>
<input type="checkbox" value="篮球" name="like"/>
篮球
<br/>
<input type="checkbox" value="足球" name="like"/>
足球
<br/>
<input id="btn" type="button" value="提交"/>
</p>
</body>
</html>

删除属性
语法: removeAttr(属性名)
示例: 
$("#input").removeAttr("value");
$("#input").removeAttr("name")

class属性
语法: 
addClass(): 添加
removeClass(): 删除
toggleClass(): 原标签没有就是添加,原标签有就是删除
attr("class"): 获取class的属性值
示例: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .text01 {
            color: red;
        }

        .text02 {
            text-decoration: underline;
        }

        .text03 {
            font-size: 80px;
        }
    </style>
    <script src="js/jquery-3.6.0.min.js" type="text/javascript"
            charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $(".text01").addClass("text02");
            $(".text01").removeClass("text02");
            $(".text01").toggleClass("text03");
            $(".text01").toggleClass("text01");
            console.log($("#h").attr("class"));
        });
    </script>
</head>
<body>
<h1 class="text01" id="h">测试</h1>
</body>
</html>

JQuery操作样式

获取css属性值
语法: css("属性名")
注意: 不限于内联样式的属性

修改css属性值
语法: css("属性名","属性值");
注意: 不限于内联样式的属性

示例: 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #box {
            width: 200px;
            height: 160px;
            background: red;
            border: 10px solid black;
            position: absolute;
        }
    </style>
    <script src="js/jquery-3.6.0.min.js" type="text/javascript"
            charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            console.log($("#box").css("width"));
            $("#box").css("height", "300px");
            $("#box").css("left", "200px");
        });
    </script>
</head>
<body>
<div id="box"></div>
</body>
</html>
新手小白6
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
day3 java 学习笔记
01-13
day3 java 笔记
Java学习笔记整理
05-21
这些学习笔记将带你深入了解Java的核心概念，特别是面向对象编程和集合框架。以下是对每个文件内容的详细阐述： 1. **Day0804_HashMap的基本使用.docx**：HashMap是Java集合框架中的一个重要组件，它提供了键值对的...
Java学习笔记Day42
jiandandian_的博客
08-23 34
Java学习笔记Day42 Stream的中间操作：过滤、映射、筛选等。 空指针异常是导致Java应用程序失败的最常见原因。 复习课： 静态代理的缺点： 1、代理类和目标对象的类都是在编译期间确定下来，不利于程序的扩展。 2、每一个代理类只能为一个接口服务，这样一来程序开发中必然产生过多的代理。 动态代理的特点： 动态代理是指客户通过代理类来调用其他对象的方法，并且是在程序运行时根据需要动态创建目标类的代理对象。 ...
Java学习笔记 day1
Tang_Qie的博客
04-15 218
.java 编译 -> .class ->JVM(java虚拟机) 运行JDK （java 开发工具包）JRE (java 运行环境)Java转义字符\t 制表位 对齐\n 换行\\ 一个\\" 一个"\' 一个'\r 一个回车\\ 注释\* *\ 多行注释
JAVA学习笔记 day1
salad_oil的博客
11-06 93
java基础
Java学习笔记Day1.1
qq_43559559的博客
09-18 238
安装软件最好新建一个文件夹，方便统一与管理。 到Oracle官网下载jdk 版本8，接着傻瓜式安装 1. 配置jdk环境变量： 步骤（window10） 右击此电脑–>属性–>高级系统设置–>环境变量–>分别在用户变量一框新建以下三个变量： 1.java_home (jdk的安装目录) C:\Program Files\Java\jdk1.8.0_201 2.path（jd...
JAVA学习笔记DAY3——菜鸟教程Java基础
weixin_47227105的博客
06-09 1017
菜鸟教程面向对象之前的部分都走马观花看了一遍。用于突击学习和复习。
java_day3学习笔记
m0_73857800的博客
07-12 776
title: Java_Day_3学习笔记tags: Java。
JAVA学习笔记DAY6——SSM_Spring
weixin_47227105的博客
06-13 787
Spring Ioc容器是复杂容器。一个项目project拆分成多个模块module。配置方式包括三种：xml、注解、配置类。从文件结构的角度看，框架=jar包+是SSM的一种简化，快速创建服务。用来维护不同服务的相互调用。控制层组件 Servlet。业务逻辑层 Service。持久化层组件 Dao。
Java学习笔记
stange1的博客
05-06 5272
1.2.1 首先找到此电脑，右键点击属性，可以按照下面的界面；点击【高级系统设置】，再点击【环境变量】 1.2.2 找到JDK的bin目录，复制一下 1.2.3 将JDK的bin目录粘贴在Path环境变量后面 1.2.4.在CMD输入javac -version 看提示信息是否显示你安装JDK的版本号​ 1、java 基础（Java SE）标准版 2、就业方向：①JavaEE软件工程师②大数据③android开发 3、运行原理示意图 4、Java 开发注意事项和细节说明 5、如何快速掌握技术或知识点 代
java学习笔记day1
m0_52601335的博客
02-25 561
java学习笔记day1 首先，创建一个文本文档，然后命名为“类”的名字。如：Steam.java 之后，win+R打开命令面板，输入cmd. 如图： 之后，**C:\Users\22836>**代表初始的文件路径。经过，几步操作，跳转到 java文本文档所在的路径。 java文本文档所在的路径 如图： 之后，输入javac Steam.java，编译java文本文档. 会看到 文件中，多了一个 class文档。 然后，输入java Steam,就进行 执行程序的阶段了。程序会 运作，并产生结
java学习笔记（持续更新）
快乐学习，daydayup!
12-24 7564
如果您也在学习java，希望能够和您一起讨论，一起学习。这篇文章是记录笔者0基础学习java的过程，如果您阅读这篇文章时，发现一些错误，也希望您愿意指出。本次java学习流程以黑马程序员的java教学视频为主，其他博主或公开教程为辅。学习过程中遇到的一些个别情况或错误都会记录其中并记载解决方案。本篇学习记录会一直更新，希望能与大家一起学习，共同成长。
java自学笔记day2
02-12
Java自学笔记Day2主要涉及了两个核心主题：二进制的使用和运算符，特别是算术运算符。在深入理解这些概念之前，首先要明白Java是一种广泛使用的后端开发语言，它构建于Apache等开源基础设施之上，因此掌握这些基础...
java学习笔记markdown
12-22
Java学习笔记Markdown版包含了多个章节，涵盖了Java编程的多个核心概念。这些笔记是学习Java时进行知识总结的理想资源，尤其适合初学者或正在巩固基础知识的开发者。以下是对这些笔记内容的详细解读： 1. **继承** ...
springboot学习笔记day13.xmind
04-21
springboot学习笔记day13.xmind
2024Datawhale AI夏令营---基于术语词典干预的机器翻译挑战赛--学习笔记
weixin_61573157的博客
07-15 1038
机器翻译（Machine Translation，简称MT）是自然语言处理领域的一个重要分支，其目标是将一种语言的文本自动转换为另一种语言的文本。机器翻译的发展可以追溯到20世纪50年代，经历了从基于规则的方法、统计方法到深度学习方法的演变过程。当前，机器翻译正朝着更加智能化和个性化方向发展。一方面，结合上下文理解、情感分析等技术，提高翻译的准确性和自然度；另一方面，通过用户反馈和个性化学习，提供更加符合用户需求的翻译服务。同时，跨语言信息检索、多模态翻译等新兴领域也正在成为研究热点。
昇思25天学习打卡营第14天|LLM-文本解码原理--以MindNLP为例
最新发布
wwt72的博客
07-17 474
限制输出序列的最大长度为50个token。top-p=0.95，top-p采样表示在每一步生成token时，只从概率分布中累计概率达到95%的token中进行采样，有助于保持生成文本的流畅性和质量，同时允许一些低概率的token被选中，从而增加多样性。表示禁用了top-k采样，因为在top-k采样中，通常是从概率最高的k个token中随机选择一个token作为下一个输出，而这里设置为0表示不限制token的选择，实际上这将等同于使用 softmax 概率分布直接进行采样。这有助于提高生成文本的多样性。
NumPy库学习之np.random.rand函数
qq_46396470的博客
07-15 290
是 NumPy 库中的一个函数，用于生成随机数。这些随机数是从均匀分布 [0, 1) 中抽取的，即每个数都在0到1之间，但不包括1。
探索Perl语言：入门学习与实战指南
洛秋的博客
07-15 776
Perl（Practical Extraction and Report Language）由Larry Wall于1987年创建，旨在帮助系统管理员简化日常任务。高效灵活：Perl的语法灵活多样，支持多种编程风格（过程式、面向对象等）。强大的文本处理能力：内置强大的正则表达式支持，是处理文本数据的利器。丰富的模块库：通过CPAN（Comprehensive Perl Archive Network）可以方便地获取和使用各类模块。Perl广泛应用于系统管理、Web开发、网络编程、数据库操作等领域。
java学习（三）.pdf
01-30
java学习笔记（三）

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值