初探JavaScript魅力-笔记

最新推荐文章于 2024-05-14 19:02:10 发布

eluanshi12

最新推荐文章于 2024-05-14 19:02:10 发布

阅读量253

点赞数

分类专栏： Java前端文章标签： javascript

Java前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

初探JavaScript魅力-01

JavaScript是一门用于给网页添加功能、交互的脚本语言。

<html>
  <head>
    <meta charset="utf-8" />
    <title>无标题文档</title>
    <style>
      #div1{
        width:200px;
        height: 100px;
        background: #CCC;
        border: 1px solid #999;
        display: none; 
      }
    </style>
  </head>
  <body>
    <input type="checkbox" onmouseover="div1.style.display='block';" onmouseout="div1.style.display='none';" />
    <!--div1是div的id，代表了选择了该div。.表示所属关系。
    div1的style（样式）里的display属性赋值为block -->
    <div id="div1">
      为了您的信息安全。。。。
    </div>
  </body>
</html>

直接使用ID进行元素选择是不兼容的（火狐或者低版本的chrome），我们应该采用更加兼容的写法：document.getElementById()。
因此我们可以将上面的代码进行改写：

<input type="checkbox" onmouseover="getElementById('div1').style.display='block';" onmouseout="getElementById('div1').style.display='none';" />

通过getElementById获取了id为div1的元素来使用，这样在任何浏览器下都不会产生兼容性问题了。

初探JavaScript魅力-02

初探JavaScript魅力-02
例外的className
HTML里的属性名和JS里保持一致，HTML里面怎么写，VALUE里面就怎么写——唯一的例外就是className。因为JS里的class是保留字，在JS里有其他作用，如果我们在JS里直接使用HTML里的class属性，程序是不会执行的，所以JS用className代替了class。当我们想改变一个元素的class时，采用以下写法：

<html>
  <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
      #div1 {
        width:100px;
        height:100px; border:
        1px solid black;
      }
      .box {
        background:red;
      }
    </style>
    <script>
      function toRed()
      {
        var oDiv=document.getElementById('div1');
        oDiv.className='box'; //className,而不是class
      }
    </script>
  </head>

  <body>
    <input type="button" value="变红" onclick="toRed()" />
    <div id="div1">
    </div>
  </body>
</html>

初探JavaScript魅力-03

初探JavaScript魅力-03
函数传参

functionsetStyle(name,value)
{
  var oDiv=document.getElementById('div1');
  oDiv.style.name=value;
}

实际上，这个函数是无法正常运行的。原因出在这种写法下，浏览器并不会认为oDiv.style.name中的name和参数中的name是同一个东西，而会认为这是一个叫“name”的样式，当然css中并没有名为“name”的样式，因此无法执行。

第一种操作属性的方法就是我们已经学过的使用.字符连接，来操作属性。而第二种操作属性的方法，是通过[‘属性名’]的方法来进行操作。具体的使用方法如下：
function setText()
{
var oTxt=document.getElementById.(‘txt1’);
//第一种操作属性的方法
oTxt.value=’dsfasdfasdf’;
//第二种操作属性的方法
oTxt[‘value’]=’dsfasdfasdf’;
}
二者不存在任何区别。第一种比第二种更为简便，因此大多选用第一种写法。而第二种写法的好处是，[]内放置的是一个字符串（关于字符串的具体内容本课末会讲），而字符串可以通过变量来储存，也可以通过参数传递具体的值。

  <html>
  <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
      #div1{
        width:200px;
        height:200px;
        background:red;
      }
    </style>
    <script>
      function setStyle(name, value)
      {
        var oDiv=document.getElementById('div1');
        oDiv.style[name]=value;
      }
    </script>
  </head>
  <body>
    <input type="button" value="变宽" onclick="setStyle('width', '400px')" />
    <input type="button" value="变高" onclick="setStyle('height', '400px')" />
    <input type="button" value="变绿" onclick="setStyle('background', 'green')" />
    <div id="div1">
    </div>
  </body>
</html>

在JS里，任何使用.字符的地方，都可以用[]代替

[

第四课初探JavaScript魅力-04

](http://igeekbar.com/igeekbar/post/558.htm)

css里的样式优先级。在css里，样式的优先级代表了css优先执行的代码。样式优先级的顺序如下（从高到低）：

1 行间样式
2 ID
3 class
4 标签
5 通配符

提取行间事件与匿名函数

行为，样式，结构三者分别对应着JavaScript，css和HTML，而将行为，样式，结构三者分离，简单来说，就是避免添加行间样式和行间事件。

getElementById一次只能获取一个元素（因为id在HTML里不可重复），而getElementsByTagName一次可以获取一组元素。

eluanshi12

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初探JavaScript魅力-笔记

初探JavaScript魅力-01初探JavaScript魅力-01JavaScript是一门用于给网页添加功能、交互的脚本语言。<html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <style> #div1{ width:200px; height: 100p
复制链接

扫一扫