jQuery---jQuery初體驗

時間 2020-01-16

標籤 jquery 體驗欄目 JQuery 简体版

原文原文鏈接

jQuery初體驗

1. 引入jquery文件html

2. 入口函數標準jquery

jQuery優勢總結 (對應的就是js的缺點)：

查找元素的方法多種多樣，很是靈活
擁有隱式迭代特性，所以不須要手寫for循環
徹底沒有兼容性問題
實現動畫很是簡單，並且功能更增強大
代碼簡單粗暴

什麼是jQuery?

jQuery的官網 http://jquery.com/ jQuery就是一個js庫，使用jQuery的話，會比使用JavaScript更簡單。函數

js庫：把一些經常使用到的方法寫到一個單獨的js文件，使用的時候直接去引用這js文件就能夠了。（animate.js、common.js）學習

咱們知道了，jQuery其實就是一個js文件，裏面封裝了一大堆的方法方便咱們的開發，其實就是一個增強版的common.js，所以咱們學習jQuery，其實就是學習jQuery這個js文件中封裝的一大堆方法。動畫

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      height: 200px;
      margin-bottom: 10px;
      background-color: #a43035;
      display: none;
    }
  </style>

  <!-- 1.引入jquery文件 -->
  <script src="jquery-1.12.4.js"></script>
  <script>
    //2. 入口函數的標準
    $(document).ready(function () {
      //獲取對象，註冊事件，把on去掉，是一個方法
      $("#btn1").click(function () {
        //隱式迭代：偷偷的遍歷，jQuery會自動的遍歷，不須要咱們遍歷。
        $("div").show(1000);
      });
      $("#btn2").click(function () {
        $("div").text("我是內容");
      });
    });
  </script>

</head>

<body>

  <input type="button" value="btn1" id="btn1">
  <input type="button" value="設置內容" id="btn2">

  <div></div>
  <div></div>
  <div></div>


</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。