[Selector] JQ - :lang() 선택자 - 지정 언어로 시작하는 요소 선택. (= 랭 선택자)

1. :lang() 예제 - 한국어, 영어 다르게 배경색 지정.
2. :lang() 정의
3. :lang() 구문
4. :lang() 예제 - 영어 코드로 en-us 대신 en 사용 경우.

:lang() 예제 - 한국어, 영어 다르게 배경색 지정.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("p:lang(ko)").css("background-color", "yellow");

  $("p:lang(en-us)").css("background-color", "pink");

});

</script>

<p lang="ko">홈짱닷컴</p>

<p lang="en-us">Homzzang.com</p>

<p>홈페이지 제작관리 강의</p>

 

결과보기

:lang() 정의

 

지정 언어로 시작하는 요소 선택.

 

---

 

1.

언어 코드 확인하기

PS. 주의.

영어 경우, en 대신 en-us처럼 하이픈(-)까지 포함된 형태로 기재할 것.

만약, en만 적으면 다른 요소에도 영향 미침. (※ 맨 아래 예제 참고.)

 

2.

보통, 다른 선택자와 함께 사용해, 선택 범위를 줄일 때 사용. (위 예제)

 

:lang() 구문

 

$(":lang(language)")

 

---

[매개변수]

 

language

필수. 언어 지정 코드.

 

:lang() 예제 - 영어 코드로 en-us 대신 en 사용 경우.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("p:lang(ko)").css("background-color", "yellow");

  $("p:lang(en)").css("background-color", "pink");

});

</script>

<p lang="ko">홈짱닷컴</p>

<p lang="en-us">Homzzang.com</p>

<p>홈페이지 제작관리 강의</p>

 

결과보기