JS基础学习记录

来源：互联网发布：虾吃虾涮相应数据编辑：程序博客网时间：2024/06/03 19:10

JS中如何获取元素：

1.通过Id名称来获取元素——静态方法：

document.getElementById("id名");

2.通过标签名来找到元素——动态方法：

document.getElementsByTagName("标签名");

3.如果整个页面只有它一个标签：

eg:

那我们找到body或者title可以用如下方式：

document.body;

document.title;

修改他们内容：

document.body.innerHTML = 'abc';

document.title = 123;

...........

注意：

TagName: 1.可以找到多个元素，但找到的是一组元素的集合，相当于数组

2.要找到一个元素，后面必须加[]

3.document.getElementByTagName() ;——>前面可以不用跟document,可以跟别的元素，例如:

下面图中的：var oUl = document.getElementById("list");

oUl.getElementByTagName("li");

Id: 1.只找一个元素

2.document.getElementById ——>只能写document

2.如果想通过TagName来找一个/单独的元素，需要在后面加上[0]，不然找到的也是一个元素的集合

事件：

1.鼠标事件：

onclick 点击

onmouseover 移入

onmouseout 移出

onmousedown

onmouseup

...........

onmousemove

2.键盘事件

3.系统事件：

onload 加载后执行：

window.onload = 事情

img.onload

body.onload

......

4.表单事件

5.自定义事件

如何添加事件：

元素.onmouseover

函数：命令-可以做一些事：

function abc(){ //不会主动执行

............

}

执行方法：

1.直接调用：abc();

2.事件调用：元素.事件名=函数名

eg: oDiv.onclick = abc;

.........

函数也可以没有名字：

function (){} --------->匿名函数

元素.事件 = function (){

}

调用方式：

元素.事件 = function (){};

测试：

alert(‘ok’); 带了一个确定按钮的警告框['ok'字符串]

小例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><style> ul{padding:0; margin:0;} #lis {list-style:none; position:relative;} #lis a{ text-decoration:none; color:black; display:block; width:60px; height:30px; border:1px solid #333; line-height:30px; text-align:center; background:#99F;} ul ul{width:120px; height:70px; border:1px solid #333; position:absolute; top:30px; left:-1px; background:#FC9; display:none;} ul ul li{text-align:center; list-style:none; }</style><body><ul>    <li id="lis">          <a href="#" id="link">微博</a>          <ul id="ul1">          <li>私信</li>            <li>评论</li>            <li>@我们</li>          </ul>        </li>    </ul>    <script>  document.getElementById("lis").onmouseover = show;  document.getElementById("lis").onmouseout = hide;  function show(){       document.getElementById("ul1").style.display = 'block';       document.getElementById("link").style.background = 'pink';  }  function hide(){       document.getElementById("ul1").style.display = 'none';       document.getElementById("link").style.background = 'yellow';  }</script></body></html>

补充注意：

JS中修改样式除了.style之外，还可以用cssText,里面的内容书写与css格式一致：

变量：------（如果觉得有些代码重复或者太长）

eg： var a = document.getElementById("lis"); --->用这个来代替

上述JS代码可以变为

 <script>var a = document.getElementById("lis");var b = document.getElementById("ul1");var c = document.getElementById("link");a.onmouseover = show;        a.onmouseout = hide;      function show(){      b.style.display = 'block';      c.style.background = 'pink';  }      function hide(){      b.style.display = 'none';      c.style.background = 'yellow';  }</script>

或者可以改变function的书写方式--->使用匿名函数

最终代码效果：

1.鼠标未放到“微博”去

2.鼠标放上去

3.鼠标移开

阅读全文

0 0