/Element Selector trong JQuery
Các hàm built-in06/10/2023

Element Selector trong JQuery

Lựa chọn Element Selector (“element”) là một trong các loại Selectors cơ bản được cung cấp sẵn trong thư viện jQuery được thiết kế để có mục đích là chọn tất cả các phần tử trong trang web có thẻ HTML tương ứng với tên được chỉ định.

Ví dụ, nếu bạn muốn chọn tất cả các phần tử <div> trong trang web, thì “element” trong trường hợp này sẽ là “div”.

1. Cú pháp

Cú pháp:

$("element")

Hoặc

jQuery("element")

Tham số

  • element: Tên thẻ HTML mà bạn muốn chọn (ví dụ: “div”, “p”, “span”, …).

Kết quả trả về

  • Element Selector trả về tất cả các phần tử trong trang web có thẻ HTML tương ứng với tên được chỉ định.

Phiên bản hỗ trợ

  • Phiên bản đầu tiên của jQuery (1.0) đã giới thiệu Element Selector và nó đã được hỗ trợ từ phiên bản đó trở đi.
Element Selector trong JQuery

2. Một số ví dụ

2.1. Element Selector với trò chơi đoán màu

Dưới đây là cách sử dụng Element Selector (“element”), một trong các loại Selectors cơ bản được cung cấp sẵn trong thư viện jQuery  để tạo trò chơi đoán màu như sau:

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Color Guessing Game</title>
  <style>
    .square {
      width: 100px;
      height: 100px;
      margin: 10px;
      float: left;
    }
    #question {
      margin-top: 20px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      var colors = ['red', 'green', 'blue', 'yellow', 'orange', 'purple', 'pink'];
	  const colorMap = {
		  red: 'rgb(255, 0, 0)',
		  green: 'rgb(0, 255, 0)',
		  blue: 'rgb(0, 0, 255)',
		  yellow: 'rgb(255, 255, 0)',
		  orange: 'rgb(255, 165, 0)',
		  purple: 'rgb(128, 0, 128)',
		  pink: 'rgb(255, 192, 203)'
		};

		function colorToRGB(colorName) {
		  return colorMap[colorName.toLowerCase()] || null;
		}
      var targetColor;

      $('#initButton').click(function() {
        var randomIndex = Math.floor(Math.random() * colors.length);
        targetColor = colors[randomIndex];
        $('#question').text('Đố bạn tìm thấy màu: ' + targetColor);
      });

      $('.square').click(function() {
        
		var clickedColor = $(this).css('background-color');
		var targetColorRGB = colorToRGB(targetColor);
		
        if (clickedColor === targetColorRGB) {
          alert('Chúc mừng! Bạn đã tìm thấy màu đúng.');
        } else {
          alert('Bạn đã chọn sai màu. Hãy thử lại.');
        }
      });
	  
    });
  </script>
</head>
<body>
  <h2>Bắt đầu trò chơi bằng nhấn nút "Khởi tạo màu ngẫu nhiên"</h2>
  <button id="initButton">Khởi tạo màu ngẫu nhiên</button>
  <div id="question"></div>
  <div class="square" style="background-color: red;"></div>
  <div class="square" style="background-color: green;"></div>
  <div class="square" style="background-color: blue;"></div>
  <div class="square" style="background-color: yellow;"></div>
  <div class="square" style="background-color: orange;"></div>
  <div class="square" style="background-color: purple;"></div>
  <div class="square" style="background-color: pink;"></div>
</body>
</html>

Trong ví dụ này, có 7 ô vuông với các màu khác nhau. Khi bạn nhấp vào nút “Khởi tạo màu ngẫu nhiên”, một màu sẽ được chọn ngẫu nhiên và hiển thị. Bạn cần nhấp vào ô vuông mà bạn cho là có màu đó. Nếu đúng, bạn sẽ thấy thông báo chúc mừng, ngược lại sẽ thấy thông báo bạn đã chọn sai.

2.2. Element Selector với trò chơi xổ số Power 6/55

Dưới đây là cách sử dụng Element Selector (“element”), một trong các loại Selectors cơ bản được cung cấp sẵn trong thư viện jQuery  để tạo trò chơi xổ số Power 6/55 như sau:

HTML Code:

<!DOCTYPE html>
<html>
<head>
  <title>Power 6/55 Lotto Game</title>
  <style>
    .lotto-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 200px;
      margin-bottom: 20px;
    }
    .lotto-number {
      width: 50px;
      height: 50px;
      font-size: 24px;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 5px;
      border: 2px solid #3498db;
      border-radius: 10px;
      background-color: #f0f0f0;
    }
    .lotto-result {
      text-align: center;
      font-size: 20px;
      font-weight: bold;
    }
    #timeLeft {
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 20px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      let interval;
      const numbers = $('div[class^="lotto-number"]');
      let interval;

      $('button').click(function() {
        const playButton = $(this);

        // Disable button during animation
        playButton.prop('disabled', true);

        // Clear any existing interval and reset styles
        clearInterval(interval);
        resetStyles();

        // Start changing numbers every second
        interval = setInterval(changeNumbers, 1000);

        // Countdown timer from 30 to 0
        let timeLeft = 30;
        const timerInterval = setInterval(function() {
          timeLeft--;
          $('#timeLeft').text('Thời gian quay số: ' + timeLeft + ' giây');

          if (timeLeft === 0) {
            clearInterval(timerInterval);
            displayResult();
            // Clear numbers and enable button to play again
            setTimeout(function() {
              clearNumbers();
              playButton.prop('disabled', false);
            }, 2000); // Clear numbers after 2 seconds
          }
        }, 1000);
      });

      function resetStyles() {
        numbers.css({
          backgroundColor: '#f0f0f0',
          borderColor: '#3498db',
          color: '#000'
        });
      }

      function changeNumbers() {
        numbers.each(function() {
          const randomNum = Math.floor(Math.random() * 55) + 1;
          $(this).animate({
            backgroundColor: getRandomColor(),
            color: '#fff',
            borderColor: getRandomColor()
          }, 500, function() {
            $(this).text(randomNum);
          });
        });
      }

      function displayResult() {
        const resultNumbers = [];
        numbers.each(function() {
          resultNumbers.push($(this).text());
        });

        $('.lotto-result').text('Kết quả dãy số là: ' + resultNumbers.join(', '));
        clearInterval(interval); // Stop changing numbers on result
      }

      function clearNumbers() {
        numbers.each(function() {
          $(this).animate({
            backgroundColor: '#f0f0f0',
            color: '#000',
            borderColor: '#3498db'
          }, 500, function() {
            $(this).text('');
          });
        });
        $('.lotto-result').text(''); // Clear previous result
      }

      function getRandomColor() {
        const letters = '0123456789ABCDEF';
        let color = '#';
        for (let i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      }
    });
  </script>
</head><!DOCTYPE html>
<html>
<head>
  <title>Power 6/55 Lotto Game</title>
  <style>
    .lotto-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 200px;
      margin-bottom: 20px;
    }
    .lotto-number {
      width: 50px;
      height: 50px;
      font-size: 24px;
      font-weight: bold;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 5px;
      border: 2px solid #3498db;
      border-radius: 10px;
      background-color: #f0f0f0;
    }
    .lotto-result {
      text-align: center;
      font-size: 20px;
      font-weight: bold;
    }
    #timeLeft {
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      margin-bottom: 20px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      let interval;
      const numbers = $('div[class^="lotto-number"]');

      $('button').click(function() {
	  
		$('.lotto-result').text('');
        const playButton = $(this);

        // Disable button during animation
        playButton.prop('disabled', true);

        // Clear any existing interval and reset styles
        clearInterval(interval);
        resetStyles();

        // Start changing numbers every second
        interval = setInterval(changeNumbers, 1000);

        // Countdown timer from 30 to 0
        let timeLeft = 30;
        const timerInterval = setInterval(function() {
          timeLeft--;
          $('#timeLeft').text('Thời gian quay số: ' + timeLeft + ' giây');

          if (timeLeft === 0) {
            clearInterval(timerInterval);
            displayResult();
            // Clear numbers and enable button to play again
            setTimeout(function() {
              clearNumbers();
              playButton.prop('disabled', false);
            }, 2000); // Clear numbers after 2 seconds
          }
        }, 1000);
      });

      function resetStyles() {
        numbers.css({
          backgroundColor: '#f0f0f0',
          borderColor: '#3498db',
          color: '#000'
        });
      }

      function changeNumbers() {
        numbers.each(function() {
          const randomNum = Math.floor(Math.random() * 55) + 1;
          $(this).animate({
            backgroundColor: getRandomColor(),
            color: '#fff',
            borderColor: getRandomColor()
          }, 500, function() {
            $(this).text(randomNum);
          });
        });
      }

      function displayResult() {
        const resultNumbers = [];
        numbers.each(function() {
          resultNumbers.push($(this).text());
        });

        $('.lotto-result').text('Kết quả dãy số là: ' + resultNumbers.join(', '));
        clearInterval(interval); // Stop changing numbers on result
      }

      function clearNumbers() {
        numbers.each(function() {
          $(this).animate({
            backgroundColor: '#f0f0f0',
            color: '#000',
            borderColor: '#3498db'
          }, 500, function() {
            $(this).text('');
          });
        });
      }

      function getRandomColor() {
        const letters = '0123456789ABCDEF';
        let color = '#';
        for (let i = 0; i < 6; i++) {
          color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
      }
    });
  </script>
</head>
<body>
  <div class="lotto-container">
    <div class="lotto-number"></div>
    <div class="lotto-number"></div>
    <div class="lotto-number"></div>
    <div class="lotto-number"></div>
    <div class="lotto-number"></div>
    <div class="lotto-number"></div>
  </div>
  <button>Chơi xổ số Power 6/55</button>
  <div id="timeLeft"></div>
  <div class="lotto-result"></div>
</body>
</html>

Trong ví dụ này, chúng ta tạo một trò chơi xổ số với 6 số ngẫu nhiên trong khoảng từ 1 đến 55. Khi nhấn vào nút “Chơi xổ số Power 6/55”, các số sẽ được thay đổi ngẫu nhiên mỗi giây. Sau 30 giây, kết quả số cuối sẽ được hiển thị.

Related posts