其他分享
首页 > 其他分享> > JQuery对象和JS对象区别与转换和JQuery事件绑定&入口函数&样式控制

JQuery对象和JS对象区别与转换和JQuery事件绑定&入口函数&样式控制

作者：互联网

JQuery对象和JS对象区别与转换

JQuery对象在操作时，更加方便。

JQuery对象和js对象方法是不通用的

两者相互转换

　　JQuery - - >js : JQuery对象[索引] 或者 JQuery对象.get(索引)

　　js - - > JQuery ：$(js对象)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery对象和JS对象区别与转换</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="div1">div1...</div>
    <div id="div2">div2...</div>
<script>
    //通过js方式来获取名称叫jiv的所有html元素对象
    var divs = document.getElementsByTagName("div");
    alert(divs.length);//可以将其当做数组来使用
    //对divs中所有的div 让其标签体内容变为"aaa"
    for (var i = 0; i <divs.length; i++) {
        // divs[i].innerHTML = "aaa";
        //转换
        $(divs[i]).html("ccc");
    }

    //通过JQuery方式来获取名称叫div的所有html元素对象
    var $divs = $("div");
    alert($divs.length);//也可以当做数组使用
    //对divs中所有的div 让其标签体内容变为"bbb" 使用JQuery方式
    //$divs.html("bbb");

    //转换
    $divs[0].innerHTML = "ddd";
    $divs.get(1).innerHTML = "eee";


</script>
</body>
</html>

 

JQuery事件绑定&入口函数&样式控制

入口函数中：

window.onload 和 $(function) 区别

　　window.onload 只能定义一次，如果定义多次，后边的将会将前面的覆盖掉

　　$(function)可以定义多次的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="js/jquery-3.3.1.min.js"></script>

    <script>
        //给b1按钮添加单击事件
        //JQuery入口函数(dom文档加载完成之后执行该函数中的代码)
        $(function () {
            //获取b1按钮
            $("#b1").click(function () {
                alert("abc");
            });
        });
        /*样式控制*/
        $(function () {
            // $("#div1").css("background-color","red");
            $("#div1").css("backgroundColor","red");
        })

    </script>
</head>
<body>
    <div id="div1">div1...</div>
    <div id="div2">div2...</div>
    <input type="button" value="点我" id="b1">

</body>
</html>

 

 

搜索

复制

标签：JQuery,function,...,对象,js,JS,div1
来源： https://www.cnblogs.com/pengtianyang/p/16601139.html