java学习(jQuery选择器)

2020-02-10 17:14:49 浏览数 (1)

来自雷丰阳老师课程

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"); //所有选中的复选框选项

0 人点赞