网页加载的不同的方式、点击按钮显示一句话、jQuery中获取元素的方法

网页加载的不同的方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery-1.12.1.js"></script>
  <script>
      // 点击按钮,显示一句话
      // $("#btn").click(function(){
      //     console.log('小苏好帅哦');
      // });

      // 没有页面加载的事件

      // 注册事件----赋值的
      // DOM中页面加载事件----页面全部加载完毕才触发(标签,文字,图片,引入的文件)
      // window.onload = function(){
      //   console.log('小苏好帅');
      // };

      // window.onload = function(){
      //   console.log('哈哈,我又变帅了');
      // };

      // jQuery的代码

      // 页面加载事件

      // jQuery中第一种页面加载事件
      // $(window).load(function(){
      //   console.log('小苏好猥琐哦');
      // });
      // $(window).load(function(){
      //   console.log('哈哈,小杨好帅哦');
      // });

      // jQuery中第二种页面加载的事件----比上面的快----页面中的基本的元素加载后
      // 就触发了
      // $(document).ready(function(){
      //     console.log(1);
      // });
      // $(document).ready(function(){
      //     console.log(2);
      // });

      // jQuery中第三种页面加载的事件----页面中基本的元素加载后就触发了
      // jQuery(function(){
      //   console.log('页面加载了1');
      // });

      // jQuery(function(){
      //   console.log('页面加载了2');
      // });

      // $(document).ready(function(){
      //     console.log(1);
      // });
      // $(document).ready(function(){
      //     console.log(2);
      // });

      $(function(){
        console.log('页面加载了1');
      });
      $(function(){
        console.log('页面加载了2');
      });


      // function f1(){

      // }
      // f1();
      // f1();

  </script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
  
<script>
    // document.getElementById('btn').onclick = function(){
    //   console.log(1);
    // };
    // document.getElementById('btn').onclick = function(){
    //   console.log(2);
    // };

    // var num = 10;
    // var num = 100;
    // console.log(num);
</script>
</body>
</html>

点击按钮显示一句话

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery-1.12.1.js"></script>
  <script>
    // 页面加载的事件
    $(function(){
      // 根据id获取按钮,添加点击事件
      $("#btn").click(function(){
          console.log('哈哈,真的好帅');
      });
    });
  </script>
</head>
<body>
<input type="button" value="显示效果" id="btn">
  
</body>
</html>

jQuery中获取元素的方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery-1.12.1.js"></script>
  <script>
      // DOM作用:操作页面的元素
      /**
       * DOM中获取元素的方式:
       *
       *  根据id获取元素
       *  document.getElementById('id属性的值');
       *  根据标签名字获取元素
       *  document.getElementsByTagName('标签名字');
       *  根据name属性获取元素
       *  document.getElementsByName('name属性的值');
       *  根据类样式名字获取元素
       *  document.getElementsByClassName('类样式的名字');
       *  根据选择器获取元素
       *  document.querySelector('选择器');---->id选择器,类选择器,标签选择器...
       *  一个的
       *  document.querySelectorAll('选择器');多个的
       *  
       */
      

       /**
        * jQuery中获取元素的方式:
        *
        * $("选择器")----jQuery对象
        */

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

网页加载的不同的方式、点击按钮显示一句话、jQuery中获取元素的方法

猜你喜欢