web前端 (13)JS 05 +Jquery ( Javascript 框架 )

目录
JS创建对象的第三种方式 : 通过JSON描述对象 *****
JSON格式字符串 如何 转换为 JS中的 JSON对象 ***
选择器 *****
基本选择器 *****

JS创建对象的第三种方式 : 通过JSON描述对象 *****

轻量级数据交换格式 ,常用于网络编程中数据的传输, 数据的存储, 以及配置文件的编写 !

格式:
JSON数据中, 包含两大格式:

    1.  JSON对象
            JSON对象 被大括号包含所有内容 , 括号内由一个个的键值对组成 , 键与值之间使用冒号连接, 多个键值对之间使用英文逗号分隔!
            注意: 字符串类型的值, 需要使用引号引住 , 键值对的键使用引号引住 !(JS中无所谓, Java中格式要求比较强硬)
            案例:
            {
                "name":"小泽马老师",
                "age":18,
                "sex":"不祥"
            }


    2.  JSON数组
            语法: 其实就是JS中的数组语法 ! 使用中括号括住所有内容, 括号内由一个个的值组成,  值之间使用英文的逗号分隔 !

    上述两种格式, 可以互相嵌套 !
    例如: 一个JSON数组, 可以是JSON对象中一个键值对的值 !
    再例如:    一个JSON对象, 可以是JSON数组中的一个值!

            案例:
                ["小泽马老师","武藤马老师","加藤马老师","小苍马老师","波多马老师","龙泽马老师","天海马老师"]


描述孙宽:
    var person = {
        "name":"孙宽",
        "age":18,
        "sex":"受",
        "jiyou":[
            "刘帅",
            {
                "name":"张鹏飞",
                "sex":"攻",
                "jiyou":["黄瓜","苦瓜","茄子","辣椒"]
            }
        ]   
    };

    console.info(person.jiyou[0])
    console.info(person.jiyou[1].jiyou[3]);

练习:

描述一个学生:
student
姓名name , 年龄age , 爱好 hobby(数组) , 学习的学科:course(数组)

var student = {
“name”:“孙宽”,
“age”:18,
“hobby”:[“黄瓜”,“冬瓜”,“西瓜”,“吃”,“喝”,“嫖”,“赌”],
“course”:[“PHP”,“dbphp”,“吹箫”,“吹喇叭”]
};

console.info(student.hobby[2]);

JSON格式字符串 如何 转换为 JS中的 JSON对象 ***

格式1.
var 对象名 = JSON.parse(JSON格式的字符串);

格式2.
将JSON格式的字符串, 当做字符串代码, 传递发给eval 获取返回值 !
var 对象名 = eval(’(’+JSON格式字符串+’)’);

注意:     在JSON字符串编写时, 经常出现引号嵌套的情况 ,必须使用单引号嵌套双引号 !

案例:

var str = '{'
    +'"reason":"Success",'
    +'"result":{'
        +'"data":['
            +'{'
                +'"content":"一连打了几个喷嚏，不禁自语道：肯定是那个妹子想我了！  这时，公园里的一个老大爷，实在看不过去了，走过来道：“小伙子，一大早，也不穿件衣服，不怕感冒呀！”",'
                +'"hashId":"93f169d10bb03393ff73b0fc9c7282b5",'
                +'"unixtime":1518926100,'
                +'"updatetime":"2018-02-18 11:55:00"'
            +'},'
            +'{'
                +'"content":"一哥们打电话说刚做了个大手术，让我带一只叫花鸡和一斤卤牛肉去，当我买好东西赶到他家，问他：做的什么手术？回曰：指甲切除术，简称剪指甲。",'
                +'"hashId":"bfcae186b8fad189d4b51c1871b654eb",'
                +'"unixtime":1518926100,'
                +'"updatetime":"2018-02-18 11:55:00"'
            +'},'
            +'{'
                +'"content":"本人长得有点黑，和同事去逛街买衣服，同事说亮色能显白，谁知这时导购妹子来了句“人黑就应该穿深色的，只有衣服比你黑，才能衬托出你白。。。”妹子你还想好好卖衣服不。。。",'
                +'"hashId":"72c15c4a2e2bd6d708516808451dda26",'
                +'"unixtime":1518926100,'
                +'"updatetime":"2018-02-18 11:55:00"'
            +'},'
            +'{'
                +'"content":"有个妹子打电话来推销保险的，声音诱人！我就说买三份。妹子说都给谁买？我登记一下。我说：“我一份，你一份，将来我们儿子一份！”妹子果断挂了电话。。。",'
                +'"hashId":"4edb3c4ee2d0836ca67eccde63efb7a1",'
                +'"unixtime":1518926100,'
                +'"updatetime":"2018-02-18 11:55:00"'
            +'},'
            +'{'
                +'"content":"检验一个男人是不是喜欢你，可以盯着他看10秒，看他会不会吻过来，检验女人是不是喜欢你，可以盯着她看10秒，看她会不会笑出来，做这个实验完全没成功，5秒不到就发生了以下对话：女：“你看我干什么？”男：“看你杂啦？你不看我你怎么知道我看你？”女：“你看你个SB样？再看我喊人揍死你！”一—总结，70%的斗殴事件的原因就是“只是因为在人群中多看了你一眼。”",'
                +'"hashId":"ca77b4ccf3aff227ceedee8c5e5b5832",'
                +'"unixtime":1518926100,'
                +'"updatetime":"2018-02-18 11:55:00"'
            +'}'
        +']'
    +'},'
    +'"error_code":0'
+'}';

//var json = JSON.parse(str);
var json = eval('('+str+')');
var data = json.result.data;
for(i=0;i<data.length;i++){
    console.info(data[i].content);
}

Jquery ( Javascript 框架 )
使用步骤:

1. 下载jquery.js文件
2. 在html文件中, 引入这个jquery.js文件
3. 开始调用jquery的api 进行操作

onload语法

格式:
$(function(){
//当网页加载完毕后 执行
});

Jquery对象

Jquery对象 是 Jquery提供的DOM对象的集合, 封装了各种各样的功能 !

注意:
dom对象无法调用Jquery对象的函数与属性
Jquery对象也无法调用dom对象的函数与属性

将DOM对象 与 Jquery对象 互相转换

• DOM对象 转换为 Jquery对象

  格式:
  var $obj = $(dom对象/dom对象数组);

  案例:

  显示菜单

  <div style="display: none" id="menu">
      <div class="x1">东京民宿帮助</div>
      <div class="x2"></div>
      <div class="x3"><span>访问帮助中心</span></div>
  </div>
  

Jquery对象 转换为DOM对象
格式:
var dom对象 = $obj.get(下标);

选择器 *****

Jquery中 查找Jquery对象的方式, 使用的是CSS的选择器 !

选择器的使用格式:

var $obj = $(“选择器字符串”);

基本选择器 *****

• ID选择器
  var $obj = $("#id值");
• 类选择器
  var $obj = $(".class值");
• 元素名称选择器
  var $obj = $(“元素名称”);

jquery对象常用函数

淡入淡出效果:
元素淡入: $obj.fadeIn(毫秒数值);
元素淡出: $obj.fadeOut(毫秒数值);