11月15日笔记

最新推荐文章于 2024-07-09 19:55:14 发布

studyit10086

最新推荐文章于 2024-07-09 19:55:14 发布

阅读量258

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/studyit10086/article/details/78544139

版权

笔记专栏收录该内容

25 篇文章 0 订阅

订阅专栏

JSON对象
JSON 格式（Javascript Object Notation），是一种用于数据交换的文本格式。
简单的说，每个 JSON 对象就是一个值。要么是简单类型的值，要么是复合类型的值。
JSON 对值的类型和格式是有严格要求的。
1.复合类型的值只能是数组或对象，不能是函数、日期对象、正则表达式等。
2.简单类型的值包括：字符串、数值、布尔值和null（不能使用NaN/undefined）。
3.字符串必须使用双引号表示，不能使用单引号，或者没有双引号。
4.对象的键必须放在双引号里。
5.数组或对象的最后一个成员后面不能加逗号。
// 不合法的JSON对象
var obj = {name:”“,age:20}; // 对象键放在双引号中
{“name”:”zhangsan”,”age”:undefined} // 不能出现undefined
{“name”:”zhangsan”,”age”:function() {
alert(“”);
}} // 不能出现函数

// 合法的JSON对象
{“name”:”zhangsan”}
[“name”,”age”]
[{},{}]
1.JSON对象和JSON字符串的转换。
在数据传输中，JSON是以字符串形式传递的，而JS操作的是JSON对象。
JSON.stringify方法是用于将一个值转为字符串。该字符串符合 JSON 格式要求，并且可以通过JSON.parse方法还原。
JSON.parse方法将 JSON 字符串转化为对象。

var jsonStr = '{"name":"Lisa","password":"123"}';
        var jsonObj = {"name":"Lisa","password":"123"};
        // lg(jsonStr);
        // lg(jsonObj);
        //String转化为JSON对象
        var jsonObject = JSON.parse(jsonStr);
        // lg(jsonObject);
        //将对象转回字符串
        var jsonstr = JSON.stringify(jsonObject);
        lg(jsonStr);

2.JSON的美化输出
JSON.stringify的第三个参数，可以指定缩紧的空格数。
var format = JSON.stringify(jsonObject,undefined,2);
lg(format);

面向对象编程中的 this
1.this在对象中的运用
this 关键字是个非常重要的语法点，在 javascript 编程中如果对 this 不能理解，大部分的编程任务是无法完成的。
this 返回的是一个对象，简单的说就是返回属性或者方法当前所在的对象。
this.property，在这个代码中，this就是指property属性所在的对象

var person = {
   name : "Tom",
   description: function() {
      return "name:" + this.name;
   }
};
console.log(person.description()); // name:Tom

上面代码中，this.name表示 descriptioin 方法所在的对象的name属性。调用person.description（）方法时，descriptioin 方法所有在当前对象是 person，所有就是调用person.name。

var f = function() {
   console.log("name:" + this.name);
}

var p1 = {
    name : "Tom",
   desc : f
};
var p2 = {
    name : "Jack",
    desc : f
};
p1.desc(); // name:Tom
p2.desc(); // name:Jack

在上面的代码中，f函数中使用了this关键字，随着f所在的对象不同，this的指向也不同。

2.this在网页编程中的运用

<input type="button" value="删除" onclick="delLine(this)" />

function delLine(obj){
            var trNode = obj.parentNode.parentNode;
            trNode.parentNode.removeChild(trNode);
        }

3.this在函数中的运用
列子1

this 的指向在函数定义的时候是确定不了的，只有函数执行的时候才能去确定this到底指向谁，实际上this最终指向的是调用它的对象。

function a(){
            var user = 'javascript';
            lg(this.user);//undifined
            lg(this);//Window

        }
        a();
        //window.a();

alert 实际上也是window的对象。
列子2

var o = {
            user:'javascript',
            fn:function(){
                lg(this.user);
                lg(this);
            }
        }
        o.fn();
        window.o.fn();

wondow是JS中的全局对象，我们创建变量实际上是给window对象添加属性。
列子3

var o = {
            a:10,
            b:{
                a:12,
                fn:function(){
                    lg(this.a);
                    lg(this);
                }
            }
        }
        // window.o.b.fn();
        var j = o.b.fn;
        j();

最终是window调用的fn方法。

Web Storage
Storage接口用于在浏览器客户端中存储用户自定义的信息。

有几种存储形式：

LocalStorage：永久的存储在浏览器中，但是要注意，在不同的浏览器中间数据是不能共享的。
SessionStorage：当前页面会话基本的存储，当浏览器关闭或页面关闭时，数据就会丢失。
GlobalStorage:HTML5中被localStorage代替。
为了能访问到同一个localStorage对象，页面必须来自同一个域名，使用同一种协议，在同一个端口上。
我们只介绍localStorage的相关用法。
1.LocalStorage接口的方法
localStorage.setItem(key,value)：用于将key-value键值对的方式插入localStorage中。
localStorage.getItem(key)：读取key的localStorage字符串值。
localStorage.removeItem(key)：删除localStorage中key。
localStorage.clear()：清空localStorage所有key。
需要注意的是：在localStorage中只能存储字符串类型的数据。
key():在指定的数字位置获取该位置的名字。
//使用方法来存储数据
localStorage.setItem(‘name’,’Bizzbee’);
//用属性设值
localStorage.username = “bizzbee”;
console.log(localStorage);
console.log(localStorage.getItem(‘username’));
console.log(localStorage.name);

Check.html选择：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>请选择您的爱好：</h1>
<input  type="checkbox" onchange="" checked="checked" />全选/全不选<br />
<input  type="checkbox" name="hobby" />足球
<input  type="checkbox" name="hobby" />篮球
<input  type="checkbox" name="hobby" />游泳
<input  type="checkbox" name="hobby" />唱歌 <br />
<input type="button" value="全 选" onclick="allCheck()"/>
<input type="button" value="全不选" onclick="allUncheck()"/>
<input type="button" value="反选" onclick="reverseCheck()"/>


<script type="text/javascript">
    function allCheck(){
        var checkboxes=document.getElementsByName('hobby')
        for(i=0;i<checkboxes.length;i++){
            checkboxes[i].checked=true;
        }
        }
    function allUncheck(){
        var checkboxes=document.getElementsByName('hobby')
        for(i=0;i<checkboxes.length;i++){
            checkboxes[i].checked=false;
        }
        }
    function reverseCheck(){
        var checkboxes=document.getElementsByName('hobby')
        for(i=0;i<checkboxes.length;i++){
            checkboxes[i].checked=!checkboxes[i].checked;
        }
        }
</script>   
</body>

</html>

Coding Coffee产品页的like功能：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CODING COFFEE</title>
        <meta name="Generator" content="EditPlus">
        <meta name="Author" content=''>
        <style type="text/css">
            .wrapper{
                width:1080px;
                /*border:2px solid red;*/
                margin:0 auto;
                padding:20px

            }
            .arr{
                float:left
            }
            .brr{width:50%;
            float:right
            }
            #ppp{vertical-align:middle
            }
            body{
                background-color:red;
                background-image:url('./coffee/img/co.jpg' );
                background-repeat:no-repeat;
                background-attachment:fixed;
                background-position:left center;
                background-size:cover;
                /*background:rgba(255,0,0,0.5) url('./coffee/img/co.jpg') no-repeat fixed left top ;
                background-size:cover*/
            }
            hr{ width:60%;

                border:2px dashed grey;
                isibility:hidden;
            }
            p{  line-height: 20px;
                color:black;
                text-align:left;
            }
            span {
                border:2px solid red;
                //padding-bottom:100px;
                //margin-bottom:100px;
                display:inline-block;
                display:none;
                isibility:hidden;
            }


        </style>
    </head>
    <body>

        <div>
            <h1>CODING COFFEE MENU</h1>
            <hr>
            <div id="kk">
                <div class="wrapper" onclick="like(this)">
                    <div class="arr">
                        <img id="ppp"src="./coffee/img/c2.jpg" height="300">
                    </div>
                    <div class="brr">   
                        <h2 id="蓝山咖啡">蓝山咖啡</h2>
                        <p>源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。</p>
                    </div>
                    <div style="clear:both;"></div>
                </div>
                <hr>

                <div class="wrapper" onclick="like(this)">
                    <div class="arr">
                        <img id="ppp"src="./coffee/img/c2.jpg" height="300">
                    </div>
                    <div class="brr">   
                        <h2 id="拿铁咖啡">拿铁咖啡</h2>
                        <p>源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。</p>
                    </div>
                    <div style="clear:both;"></div>
                </div>
                <hr>

                <div class="wrapper" onclick="like(this)">
                    <div class="arr">
                        <img id="ppp"src="./coffee/img/c2.jpg" height="300">
                    </div>
                    <div class="brr">   
                        <h2 id="卡布奇诺">卡布奇诺</h2>
                        <p>源自三地的咖啡豆，为周年纪念综合咖啡豆带来了特别的馥郁醇厚。如今推出三种不同包装，让你用自己喜爱的方式体验这别具风味的一杯。</p>
                    </div>
                    <div style="clear:both;"></div>
                </div>
                <hr>
            </div>
        </div>

        <script type="text/javascript">
        function allLoad(){
            var item=document.getElementsByClassName('wrapper')
            for(i=0;i<item.length;i++){
                item[i].style.setProperty("background-image","none")//初始化


            }
            for(i=0;i<localStorage.length;i++){
                var ID=localStorage.key(i)
                document.getElementById(ID).parentNode.parentNode.style.setProperty("background-image","url('./c7.jpg')")

            }


        }

        function like(obj){
            var ID=obj.childNodes[3].childNodes[1].id
            var name=document.getElementById(ID).innerHTML
            for(i=0;i<localStorage.length;i++){
                if(ID==localStorage.key(i)){
                    localStorage.removeItem(ID)
                    allLoad()
                    return
                }

            }

            localStorage.setItem(ID,name)
            allLoad()
        }       
console.log(localStorage)
        </script>
    </body>
</html>

studyit10086

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11月15日笔记

JSON对象 JSON 格式（Javascript Object Notation），是一种用于数据交换的文本格式。简单的说，每个 JSON 对象就是一个值。要么是简单类型的值，要么是复合类型的值。 JSON 对值的类型和格式是有严格要求的。 1.复合类型的值只能是数组或对象，不能是函数、日期对象、正则表达式等。 2.简单类型的值包括：字符串、数值、布尔值和null（不能使用NaN/un
复制链接

扫一扫