手记

JavaScript日常修炼笔记(第二天)

今天是第二天,继续朝着万元高新进发!!!!

认识DOM
个人觉得学好代码,对于每个英文单词都得认识,不能死记硬背,要真正理解他的意思,那么学代码就会相对轻松多了。
D(document,文档),O(object,对象),M(model,模型)

写完一个HTML就是由节点构成的,和建一栋大楼一样!

  1. 元素节点:<html>、<body>、<p>等都是元素节点,即标签。
  2. 文本节点:向用户展示的内容,如<li>...</li>中的JavaScript、DOM、CSS等文本。
  3. 属性节点:元素属性,如<a>标签的链接属性href="http://www.imooc.com"。

通过ID获取元素:getELementById("id名称");

<script type="text/javascript">
var LOL = document.getElementById("LOLhero");
document.write("获取ID后输出该文本的结果:" + LOL.innerHTML);
</script>
<p id="LOLhero">提莫队长</p>

改变 HTML 样式
第一天讲过,通过DOM改变样式。
语法:Object.style.property=new style;

  <h2 id="con">I love JavaScript</H2>
  <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
  <script type="text/javascript">
    var mychar= document.getElementById("con");
    mychar.style.color = "red";
    mychar.style.backgroundColor = "#ccc";
    mychar.style.width = "300px";
  </script>

显示和隐藏(display属性)

语法:Object.style.display = value
value值有两个属性,"none","block"。

<script type="text/javascript"> 
    function hidetext(){
        var hid = document.getElementById("con");
        hid.style.display = "none";
    }
    function showtext(){
        var sho = document.getElementById("con");
        sho.style.display = "block";
    }
</script> 
<form>
   <input type="button" onclick="hidetext()" value="隐藏内容" /> 
   <input type="button" onclick="showtext()" value="显示内容" /> 
</form>

控制类名(className 属性)
语法:object.className = classname
classname要加双引号,className不仅可以改变class属性,也可以添加class属性。

<style>
    body{ font-size:16px;}
    .one{
        border:1px solid #eee;
        width:230px;
        height:50px;
        background:#ccc;
        color:red;
    }
    .two{
        border:1px solid #ccc;
        width:230px;
        height:50px;
        background:#9CF;
        color:blue;
    }
    </style>

    <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="添加样式" onclick="add()"/>
    <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
    <input type="button" value="更改外观" onclick="modify()"/>

    <script type="text/javascript">
       function add(){
          var p1 = document.getElementById("p1");
          p1.className="one";
       }
       function modify(){
          var p2 = document.getElementById("p2");
          p2.className="two";
       }
    </script>

小小练习题

<style type="text/css">
body{font-size:12px;}
#txt{
    height:400px;
    width:600px;
    border:#333 solid 1px;
    padding:5px;}
p{
    line-height:18px;
    text-indent:2em;}
</style>
  <h2 id="con">JavaScript课程</H2>
  <div id="txt"> 
     <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
        <p>1. JavaScript入门篇,让不懂JS的你,快速了解JS。</p>
        <p>2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
        <p>3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
  </div>
  <form>
  <!--当点击相应按钮,执行相应操作,为按钮添加相应事件-->
    <input type="button" value="改变颜色" onclick="chgcolor()">  
    <input type="button" value="改变宽高" onclick="scale()">
    <input type="button" value="隐藏内容" onclick="chgnone()">
    <input type="button" value="显示内容" onclick="chgblock()">
    <input type="button" value="取消设置" onclick="rmv()">
  </form>
  <script type="text/javascript">
  var chg = document.getElementById("txt");
//定义"改变颜色"的函数
    function chgcolor(){
        chg.style.color = "#000000";
        chg.style.backgroundColor = "#eee";
    }

//定义"改变宽高"的函数
    function scale(){
        chg.style.width = "300px";
        chg.style.height = "300px";
    }

//定义"隐藏内容"的函数
    function chgnone(){
        chg.style.display = "none";
    }

//定义"显示内容"的函数
    function chgblock(){
       chg.style.display = "block"; 
    }

//定义"取消设置"的函数
    function rmv(){
        var com = confirm("queding");
        if(com==true){
            chg.removeAttribute("style");
        }
    }

  </script>

自加一,自减一 ( ++和- -)

mynum = 10;
mynum++; //mynum的值变为11
mynum--; //mynum的值又变回10

(逻辑与操作符&&)

b>a && b<c //“&&”是并且的意思, 读法"b大于a"并且" b小于c "

<script type="text/javascript">
 var numa,numb;
 numa=60;
 numb=70;
 if(numa>=60 && numb>=60)
  {
  document.write("JavaScript考核通过!"+"<br>");
  }
</script>

(逻辑或操作符||)

"||"逻辑或操作符,相当于生活中的“或者”,当两个条件中有任一个条件满足,“逻辑或”的运算结果就为“真”。

<script type="text/javascript">
var numa,numb,jq1;
numa=50;
numb=55;
jq1=numa>numb||numa==numb;
document.write("jq1的值是:"+jq1+"<br>")
</script>

(逻辑非操作符!)

"!"是逻辑非操作符,也就是"不是"的意思~

var a=3;
var b=5;
var c;
c=!(b>a);  // b>a值是true,! (b>a)值是false
c=!(b<a);  // b<a值是false, ! (b<a)值是true

(操作符优先级)

var numa=3;
var numb=6
jq= ((numa + 30) / (2 - numb)) * 3; //结果是-24.75
var numa=3;
var numb=6;
jq= numa + 30 >10 && numb * 3<2;  //结果为false
4人推荐
随时随地看视频
慕课网APP