jQuery教程詳解

一、jQuery簡介

jQuery是一款JavaScript庫，簡化了HTML文件的遍歷和操作、JavaScript代碼的書寫、事件處理、動畫效果和AJAX等操作。它的語法設計使得HTML文檔的操作變得更加簡單、易讀和易於維護。

除了簡化常見的JavaScript任務外，jQuery還提供了許多插件，例如日期選擇器、滑塊、圖片庫和自動完成等。jQuery兼容各種瀏覽器。

二、jQuery基礎

1、在HTML文件中引入jQuery庫

  
  <head>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  </head>

2、jQuery選擇器

通過選擇器可以選擇HTML文檔中的元素，並對其進行操作。

  
    //選擇所有p元素並設置文本顏色為紅色
    $('p').css('color', 'red');

3、jQuery事件

通過綁定事件，當用戶執行某些操作時，可以觸發JavaScript代碼。

  
    //點擊按鈕觸發函數
    $('button').click(function() {
      alert('Hello World!');
    });

三、jQuery HTML操作

1、向元素添加內容

通過jQuery的HTML方法可以向元素添加內容，也可以通過append和prepend方法添加內容到元素末尾或頂部。

  
    //添加文本到p元素
    $('p').html('Hello World!');
    
    //添加HTML到p元素末尾
    $('p').append('<span>world</span>');
    
    //添加HTML到p元素頂部
    $('p').prepend('<span>hello</span>');

2、向元素添加屬性

通過attr方法可以向元素添加屬性，並通過removeAttr方法移除屬性。

  
    //添加target屬性到鏈接
    $('a').attr('target', '_blank');
    
    //移除target屬性
    $('a').removeAttr('target');

3、CSS操作

通過CSS方法可以改變元素的樣式，包括背景顏色、字體顏色和邊框等。

  
    //改變所有p元素的背景顏色為紅色
    $('p').css('background-color', 'red');

四、jQuery效果

1、隱藏和顯示元素

通過hide和show方法可以隱藏和顯示元素，也可以通過toggle方法來切換元素的可見狀態。

  
    //隱藏p元素
    $('p').hide();
    
    //顯示p元素
    $('p').show();
    
    //切換p元素的可見性
    $('p').toggle();

2、動畫效果

通過animate方法可以實現元素的動畫效果，例如改變元素的位置、大小、透明度和顏色等。

  
    //改變元素的位置和透明度
    $('p').animate({
      left: '100px',
      opacity: '0.5'
    }, 'slow');

五、jQuery AJAX

通過jQuery可以實現AJAX的功能，例如從伺服器載入數據、向伺服器發送數據和更新頁面內容等。

1、向伺服器發送數據

  
    //向伺服器發送post請求，並傳遞數據
    $.post('demo_post.php', {
      name: 'John',
      age: '30'
    }, function(data) {
      alert(data);
    });

2、從伺服器載入數據

  
    //從伺服器載入內容到元素中
    $('#div1').load('demo_test.txt');

六、jQuery插件

jQuery插件可以用於擴展jQuery庫的功能，例如日期選擇器、圖像庫和自動完成等。使用jQuery插件可以極大地簡化開發工作。

1、日期選擇器

通過使用jQuery UI庫和Datepicker插件，可以實現日期選擇功能。

  
    <head>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script>
        $( function() {
          $( "#datepicker" ).datepicker();
        } );
      </script>
    </head>
  
    <body>
      <label for="datepicker">選擇日期:</label>
      <input type="text" id="datepicker">
    </body>

2、滑塊控制項

通過使用jQuery UI庫和Slider插件，可以實現滑塊控制項。

  
    <head>
      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
      <script>
        $( function() {
          $( "#slider" ).slider();
        } );
      </script>
    </head>
  
    <body>
      <div id="slider"></div>
    </body>

七、總結

本篇文章對jQuery的基礎知識進行了詳細介紹，包括jQuery的簡介、基礎、HTML操作、效果、AJAX和插件等。使用jQuery可以大大簡化JavaScript代碼的編寫，提高開發效率。通過jQuery插件可以輕鬆實現日期選擇器、滑塊控制項等常見功能。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/155262.html