jQuery对象和JS对象区别与转换jQuery时间绑定&入口函数&样式控制

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

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

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

　　2.JQuery对象和js对象方法不通用的

　　3.两者相互转换

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

　　　　jq -->js:${js对象}

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuer对象和js对象的转换</title>
    <script src="js/jquery-3.6.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>

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

基本操作学习：

　　1. 事件绑定

　　　　//1.获取b1按钮

　　　　　　$("#b1").click(function(){

　　　　　　　　alert("abc");

　　　　　　});

　　2. 入口函数

　　　　$(function () {

　　　　});

　　window.onload 和 $(function) 区别

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

　　　　$(function)可以定义多次的。

　　3. 样式控制：css方法

　　　　// $("#div1").css("background-color","red");

　　　　$("#div1").css("backgroundColor","pink");

04-JQuery事件绑定.html页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件绑定</title>
  <script src="js/jquery-3.6.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");
          });
      });*/
    /* 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");
    });
    /*
         window.onload  和 $(function) 区别
             * window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
             * $(function)可以定义多次的。
      */

  </script>

</head>
<body>

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

</body>
</html>
posted @ 2023-02-14 15:25  肥宅快乐水~  阅读(28)  评论(0)    收藏  举报