Web全栈开发案例教程（AI辅助版）-实验大纲实验五：浏览器端JavaScript实验.docxVIP

实验五：浏览器端JavaScript实验

实验目的：掌握在JavaScript、jQuery、Vue构建方式、微信小程序、React五种方式写点击元素改变元素内容和文字颜色的程序

1.JavaScript

思路：在onclick事件中用innerHTML属性改变元素内容，用style对象改变行内css属性。基本代码如下：

!DOCTYPEhtml

html

head

metacharset=utf-8

title第一个JavaScript程序/title

script

window.onload=function(){ //表示在网页载入完毕后执行函数

vardemo=document.getElementById(demo);

demo.onclick=msg; } //调用函数，函数名不能加括号

functionmsg() {

alert(Hello,theWEBworld!);

this.innerHTML=你点击了我;

this.style.border=3pxsolidred;}

/script

/head

body

pid=demoClickHere/p!--通过事件调用函数--

/body

/html

2.jQuery写法

思路：用$()选中元素，用.html()和.css()改变元素