SeouliteLab

jQuery의 :lang() 선택자 활용하기 본문

프로그래밍

jQuery의 :lang() 선택자 활용하기

Seoulite Lab 2024. 4. 12. 08:10

jQuery의 :lang() 선택자는 특정 언어로 속성이 설정된 요소를 선택하는 데 사용됩니다. 이 선택자를 활용하여 웹 페이지에서 특정 언어로 설정된 요소를 선택하고 조작할 수 있습니다.

예제 1: 한국어로 설정된 요소 선택하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>한국어로 설정된 요소 선택하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(":lang(ko)").css("font-weight", "bold");
    });
  </script>
</head>
<body>
  <div lang="ko">안녕하세요, jQuery 사용법을 배우고 있습니다.</div>
  <div lang="en">Hello, I'm learning how to use jQuery.</div>
</body>
</html>

설명: 위 예제는 언어가 한국어로 설정된 요소를 선택하여 글꼴을 굵게 만듭니다.

예제 2: 영어로 설정된 요소의 배경색 변경하기

<!DOCTYPE html>
<html lang="en">
<head>
  <title>영어로 설정된 요소의 배경색 변경하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $(":lang(en)").css("background-color", "lightblue");
    });
  </script>
</head>
<body>
  <div lang="ko">안녕하세요, jQuery 사용법을 배우고 있습니다.</div>
  <div lang="en">Hello, I'm learning how to use jQuery.</div>
</body>
</html>

설명: 이 예제는 언어가 영어로 설정된 요소의 배경색을 연보라색으로 변경합니다.

예제 3: 특정 언어로 설정된 텍스트 출력하기

<!DOCTYPE html>
<html>
<head>
  <title>특정 언어로 설정된 텍스트 출력하기</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      var text = $(":lang(es)").text();
      $("#output").text("스페인어로 설정된 텍스트: " + text);
    });
  </script>
</head>
<body>
  <div lang="ko">안녕하세요, jQuery 사용법을 배우고 있습니다.</div>
  <div lang="es">Hola, estoy aprendiendo a usar jQuery.</div>
  <div id="output"></div>
</body>
</html>

설명: 이 예제는 언어가 스페인어로 설정된 요소의 텍스트를 가져와 출력합니다.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery의 :last-of-type 선택자 활용하기  (0) 2024.04.12
jQuery의 :last-child 선택자 활용하기  (0) 2024.04.12
jQuery의 :input 선택자 활용하기  (0) 2024.04.12
jQuery의 :image 선택자 활용하기  (0) 2024.04.12
jQuery의 ID 선택자 ("#id") 활용하기  (0) 2024.04.12
'프로그래밍' Related Articles more