• JQ选择器


    jQuery的选择器相比JavaScript更简单明了。

    $()查找元素

    $()是jQuery的元素选择器,各种DOM是这样选择的:

     选择器语法  说明
     $(*)  选择所有元素
     $(element)  按元素名称选择
     $(id)  按id选择元素
     $(.class)  按类选择元素

    基本选择器

    选择器示例  说明
     ancestor descendant 一个元素是另一个元素的后代,如li a
     parent > child  一个元素是另一个元素的直接子节点
     previous + next  相邻的兄弟选择器,只会选中紧跟在前一个元素之后的那一个元素
     previous ~ siblings   兄弟选择器会选中前一个元素的所有兄弟元素

    基本筛选器

     筛选示例  说明
    $('li:first') 选取第一个元素
    $('li:last') 选取最后一个元素
    $("tr:even") 选取索引为偶数的元素,从 0 开始
    $("tr:odd") 选取索引为奇数的元素,从 0 开始
    $("tr:eq(1)")   选取给定索引值的元素
    $("tr:gt(0)") 选取大于给定索引值的元素
    $("tr:lt(2)") 选取小于给定索引值的元素
    $(":focus")   当前获取焦点的元素
    $(":animated") 正在执行动画效果的元素

    内容选择器

     筛选示例  说明
    $("div:contains('nick')")   选取包含nick文本的元素
    $("td:empty") 选取不包含子元素或者文本的空元素
    $("div:has(p)") 选取含有选择器所匹配的元素
    $("td:parent") 选取含有子元素或者文本的元素

    可见性选择器

     筛选示例  说明
    $("div:hidden")   筛选所有隐藏的元素
    $("td:empty") 筛选所有可见的元素

    子节点选择器

     筛选示例  说明
    $("ul:nth-child(2)")    选取当前选中元素的指定子节点,参数中的值是从1开始索引的
    $("ul:first-child")  选取当前选中元素的第一个子节点
    $("ul:last-child")  选取当前选中元素的最后一个子节点
    $("ul:only-child")  选取当前是父元素的唯一子节点时选中

     属性筛选器

    筛选示例  说明
    $("[href]")   筛选指定属性的元素
    $("[href='https://www.0735it.net']") 筛选指定属性,并指定属性值的元素
    $("[href!='#index']") 筛选指定属性,并属性值不为指定值的元素
    $("[href^='#']") 筛选以特定值开头的元素
    $("[href*='#']") 筛选包含特定值的元素
    $("[href|='#']") 筛选属性值等于特定字符串,或以特定字符串做为前缀,后加一个连字符(-)的元素
    $('input[name~="man"]') 筛选属性值以空格分隔的多个值中的一个
    $('input[id][name$="man"]') 多个属性筛选器同时使用

    表单筛选器

    筛选示例  说明
    $("input")   筛选所有的input元素
    $("input:text")   筛选所有文本类型的input元素
    $("input:password") 筛选所有密码类型的input元素
    $("input:radio") 筛选所有单选类型的input元素
    $("input:checkbox") 筛选所有复选类型的input元素
    $("input:submit") 筛选所有的提交按钮
    $("input:image") 筛选所有的图片
    $("input:reset") 筛选所有的重置按钮
    $("input:button") 筛选所有的按钮
    $("input:file") 筛选所有的文件上传域
    $("input:selected") 筛选所有的提交按钮
    $("input:enabled") 筛选所有可用的元素
    $("input:disabled") 筛选所有禁用的元素
    $("input:checked") 筛选所被选中的单选或筛选元素
  • 相关阅读:
    JavaScript语言和jQuery技术--2
    Mybatis框架--1
    数据接口请求异常:parsererror
    Callable和Future?
    如何实现拦截器?
    window.onload()函数和jQuery中的document.ready()有什么区别?
    SpringBoot框架 1.什么是 Spring Boot?
    什么是 JavaConfig?
    jquery中$.get()提交和$.post()提交有区别吗?
    什么是线程?
  • 原文地址:https://www.cnblogs.com/max-hou/p/9126098.html
Copyright © 2020-2023  润新知