这里列举了 属性选择器 和attr的用法 还有子元素的用法
依然是死记硬背 直接粘代码
1）属性选择器 与attr的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='../JS/jquery-1.4.1.js'></script>
<script>
$(function()
{
/* 标签[属性] 查询带有指定属性的标签 */
var $ru= $('div[_PB]');
console.log('Content :', $ru);
/* 标签[属性='值'] 查询带有指定属性等于指定值的标签 */
var $ru= $("input[name='newsletter']");
var $ru= $("input[name='newsletter']").attr("checked",true);
/* 扩展 attr方法 可以获得属性值 */
var $ru= $("input[name='accept']").attr("value");
/* 扩展 attr方法 设置多个属性值 */
var $ru= $("#in1").attr({type:'text',value:"一只小蜜蜂"});
/* 扩展 attr方法 使用function函数 */
var $ru = $("#in2").attr('value',function(){ return '俩只小蜜蜂'});
/* 标签[属性!='值'] 查询指定属性不等于值得标签 */
var $ru= $("input[name!='newsletter']");
/* 标签[属性^='值'] 返回name属性中有news开始的得标签 只能是开头 */
var $ru= $("input[name^='news']");
/* 标签[属性$='值'] 返回name属性中有tter结尾的得标签 只能是结尾 */
var $ru= $("input[name$='tter']");
/* 标签[属性*='值'] 返回name属性中 包含ett */
var $ru= $("input[name*='ett']");
/* 标签[属性][属性='值'] 综合语法 查找 所有input标签里包含ID属性 并且 name属性中包含new的input标签*/
var $ru= $("input[id][name*='new']");
console.log('Content :', $ru);
});
</script>
</head>
<body>
<div>
<p>Hello!</p>
<input >
<input type="hidden">
</div>
<div id="test1"></div>
<div class="class1" _PB='sss'></div>
<div class="class1" ></div>
<form>
<div>
<p><input id='ine' type="checkbox" name="newsletter" value="Car" /> Car</p>
<p><input id='inr' type="checkbox" name="newsletter" value="Cold Fusion" />Cold Fusion</p>
<p><input type="checkbox" name="letternews" value="Cold Fusion" />Cold Fusion</p>
<p><input id='in2' type="text" /></p>
<p><input id="in1" type="checkbox" name="accept" /></p>
</div>
</form>
</body>
</html>
2）子元素（明天在记录 大家情人节快乐）
接着更新：这里主要涉及到（child 与fo-type）的区别 代码后面讲解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src='../JS/jquery-1.4.1.js'></script>
<script>
$(function()
{
/* ：first-child 返回所有ul首个标签是li的标签 与 :first的区别是 它是多项 */
var $re= $("ul li:first-child");
/* :first-of-type 查找所有标签里第一个指定的标签元素 例子 每一个标签中的首个<li>。 */
var $re = $("li:first-of-type").css("background","#EEEE");
/* :last-child 返回所有ul尾个标签是li的标签*/
var $re=$('ul li:last-child');
/* *:last-child 返回所有ul尾标签*/
var $re=$('ul *:last-child');
/* :last-of-type 查找所有标签里最后一个指定的标签元素 例子 每一个标签中的尾个<li>。 */
var $re = $("li:last-of-type").css("background","#EEEE");
/*:nth-child(index) 获得所有指定父标签里 指定位置 指定元素 真绕口（index 包含非指定元素） */
var $re=$("ul li:nth-child(2)");
/*:nth-last-child(index) 获得所有指定父标签里 从后数 第index 的指定元素 （index 包含非指定元素） */
var $re=$("ul li:nth-last-child(1)");
/* :nth-last-of-type(index) 获得所有指定父标签里 从后数 第index 的指定元素 （index 不包含非指定元素）*/
var $re=$("ul li:nth-last-of-type(1)")
/* :nth-of-type(index) 获得所有指定父标签里 第index 的指定元素 （index 不包含非指定元素） */
var $re = $("ul li:nth-of-type(2)");
/* :only-child 返回指定父元素里 只有一个指定子元素并没有其他标签*/
var $re = $("ul li:only-child");
/* :only-of-type 返回指定父元素里 只有一个指定子元素 不在乎有没有其他标签 */
var $re = $("ul li:only-of-type");
console.log('value :', $re);
});
</script>
</head>
<body>
<div>
<ul>
<li>oscar</li>
<li>Arylu</li>
</ul>
<ul>
<li>chen</li>
<li>wang</li>
<li>chen</li>
<input type="text">
</ul>
</ul>
<ul>
<li>only</li>
</ul>
<ul>
<li>only2</li>
<input type="text">
</ul>
</div>
</div>
</body>
</html>
child与of-type 区别
都是查找 多列表中的子标签
1）child 在查找的时候 有index (比如 nth-chlid（index）) 从所有元素开始数 比如
var $re = $("div span:nth-child(1)")
我们这行代码的意思 是 获取所有div标签里 第一位是span的，咱们代码里俩个DIV里 第一个是Span 内容是一只小白兔
第二个是button一只奥特曼 所以 $re里就只有 一个 内容是一只小白兔的Span标签
2）of-type 就不一样了 我们换成of-type
var $re = $("div span:nth-of-type(1)")
我们获得俩个Span标签 一只小白兔 和 一只大灰狼 代码的意思是获取所有DIV标签里 第一个标签是Span的 元素
<div>
<span>一只小白兔</span>
<span>一只小松鼠</span>
<span>王二麻同志</span>
</div>
<div>
<button>一只奥特曼</button>
<span>一只大灰狼</span>
<span>张三同志</span>
</div>
