HTML与JavaScript交互 - 初级操作

最新推荐文章于 2023-11-24 09:57:21 发布
最新推荐文章于 2023-11-24 09:57:21 发布
阅读量1.1k 收藏 1
点赞数
文章标签： javascript html 交互
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cosmosForMe/article/details/122013501
版权

Add a mouse interaction

 

<!doctype html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>FIT1050 Web Fundamentals - Week 9</title>
    <link href="style.css" type="text/css" rel="stylesheet" media="screen">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
      function showMessage() {
        alert("JaveScript!")
      }
    </script>
    
  </head>

  <body>
    
    <h1>FIT1050 Web Fundamentals</h1>
    <h2>Week 9 - JavaScript and jQuery</h2>
    
    <p id="filters">
      Filter:
      <button data-filter=".book, .tv, .movie, .game">All</button>
      <button data-filter=".book">Books</button>
      <button data-filter=".tv">TV</button>
      <button data-filter=".movie">Movies</button>
      <button data-filter=".game">Games</button>
    </p>
    
    <p id="products">
      <!-- images sourced from: www.bigw.com.au -->
      <img src="images/small/aclashofkings.jpg" alt="" class="book" />
      <img src="images/small/blazingsaddles.jpg" alt="" class="movie" />
      <img src="images/small/bones.jpg" alt="" class="tv" />
      <img src="images/small/captainamerica.jpg" alt="" class="movie" />
      <img src="images/small/chappie.jpg" alt="" class="movie" />
      <img src="images/small/criminalminds.jpg" alt="" class="tv" />
      <img src="images/small/doctorwho.jpg" alt="" class="tv" />
      <img src="images/small/fifa16.jpg" alt="" class="game" />
      <img src="images/small/fullhouse.jpg" alt="" class="tv" />
      <img src="images/small/gameofthrones.jpg" alt="" class="tv" />
      <img src="images/small/goldenlion.jpg" alt="" class="book" />
      <img src="images/small/gosetawatchman.jpg" alt="" class="book" />
      <img src="images/small/gtav.jpg" alt="" class="game" />
      <img src="images/small/halo5.jpg" alt="" class="game" />
      <img src="images/small/makeme.jpg" alt="" class="book" />
      <img src="images/small/monstersinc.jpg" alt="" class="movie" />
      <img src="images/small/nba2k16.jpg" alt="" class="game" />
      <img src="images/small/plentymore.jpg" alt="" class="book" />
      <img src="images/small/pulpfiction.jpg" alt="" class="movie" />
      <img src="images/small/sims4.jpg" alt="" class="game" />
    </p>
    
    <script src="script.js">
      // showMessage()
    </script>
    
  </body>
  
</html>
document.querySelector('h1').addEventListener('click',showMessage);

 

Implementing interactivity with jQuery

<!doctype html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>FIT1050 Web Fundamentals - Week 9</title>
    <link href="style.css" type="text/css" rel="stylesheet" media="screen">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  </head>

  <body>
    
    <h1>FIT1050 Web Fundamentals</h1>
    <h2>Week 9 - JavaScript and jQuery</h2>
    
    <p id="filters">
      Filter:
      <button data-filter=".book, .tv, .movie, .game">All</button>
      <button data-filter=".book">Books</button>
      <button data-filter=".tv">TV</button>
      <button data-filter=".movie">Movies</button>
      <button data-filter=".game">Games</button>
    </p>
    
    <p id="products">
      <!-- images sourced from: www.bigw.com.au -->
      <img src="images/small/aclashofkings.jpg" alt="" class="book" />
      <img src="images/small/blazingsaddles.jpg" alt="" class="movie" />
      <img src="images/small/bones.jpg" alt="" class="tv" />
      <img src="images/small/captainamerica.jpg" alt="" class="movie" />
      <img src="images/small/chappie.jpg" alt="" class="movie" />
      <img src="images/small/criminalminds.jpg" alt="" class="tv" />
      <img src="images/small/doctorwho.jpg" alt="" class="tv" />
      <img src="images/small/fifa16.jpg" alt="" class="game" />
      <img src="images/small/fullhouse.jpg" alt="" class="tv" />
      <img src="images/small/gameofthrones.jpg" alt="" class="tv" />
      <img src="images/small/goldenlion.jpg" alt="" class="book" />
      <img src="images/small/gosetawatchman.jpg" alt="" class="book" />
      <img src="images/small/gtav.jpg" alt="" class="game" />
      <img src="images/small/halo5.jpg" alt="" class="game" />
      <img src="images/small/makeme.jpg" alt="" class="book" />
      <img src="images/small/monstersinc.jpg" alt="" class="movie" />
      <img src="images/small/nba2k16.jpg" alt="" class="game" />
      <img src="images/small/plentymore.jpg" alt="" class="book" />
      <img src="images/small/pulpfiction.jpg" alt="" class="movie" />
      <img src="images/small/sims4.jpg" alt="" class="game" />
    </p>
    
    <script src="script.js">
      swal("Hello world!");
    </script>
    
  </body>
  
</html>
$( 'button' ).click( filterItems );
function filterItems() {
    let button = this;
    let selector = $( button ).data( 'filter' );
    console.log( selector );
    $('#products img').not(selector).hide(500);
    $(selector).show(500);
    // $( '#products img' ).not( selector ).fadeIn(800);
    // $( selector ).fadeOut(800);
    // $('#products img').not(selector).slideDown();
    // $(selector).slideUp();

}

cosmosForMe
关注
HTML与JavaScript的交互
吃不胖.
08-20 417
但是随着Web技术的不断发展和普及，HTML与JavaScript的交互的作用越来越重要，因为它能够实现Web页面的更高级的动态交互和功能。上面的代码首先获取了id为myDiv的元素对象，然后创建了一个新的<p>元素，将新元素的内容设置为“This is a new paragraph.”，最后将新元素添加到myDiv元素的子节点列表中。上面的代码首先获取了一个id为myDiv的元素对象，然后通过dataset属性获取了它的data-name和data-age属性的值，最后修改了data-age属性的值。
P2Javascript初级--讲义.zip
04-05
这个“P2Javascript初级--讲义.zip”压缩包文件包含了针对初学者的JavaScript基础知识，让我们来深入探讨一下JavaScript的核心概念和技术。 1. **变量与数据类型**：在JavaScript中，变量是存储数据的容器。你可以...
JavaScript与HTML交互——事件
weixin_33966365的博客
11-23 673
JavaScript和HTML的交互是通过事件实现的。JavaScript采用异步事件驱动编程模型，当文档、浏览器、元素或与之相关对象发生特定事情时，浏览器会产生事件。如果JavaScript关注特定类型事件，那么它可以注册当这类事件发生时要调用的句柄。 事件流 事件流描述的是从页面中接收事件的顺序，比如有两个嵌套的div，点击了内层的div，这时候是内层的div先出发click事件还是外层先...
html与javascript的交互
lnwaycool的专栏
06-30 906
javascript嵌入到html中，html会按顺序执行，但是有的浏览器对一些javascript的语句不支持直接执行，会限制javascript的执行，当你手动允许之后，看起来就是javascript比html晚执行了。         以下是html和javascript交互的关系图：                        ---1 事件---->      
JavaScript 事件
weixin_44831734的博客
05-06 158
HTML 事件是发生在 HTML 元素上的事情。 当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。 HTML 事件 HTML 事件可以是浏览器行为，也可以是用户行为。 以下是 HTML 事件的实例： List item HTML 页面完成加载 HTML input 字段改变时 HTML 按钮被点击 通常，当事件发生时，你可以做些事情。 在事件触发...
关于JavaScript、javascript与html交互的知识总结
Java兔的博客
06-30 567
&JavaScript 定义： Javascript是一种可以直接嵌入到HTML文档中，在客户端执行的解释型脚本语言，是一种基于对象和事件驱动并具有安全性能的脚本语言 。 作用： 1、输出html代码 2、对html事件做出反应 3、改变html内容 4、改变html样式 注意点： 1、javascript里面区分大小写。 2、比较：
javaScript-javascript-初级到高级-笔记.docx
09-30
JavaScript，作为一种广泛应用于网页开发的脚本语言，与HTML紧密结合以增强网页的交互性和动态性。尽管其名称中包含“Java”，但它与Java语言并无直接关系，而是属于一种基于原型和函数式的编程语言。JavaScript主要...
JavaScript-Course-:这是我作为初级（初学者）开发人员与W3Schools学习JavaScript的旅程。
05-22
4. **事件处理**：JavaScript能与用户交互，通过监听和响应用户的点击、滚动等事件，实现动态效果和交互性。 5. **DOM操作**：文档对象模型（DOM）是HTML和XML文档的结构化表示。JavaScript可以用来查询、修改和...
从零基础开始入门学习html5、css3、javascript,从初级开始学习前端知识.zip
10-20
学习这些技术，你需要理解HTML5的语义化标签，熟练运用CSS3的布局和样式，同时掌握JavaScript的基本语法和DOM操作。通过实践“oeasy-html5-tutorial-master”中的示例，你可以逐步建立起对这些概念的理解，并逐渐...
Web前端--初级样题理+实.rar
01-03
JavaScript是一种动态脚本语言，它为网页添加交互性，比如响应用户的点击事件、进行数据验证或实现动画效果。 在这个压缩包中，"初级样题理+实"可能包含以下内容： 1. HTML基础：学习如何编写基本的HTML标签，理解...
JavaScript交互效果.rar
11-25
包含了网页上所有的特效，轮播图，放大镜，Tab栏........，希望对网页特效感兴趣的可以下载看看，对你们有些帮助，
前端 JavaScript 与 HTML 怎么实现交互？
最新发布
Itmastergo的博客
11-24 3018
JavaScript与HTML结合实现前端交互，通过事件处理、DOM操作、表单交互、AJAX和动画效果等手段，使得用户能够在浏览器中更加灵活地与页面进行互动。这些技术的灵活运用，可以使前端开发者更好地满足用户需求，提升用户体验。深入理解和掌握这些交互技术，对于成为一名优秀的前端工程师至关重要。
js与浏览器，html内容的交互
www658的博客
05-17 927
一. window 全局变量 1.script 中var 声明变量 没有var 声明的变量 都是window全局变量 2.有id命名过的html节点也是全局对象 可以通过window访问 3.常用全局方法，都是省略了window alert 警告，confirm 确认，prompt弹框 setinterval延迟调用 isNaN 是否为非数字，document文档 二.Bom window对象 1.（window.）document.write（）文档打印 对象 可以先var 一个值 ，然后再打印这
html和js交互
guo15137668937的博客
07-11 2739
package com.bawei.webviewdemo; import android.app.Activity; import android.app.AlertDialog; import android.content.DialogInterface; import android.content.DialogInterface.OnClickListener; import andr
html中js交互问题总结
u010755374的专栏
04-22 304
1.当直接在html中写的代码时候，可以使用这种方法获取事件：$('.edit-img').on('click',function(){} 2.然而当使用js动态获取数据时候就需要使用另一种方法，否则获取不到焦点：$(document).on('click','.edit-img',function(){}
Js交互
aishangqian的博客
03-03 303
** WebViewActivity页面 ** package cj.com.a1609aproject.view.activity; import android.util.Log; import android.view.View; import android.webkit.JsResult; import android.webkit.ValueCallback; import andr...
JavaScript与HTML DOM交互
@_囚徒-2018_的家园
08-28 1094
1.HTML DOM (文档对象模型) 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树： 2.JavaScript和HTML DOM交互 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。 （1）JavaScript 能够改变页面中的所有 HTML 元
前端 JavaScript 与 HTML 怎么实现交互
qq_17189095的博客
06-27 531
JavaScript 可以在 HTML 元素上设置事件监听器，以便在特定事件（例如单击、鼠标悬停或键盘敲击）发生时触发 JavaScript 代码。
Web前端初级考试必备：HTML、CSS与JavaScript案例教程
jQuery是一个快速、小巧且功能丰富的JavaScript库，它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互的过程。在jQuery部分，学习者将学习到如何使用jQuery来简化DOM操作和事件处理，以及如何快速实现交云动画...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值