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

    1.基本选择器

    1)元素名称选择器
    
    $("div")  --->匹配所有的div元素
    
    (2)class选择器
    
    $(".mini")  --->匹配所有class值为mini的元素
    
    (3)ID选择器
    
    $("#one")  ---->匹配所有的id为one的元素
    
    (4)多元素选择器
    
    $("span,#two,#one,.mini")

    2.层级选择器

    (1)后代选择器
    $("div span")  匹配div内部所有的span元素

    (2)子元素选择器
    $("div>span")  匹配div内部所有的span子元素

    (3)相邻兄弟选择器
    $("#two+span")  匹配id为two后面紧邻的span兄弟 元素

    (4)后面所有兄弟选择器
    $("#two~span")  匹配id为two后面所有的span兄弟 元素

    (5)扩展内容
    $("#two").next("div")  匹配id为two的元素后面紧邻的div兄弟元素
    $("#two").nextAll("div")  匹配id为two的元素后面所有的div兄弟元素
    $("#two").prev("div")  匹配id为two的元素前面紧邻的div兄弟元素
    $("#two").prevAll("div")  匹配id为two的元素前面所有的div兄弟元素
    $("#two").siblings("div")  匹配id为two的元素前后所有的div兄弟元素
    $("#two").parent()  获取id为two的元素的父元素
    $("#two").parents()  获取id为two的元素的祖先元素
    $("#two").find("span")  获取id为two的元素内部的所有span后代元素 --->$("#two span")

    注:div元素显示还是关闭,不需要使用.css("display","none")''',可以使用jQuery的一个方法,
    即$("#id").show();  //展示div
    或者$("#id").hide();  //隐藏div
    也可以使用$("#id").toggle();  //若是展示则隐藏,若是隐藏则展示他,最后括号里面若是加个时间,会有效果展示

    3.基本过滤选择器

    (1)$("div:first")  匹配div中的第一个div
    (2)$("div:last")  匹配最后一个div
    (3)$("div:eq(n)")  匹配div中索引值为n+1个元素
    (4)$(":not(.one)")  匹配所有的class不为one的元素
        $("div:not(.one)"  匹配所有class不为one的div元素
    (5)$("div:even")  匹配索引值为偶数的div
    (6)$("div:odd")  匹配索引值为奇数的div

    4.内容、可见选择器

    (1)$("div:contains('hello')"  匹配所有包含hello文本的元素
    (2)$("div:empty")  匹配所有空的div元素
    (3)$("div:hidden")  匹配所有隐藏的div元素
    (4)$("div:visible")  匹配所有可见的div元素

    5.属性元素选择器

    (1)$("div[id]")  匹配所有具有id属性的div元素
    (2)$("div[title='aa']")  匹配所有title='aa'的div元素

    注: $(":input")  可以选中所有的表单项元素

    6.子元素选择器

    (1)$("div:first-child")  匹配第一个div子元素
      $("div:nth-child(1)")  匹配第一个div子元素
    (2)$("div:last-child")  匹配最后一个div子元素
    (3)$("div:nth-child(n)")  匹配低n个div子元素

    7.表单及表单选择器

    (1)$(":input")  匹配所有的表单项元素(input、select、textarea)
    (2)$(":password")  匹配所有的密码输入框
    (3)$(":radio")  匹配所有的单选框
    (4)$("checkbox")  匹配你所有的复选框
    (5)$(":checked")  匹配所有被选中的单选框、复选框以及option选项
      $(":input[type='radio']:checked)  匹配所有被选中的单选框
      $(":input[type='checkbox']:checked)  匹配所有被选中的复选框
    (6)$(":selectd")  匹配所有被选中的option
  • 相关阅读:
    iOS内购开发(也许是最全的介绍)
    React Native 学习(三)之 FlexBox 布局
    React Native组件解析(二)之Text
    苹果开发者账号(个人、公司、企业)的区别
    React Native学习(二)之View
    搭建React Native开发环境
    iOS 提交AppStore不出现构建的版本
    Python使用Mysql过程中一些错误
    数据分析之漏斗模型
    项目管理之敏捷方式(我们的方式)
  • 原文地址:https://www.cnblogs.com/gxlaqj/p/11381499.html
Copyright © 2011-2022 走看看