2020-10-20

最新推荐文章于 2021-12-09 16:46:55 发布

原创最新推荐文章于 2021-12-09 16:46:55 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

javascript 专栏收录该内容

13 篇文章

订阅专栏

p41:

1.运算符：运算符也称为操作符，是用于实现赋值，比较和执行运算等功能的比较的符号

js中常用于运算符：算数运算符，递增递减运算符，比较运算符，逻辑运算符，赋值运算符

算数运算符：加减乘除以及取余

浮点数运算的时候会有问题：

console.log(0.1 + 0.2);//0.00000000000004
//数值太小转换为二进制再运算会产生错误

2.表达式：是由数字，运算符，变量等以能求得数值的有意义排列方法所得的组合

（是由数字，运算符，变量等组成的式子）

表达式最终都应该有一个结果，都会有一个返回值

3.递增和递减运算符：想要一个变量自己加一，

var num = 1;
num = num + 1;
console.log(num);  //2   实现变量自己加一的效果

前置递增运算符：

var num = 1;
++num;  //递增运算符  可以放在变量前面或者变量后面
console.log(num);//2

后置递增运算符：

var num = 20;
num++;
console.log(num);//后置递增，单独使用时与前置递增是一样的

后置递增：先返回原值，后自加1；先表达式返回原值，后面变量再自加一

前置递增：先自加，再返回值

4.例题：

var a = 10;
++a;//++a=11,   a=11;
var b = ++a + 2;   ++a   12   
console.log(b);//14

var c = 10;
c++;  //11
var d = c++ + 2;  11   
console.log(d);//13

var e = 10;
var f = e++ + ++e;   1, e++   10   e=11,++e=12   10+12
console.log(f);//22

大多数使用后置递增，并且代码单独占一行，要么时num++，或者num--；

5.比较运算符：是两个数据进行比较时所使用的运算符，比较运算后，会返回一个布尔值，比如true或者false

console.log(3 >= 5);//返回false

我们程序里面的等于符号是 == ，默认转换数据类型，会把字符串型的数据转换为数字型

===是全等于，代表不论什么都要相等，数据类型也要相等

=赋值，==判断（此处有隐式转换），===全等

+=完成加法和赋值：

var year = 2010;
        var message = 'this year is';
        message += year;
        alert(message);

6.逻辑运算符

概念：逻辑运算符是用来进行

布尔值运算的运算符，其返回值也是布尔值，后面开发经常用于多个条件的判断

&&逻辑与 ||逻辑或！逻辑非

function square(num) {
            var total = num * num;  //声明他是局部变量  只在函数中使用
            return total;

        }
        var total = 50;
        var number = square(20);//numbeu此时得到的就是函数中的tatal
        
        alert(total);

 <script>
        var shopping = document.getElementsByTagName("p");//getElementsByTagName元素名
        for (var i = 0; i < shopping.length; i++) {
            
            var title_text = shopping[i].getAttribute("title");//getAttribute（） 括号里面是 打算查询的属性的名字
            if (title_text) {
                shopping[i].setAttribute("title", "brand new title text");//setAttribute对属性节点的值做出修改
                alert(shopping[i].getAttribute("title"))
            };   
        }
    </script>

今日学习DOM：

DOM的新属性：

childNodes

nodeType

nodeValue

firstChild

lastChild

案例：建立javascript图片库：

代码 :html 文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=>, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="scripts/showPic.js"></script>
</head>

<body>
    <h1>This is some photos</h1>
    <ul>
        <li><a href="1.jpg" onclick="showPic(this); return false;" title="a friends">friends</a></li>
        <li><a href="2.jpg" onclick="showPic(this); return false;" title="a cup">cups</a></li>
        <li><a href="3.jpg" onclick="showPic(this); return false;" title="a milk">milk</a></li>
        <li><a href="4.jpg" onclick="showPic(this); return false;" title="a people">people</a></li>
        <li><a href="5.jpg" onclick="showPic(this); return false;" title="a cow">cow</a></li>
    </ul>
    <img id="placeholder" src="fc.jpg" alt="my image gallery">;
    <p id="description">choose an image.</p>
</body>

</html>

js文件:

function showPic(whichpic) {
    var source = whichpic.getAttribute("href");
    var placeholder = document.getElementById("placeholder");
    placeholder.setAttribute("src", source);
    var text = whichpic.getAttribute("title");
    var description = document.getElementById("description");
    description.firstChild.nodeValue = text;
}

function countBodyChildren() {
    var body_element = document.getElementsByTagName("body")[0];
    alert(body_element.nodeType);

}
window.onload = countBodyChildren;

学习了新属性。