Jquery01

 

---

JSON格式字符串, 转换为JSON对象/数组

格式1.
    通过eval 将字符串执行, 得到返回值, 并添加变量名
    var 对象名 = eval('('+JSON格式字符串+')');

格式2.
    通过JSON.parse ,来将字符串转换为对象
    var 对象名 = JSON.parse(json格式字符串);

注意:
    JSON格式的字符串, 建议使用单引号嵌套双引号的形式 !

案例:

    var str = '{"id":"10001","name":"张三","sex":"男","hobby":["打游戏","学Java","敲代码"]}';
    //var jsonObject = eval('('+str+')');
    var jsonObject = JSON.parse(str);
    console.info(jsonObject.hobby[2]);

CSS的透明样式

opacity: 1;//不透明
opacity: 0;//透明

Jquery 框架

使用步骤:***

1.  下载Jquery.js文件
2.  在HTML文件中, 引入Jquery.js文件
3.  开始使用

Jquery中的onload函数 ***

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

Jquery对象 *

Jquery对象 就是一个DOM对象的集合 !
DOM对象无法使用Jquery对象的API
Jquery对象也无法使用DOM对象的API

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

-   将dom对象 转换为 Jquery的对象

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

    案例:

        $(function(){
            var div1 = document.getElementById("div1");
            div1.innerHTML = "Hello Jquery !";

            var $div1 = $(div1);
            $div1.css({
                "font-size":"20px",
                "color":"red",
                "border":"1px solid red"
            });

        });

-   将Jquery对象 转换为DOM对象

    格式:
        var dom = $obj.get(下标);

    案例:
            $(function(){
                var div1 = document.getElementById("div1");
                var $div1 = $(div1);
                $div1.css({
                    "font-size":"20px",
                    "color":"red",
                    "border":"1px solid red"
                });
                $div1.get(0).innerHTML = "哈哈哈哈哈哈";

            });

选择器 *

Jquery中 查找一个或一组元素的方式, 不再是通过document.getElementByXXX的方式, 

而是通过类似CSS技术中的 选择器的方式, 来得到元素的Jquery对象

注意: 通过选择器获取的是Jquery对象, 不是dom对象 !

基本选择器 *****

-   ID选择器
    格式: var $obj = $("#id值");

-   类选择器
    格式: var $obj = $(".class值");

-   标签名称选择器
    格式: var $obj = $("标签名称");

层级选择器 熟悉

-   子选择器 ***
    格式:
        var $obj = $("父选择器>子选择器");

-   后代选择器
    格式:
        var $obj = $("父选择器 后代选择器");

-   后一个兄弟选择器
    格式:
        var $obj = $("选择器+兄弟选择器");
        例如: $("#p1+#div1")
            就是在选择id为p1的元素的下一个元素, 且下一个元素id必须为div1

-   后所有兄弟选择器
    格式:
        var $obj = $("选择器~兄弟选择器");
        例如: $("#p1~div")
            就是在选择id为p1的元素的后面 所有兄弟div元素



案例:

    $(function(){
    $("div>p").css({"font-size":"20px"});
    $("body p").css({"font-size":"20px"});
    $("#p1+p").hide(5000);
    $("#p1~p").fadeOut(5000);
});

Jquery对象 样式函数

$obj.css({
    样式key:样式值,
    样式key:样式值
    ...
});