jquery的基本选择器分别是（JQuery选择器的学习）
jquery的基本选择器分别是（JQuery选择器的学习）<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width initial-scale=1.0"> <title>JQuery选择器</title> <scriptsrc="../js/jquery-1.12.4.js"></script> <script> $(function(){ //element:标签选择器，获取页面上同一类标签 var$p=$("p"); console.log($p); $p.css("
JQuery选择器的学习和CSS选择器几乎是一样的，那我们首先来了解一下JQuery基本选择器
1. 基本选择器
element: 标签选择器，获取页面上同一类标签
.class 类选择器，获取页面上class属性值相同的一类标签
#id id选择器，获取页面上指定id属性对应的值的唯一标签
selector1 selector2 selectorN 并集选择器，选做多种类型的选择器的组合
* 通用选择器: 选择页面上所有的标签
代码示例如下所示:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width initial-scale=1.0">
<title>JQuery选择器</title>
<scriptsrc="../js/jquery-1.12.4.js"></script>
<script>
$(function(){
//element:标签选择器，获取页面上同一类标签
var$p=$("p");
console.log($p);
$p.css("color" "red");
//.class类选择器，获取页面上class属性值相同的一类标签
var$p2=$(".p1");
console.log($p2);
$p2.css("color" "green");
//#idid选择器，获取页面上指定id属性对应的值的唯一标签
var$p3=$("#p2");
console.log($p3);
$p3.css("color" "blue");
//selector1 selector2 selectorN并集选择器，选做多种类型的选择器的组合
var$select=$("h1 span p.p1 p#p2");
console.log($select);
$select.css("color" "yellow");
//*通用选择器:选择页面上所有的标签
var$all=$("*");
console.log($all);
$all.css("color" "orange");
});
</script>
</head>
<body>
<!--
基本
#id
elemen
.class
*
selector1 selector2 selectorN
需求:使用基本选择器给设置字体颜色
-->
<h1>静夜思</h1>
<span>李白</span>
<p>床前明月光</p>
<pclass="p1">疑似地上霜</p>
<pid="p2">举头望明月</p>
<p>低头思故乡</p>
</body>
</html>
2. 层级选择器
ancestor descendant 后代选择器: 选择祖先ancestor下的所有后代descendant标签
parent > child 子代选择器: 选择父亲parent下面所有的一级子标签
prev next 相邻兄弟选择器: 选择紧邻某一个元素的下一个元素标签
prev ~ siblings 通用兄弟选择器: 获取某个元素同级别后面的所有元素
代码示例如下所示:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width initial-scale=1.0">
<title>JQuery层级选择器</title>
<scriptsrc="../js/jquery-1.12.4.js"></script>
<script>
$(function(){
/*
ancestordescendant
parent>child
prev next
prev~siblings
*/
//ancestordescendant后代选择器:选择祖先ancestor下的所有后代descendant标签
var$descendant=$("ula");
console.log($descendant);
$descendant.css("color" "red");
//parent>child子代选择器:选择父亲parent下面所有的一级子标签
var$child=$("ul>li");
console.log($child);
$child.css("color" "green");
//prev next相邻兄弟选择器:选择紧邻某一个元素的下一个元素标签
var$next=$("h1 span");
console.log($next);
$next.css("color" "blue");
//prev~siblings通用兄弟选择器:获取某个元素同级别后面的所有元素
var$siblings=$("span~div");
console.log($siblings);
$siblings.css("border" "1pxsolidred");
});
</script>
</head>
<body>
<h1>春晓</h1>
<span>孟浩然</span>
<ul>
<li><ahref="#">春眠不觉晓</a></li>
<li><ahref="#">处处闻啼鸟</a></li>
<li><ahref="#">夜来风雨声</a></li>
<li><ahref="#">花落知多少</a></li>
</ul>
<div>我是div1</div>
<div>我是div2</div>
<div>我是div3</div>
</body>
</html>
3. 基本筛选器
:first: 获取第一个元素
:last: 获取最后一个元素
:eq(index) 获取第几个元素 index 从0开始
:gt(index) 获取满足大于指定索引值的所有元素 index 从0开始
:lt(index) 获取满足小于指定索引值的所有元素 index 从0开始
:even 获取所有索引值为偶数的元素，从 0 开始计数
:odd 获取所有索引值为奇数的元素，从 0 开始计数
:not(selector): 选取除了 指定选择器元素以外的所有元素：
:header: 选取所有标题元素 (h1 - h6)：
:focus 选取当前获取焦点的元素
代码示例如下所示:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width initial-scale=1.0">
<title>基本筛选器</title>
<scriptsrc="../js/jquery-1.12.4.js"></script>
<script>
$(function(){
//:first:获取第一个元素
var$first=$("li:first");
console.log($first);
//:last:获取最后一个元素
var$last=$("li:last");
console.log($last);
//:eq(index)获取第几个元素 index从0开始
var$eq=$("li:eq(1)");
console.log($eq);
//:gt(index)获取满足大于指定索引值的所有元素 index从0开始
var$gt=$("li:gt(1)");
console.log($gt);
//:lt(index)获取满足小于指定索引值的所有元素 index从0开始
var$lt=$("li:lt(1)");
console.log($lt);
//:even获取所有索引值为偶数的元素，从0开始计数
var$even=$("li:even()");
console.log($even);
//:odd获取所有索引值为奇数的元素，从0开始计数
var$odd=$("li:odd()");
console.log($odd);
//:not(selector):选取除了指定选择器元素以外的所有元素：
var$odd=$("li:not(.li1 #li2)");
console.log($odd);
//:header:选取所有标题元素(h1-h6)：
var$header=$(":header");
console.log($header);
//:focus选取当前获取焦点的元素
$("input:eq(1)").focus();
var$focus=$("input:focus");
console.log($focus);
});
</script>
</head>
<body>
<h1>九月九日忆山东兄弟</h1>
<h2>唐代：王维</h2>
<ul>
<liclass="li1">独在异乡为异客</li>
<liid="li2">每逢佳节倍思亲</li>
<li>遥知兄弟登高处</li>
<li>遍插茱萸少一人</li>
</ul>
用户名:<inputtype="text"/>
密码:<inputtype="text"/>
</body>
</html>
4. 内容选择器
:empty 获取既没有文本也没有子元素的指定元素
:parent 获取有文本内容或有子元素的指定元素
:contains(text): 获取包含指定文本内容的指定元素
:has(selector): 获取包含指定子元素的指定元素
代码示例如下所示:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width initial-scale=1.0">
<title>内容选择器</title>
<style>
div{
border:1pxsolid#f00;
width:100px;
height:100px;
margin-top:5px;
}
</style>
<scriptsrc="../js/jquery-1.12.4.js"></script>
<script>
$(function(){
/*
:contains(text)
:empty
:has(selector)
:parent
*/
//:empty获取既没有文本也没有子元素的指定元素
var$div=$("div:empty");
console.log($div);
//:parent获取有文本内容或有子元素的指定元素
var$div2=$("div:parent");
console.log($div2);
//:contains(text):获取包含指定文本内容的指定元素
var$div3=$("div:contains('我是div')");
console.log($div3);
//:has(selector):获取包含指定子元素的指定元素
var$div4=$("div:has('span')");
console.log($div4);
});
</script>
</head>
<body>
<div></div>
<div>我是div</div>
<div>他也是div</div>
<div><span></span></div>
<div>
<p></p>
</div>
</body>
</html>
5. 可见性选择器
:hidden 匹配所有不可见元素，或者type为hidden的元素
:visible 匹配所有的可见元素
代码示例如下所示:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width initial-scale=1.0">
<title>可见性选择器</title>
<scriptsrc="../js/jquery-1.12.4.js"></script>
<script>
/*
:hidden匹配所有不可见元素，或者type为hidden的元素
:visible匹配所有的可见元素
*/
$(function(){
//var$hidden=$("hidden");
var$hidden=$("input:hidden");
console.log($hidden);
var$visible=$(":visible");
console.log($visible);
$visible.css("background" "green")
});
</script>
</head>
<body>
<div>
<inputtype="hidden"/>
<inputtype="text"/><br>
<span>span</span>
<p>p</p>
<divstyle="display:none;"></div>
</div>
</body>
</html>
6. 属性选择器
[attribute] 获取具有属性attr的元素
[attribute=value] 获取属性attr等于val的元素
[attribute!=value] 获取属性attr不等于val的元素
[attribute^=value] 获取属性attr以val开头的元素
[attribute$=value] 获取属性attr以val结尾的元素
[attribute*=value] 获取属性attr包含val的元素
[attrSel1][attrSel2][attrSelN] 获取包含多个属性选择器的元素
代码示例如下所示:
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>JQuery属性选择器</title>
<styletype="text/css">
a{
display:inline-block;
width:45px;
height:45px;
background-color:#AAAACC;
border-radius:8px;
margin-left:10px;
text-align:center;
line-height:45px;
text-decoration:none;
font-size:20px;
font-weight:900;
}
</style>
<scriptsrc="../js/jquery-1.12.4.js"></script>
<script>
$(function(){
/*
[attribute]获取具有属性attr的元素
[attribute=value]获取属性attr等于val的元素
[attribute!=value]获取属性attr不等于val的元素
[attribute^=value]获取属性attr以val开头的元素
[attribute$=value]获取属性attr以val结尾的元素
[attribute*=value]获取属性attr包含val的元素
[attrSel1][attrSel2][attrSelN]获取包含多个属性选择器的元素
*/
//选中所有含有id属性的链接背景为红色
$("a[id]").css("background" "red");
//选中所有class属性等于linksitem的链接背景为黑色
//注意:如果属性值中有特殊字符，那么必须使用双引号包裹
$("a[class='linksitem']").css("background" "black");
//选中所有href中以http开头的链接为蓝色
$("a[href^=http]").css("background" "blue");
//选中所有href中以png结尾的链接为绿色
$("a[href$=png]").css("background" "green");
//选中包含class中包含item的链接为橘色
$("a[class*=item]").css("background" "orange");
//选中包含class中包含itemb并且href属性以doc结尾的链接为橘色
$("a[class*=item][href$=doc]").css("background" "yellow");
});
</script>
</head>
<body>
<pclass="demo">
<ahref="http://www.baidu.com"class="linksitemfirst"id="first">1</a>
<ahref=""class="linksactiveitem"title="testwebsite"target="_blank">2</a>
<ahref="sites/file/test.html"class="linksitem">3</a>
<ahref="sites/file/test.png"class="linksitem">4</a>
<ahref="sites/file/image.jpg"class="linksitem">5</a>
<ahref="efc"class="linksitem"title="websitelink">6</a>
<ahref="/a.pdf"class="linksitem">7</a>
<ahref="/abc.pdf"class="linksitem">8</a>
<ahref="abcdef.doc"class="linksitem">9</a>
<ahref="abd.doc"class="linksitemlast"id="last">10</a>
</p>
</body>
</html>
7. 结构伪类选择器
:first-child 获取第一个子元素 不区分元素类型
:first-of-type1.9 获取第一个子元素 区分元素类型
:last-child 获取最后一个子元素 不区分元素类型
:last-of-type1.9 获取第一个子元素 区分元素类型
:nth-child 获取第n个子元素 不区分元素类型
:nth-last-child()1.9 获取倒数第n个子元素 不区分类型
:nth-of-type()1.9 获取第n个子元素 区分元素类型
:nth-last-of-type()1.9 获取倒数第n个子元素 区分元素类型
:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配 如果父元素中含有其他元素，那将不会被匹配 不区分类型
:only-of-type1.9 如果某个元素是父元素中唯一的子元素，那将会被匹配 如果父元素中含有其他元素，那将不会被匹配 区分类型
代码示例如下所示:
<!DOCTYPEhtml>
<html>
<headlang="en">
<metacharset="UTF-8">
<title>子元素选择器</title>
<scriptsrc="../js/jquery-1.12.4.js"></script>
<script>
/*
:first-child获取第一个子元素 不区分元素类型
:first-of-type1.9 获取第一个子元素 区分元素类型
:last-child获取最后一个子元素 不区分元素类型
:last-of-type1.9 获取第一个子元素 区分元素类型
:nth-child获取第n个子元素 不区分元素类型
:nth-last-child()1.9 获取倒数第n个子元素 不区分类型
:nth-of-type()1.9 获取第n个子元素 区分元素类型
:nth-last-of-type()1.9 获取倒数第n个子元素 区分元素类型
:only-child如果某个元素是父元素中唯一的子元素，那将会被匹配 如果父元素中含有其他元素，那将不会被匹配 不区分类型
:only-of-type1.9 如果某个元素是父元素中唯一的子元素，那将会被匹配 如果父元素中含有其他元素，那将不会被匹配 区分类型
*/
$(function(){
//设置ul的第一个子元素li背景为绿色
var$li=$("ulli:first-child");
console.log($li);
$li.css("background" "green");
//设置ul的最后一个子元素li背景为红色
var$li2=$("ulli:last-child");
console.log($li2);
$li2.css("background" "red");
//设置body下面第一个子元素p背景颜色为黄色
//var$p=$("bodyp:first-child");
var$p=$("bodyp:first-of-type");
console.log($p);
$p.css("background" "blue");
//设置ul下面第三个元素背景为粉色
$("ulli:nth-child(3)").css("background" "pink");
//设置ul下面倒数第二个元素背景为橘色
$("ulli:nth-last-child(2)").css("background" "orange");
//设置body下面第2个类型是p的元素背景为紫色
$("bodyp:nth-of-type(2)").css("background" "purple");
//设置body下面倒数第1个类型是p的元素背景为黑色
$("bodyp:nth-last-of-type(1)").css("background" "black");
//设置列表项中只有一个li元素的背景为黄色
$("ulli:only-child").css("background" "yellow");
//设置body下面只有唯一一种类型为h2背景为灰色
$("bodyh2:only-of-type").css("background" "gray");
});
</script>
</head>
<body>
<h2>子元素选择器</h2>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
</ul>
<ul>
<li>only</li>
</ul>
</body>
</html>
8. 表单选择器/表单对象属性选择器
表单对象选择器
:input 获取所有的表单元素
:text 获取所有的单行文本框
:password 获取所有密码框
:radio 获取所有单选按钮
:checkbox 获取所有的复选按钮
:submit 获取所有的提交按钮
:image 获取所有的图像域
:reset 获取所有的重置按钮
:button 获取所有的普通按钮
:file 获取所有的文件表单元素
:hidden 获取所有的隐藏域表单元素
表单对象属性选择器
:enabled 获取所有可用的表单元素
:disabled 获取所有不可用的表单元素
:checked 获取选中的的表单元素(复选框、单选框等，不包括select中的option)
:selected 获取所有选中的option元素
代码示例如下所示:
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width initial-scale=1.0">
<title>表单选择器</title>
<scriptsrc="../js/jquery-1.12.4.js"></script>
<script>
$(function(){
//获取所有的表单元素
var$input=$(":input");
console.log($input);
//获取所有的input标签
var$input2=$("input");
console.log($input2);
//获取所有的单行文本框
var$text=$(":text");
console.log($text);
//获取所有的密码框
$(":password").css("background" "red");
console.log($(":radio"));
console.log($(":checkbox"));
console.log($(":submit"));
console.log($(":image"));
console.log($(":reset"));
console.log($(":button"));
console.log($(":file"));
console.log($("input:hidden"));
console.log($(":enabled"));
console.log($(":disabled"));
console.log($(":checked"));
console.log($(":selected"));
});
</script>
</head>
<body>
<h1>注册表单</h1>
<formaction="../server/server.html"method="get">
<labelfor="username">用户名:</label>
<inputtype="text"id="username"name="username"placeholder="请输入用户名..."autofocus/><br>
<labelfor="password">密 码:</label><inputtype="password"id="password"name="password"maxlength="6"placeholder="请输入密码..."/><br>
<labelfor="age">年龄:</label>
<inputtype="text"id="age"name="age"placeholder="请输入年龄..."disabled>
<inputtype="radio"name="gender"checkedid="male"value="male"/><labelfor="male">
男</label>
<inputtype="radio"name="gender"id="female"value="female"/><labelfor="female">女
</label>
<br>
<inputtype="checkbox"name="hobby"id="cs"value="cs"/><labelfor="cs">CS</label><inputtype="checkbox"name="hobby"id="dnf"checkedvalue="dnf"/><labelfor="dnf">DNF</label>
<inputtype="checkbox"name="hobby"id="lol"checkedvalue="lol"/><labelfor="lol">LOL</label><inputtype="checkbox"name="hobby"id="cf"value="cf"/><labelfor="cf">CF</label><br>
<labelfor="constellation">星座</label>
<selectname="constellation"id="constellation">
<optionvalue="lion">===请选择===</option>
<optionvalue="lion">狮子座</option>
<optionvalue="doubleSon">双子座</option>
<optionvalue="shootMan"selected>射手座</option>
<optionvalue="doublefish">双鱼座</option>
</select><br>
<textareaname="introducemyself"rows="20"cols="20"placeholder="请输入个人介绍..."></textarea><br>
<inputtype="hidden"id="pid"name="pid"value="1001"/>
<labelfor="pic">照片:</label><inputtype="file"name="pic"id="pic"/>
<br>
<inputtype="reset"value="重置"/>
<inputtype="submit"value="提交"/>
<inputtype="image"src="../img/renren.gif"/>
<inputtype="button"value="点击"onclick="alert('我没有提交 打我啊!!');alert('不提交就算了')"/>
<buttontype="button">普通按钮</button>
<buttontype="submit">提交按钮</button>
<buttontype="reset">重置按钮</button>
</form>
</body>
</html>
