zoukankan      html  css  js  c++  java
  • Jquery选择器分类:基本选择器,层次选择器,过滤选择器,表单选择器。

    基本选择器

    说明:通过元素id、class和标签名等来查找DOM元素

    1.id选择器:$("#test");//选取id为test的元素

    2.类选择器:$(".test");//选取所有class为test的元素,其他:$('div.mini')

    3.标签选择器:$("div");//选取所有的<div>元素

    4.群组选择器:$("p,div,.test");//选取所有<P>,<div>和拥有class为test的一组元素

    5.通配选择器:$("*"); // 通配选择器,匹配页面中所有元素

    层次选择器

    说明:通过DOM元素之间的层次关系获取特定元素,如后代元素、子元素、相邻元素、兄弟元素

    1.$(“div span”);//选取<div>里所有的<span>元素

    2.$(“div>span”);//选取<div>下元素名为<span>的子元素

    3.$(‘.one+div');//选取class为one的下一个<div>元素(相邻元素)

    4.$(‘#two~div') ;//选取id为two的元素后面所有<div>兄弟元素

    注意:

    $(‘prev+next')选择器与next()方法的等价关系

    $(‘.one+div') 等价于 $(“.one”).next(“div”)

    $(‘prev~siblings')选择器与nextAll()方法的等价关系

    $(‘.one~div') 等价于 $(“.one”).nextAll(“div”)

    表单选择器

    1.表单对象属性过滤选择器

    1.1:$(“#form1:enabled”) ;//选取id为”form1”的表单内的所有可用元素

    1.2:$(“#form1:disabled”) ;//选取id为”form1”的表单内的所有不可用元素

    1.3:$(“input:checked”);//选取所有被选中的<input>元素

    1.4:$(“select:selected”);//选取所有被选中的选项元素

    2.表单对象属性过滤示例

    2.1:$(“:input”);// 选取所有<input>、<textarea>、<select>和<button>元素

    2.2:$(“:text”);//选取所有的单行文本

    2.3:$(“: password”);//选取所有的密码框

    2.4:$(“:radio”);//选取所有的单选框

    2.5:$(“:checkbox”);//选取所有的多选框

    2.6:$(“:submit”);//选取所有的提交按钮

    2.7:$(“:image”);//选取所有的图像按钮

    2.8:$(“:reset”);//选取所有的重置按钮

    2.9:$(“:button”);//选取所有按钮

    2.10:$(:file);//选取所有的上传域

    2.11:$(“:hidden”);//选取所有不可见元素

    过滤选择器

    说明:主要是通过特定的过滤选择器规则来筛选出所需的DOM元素,选择器都以一个冒号(:)开头

    1.基本过滤选择器:

    1.1:$(“div:first”);//选取所有<div>元素中第一个<div>元素

    1.2:   $(“div:last”);//选取所有<div>元素中最后一个<div>元素

    1.3:  $(“input:not(.myClass)”);// 选取class为不是myClass的<input>元素

    1.4:  $(“input:even”);//选取索引是偶数的<input>元素

    1.5:  $(“input:odd”);//选取索引是奇数的<input>元素

    1.6:  $(“input:eq(1)”;//选取索引为1的<input>元素

    1.7:  $(“input:gt(1)”);//选取索引大于1的<input>元素(注:大于1,而不包括1)

    1.8:  $(“input:lt(1)”);//选取索引小于1的<input>元素(注:小于1,而不包括1)

    1.9:  $(“:header”);//选取网页中所有的<h1>,<h2>,<h3>……

    1.10:  $(“div:animated”); //选取正在执行动画的<div>元素

    2. 内容过滤选择器:

    2.1:$(“div:contains(‘我')”);//选取含有文本“我”的<div>元素

    2.2:$(“div:empty”);//选取不包含子元素(包括文本元素)的<div>空元素

    2.3:$(“div:has(p)”);// 选取含有<p>元素的<div>元素

    2.4:$(“div:parent”);// 选取拥有子元素(包括文本元素)的<div>元素

    3.可见性过滤选择器:

    3.1:$(“:hidden”);//选取所有不可见的元素。

    包括<input type=”hidden”>,<div style=”disply:none;>和<div style=”visibility:hidden;”>等元素。如果只想选取<input>元素,可以使用$(“input:hidden”)

    3.2:$(“div:visible”);//选取所有可见的<div>元素

    4.属性过滤选择器

    4.1:$(“div[id]”);//选取拥有属性id的元素

    4.2:$(“div[title=test]”);//选取属性title为”test”的<div>元素

    4.3:$(“div[title!=test]”);//选取属性title不等于”test”的<div>元素(注意:没有属性的title的<div>元素也会被选取)

    4.4:$(“div[title^=test]”);//选取属性title以”test”开始的<div>元素

    4.5:$(“div[title$=test]”);//选取属性title以”test”结束的<div>元素

    4.6:$(“div[title*=test]”);//选取属性title含有”test”的<div>元素

    4.7:$(“div[id][title$='tets']”);//选取拥有属性id,并且属性title以”test”结束的<div>元素

    5.子元素过滤选择器

    5.1---:eq(index)只匹配一个元素,而:nth-child将为每一个父元素匹配子元素,并且:nth-child(index)的index是从1开始的,而:eq(index)是从0算起

    5.2---:first只返回单个元素,而:first-child选择符将为每个父元素匹配第一个子元素

    5.3---:last只返回单个元素,而:last-child选择符将为每个父元素匹配最后一个子元素

  • 相关阅读:
    从一个表格文件中录入信息,进行计算后,在文件中输出这个表格
    求一个字符串的最小正周期
    算法竞赛入门例题3-5生成元
    算法竞赛入门经典 例题3-4 猜数字游戏的提示
    回文词
    WERTYU找不出不能输出空格的原因SSSSSSSSSSSSS
    DAY 106 ES介绍
    DAY 105 redis集群搭建
    DAY 104 redis高级02
    DAY 103 redis高级01
  • 原文地址:https://www.cnblogs.com/gluncle/p/7614224.html
Copyright © 2011-2022 走看看