加载中...

:lang(language)1.9+

概述    lang selector

返回值：jQuery

描述：选择指定语言的所有元素。

  • V : 1.9jQuery( ":lang(language)" )

    language: 语言代码。

:lang选择器,匹配有一个语言值等于所提供的语言代码，或以提供的语言代码开始，后面马上跟一个“ - ”的元素。例如，选择器$("div:lang(en)")将匹配<div lang="en"> and <div lang="en-us">（和他们的后代<div>），但不包括<div lang="fr">

对于HTML元素，语言值由lang属性决定，也可能由来自meta元素或HTTP头信息决定。

这种用法的进一步讨论可以在 W3C CSS规范中找到。

示例

选择所有<P> 的语言属性: 

  1. $("p:lang(it)")

实例

根据div的语言属性，给他们着色。 

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>lang demo</title>
  6.   <style>
  7.   body {
  8.     background-color: #ccc;
  9.   }
  10.   h3 {
  11.     margin: .25em 0;
  12.   }
  13.   div {
  14.     line-height: 1.5em
  15.   }
  16.   .usa {
  17.     background-color: #f00;
  18.     color: #fff;
  19.   }
  20.   .usa .usa {
  21.     background-color: #fff;
  22.     color: #000;
  23.   }
  24.   .usa .usa .usa {
  25.     background-color: #00f;
  26.     color: #fff;
  27.   }
  28.   .spain {
  29.     background-color: #f00;
  30.     color: #ff0;
  31.   }
  32.   .spain .spain {
  33.     background-color: #ff0;
  34.     color: #f00;
  35.     line-height: 3em;
  36.   }
  37.   .spain .spain .spain {
  38.     background-color: #f00;
  39.     color: #ff0;
  40.     line-height: 1.5em;
  41.   }
  42.   </style>
  43.   <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  44. </head>
  45. <body>
  46.  
  47. <h3>USA</h3>
  48. <div lang="en-us">red
  49.   <div>white
  50.     <div>and blue</div>
  51.   </div>
  52. </div>
  53. <h3>España</h3>
  54. <div lang="es-es">rojo
  55.   <div>amarillo
  56.     <div>y rojo</div>
  57.   </div>
  58. </div>
  59.  
  60. <script>
  61. $( "div:lang(en-us)" ).addClass( "usa" );
  62. $( "div:lang(es-es)" ).addClass( "spain" );
  63. </script>
  64.  
  65. </body>
  66. </html>

运行一下

还没有评论.