<html>
<head>
<script type="text/javascript" src="jquery-3.4.1.min.js"> </script>
</head>
<body>
<div class="main">
<div class="header">1
<div class="nav">
<a id="a" href=""><span>首页1</span></a>
<a href=""><span>其它</span></a>
</div>
</div>
<div class="imgs"><a href="">imgs</a></div>
<span>span0</span>
<span>span1</span>
<span>span2</span>
<span>span3</span>
<span>span4</span>
<div>div</div>
</div>
</body>
<script type="text/javascript">
//:eq(#),表示找到相关元素的第几个元素；
var res=$('.nav a:eq(1)');
res.css({color:"blue",background:'yellow'});
//:gt(#)大于#的所有元素；
//:lt(#)小于#的所有元素;
var res=$(".main span:eq(4)");
res.css("background","green");
var res=$(".main span:lt(2)");
res.css("color","pink");
//:first 所有同类 标签/类等 中的第一个标签或类元素/:last 最的一个
var res=$('.nav a:first');
console.log(res.html());
res.css('color','red');
var res=$('.main div:first');
res.css('background-color','#cdcdcd');
console.log(res.html());
//$(prev ~ siblings) 解释：prev: 任何有效的选择器 siblings与prev的同级元素。
//找siblings 元素的同级元素，及兄弟元素
var res=$('.header ~ div');//div,就是要找与含有header类的元素，的同级的div元素
console.log(res.length);
res.css('background-color','green');
//$('*** + xxx') 找紧跟于***[元素、类、ID]等后面的元素xxx
var res=$('.header + div');
console.log(res.length);//imgs
console.log(res.text());
console.log(res.html());
var res=$('#a + a');
console.log(res.length);
console.log(res.text());
console.log(res.html());
//$('*** > xxx') 找父元素***[元素、类、ID]等后面的所有子元素xxx，不包含子元素中的子元素
var res =$('.main>div');//父元素中[.main]的所有[div]子元素，但这种写法很少用
console.log(res.length);
$.each(res,function(i,v){
// console.log($('v').text());
console.log(v);
})
//$('*** xxx') 找父元素***[元素、类、ID]等后面的所有子元素xxx，包含子元素中的子元素
console.log($('.main div').length);//这种方法相对要常见一些
$.each($('.main div'),function(i,v){
// console.log($('v').text());
console.log(v);
})
//:hidden 匹配所有不可见的元素；
//:visible 显示可见元素（不是特别常用）
//显示含有某个属性的 元素
// $('div[flag]')//以数组的形式 即 $('div[###]');
//若要单选 某一个就是 $('div[flag="###"]'),这样子就可以选中指定的，单个；// 支持链式调用
//取反不等于 ！=
//若取反就是 $('div[flag !="###"]'),这样子就可以取反；
//单找某一个属性也可以 写成 $('[class="cccc"]')如：$('[class^="aaa"]'),即找某个以aaa开头的类。
//若是指定某个标签的类以什么开头则是：$('span[class^="aaaa"]');
//若是找某个类以什么结尾的如： $('[class$='aaa']') 或$('span[class$="aaaa"]');
// * 代表 任意字符,即找一个或多个类中包含相关类的就OK 如：$('[class*='aaa']') 或$('span[class*="aaaa"]');
//复合选择器：如：$('[class*="aaa"][name="ccc"]')//这表示同是满足两个条件
//找input 相关的输入框： $(':input'),这样就可以找到input相关的输入的标签了
</script>
</html>
