JQuery对象、js对象区别与转换和选择器

JQuery对象、js对象区别与转换

JQuery对象在操作时，更加方便。
JQuery对象和js对象方法不通用的.
两者相互转换

- jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
- js -- > jq : $(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>

运行结果

选择器

概念：筛选具有相似特征的元素（标签）

基本操作学习：

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

HTML代码

<!DOCTYPE html>
<html>
    <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("123")
                });
            }
        
            //jquery入口函数（dom文档加载完成之后执行该函数中的代码）
             $(function(){
                //获取b1按钮
                $("#b1").click(function(){
                    alert("abc");
                })
            });
        
            /*
                window.onload 和 ${function}区别
                    window.onload只能定义一次 如果定义多次 后边的会将前边大大覆盖掉
                    $(function)可以定义多次的
            */
            function fun1(){
                alert("abc");
            }
            function fun2(){
                alert("bcd");
            }
            window.click = fun1;
            //window.onabort = fun2;
        
            $(function(){
                alert(123);
            });
            
            $(function(){
                alert(456);
            });
        
        $(function(){
            $("#div1").css("background-color","red");
        });
        
        </script>
    </head>
    <body>
        <div id="div1">div1....</div>
        <div id="div2">div2....</div>
        <input type="button" value="点我" id="b1">
        
        
        
    </body>
</html>