JS技术习题

最新推荐文章于 2024-10-02 05:39:15 发布
最新推荐文章于 2024-10-02 05:39:15 发布
阅读量362 收藏 10
点赞数 9
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_64270799/article/details/135578519
版权

Js习题

  • 写出下列程序片段（加下划线的部分不是程序片段的组成部分）在指定操作后的执行结果

1、<button id="myBtn">点我</button>

<p id="demo"></p>

<script>

document.getElementById("myBtn").addEventListener("click", function()

{

     document.getElementById("demo").innerHTML = "Hello World";

});

</script>

点击button后的结果：                                   

2、<p>该实例使用 addEventListener() 方法在同一个按钮添加两个点击事件。</p>

<button id="myBtn">点我</button>

<script>

var x = document.getElementById("myBtn");

x.addEventListener("click", myFunction);

x.addEventListener("click", someOtherFunction);

function myFunction() {    alert ("Hello World!")}

function someOtherFunction() {    alert ("该函数也将被执行!")}

</script>

点击button后的结果：                                   

3、<button id="myBtn">点我</button>

<p id="demo"></p>

<script>

var x = document.getElementById("myBtn");

x.addEventListener("mouseover", myFunction);

x.addEventListener("click", mySecondFunction);

x.addEventListener("mouseout", myThirdFunction);

function myFunction()

{

    document.getElementById("demo").innerHTML += "鼠标经过!<br>"

}

function mySecondFunction()

{

    document.getElementById("demo").innerHTML += "点击!<br>"

}

function myThirdFunction()

{

    document.getElementById("demo").innerHTML += "鼠标离开!<br>"

}

</script>

点击button并将鼠标从button上移开后的结果：

4、

<button id="myBtn">点我</button>

<p id="demo"></p>

<script>

var p1 = 5;

var p2 = 7;

document.getElementById("myBtn").addEventListener("click", function()

{

myFunction(p1, p2);

});

function myFunction(a, b)

{

var result = a * b;

document.getElementById("demo").innerHTML = result;

}

</script>

点击button后的结果：                                   

5、

<button id="myBtn">点我</button>

<script>

document.getElementById("myBtn").addEventListener("click", function()

{

    this.style.backgroundColor = "red";

});

</script>

点击button后的结果：                                   

6、

<div id="myDiv">

<p id="myP">点击该段落， 我是冒泡</p>

</div><br>

<div id="myDiv2">

<p id="myP2">点击该段落， 我是捕获</p>

</div>

<script>

document.getElementById("myP").addEventListener("click", function()

{

    alert("你点击了 P 元素!");

}, false);

document.getElementById("myDiv").addEventListener("click", function()

{

    alert("你点击了 DIV 元素!");

}, false);

document.getElementById("myP2").addEventListener("click", function()

{

    alert("你点击了 P 元素!");

}, true);

document.getElementById("myDiv2").addEventListener("click", function()

{

    alert("你点击了 DIV 元素!");

}, true);

</script>

在文字“点击该段落， 我是冒泡”上点击时的结果：

在文字“点击该段落， 我是捕获”上点击时的结果：

在文字“点击该段落， 我是冒泡”所在div内上方区域点击时的结果：

在文字“点击该段落， 我是捕获”所在div内上方区域点击时的结果：

7、

<div id="myDIV">

<button οnclick="removeHandler()" id="myBtn">点我</button>

</div>

<p id="demo"></p>

<script>

document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction()

{

    document.getElementById("demo").innerHTML = Math.random();

}

function removeHandler()

{

    document.getElementById("myDIV").removeEventListener("mousemove", myFunction);

}

</script>

在点击button后在点击时页面的变化：

8、

<ul id="myList"><li>Coffee</li><li>Tea</li></ul>

<button οnclick="myFunction()">点我</button>

<script>

function myFunction(){

var node=document.createElement("LI");

var textnode=document.createTextNode("Water");

node.appendChild(textnode);

document.getElementById("myList").appendChild(node);

}

</script>

点击button后的结果：                                   

9、

<ul id="myList1"><li>Coffee</li><li>Tea</li></ul>

<ul id="myList2"><li>Water</li><li>Milk</li></ul>

<button οnclick="myFunction()">点我</button>

<script>

function myFunction(){

var node=document.getElementById("myList2").lastChild;

document.getElementById("myList1").appendChild(node);

}

</script>

点击button后的结果：                                   

10、

<p id="demo">单击“按钮”获取有关元素的子节点的信息</p>

<button οnclick="myFunction()">点我</button>

<script>

function myFunction(){

var txt="";

var c=document.body.childNodes;

for (i=0; i<c.length; i++){

txt=txt + c[i].nodeName + "<br>";

};

var x=document.getElementById("demo");  

x.innerHTML=txt;

}

</script>

点击button后的结果：                                   

11、

<button οnclick="myFunction()">点我</button>

<p id="demo"></p>

<script>

function myFunction() {

    var c = document.body.children;

    var txt = "";

    var i;

    for (i = 0; i < c.length; i++) {

        txt = txt + c[i].tagName + "<br>";

    }

    document.getElementById("demo").innerHTML = txt;

}

</script>

点击button后的结果：                                   

12、

<style>

.mystyle {

    width: 300px;

    height: 50px;

    background-color: red;

    color: white;

    font-size: 25px;

}

</style>

</head>

<body>

<p>点击按钮为 DIV 元素添加 "mystyle" 类。</p>

<button οnclick="myFunction()">点我</button>

</p>

<div id="myDIV">

我是一个 DIV 元素。

</div>

<script>

function myFunction() {

    document.getElementById("myDIV").classList.add("mystyle");

}

</script>

</body>

点击button后div及其内文字的变化：                                    

13、

<p id="demo">单击“按钮”看我的变化。</p>

<button οnclick="myFunction()">点我</button>

<script>

function myFunction(){

var x=document.getElementById("demo");

var y=x.firstChild.nodeName;

x.innerHTML=y;

}

</script>

点击button后的结果：                                   

14、

<div id="myDIV">

  <p>P 元素 - div 中的第一个子元素</p>

  <span>Span 元素 - div 中的最后一个子元素</span>

</div>

<button οnclick="myFunction()">点我</button>

<p id="demo"></p>

<script>

function myFunction() {

  var x = document.getElementById("myDIV").firstElementChild.tagName;

  document.getElementById("demo").innerHTML = x;

}

</script>

点击button后的结果：                                   

15、

<select id="mySelect" size="4">

  <option>Google</option>

  <option>Runoob</option>

  <option>Taobao</option>

  <option>Wiki</option>

  </select>

<br><br>

<button οnclick="myFunction()">点我</button>

<p id="demo"></p>

<script>

function myFunction() {

  var x = document.getElementById("mySelect").firstElementChild.text;

  document.getElementById("demo").innerHTML = x;

}

</script>

点击button后的结果：                                   

16、

<select id="mySelect" size="4">

  <option>Audi</option>

  <option>BMW</option>

  <option>Saab</option>

  <option>Volvo</option>

</select>

<br><br>

<button οnclick="myFunction()">点我</button>

<p id="demo"></p>

<script>

function myFunction() {

    var c = document.getElementById("mySelect").children;

    document.getElementById("demo").innerHTML = c[2].text;

}

</script>

点击button后的结果：                                   

17、

<button οnclick="myFunction()">点我</button>

<h2>我是 h2 元素</h2>

<div>我是 div 元素</div>

<span>我是 span 元素</span>

<script>

function myFunction() {

    var c = document.body.children;

    var i;

    for (i = 0; i < c.length; i++) {

        c[i].style.backgroundColor = "red";

    }

}

</script>

点击button后的结果：                                   

18、

<p id="demo">单击按钮，看我怎么变</p>

<button id="btn1" onclick="myFunction()">点我</button>

<script>

function myFunction(){

    var btn=document.getElementsByTagName("BUTTON")[0];

    var x=document.getElementById("demo");

    x.innerHTML=btn.attributes[0].value;

}

</script>

点击button后的结果：                                   

19、

<h1 style="color:red;">Hello World</h1>

<p id="demo">单击按钮看页面有何变化。</p>

<button οnclick="myFunction()">点我</button>

<script>

function myFunction(){

var h=document.getElementsByTagName("H1")[0];

h.getAttributeNode("style").value="color:green";

}

</script>

点击button后的结果：                                                                     

20、

<button οnclick="openWin()">打开窗口</button>

<script>

function openWin() {

    var myWindow = window.open("", "", "width=200, height=100");

    myWindow.document.write("<p>这是一个新窗口'</p>");

    setTimeout(function(){ myWindow.close() }, 3000);

}

</script>

点击button后的结果：                                                             

21、

<script>

function myFunction(){

var x=document.getElementById("fname");

x.value=x.value.toUpperCase();

}

</script>

</head>

<body>

输入你的名字: <input type="text" id="fname" οnblur="myFunction()">

</body>

当在输入框中输入”zhangsan”后在页面其他地方点击时，输入框中内容是：             

22、

<script>

function myFunction(x){

x.style.background="yellow";

}

</script>

</head>

<body>

输入你的名字: <input type="text" οnfοcus="myFunction(this)">

</body>

点击输入框后的结果：                                

23、

<script>

function displayResult(x){

var table=document.getElementById(x);

var row=table.insertRow(0);

var cell1=row.insertCell(0);

var cell2=row.insertCell(1);

cell1.innerHTML="New";

cell2.innerHTML="New";

}

</script>

</head>

<body>

<table id="myTable" border="1">

<tr>

<td>cell 1</td>

<td>cell 2</td>

</tr>

   <tr>

<td>cell 3</td>

<td>cell 4</td>

   </tr>

</table>

<br>

<button type="button" οnclick="displayResult(‘myTable’)">点我</button>

</body>

点击一次button后的结果：                                   

24、

<script>

function formReset(){

kk.value="kk";  console.log(kk.value);

}

</script>

<body>

<p>在下面的字段中输入一些文本，然后按重置按钮。</p>

<form >

第一个名字: <input id="kk"  type="text" name="fname" value="Donald"><br>

下一个名字: <input type="text" name="lname" value="Duck">

<br><br>

<input type="reset" value="重置" οnclick="formReset()">

</form>

</body>

点击重置按钮后第一个名字的输入框中的结果：         控制台输出结果：                

25、

<script>

$(document).ready(function(){

  $("#hide").click(function(){

    $("p").hide();

  });

  $("#show").click(function(){

    $("p").show();

  });

});

</script>

</head>

<body>

<p>请点击按钮</p>

<button id="hide">按钮1</button>

<button id="show">按钮2</button>

</body>

点击按钮1后的结果：                                   

26、

<script>

$(document).ready(function(){

  $("#flip").click(function(){

    $("#panel").slideToggle("slow");

  });

});

</script>

 <style type="text/css">

#panel,#flip

{

padding:5px;

text-align:center;

background-color:#f00;

border:solid 1px #000;

}

#panel

{

padding:50px;

display:none;

}

</style>

</head>

<body>

<div id="flip">点我。</div>

<div id="panel">Hello world!</div>

</body>

点击“点我”所在DIV区域后结果：                                     

胖虎～L
关注
Node.js核心技术教程（笔记）
爱学习的程序媛
09-20 725
读《Node.js核心技术教程》书籍做的笔记。
JavaScript练习题
zxf318的博客
08-10 1540
JavaScript练习题，选择，编程，问答
javascript经典试题
chenfeiyan___的博客
04-02 1751
今天分享12个javascript的经典试题，希望对大家有所帮助！ 1.根据用户输入的数据，判断水仙花数（三位数），（153=111+555+333）每位数字的立方和等于等于该数即水仙花，如果是水仙花数，则输出“是”，否则输出“否”； 2.会员卡四位数(开头不为0)求和，会员卡四位数求和大于20时将返利50元，否则不返利 根据用户输入的会员卡卡号(四位数)，判断是否返利 3.工资所得税工资超过...
javascript技术教程蔡敏_JavaScript基础与实践教程 (王萍萍,赵俊莉,孙强) pdf扫描版...
weixin_42099087的博客
12-30 497
JavaScript基础与实践教程采用案例讲解的方式系统介绍了jsp应用开发技术，包括jsp开发环境的安装与配置、jsp基本编程基础、jsp数据库编程、jsp多媒体编程、 servlet技术、jsp与javascript的结合、jsp中xml，的应用和表达式语言与标准标签库等几个方面的内容。此外，通过一个实际开发案例，使读者能够结合实际，快速、高效、灵活地设计出专业的企业级应用程序。JavaScr...
JS: for循环_练习题（16道常规题）
weixin_48475463的博客
01-13 3424
JS: for循环_练习题（16道常规题） 1．入职薪水10K，每年涨幅5%，50年后工资多少？ 2．打印100以内 7的倍数 3．打印100以内的奇数 4. 打印100以内所有偶数的和 5. 打印图形 6. 打印100–200之间所有能被3或者7整除的数 7. 计算10的阶乘 10! 8. 计算1+3+5+...+99的和 9. 99乘法表 10. 求100-999之间的水仙花数。 算法 : abc = a ³ + b³ + c ³ 11. 输出20-80之间能被3整除的整数，每5个一行 ********
JavaScript练习题第（四）部分
阿猫故乡的博客
12-28 580
10. 编写一个函数，接收一个字符串参数，判断该字符串是否为有效的手机号码（满足特定的格式要求）。4. 编写一个函数，接收一个字符串参数，统计该字符串中每个字母出现的次数，并以对象形式返回。1. 编写一个函数，接收一个字符串参数，判断该字符串是否为回文字符串（正读和反读都相同）。8. 编写一个函数，接收一个字符串参数，将字符串中的单词首字母大写，并返回结果字符串。6. 编写一个函数，接收一个数组作为参数，将数组中的元素去重，并返回新的数组。7. 编写一个函数，接收一个正整数参数n，返回n的阶乘。
JavaScript技术及其应用
qq_28921357的博客
03-26 1606
摘要：JavaScript是一种基于对象和事件的网络脚本语言。在HTML中使用JavaScript 可以实现web用户交互。本文就JavaScript的关键技术做了描述和介绍。并且给出了一个实际的基于JavaScript的web版本地测验的实现方案。 关键词：JavaScript；HTML；web网站；脚本语言 1 概述 1.1 HTML语言 1.1.1 HTML语言简述 HTML语言，...
信息技术专项习题汇总
渴望飞的鱼的博客
10-29 8871
信息技术专项习题汇总
jsp编程技术徐天凤课后答案_jsp编程技术教材课后习题
weixin_35677043的博客
12-23 522
JSP编程技术习题集1.6本章习题思考题(1)为什么要为JDK设置环境变量？(2)Tomcat和JDK是什么关系？(3)什么是Web服务根目录、子目录、相对目录？如何配置虚拟目录？(4)什么是B/S模式？(5)JSP、JavaBeans和JavaServlet之间的关系?(6)集成开发环境能为程序员做什么？(7)使用MyEclipse开发JSP程序，需要做那些配置？(8)MyEclipse和Ecl...
JavaScript 习题及面试题 3
热门推荐
qq_34227896的博客
04-01 1万+
365. [问答题] 原生 JavaScript 中兼容浏览器绑定元素事件 ---------------------------------------------------------------------------------------------------------------------------- 来自：原生 Javascript 编程练习题参考： function addEventSamp(obj,evt,fn){ if (obj.addEventListe..
Python网络爬虫技术_习题答案.rar
07-12
本资源“Python网络爬虫技术_习题答案.rar”看似是一个教学资料，包含了一些图像文件和章节内容，我们可以从这些信息中推测出相关的知识点。 首先，从标题我们可以知道这是一个关于Python网络爬虫技术的习题解答集...
leetcode第321题-javascript-tavascript:技术面试数据结构与算法练习题
07-06
第321题Javascript 面试问题 集.js 实现 Set 及其功能 地图.js 实现 Map 及其功能 堆栈.js 实现 Stack 及其功能 队列.js 实现Queue及其功能 链表.js 实现链表及其功能 程序.js 此文件包含有助于更好地理解语言语法的...
HTML5及CSS3web前端开发技术习题答案解析.pdf
01-07
### HTML5及CSS3 Web前端开发技术习题答案解析 #### 1. HTML5与HTML4的主要区别及其解决的问题 HTML5与HTML4相比，在Web前端开发领域解决了多个关键问题，主要包括： - **浏览器间的兼容性问题**：早期不同浏览器...
JavaScript核心技术PDF
03-20
- JavaScript技术被用于前端开发中，可以控制网页行为，实现动画效果，数据验证以及与后端服务器的数据交互。 - JavaScript核心技术包括基本语法、数据类型、控制结构、函数、对象和面向对象编程、事件处理、DOM...
Vue.js前端开发实战-自测卷和课后习题答案.rar
07-10
Vue.js 是一款流行的轻量级前端JavaScript框架，用于构建用户界面。它以其声明式的数据绑定、组件化开发和简易的学习曲线而备受开发者喜爱。在这个"Vue.js前端开发实战-自测卷和课后习题答案"的压缩包中，包含了与...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 786
Vue 2 中使用 Vue I18n 插件实现中英文切换
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 519
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1119
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
如何使用Redisson的布隆过滤器？
最新发布
付聪
10-02 218
【代码】如何使用Redisson的布隆过滤器？
"JavaWeb编程技术教材习题参考答案及解析
JavaWeb编程技术教材习题参考答案文档是一本介绍JavaWeb编程技术并提供习题参考答案的教材。本文主要总结了第4章的习题解析。 第4章主要介绍了Java Web编程的相关知识和技术。4.1节对特定题目进行了详细解析。以下...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值