前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >java学习(jQuery选择器)

java学习(jQuery选择器)

原创
作者头像
euclid
修改2020-02-10 17:14:49
5150
修改2020-02-10 17:14:49
举报
文章被收录于专栏:Euclid学习日记Euclid学习日记

来自雷丰阳老师课程

1.基本选择器

代码语言:txt
复制
$("#id")            //ID选择器
$("div")            //元素选择器
$(".class")     //类选择器
$(".class,#id1")     //组合选择器:用逗号隔开

2.层次选择器

代码语言:txt
复制
 $("parent > child")    //子元素选择器:>
$("parent child ")    //后代元素选择器:空格隔开
$("element + next")    //相邻元素选择器:+
$("element ~ siblings")    //兄弟元素选择器:~

3.过滤选择器

3.1基本过滤选择器

代码语言:txt
复制
$("div:first")    //第一个div
$("div:last")     //最后一个div
$("div:even")     //挑选下标为偶数的div
$("div:odd")      //挑选下标为奇数的div
$("div:eq(4)")    //下标等于 4 的div
$("div:gt(3)")    //下标大于 3 的div
$("div:lt(3)")    //下标小于 3 的div
$("div:not(:animated):last") //除去动画div剩余div中的最后一个div

3.2内容过滤选择器

代码语言:txt
复制
$(":contains("euclid")")    // 包含euclid文本的元素
$(":empty")                 //所有空元素
$("div:has(p)")        //含有p元素的div元素
$("div:parent")                //含有子元素或者文本的div元素

3.3可见性过滤选择器

代码语言:txt
复制
$("div:hidden")       //所有不可见div元素,或type为hidden的元素
$("div:visible")      //所有可见div元素

//例如
alert($("input:hidden").attr("value"))

3.4属性过滤选择器

代码语言:txt
复制
$("div[title]")        //所有含有 title 属性的 div 元素
$("div[id='123']")        // id属性值为123的div 元素
$("div[id!='123']")        // id属性值不等于123的div 元素
$("div[id^='123']")        // id属性值以123开头的div 元素
$("div[id$='123']")        // id属性值以123结尾的div 元素
$("div[id*='123']")        // id属性值包含123的div 元素
$("input[id][name$='man']") //多属性选过滤,同时满足两个属性的条件的元素

3.5子元素属性过滤器

代码语言:txt
复制
//从1开始计数
$("div.one :nth-child(2)");  // clas为one的div下的第二个子元素
$("div.one :first-child");  // clas为one的div下的第一个子元素
$("div.one :last-child");  //class为one的div下的最后一个子元素
$("div.one :only-child")  //class为one的div且仅有一个子元素的div

4.1表单选择器

代码语言:txt
复制
$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框,$(":text") 等价于$("[type=text]")
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域 

##4.2表单对像属性选择器

代码语言:txt
复制
$("input:disable");   //禁用的元素
$("input:enable");   //启用input
$(":selected");   //所有选定的下拉列表元素
$(":checkbox:check"); //所有选中的复选框选项

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 来自雷丰阳老师课程
  • 1.基本选择器
  • 2.层次选择器
  • 3.过滤选择器
    • 3.1基本过滤选择器
      • 3.2内容过滤选择器
        • 3.3可见性过滤选择器
          • 3.4属性过滤选择器
            • 3.5子元素属性过滤器
            • 4.1表单选择器
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档