JavaScript 练习题

1.声明一个add函数,要求函数有返回值,并打印结果

<script type="text/javascript">
function add(x,y){
var result = x * y;
return result;
}
var r = add(10,20);
console.log(r)
</script>

2.对“hello world”进行翻转处理 要求变为:"dlorw olleh"

<script type="text/javascript">
function reverseString(str){
array =str.split("")
array = array.reverse()
str=array.join("")
return str;

}

console.log(reverseString("hello world"))
</script>

3.如何定义一个对象?使用字面量方式 要求:该对象有名字、年龄、爱好多个

<script type="text/javascript">
var andy = {
name:'andyzhang',
age:34,
hobby:"lookMovie,ball,eat"
}
console.log(andy)
</script>

4.setTimeout()和setInterval()的区别?如何理解他们的作用

在js中有两种定时器:

  • 一次性定时器:setTimeout()

  • 周期性循环定时器: setInterval()

  • 对于这两个方法,需要注意的是如果要求在每隔一个固定的时间间隔后就精确地执行某动作,那么最好使用setInterval,而如果不想由于连续调用产生互相干扰的问题,尤其是每次函数的调用需要繁重的计算以及很长的处理时间,那么最好使用setTimeout

5.对于标签文本内容值的操作使用的是哪个属性?input输入框呢?

标签文本内容值的操作使用的是 " innerHTML 或 innerText"    input输入框是:value

6.获取DOM的三种方式?

var oDiv1 = document.getElementById("box1");      //方式一:通过id获取单个标签

var oDiv2 = document.getElementsByTagName("div")[0];     //方式二:通过 标签名 获得 标签数组,所以有s

var oDiv3 = document.getElementsByClassName("box")[0];  //方式三:通过 类名 获得 标签数组,所以有s

7.如何设置标签属性的值?比如类名如何设置?如何设置多个类型

  • 双闭合标签: innerText或者innerHTML
  • 单闭合标签:除了img标签,就剩input了,使用value进行赋值
  • 所谓标签属性,就是对标签中(字面上看到的)属性的操作。比如像每个标签中id,class,title、img

    标签的src属性和alt属性、a标签的href属性、input标签中的name、type属性等等

  • 设置类名例: 
  • //获取事件源 
  • <p id="oP">练习</p>
  • var opClass = document.getElementById('oP')
  • var opClass.onmouseover=function(){
  •      opClass.className = "className"
  • }

所谓标签属性,就是对标签中(字面上看到的)属性的操作。比如像每个标签中id,class,title,img标签的src属性和

alt属性、a标签的href属性、imput标签中的name、type属性等等 

8.列举你知道的js事件

onclick    鼠标单击

ondblclick  鼠标双击

onkeyup  按下并释放键盘上的一个键时触发

onchange  文本内容或下拉菜单中的选项发生改变

onfocus  获得焦点,表示文本框等获得鼠标光标

onblur    失去焦点,表示文本框等失去鼠标光标

onmouseover  鼠标悬停,即鼠标停留在图片等的上方

onmouseout    鼠标移出,即离开图片等所在的区域

onload        网页文档加载事件

onunload    关闭网页时

onsubmit   表单提交事件

onreset      重置表单时

9.如何设置样式属性?比如设置该div的背景颜色为红色

例 :   

<style>
.inp{
background-color:red;
}
</style>

<body>
<input type="text" value =" 测试" class="inp">
</body>

10.使用DOM操作,创建一个p标签,设置内容为alexsb,将p标签插入到div中。

然后点击某个删除按钮,移除当前创建的p标签(练习dom的创建,修改内容,追加,删除)

<body>
<button id = 'btn'> 按钮添加</button>
<button id="btn1">按钮删除</button>

</body>
<script type="text/javascript">
var oBtn = document.getElementById('btn')
var oBtn1 = document.getElementById('btn1')

//定义div,p标签
var oDiv = document.createElement('div')
var oP = document.createElement('p')
oDiv.appendChild(oP)

oDiv.id = "box";
oP.id='content';

oP.innerText = "alexsb"
oBtn.onclick = function(){
//动态添加div 标签到页面
this.parentNode.insertBefore(oDiv,oBtn)

}

oBtn1.onclick=function(){
oBtn1.parentNode.removeChild(oDiv)

}


</script>

11.如何打开一个新的网站,比如打开路飞学城官网

1、设置 a 标签,点击触发。

<a id="text" href="https://www.luffycity.com">路飞学城</a>

原文地址:https://www.cnblogs.com/anzhangjun/p/9649150.html