day30 jQuery

1、jQuery的引入

a.本地引入

b.在线cdn引入

2、jQuery的延迟加载

//原生的延迟加载

    window.onload = function() {

    }

    //jQuery延迟加载

    //$是jQuery核心对象的简写

    //$===jQuery

    //简写形式

    $(function() {

        console.log("hello world");

    });

    //完全体

    jQuery(document).ready(function() {

        console.log("hello jQuery");

    });

3、jQuery和原生Dom的相互转换

jQueryDom和原生Dom有不同的API,所以经常需要进行转换

包装集:所有的jQueryDom都存在包装集中(包装集类似于数组),也就是无论单个还是多个元素，放在包装集中

原生Dom转jQueryDom

let oBox = document.getElementById("box");

console.log(oBox.innerHTML);

$(原生dom):返回jQueryDom

console.log($(oBox).html());

//jQueryDom转原生Dom

    let oBox = $("#box").get(0); //将下标为0的jQueryDom的原生dom返回

    console.log(oBox.innerHTML);

    let oBox1 = $("div")[1]; //$("div").get(1);

    console.log(oBox1.innerHTML);

4、选择器

1、基础选择器

<script>
    //1.id选择器
    //$("#box1").css("backgroundColor", "red");
    $("#box1").css({
        backgroundColor: "red",
        fontSize: 100
    });
    //2.类选择器
    $(".box").css({
        backgroundColor: "yellow"
    });
    //3.标签
    $("p").css({
        backgroundColor: "hotpink"
    });

    //4. *通用选择器
    $("*").css({
        backgroundColor: "blue"
    });

    //5. 群组选择器
    $("span,strong").css({
        backgroundColor: "green"
    });

 2.层级选择器

<script>
    1.后代选择器
    $("body div").css({
        backgroundColor: "yellow"
    });

    2.子代选择器
    $("body>div").css({
        backgroundColor: "red"
    });

    3.相邻选择器
    $("#box2+div").css({
        backgroundColor: "red"
    });

    4.兄弟选择器
    $("#box2~div").css({
        backgroundColor: "red"
    });
</script>

3、属性选择器

<script>
    属性选择器
    a.通过属性名获取元素
    $("div[class]").css({
        backgroundColor: "red"
    });
    b.通过属性值获取元素
    $("div[class=box2]").css({
        backgroundColor: "red"
    });
    c.通过组合属性获取元素
    $("div[class][id]").css({
        backgroundColor: "red"
    });
</script>