JQuery对象和JS对象区别与转换|| 事件绑定入口函数样式控制_$("div1").css("backgroundcolor","pink");-CSDN博客

本文链接：https://blog.csdn.net/qq_39368007/article/details/104501478

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

1. JQuery对象在操作时，更加方便。
2. JQuery对象和js对象方法不通用的.
3. 两者相互转换
* jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
* js -- > jq : $(js对象)

03-JQuery对象和js对象的转换.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuer对象和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>
  //1. 通过js方式来获取名称叫div的所有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");
  }

    //2. 通过jq方式来获取名称叫div的所有html元素对象
    var $divs = $("div");

  alert($divs.length);//也可以当做数组使用

  //对divs中所有的div 让其标签体内容变为"bbb"  使用jq方式
    //$divs.html("bbb");
   // $divs.innerHTML = "bbb";

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


    /*
        1. JQuery对象在操作时，更加方便。
        2. JQuery对象和js对象方法不通用的.
        3. 两者相互转换
            * jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
            * js -- > jq : $(js对象)
     */

</script>

</body>
</html>

3. 样式控制：css方法
// $("#div1").css("background-color","red");
$("#div1").css("backgroundColor","pink");

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

    <script>
        // 给b1按钮添加单击事件
       /* window.onload = function(){
            //1.获取b1按钮
            $("#b1").click(function(){
                alert("abc");
            });

        }*/
        //jquery入口函数(dom文档加载完成之后执行该函数中的代码)
       /*$(function () {
            //1.获取b1按钮
           $("#b1").click(function(){
               alert("abc");
           });
       });*/
        /*
              window.onload  和 $(function) 区别
                  * window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
                  * $(function)可以定义多次的。
           */
       /* function fun1(){
            alert("abc");
        }

        function fun2(){
            alert("bcd");
        }
        window.onload = fun1;
        window.onload = fun2;*/
/*
       $(function(){
           alert(123);
       });

       $(function(){
           alert(234);
       });*/


      $(function(){
          // $("#div1").css("background-color","red");
          $("#div1").css("backgroundColor","pink");
      });


    </script>

</head>
<body>

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