zoukankan      html  css  js  c++  java
  • JQuery选择器

    简介

    选择器:用于选取页面上的元素对象。jQuery选择器完全继承了CSS选择器的方式。(学会了css的选择器就会jQuery的选择器了)

    jQuery选择器是学习jQuery的基础。

    在此之前Dom中如何获取页面元素呢?

    document.getElementById(‘id’);

    document.getElementsByTagName(‘input’);

    document.getElementsByName(‘gender’);

    是不是很麻烦呢?

    选择器介绍

    1.ID选择器

    $(‘#id’);

    2.类名选择器 

    $( '.cls' );

    3.标签选择器 

    $(‘input’)【$(‘*’);选择页面上的所有元素。】

    4.属性过滤选择器

    $(‘*[name=gender]’)或$(‘[name=gender]’)

    5.多条件选择器 

    多条件选择器:$(“p,div,span.cls”),同时选择p标签、div标签和拥有cls样式的span标签元素。

    5.层次选择器 

    (1)后代:            $('div li').css('backgroundColor', 'red')
                               获取div下的所有li元素(后代,子、子的子……)
    (2)子元素:         $('div>li').css('backgroundColor', 'red');
           获取div下的直接li子元素 【必须是直接子元素】
    (3)相邻元素1:    $('div+span').css('backgroundColor', 'red');
           这个元素后紧跟着的第一个元素
    (4)相邻元素2:    $('div~span').css('backgroundColor', 'red');
           这个元素后跟着的所有元素
    注意:选择器表达式中的空格不能多不能少。易错!过滤器与表单选择器时注意。

    6.基本过滤选择器

    (1) :first 选取第一个元素。$("div:first")选取第一个<div>

    (2) :last 选取最后一个元素。$("div:last")选取最后一个<div>

    (3) :not(选择器) 选取不满足“选择器”条件的元素,

    $("input:not(.myClass)")   选取样式名不是myClass的<input>

    (4) :even、:odd,选取索引是偶数、奇数的元素:

    $("input:even")选取索引是奇数的<input>

    (5) :eq(索引序号)、gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素,

              $("input:lt(5)")选取索引小于5的<input>

    (6) $(":header")选取所有的h1……h6元素(*)

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

    属性过滤选择器:

    $('#dv input[name]');得到所有有name属性的元素

    $('#dv input[name=txt1]');得到name为txt1的元素

    $('#dv input[name!=txt1]');得到name不为txt1的元素

    还可以选择开头【name^=值】、结束【 name$=值】、包含【 name*=值】等,条件还可以复合。【[属性1=a][属性2=b]…】(*)

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

    $("#form1 :enabled")选取id为form1的表单内所有启用的元素

    $("#form1 :disabled")选取id为form1的表单内所有禁用的元素

    $(“input:checked”)选取所有选中的元素(Radio、CheckBox),这个中间不能加空格.

    $("select :selected")选取所有选中的选项元素(下拉列表)


    $(“:input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样, $("input")只获得<input>

    $(“:text”)选取所有单行文本框,等价于

    $("input[type=text]"),$(‘input[type=text]’),$(‘:text’);

    $(“:password”)选取所有密码框。

    同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。

    代替了$(‘input[type=***]’);

    8.子元素过滤器

    :first-child,与:fisrt的区别,:first只能选取第一个,而:first-child,则能选取每个子元素的第一个元素。

    $(‘ul li:first’);只返回一个li元素。

    $(‘ul li:first-child’);//为每个父元素(ul)都返回一个li。

    :last-child

    :only-child,匹配当前父元素中只有一个子元素的元素。

    :nth-child,对比eq()来理解,eq()值匹配一个,nth-child()为每个父元素都要匹配一个子元素。

    :nth-child(index),index从1开始。

    :nth-child(even)

    :nth-child(odd)

    :nth-child(3n),选取3的倍数的元素

    :nth-child(3n+1),满足3的倍数+1的元素。

    .children()方法,只考虑子元素,不考虑后代元素。

    9.其他过滤器

    可见性过滤器:

    :hidden

    选取所有不可见元素包括:(如果直接写:hidden则会包含head itlescriptstyle….)

    1.表单元素type=“hidden”(表示的是隐藏域)

    2.设置css的display:none

    3.高度和宽度明确设置为0的元素。

    4.父元素时隐藏的,所以子元素也是隐藏的

    visibility: hidden 与opacity为0不算,因为还占位所以不认为是hidden:visible选取所有可见元素

    内容过滤器:

    :contains(text),过滤出包含给定文本的元素。(innerText中包含。)

    :empty,过滤出所有不包含子元素或者文本的空元素。

    :has(selector),过滤出元素中包含(即子元素中)selector选择器能选择到的元素。

    :parent,过滤出可以当做父元素的元素(即该元素有子元素或者元素中包含文本。)

    获取兄弟元素的几个方法

    1.下一个

    next();      //当前元素之后的紧邻着的第一个兄弟元素(下一个)

    2.下一堆 

    nextAll();  //当前元素之后的所有兄弟元素

    3.上一个 

    prev();      //当前元素之前的紧邻着的兄弟元素(上一个)

    4.上一堆 

    prevAll();  //当前元素之前的所有兄弟元素

    5.所有兄弟 

    siblings();//当前元素的所有兄弟元素

  • 相关阅读:
    day03—JavaScript中DOM的Event事件方法
    day02-Javascript之document.write()方法
    day01-JavaScript中"Uncaught TypeError: Cannot set property 'innerHTML' of null"错误
    Linux安装Tomcat8
    CentOS7安装jdk8及环境变量配置
    Linux命令之lsof
    java如何停止一个运行的线程?
    大数据技术之Hadoop(HDFS)
    大数据技术之Hadoop入门
    用word2013 把word 文档发送到博客园
  • 原文地址:https://www.cnblogs.com/mcad/p/4341249.html
Copyright © 2011-2022 走看看