Web前端学习:jQuery基础--2【jQuery事件、设置与获取HTML 】

简介: Web前端学习:jQuery基础--2【jQuery事件、设置与获取HTML 】

一、jQuery事件


注意:JavaScript事件和jQuery事件是不同的

image.png


代码演示


示例:实现一个鼠标悬浮在button按钮时内容隐藏,鼠标离开button按钮时内容显示的功能。


首先,通过<script src="jquery-1.10.2.min.js"></script>引用js文件


其次,通过 <input type="button" value="点我隐藏"> 设置一个按钮,然后再写入一个p标签


接着,在第二个script标签中写入一个文件就绪事件:$(function () {}),并在这一事件中通过元素选择器找到input元素


然后先给input元素设置一个鼠标悬浮事件:$('input').mouseover(function () {}),并在此事件内通过元素选择器找到p元素,给p元素设置一个元素隐藏事件:$('p').hide();


最后再给input元素设置一个鼠标离开事件:$('input').mouseleave(function () {}),并在此事件内通过元素选择器找到p元素,给p元素设置一个元素显示事件:$('p').show();



  • 源代码如下
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.10.2.min.js"></script>
    <script>
        //加载
        $(function () {
            //鼠标悬浮
            $('input').mouseover(function () {
                //鼠标悬浮隐藏p元素
                $('p').hide();
            })
            //鼠标离开
            $('input').mouseleave(function () {
                //鼠标离开显示p元素
                $('p').show();
            })
        })
    </script>
</head>
<body>
    <input type="button" value="点我隐藏">
    <p class="cla1">
        这是内容
    </p>
</body>
</html>


运行结果

1b4d0f1c73b149f68ea0ae5955760e19.png



二、jQuery设置与获取HTML


text() 设置或者获取所选元素的文本内容


html() 设置或者获取所选元素的内容(包括HTML元素)


val() 设置或者获取表单字段的值


1、演示text()的用法


  • text()获取值

例:var a = $(".classes").text();


意思是通过声明一个变量a,用$(".classes").text() 的方法获取属性为 classes 的元素值


代码演示:

50277a73123045aa97ac4b95e3365de7.png


运行结果

8675044c818c4591b718318a5550b143.png


    text()修改值


   例:var a = $(".classes").text(“这是修改后的内容”);


   意思是通过声明一个变量a,用 $(".classes").text(“这是修改后的内容”)的方法获取属性为 classes 的元素值然后修改p标签中的内容并赋值给变量a


代码演示:


49582831b46c463690fc7085409241e9.png


运行结果

2691b53c8efd4a8da402f2083699d9b5.png

2、演示html()的用法


  • html()获取值

   html()获取值的用法和text()获取值的用法相同,在此就不一一演示了 ,重点在于html修改值的操作

  • html()修改值

   html()修改值的用法和text()修改值得用法相同,text()和html()获取的值的结果是一样的,但是设置值的时候html(),会把标签渲染到页面




代码演示:

  • 先演示text()修改值


42af6eda0e814abaa37c6e56029c0b49.png


运行结果

b8bf1008dedd411fbbd46bc938308971.png


再演示html()修改值的效果(html()修改值时添加标签,也就是重新设置HTML元素)


1b2409f114364b4d88bf267a0f2f8b0b.png


运行结果


3a272e4888a74f4a81437d8b4d2410ca.png


3、演示val()的用法


val() 设置或者获取表单字段的值


 代码演示:


05f76d1e42ab477d9e03a7f25585d369.png


运行结果

92c4854ae4d64058933857262b0a1ccd.png

目录
打赏
0
0
0
0
6
分享
相关文章
学习Python Web开发的安全测试需要具备哪些知识?
学习Python Web开发的安全测试需要具备哪些知识?
132 61
|
1月前
|
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
48 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
springSecurity学习之springSecurity过滤web请求
通过配置 Spring Security 的过滤器链,开发者可以灵活地管理 Web 请求的安全性。理解核心过滤器的作用以及如何配置和组合这些过滤器,可以帮助开发者实现复杂的安全需求。通过具体的示例代码,可以清晰地了解 Spring Security 的配置方法和实践。
97 23
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
101 25
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
78 6
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
118 5
Web学习_SQL注入_联合查询注入
联合查询注入是一种强大的SQL注入攻击方式,攻击者可以通过 `UNION`语句合并多个查询的结果,从而获取敏感信息。防御SQL注入需要多层次的措施,包括使用预处理语句和参数化查询、输入验证和过滤、最小权限原则、隐藏错误信息以及使用Web应用防火墙。通过这些措施,可以有效地提高Web应用程序的安全性,防止SQL注入攻击。
117 2
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
66 3
Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示
Web实时通信的学习之旅:SSE(Server-Sent Events)的技术详解及简单示例演示
1886 0