分类解析jQuery选择器

基本选择器:

  #id            根据Id匹配一个元素

  .class            根据给定的类名匹配一个元素

  element           根据元素名匹配一个元素

  *             匹配所有元素

  selecttor1,selector2     并集,返回两个选择器匹配到的元素

层次选择器:

  ancestor descendant   根据祖先匹配所有的后代元素

  parent>child        根据父元素匹配所有的子元素,直接后代

  prev+next         匹配下一个兄弟元素 相当于next()方法

  prev~siblings         匹配后面的兄弟元素 相当于nextAll()方法     siblings()方法为匹配所有的兄弟元素

简单过滤选择器:

  :first或first()        匹配第一个元素

  :last或last()         匹配最后一个元素

  :not(selector)        匹配非selector能匹配到的元素

  :even            匹配索引值为偶数的元素,索引号从0开始

  :odd            匹配索引值为奇数的元素,索引号从0开始

  :eq(index)         匹配指定索引号的元素,索引号从0开始

  :gt(index)          匹配索引号大于给定索引值的元素,索引号从0开始

  :lt(index)           匹配索引号小于给定索引值的元素,索引号从0开始

  :header          匹配所有的标题元素  h1 h2 h3 h4 h5 h6

  :animated          匹配所有正在执行动画的元素

内容过滤选择器:

  :contains(text)      匹配包含给定文本的元素

  :empty          匹配所有不包含子元素或者文本的空元素

  :has(selector)        匹配后代中含有selector能匹配上元素的元素

  :parent          匹配含有子元素或者文本的元素

可见性过滤选择器:

  :hidden          匹配不可见元素,或者type="hidden"的元素 含有css样式:display:"none";的元素,无论CSS是内联,导入,链接式

  :visible           获取所有的可见元素

属性过滤选择器:

  [attribute]         匹配含有给定属性的元素

  [attribute=value]       匹配含有属性=value的元素

  [attribute!=value]      匹配含有属性但!=value的元素

  [attribute^=value]     匹配属性值是以value开始的元素

  [attribute$=value]      匹配属性值是以value结束的元素

  [attribute*=value]      匹配属性值包含某些值的元素,部分前后,中间有也算

  [selector][selector]     匹配属性选择器的交集

子元素过滤选择器:

  :nth-child(eq|even|odd|index)  获取所有父元素特定位置的子元素

  :first            获取所有父元素下的第一个子元素

  :last            获取所有父元素下最后一个子元素

  :only-child         获取所有父元素下唯一的一个元素

表单对象属性过滤选择器:

  :enabled            获取表单中所有可用的元素

  :disabled          获取表单中所有不可用的元素

  :checked         获取表单张所有被选中的元素

  :selected           获取表单中所有被选中的option的元素

表单选择器:

  :input           获取所有的表单元素<input开头的,还有textarea select

  :text             获取所有的单行文本框  <input type="text" />

  :password        获取所有的密码框元素      <input type="password" />

  :radio           获取所有的单选按钮   <input type="radio" />

  :checkbox         获取所有的复选框    <input type="checkbox">

  :submit          获取所有的提交按钮   <input type="submit" />

  :image          获取所有的图像按钮   <input type="image" />

  :reset          获取所有的重置按钮    <input type="reset" />

  :button            获取所有的按钮     <input type="button">

  :file            获取所有的文件上传框  <input type="file" />

1、基本选择器

  (1)、#id  根据Id匹配一个元素

   $("#div1").css("background-color","red");  //匹配id为"div1"的元素
   <div id="div1">我是一个DIV</div> //会选中该div元素

  (2)、element  根据给定的元素名匹配元素

    $("p").css("background-color","red");    //匹配页面所有的p元素
    <p>我是一个P</p>

  (3)、class  根据class属性匹配元素

    $(".important").removeClass();    //匹配所有class="important"元素
    <p class="important">我是一个p元素</p>

  (4)、*      匹配所有的元素

    $("*").css("background-color","red");

  (5)、selector1,selector2  选择器之间用逗号分隔  返回每一个选择器匹配到的元素

    $(".div1,#span1").css("background-color","red");

2、层次选择器

 (1)、ancestor descendant   根据祖先元素匹配所有的后代元素,返回的是匹配到的后代元素,用空格分开。

$("#div1 span").css("color","red");

    <div id="div1">
      <span>我是span1</span>     ***会被选中,是#div1的后代span
      <div>
        <span>我是span3</span>   ***会被选中,也是#div1的后代span
      </div>
    </div>
    <span>我是span2</span>       ***不会被选中,不是#div1的后代

(2)、parent > child  根据父元素匹配所有的子元素  返回所有的子元素  用大于号">"分隔

$("#div1 > span").css("color","red");
    <div id="div1">
      <span>我是span1</span>     ***会被选中,是#div1的子元素span
      <div>
        <span>我是span3</span>   ***不会被选中,是#div1的后代元素,但不是直接子元素
      </div>
    </div>
    <span>我是span2</span>       ***不会被选中,不是#div1的子元素

(3)、prev + next  匹配紧接在prev元素后的相邻的下一个元素   用加号"+"分隔。

    相当于.next()方法

 $(".p1 + p").css("color","red");    //此行代码相当于$(".p1").next().css("color","red");
    <div>
      <p>我是第一个P</p>      ***不会被选中,是class为p1的上一个了
      <p class="p1">我是第二个P</p>  ***prev本身并不会被选中
      <p>我是第三个P</p>      ***会被选中,是class为p1的下一个相邻元素
      <p>我是第四个P</p>      ***不会被选中,不是class为p1的下一个,是下二个了
    </div>

(4)、prev ~ sibings    匹配prev后面的的所有兄弟元素 用波浪线"~"分隔开

    相当于 nextAll()方法

 $(".p1 + p").css("color","red");    //此行代码相当于$(".p1").nextAll("p").css("color","red");
    <div>
      <p>我是第一个P</p>      ***不会被选中,是class为p1前面的元素
      <p class="p1">我是第二个P</p>  ***prev本身并不会被选中
      <p>我是第三个P</p>      ***会被选中,是class为p1后面的P兄弟元素
      <p>我是第四个P</p>      ***会被选中,也是class为p1后面的P兄弟元素
    </div>

 (5)、选中所有的兄弟元素 siblings() 方法

 $(".p1").sibings("p").css("color","red");
    <div>
      <p>我是第一个P</p>      ***会被选中,是class为p1的P兄弟元素
      <p class="p1">我是第二个P</p>  ***prev本身并不会被选中
      <p>我是第三个P</p>      ***会被选中,是class为p1的P兄弟元素
      <p>我是第四个P</p>      ***会被选中,也是class为p1的P兄弟元素
    </div>

3、简单过滤选择器

  (1)、first()或:first    选中符合条件的第一个元素

 $("#div1 > p:first").css("color","red")  //此行代码相当于  $("#div1 > p").first().css("color","red");
    <div id="div1">
      <p>我是第一个P</p>   ***会被选中,是id为#div1下的第一个P元素
      <p>我是第二个P</p>   ***不会被选中,是第二个P元素了
      <p>我是第三个P</p>   ***不会被选中,是第三个P元素了
    </div>

(2)、last()或:last    符合条件的最后一个元素

 $("#div1 > p:last").css("color","red");    //此行代码相当于 $("#div1 > p").last().css("color","red");
    <div id="div1">
      <p>我是第一个P</p>   ***不会被选中,是第一个
      <p>我是第二个P</p>   ***不会被选中,是第二个
      <p>我是第三个P</p>   ***会被选中,id为#div1下的最后一个P元素
    </div>

 (3)、:not(selector)    符合条件但不能被selector选中的元素

 $("#div1 > p:not('.p1')").css("color","red");
    <div id="div1">
      <p>我是第一个P</p>        ***会被选中
      <p class="p1">我是第二个P</p>  ***不会被选中,因为符合了:not里的条件 class="p1"
      <p>我是第三个P</p>        ***会被选中
    </div>

 (4)、:even      获取指定索引值为偶数的元素(0、2、4、6、8……),注意索引号是从0开始的

 $("#div1 > p:even").css("color","red");
    <div id="div1">
      <p>我是第一个P</p>  ***会被选中,索引号0
      <p>我是第二个P</p>  ***不会被选中,索引号1
      <p>我是第三个P</p>  ***会被选中,索引号2
      <p>我是第四个P</p>  ***不会被选中,索引号3
      <p>我是第五个P</p>  ***会被选中,索引号4
    </div>

 (5)、odd        获取指定索引值为奇数的元素(1、3、5、7、9......),注意索引号是从1开始的

 $("#div1 > p:odd").css("color","red");
    <div id="div1">
      <p>我是第一个P</p>  ***不会被选中,索引号0
      <p>我是第二个P</p>  ***会被选中,索引号1
      <p>我是第三个P</p>  ***不会被选中,索引号2
      <p>我是第四个P</p>  ***会被选中,索引号3
      <p>我是第五个P</p>  ***不会被选中,索引号4
    </div>

(6)、eq(index)      选取指定索引值的元素,索引值从0开始

 $("#div1 > p:eq(1)").css("color","red");
    <div id="div1">
      <p>我是第一个P</p>  ***不会被选中,索引号为0
      <p>我是第二个P</p>  ***不会被选中,索引号为1
      <p>我是第三个P</p>  ***不会被选中,索引号为2
      <p>我是第四个P</p>  ***不会被选中,索引号为3
    </div>

 (7)、gt(index)      获取所有索引值大于index的元素,索引号从0开始

 $("#div1 > p:gt(1)").css("color","red");
    <div id="div1">
      <p>我是第一个P</p>  ***不会被选中,索引号为0
      <p>我是第二个P</p>  ***不会被选中,索引号为1
      <p>我是第三个P</p>  ***会被选中,索引号为2大于1了
      <p>我是第四个P</p>  ***会被选中,索引号为3大于1了
    </div>

 (8)、lt(index)      获取所有索引值小于index的元素,索引号从0开始

 $("#div1 > p:lt(1)").css("color","red");
    <div id="div1">
      <p>我是第一个P</p>  ***会被选中,索引号为0,小于1
      <p>我是第二个P</p>  ***不会被选中,索引号为1,不小于1
      <p>我是第三个P</p>  ***不会被选中,索引号为2大于1了
      <p>我是第四个P</p>  ***不会被选中,索引号为3大于1了
    </div>

(9)、:header       索取所有标题类型元素h1、h2、h3、h4、h5、h6

 $("#div1 > :header").css("color","red");
    <div id="div1">
      <p>我是一个P</p>      ***不会被选中,不是标题类型元素
      <span>我是一个span</span> ***不会被选中,不是标题类型元素
      <h1>我是一个h1</h1>    ***会被选中,h1是标题类型元素
      <h6>我是一个h6</h6>    ***会被选中,h6是标题类型元素
    </div>

(10)、animated    正在执行动画效果的元素

4、内容过滤选择器

  (1)、:contains(text)    获取包含给定文本的元素

    $("p:contains('三')").css("background-color","red");
     <div>
      <p>我是第一个P</p>  ***不会被选中
      <p>我是第二个P</p>  ***不会被选中
      <p>我是第三个P</p>  ***会被选中,文本里包含了"三"
     </div>

  (2)、:empty  获取不包含子元素或文本的空元素

 $(:empty).text("我是空元素");
      <div>
        <div><span></span></div>  ***div不会被选中,因为有<span></span>子元素。<span></span>会被选中,因为没有子元素也没有文本元素
        <p></p>            ***会被选中,没有子元素,也没有文本元素
        <span>我是一个span</span>  ***不会被选中,有文本元素
      </div>

 (3)、:has(selector)   选中含有selector所匹配元素的元素,(注意不限于直接子元素,只要是后代含有都算)

 $("div:has('span')").css("background-color","red");
      <div>          ***此div会被选中,因为他的有孙子span
        我是最外层div    
        <div><p>我是一个P</p></div>    ***此div不会被选中,因为不含有后代span
        <div><span>我是一个span</span></div>  ***此div会被选中,含有后代span
      </div>

(4)、:parent  含有子元素或者文本元素的元素

   $(":parent").text("不含子元素或文本元素");
      <div>我是一个div</div>  ***不会被选中,因为含有文本元素
      <div><span>我是一个span</span></div>  ***不会被选中,含有子元素。
      <div></div>        ***会被选中,不含子元素也不含有文本元素

5、可见性过滤选择器

  (1)、:hidden  选中所有不可见元素

 $("span:hidden").css("display","block");
   $("input:hidden").val("我是jQuery");
    <span style="display:none">我是一个span</span>  ***会被第一条规则选中
      <input type="hidden" value="我是一个隐藏的input" /> ***会被第二条jQuery选中
      <span class="span1">我是span1</span>       ***会被第一条jQuery选中

(2)、:visible  选中所有可见元素

6、属性过滤选择器

  (1)、[attribute]  获取包含给定属性的元素

    $("div[class]").css("font-size","30px");
     <div>
       <div class="div1">我是第一个div</div>  ***会被选中,含有class属性
       <div>我是第二个div</div>         ***不会被选中,没含有class属性。
     </div>

  (2)、[attribute=value]  获取属性值等于value的元素

    $("div[class=div1]").css("font-size","30px");
      <div>
        <div class="div1">我是div1</div>  ***会被选中,class属性等于div1。
        <div class="div2">我是div2</div>  ***不会被选中,class属性不等于div1。
      </div>

  (3)、[attribute!=value]  获取属性值不等于value的元素

      $("div[class!=div1]").css("color","red");
      <div>我是一个没有class属性的div</div>           ***会被选中,没有class属性自然class属性不等于div1
      <div class="div2">我是一个class属性等于div2的div</div>   ***会被选中,class属性不等于div1
      <div class="div1">我是一个class属性等于div1的元素</div>  ***不会被选中,class属性等于div1

   (4)、[attribute^=value]  获取属性值以value开始的元素

      $("div[class^=div]").css("color","red');
      <div class="div1">我是div1</div>  ***会被选中,class属性以div开始
      <div class="div2">我是div2</div>  ***会被选中,class属性以div开始
      <div class="abc">我是div3</div>   ***不会被选中,class属性不以div开始

  (5)、[attribute$=value]  获取属性值以value结束的元素

      $("div[class$=div]").css("color","red");
      <div class="1div">我是第一个div</div>  ***会被选中,class属性以div结束
      <div class="2div">我是第二个div</div>  ***会被选中,class属性以div结束
      <div class="abc">我是第三个div</div>   ***不会被选中,class属性不以div结束

  (6)、[attribute*=value]  获取属性值包含value值元素

      $("div[class*=div]").css("font-size","30px");
      <div class="div1">我是div1</div>  ***会被选中,属性值包含div
      <div class="1div">我是1div</div>  ***会被选中,属性值包含div
      <div class="1div1">我是1div1</div> ***会被选中,属性值包含div
      <div class="abc">我是abc</div>   ***会被选中,属性值包含div

  (7)、[selector][selector][selector]  获取属性交集元素

      $("div:[class][title=title1]").css("background-color","red");
      <div class="div1" title="title1">我是div1,title1</div>  ***会被选中,有class属性且title属性等于title1
      <div class="div1" title=title2>我是div1,title2</div>   ***不会被选中,虽然有class属性,但是title属性不等于title2
      <div class="div3">我是div3</div>           ***不会被选中,没有title属性

7、子元素过滤选择器

   (1):nth-child(eq|even|odd|index)    获取每个父元素下的特定位置元素,索引号从1开始

$("div>p:nth-child(1)").css("background-color","red");  //选中每一个父元素下的div下的第一个直接P元素
<div>
  <p>我是第一个P</p>   *** 会被选中,是div下的第一个子P元素
  <p>我是第二个P</p>   *** 不会被选中,是第二个了
</div>
<div>
  <P>我是第三个P</P>   *** 会被选中,是div下的第一个子P元素
  <P>我是第四个P</P>   *** 不会被选中,是第二个了
</div>

(2):first-child    选中每个父元素下的第一个

$("p:first-child").css("background-color","red");    //选中每一个父元素下的第一个P元素
<div>
  <p>我是第一个P</p>   *** 会被选中,是div下的第一个子P元素
  <p>我是第二个P</p>   *** 不会被选中,是第二个了
</div>
<ul>
  <li>
    <P>我是第三个P</P>   *** 会被选中,是div下的第一个子P元素
    <P>我是第四个P</P>   *** 不会被选中,是第二个了
  </li>
</ul>

(3)、:last-child  选中每一个父元素下的最后一个元素

$("p:last-child").css("background-color","red");    //选中每一个父元素下的第一个P元素
<div>
  <p>我是第一个P</p>   *** 不会被选中,不是某父元素的最后一个子P元素
  <p>我是第二个P</p>   *** 会被选中,是div元素下的最后一个子P元素
</div>
<ul>
  <li>
    <P>我是第三个P</P>   *** 不会被选中,不是某父元素下的最后一个子P元素
    <P>我是第四个P</P>   *** 会被选中,是div元素下的最后一个P元素
  </li>
</ul>

(4)、:only-child  获取每个父元素下唯一仅有的一个子元素

$("p:only-child").css("background-color","red");
  <div>
    <p>我是第一个P</p>  ***不会被选中,不是某父元素下的唯一一个P元素
    <p>我是第二个P</p>  ***不会被选中,不是某父元素下的唯一一个P元素
  </div>
  <div>
    <span>我是一个span</span>  ***不会被选中,不是某父元素下的唯一一个P元素
    <p>我是第三个P</p>       ***不会被选中,不是某父元素下的唯一一个span元素
  </div>
  <div>
    <p>我是一个P</p>    ***会被选中,是div下的唯一一个P元素
  </div>

8、表单对象属性过滤选择器

  (1)、:enabled  获取表单中所有属性为可用的元素

$("input:enabled").val("jQuery表单对象属性过滤选择器");
  <div>
    <input type="text" value="我是一个可用的input" />    ***会被选中,是一个可用的表单元素
    <input type="text" value="我是一个不可用的input" disabled="disabled" />  ***不会被选中,是不可用的表单元素
  </div>

(2)、:disabled  获取表单中属性不可用的元素

  $("input:enabled").val("jQuery表单对象属性过滤选择器");
  <div>
   <input type="text" value="我是一个可用的input" />    ***不会被选中,是一个可用的表单元素
   <input type="text" value="我是一个不可用的input" disabled="disabled" />  ***会被选中,是不可用的表单元素 //注意,jQuery能够操作不可用   的表单元素
  </div>

(3)、:checked    获取表单中被选中的元素  从属性能够知道用户选中了哪个

  $("input:checked").val("jQuery");
    <div>
      <input type="checkbox" checked="checked" value="1">选中
      <input type="checkbox" value="0">未选中
    </div>

(4)、:selected    获取表单中被选中的元素  此属性能够知道用户选择了哪个

 alert($("input:selected").text(""));  //获取所有被选中的option元素
    <div>
      <selected>
        <option value="0" selected="selected">option1</option>  ***会被选中
        <option value="1">option2</option>          ***不会被选中,因为本option不是选中的。
      </selected>
    </div>

9、表单选择器

(1)、:input  获取所有的input、textarea、select

 $(":input").val("jQuery");
    <div>
      <textarea>我是一个兵</textarea>  ***会被选中
      <input text="button" value="" />  ***会被选中
      <p>我是一个P</p>          ***不会被选中
    </div>

(2)、:text  获取所有的单行文本框,也就是<input type="text" />元素

 $(":text").val("jQuery");
    <div>
      <input type="text" value="我是一个input" />  ***会被选中,是单行文本框
      <input type="button" value="确定" />      ***不会被选中,不是单行文本框
      <textarea>我是一个textarea</textarea>     ***不会被选中,不是单行文本框
    </div>

(3)、:password  获取所有的密码框  也就是<input type="password" />元素

    $(":password").hide(3000);
    <div>
      <input type="password" />    ***会被选中,是密码框
      <input type="text" value="我是一个文本框" />  ***不会被选中,是文本框
    </div>

(4)、:radio  获取所有的单选按钮

    $(":radio").hide(3000);
    <div>
      <input type="radio" />我是一个radio  ***单选按钮会被选中,但是后面的文字不会
      <input type="text" />我是一个文本框  ***不会被选中
    </div>

(5)、:checkbox  获取所有的复选框

    $(":checkbox").hide(3000);
    <div>
      <input type="checkbox" />我是一个checkbox  ***复选框会被选中,文本不会
      <input type="text" />我是一个文本框       ***不会被选中,不是复选框
    </div>

(6)、:submit    获取所有的提交按钮

    $(":submit").hide(3000);
    <div>
      <input type="submit" value="提交">      ***会被选中,是提交按钮
      <input type="text" value="我是一个文本框">   ***不会被选中,不是提交按钮
    </div>

(7)、:image    获取所有的图像域

    $(":image").attr("title","我是一个图片按钮");
    <div>
      <input type="image" src="http://www.baidu.com/img/baidu_sylogo1.gif" />  ***会被选中
      <input type="text" value="我是一个文本框" />      ***不会被选中,不是图片按钮
    </div>

(8)、:reset    获取所有重置按钮

    $(":reset").hide(3000);
    <div>
      <input type="reset" value="重置">      ***会被选中,是重置按钮
      <input type="text" value="我是一个文本框">  ***不会被选中,不是重置按钮
    </div>

(9)、:button    获取所有的按钮

    $(":button").hide(3000);
    <div>
      <input type="button" value="确认" />      ***会被选中,是按钮元素
      <input type="text" value="我是一个文本框" />   ***不会被选中,不是按钮元素
    </div>

(10)、:file    获取所有的文件域

    $(":file").hide(3000);
    <div>
      <input type="file" title="file" />
      <input type="text" value="我是一个文本框" />
    </div>

以上就是本文的全部内容,希望对大家有所帮助,谢谢对我们的支持!

(0)

相关推荐

  • jQuery中Find选择器用法示例

    本文实例讲述了jQuery中Find选择器用法.分享给大家供大家参考,具体如下: find 可以查找指定节点下的节点,它是会递归查找的,即可以查找子节点的子节点 示例如下: function CalculatePrice() { var totalMoney = 0; $(".trBookCartItem").each(function (index, item) { var price = $(item).find(".spanPrice").text(); va

  • jQuery选择器总结之常用元素查找方法

    选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点: 1.简化代码的编写 2.隐式迭代 3.无须判断对象是否存在 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $

  • jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结

    这两天在做一个专题的时候遇到了一个通配符的问题 //弹层操作 $(function(){ //视频播放 $("a[href^='#video']").each(function(index, element) { $(this).click(function(){ $(".popDiv,#videoBox1").show(); }); }); //图片 $(".imgs a:not([href^='#video'])").each(functio

  • jquery 属性选择器(匹配具有指定属性的元素)

    jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素. jQuery 元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择. 选择器允许您对 HTML 元素组或单个元素进行操作. 在 HTML DOM 术语中: 选择器允许您对 DOM 元素组或单个 DOM 节点进行操作. jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("

  • jQuery基本选择器之标签名选择器

    废话不多说了,直接给大家贴代码了,关键代码如下所述: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit

  • 浅析jQuery事件之on()方法绑定多个选择器,多个事件

    $(document).on('click', '#header .top, #main .btn', function () { // code... }); on()方法绑定多个事件 $("table.planning_grid").on({ mouseenter: function() { // Handle mouseenter... }, mouseleave: function() { // Handle mouseleave... }, click: function()

  • jquery基本选择器匹配多个元素的实现方法

    如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document &

  • 浅谈jQuery 选择器和dom操作

    浅谈jQuery 选择器和dom操作 JQuery选择器 1.基本选择器 基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素id.class 和标签名来查找DOM元素.这个非常重要,下面的内容都是以此为基础,逐级提高的. 1)."$("#id")",获取id指定的元素,id是全局唯一的,所以它只有一个成员. 2)."$(".class")",获取class指定的元素,不同的元素可以具有相同的class属性

  • jQuery四种选择器使用及示例

     jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro" 的 <p> 元素. $("p#demo") 选取所有 id="demo" 的 <p> 元素. 示例代码: jquery 部分 $(document).ready(function(){/

  • jQuery插件实现适用于移动端的地址选择器

    最近在工作中需要用到地址选择器,像下面这样的,本想在网上找一个,可是没找到,于是自己写了个jquery插件. 直接上代码吧: var provinces = { "A": { "安徽":["合肥市","芜湖市","蚌埠市","淮南市","马鞍山市","淮北市","铜陵市","安庆市","黄山市&qu

  • jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载

    我们经常会应用到日期和时间选择器,之前我们使用最多的是jQuery UI的datepicker(),那么今天我给大家介绍一款非常有趣的日期和时间选择器,它分为日期选择器datedropper以及时间选择器timedropper,他们俩尤其适合在移动端上应用. 在线演示       源码下载 日期选择器datedropper 使用非常简单,分三步, 1.引入相关js和css文件.注意datedropper和timedropper都是基于jQuery的插件,所以也要引入jQuery库文件. <scr

随机推荐