jQuery对象转换及jQuery选择器
对象转换（指的是DOM对象与jQuery对象之间的转换）
一．DOM对象和jQuery对象
①DOM(Document Object Model，文档对象模型)
{每一份DOM都可以表示成一棵树，我们也很熟悉这种树了}
像<h3><p><ul><li>什么的都是DOM元素节点。
可以通过JavaScript的getElementsByTagName或者getElementById等来获取元素节点。像这样得到的DOM元素就是DOM对象。
②jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象是jQuery独有的。如果一个对象是jQuery对象，就可以使用jQuery里的方法。
二、为什么要转化对象
在jQuery对象中无法使用DOM对象的任何方法
{同时}
DOM对象不能使用jQuery里的方法
{举例innerHTML和html（）}
三．DOM对象与jQuery对象之间的转换
①jQuery对象转换为DOM对象（两种方法）
jQuery对象是一个类数组对象，而DOM对象是一个单独的DOM元素
Ⅰ.通过利用数组下标的方式[index]方法
Var $oDiv=$(“#oDiv”); //jQuery对象
Var oDiv=$oDiv[0]; //DOM对象 Ⅱ.通过jQuery自带的get()方法
Var $oDiv=$(“#oDiv”); //jQuery对象
Var oDiv=$oDiv.get(0); //DOM对象 ②DOM对象转换为jQuery对象
对于一个DOM兑现，值需要用
()把DOM对象包装起来，就可以获得一个jQuery对象了。语法：
(DOM对象)
Var oDiv=document.getElementById(“oDiv”);
Var $oDiv=$(oDiv); <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象转换</title>
<style type="text/css">
#oDiv{
width: 100px;
height: 100px;
font-size: 25px;
border: 2px solid;
}
button{
font-size: 30px;
}
</style>
</head>
<body>
<div id="oDiv">这里有文字</div>
<button onclick=" DOMalert()">点击弹出DOM.innerHTML</button>
<button onclick="jQueryalert()">点击弹出jQuery.html()</button><br><br>
<button onclick="DOMerr()">试试DOM.html()</button>
<button onclick="jQueryerr()">试试jQuery.innerHTML</button><br><br>
<button onclick="oDivDOMM()">jQuery[0].innerHTML</button>
<button onclick="oDivDomm()">jQuery.get(0).innerHTML</button>
<button onclick="oDivjQueryy()">$(DOM).html()</button>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var oDiv=document.getElementById('oDiv');//DOM对象
function DOMalert(){alert(oDiv.innerHTML);}//DOM对象可以使用DOM对象方法
var $oDiv=$('#oDiv');//jQuery对象
function jQueryalert(){alert($oDiv.html());}//jQuery对象可以使用jQuery对象方法
// 试试DOM对象使用jQuery对象方法
function DOMerr(){alert(oDiv.html());}//报错
//试试jQuery对象使用DOM对象方法
function jQueryerr(){alert($oDiv.innerHTML);}//innerHTML是属性，jQuery对象里面无法直接使用原生对象的属性
//会弹出undefined
//jQuery对象转换为DOM对象（两种方法）
//Ⅰ.通过利用数组下标的方式[index]方法
var oDivDOM=$oDiv[0];//DOM对象
function oDivDOMM(){alert(oDivDOM.innerHTML);}
//Ⅱ.通过jQuery自带的get()方法
var oDivDom=$oDiv.get(0);
function oDivDomm(){alert(oDivDom.innerHTML)}
//DOM对象转换为jQuery对象
var $oDivjQuery=$(oDiv);
function oDivjQueryy(){alert($oDivjQuery.html());}
</script>
</body>
</html>jQuery选择器
jQuery选择器完全继承了css风格
{分为}
基本选择器
层次选择器
过滤选择器
表单选择器
一．基本选择器
{最常用，最简单的选择器}
id选择器对应原生的getElementById；（单个元素）
.class选择器对应原生的getElementsByClassName；（集合元素）
元素选择器对应原生的getElementsByTagName；（集合元素）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
font-size: 28px;
color: white;
font-weight: 700;
}
#oDivone{
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
cursor: pointer;
}
.oDivtwo{
width: 200px;
height: 200px;
background-color: #67C6C9;
display: inline-block;
cursor: pointer;
}
p{
width: 200px;
height: 200px;
background-color: #DFD038;
display: inline-block;
cursor: pointer;
}
</style>
</head>
<body>
<div id="oDivone">$("#oDivone")</div>
<div class="oDivtwo">$(".oDivtwo");</div>
<p>$("p");</p>
<button>$("*")</button>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//id选择器
var $oDivone=$("#oDivone");
$oDivone.click(function(){$oDivone.css("background","#841111");});
//class选择器
var $oDivtwo=$(".oDivtwo");
$oDivtwo.click(function(){$oDivtwo.css("background","#0C2490");});
//element选择器
var $p=$("p");
$p.click(function(){$p.css("background","#735810");});
//*
var oo=$("*");
$("button").click(function(){oo.css("color","red");});
</script>
</body>
</html>二．层次选择器
通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等
等价关系：
$（‘prev+next’）与next（）方法等价关系
例
$(‘.one+div’)；等价$（“.One”）.next（“div”）；
$(‘prev～sibings’)选择器与nextAll（）方法的等价关系
例
$(‘#prev～div’)；等价$（“#prev”）.nextAll（“div”）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.mainDiv{
width: 550px;
height: 540px;
margin: 0 auto;
border: 5px solid #AD3838;
background-color: pink;
font-size: 20px;
font-weight: 700;
}
.oDiv{
width: 250px;
height: 250px;
border: 5px solid #1D4797;
display: inline-block;
margin:5px;
background-color: #A2E3EB;
}
.oo{
width: 100px;
height: 100px;
border: 5px solid #168239;
margin: 5px;
display: inline-block;
background-color: #33C95D;
}
.fixed{
position: fixed;
top: 0px;
left: 160px;
}
button{
font-size: 25px;
}
</style>
</head>
<body>
<div class="mainDiv">
<div class="oDiv">
<div class="oo" id="yi">id="yi"</div>
<div class="oo">$("#yi+div")</div>
<div class="oo"></div>
<div class="oo"></div>
</div>
<div class="oDiv">
<div class="oo"></div>
<div class="oo"></div>
<div class="oo"></div>
<div class="oo"></div>
</div>
<div class="oDiv">
<div class="oo"></div>
<div class="oo"></div>
<div class="oo"></div>
<div class="oo"></div>
</div>
<div class="oDiv">
<div class="oo"></div>
<div class="oo"></div>
<div class="oo"></div>
<div class="oo"></div>
</div>
</div>
<div class="fixed">
<button onclick="one()">后代选择器</button><br><br>
<button onclick="two()">子代选择器</button><br><br>
<button onclick="three()">相邻选择器</button><br><br>
<button onclick="forth()">同辈选择器</button><br><br>
<button onclick="fifth()">$("#yi").next("div")</button><br><br>
<button onclick="six()">$("#yi").nextAll("div")</button><br><br>
</div>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var $oDiv=$(".mainDiv div");
function one(){$oDiv.css("background","#841111");}
var $oDivv=$(".mainDiv>div");
function two(){$oDivv.css("background","#841111");}
var $yi=$("#yi+div");
function three(){$yi.css("background","#841111");}
var $hou=$("#yi~div");
function forth(){$hou.css("background","#841111");}
function fifth(){$("#yi").next("div").css("background","#841111");}
function six(){$("#yi").nextAll("div").css("background","#841111");}
</script>
</body>
</html>三.过滤选择器
过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类学则器语法相同。
不同的过滤规则：
基本过滤
内容过滤
可见性过滤
属性过滤
子元素过滤
表单对象属性过滤
（一）基本过滤选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本过滤选择器</title>
<style type="text/css">
li{
width: 800px;
height: 50px;
background-color: pink;
margin: 10px;
list-style: none;
font-size: 30px;
}
.fixed{
height: 300px;
background-color: red;
position: fixed;
top: 0px;
right: 400px;
}
button{
font-size: 30px;
display: block;
}
</style>
</head>
<body>
<ul>
<li></li>
<li class="oLi"> class="oLi"</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="fixed">
<button onclick="one()">$("li:first")</button>
<button onclick="two()">$("li:last")</button>
<button onclick="three()">$("li:not(.oLi)")</button>
<button onclick="forth()">$("li:even")</button>
<button onclick="fifth()">$("li:odd")</button>
<button onclick="ffth()">$("li:eq(5)")</button>
<button onclick="six()">$("li:lt(5)")</button>
</div>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
function one(){$("li:first").css("background","#841111");}
function two(){$("li:last").css("background","#841111");}
function three(){$("li:not(.oLi)").css("background","#841111");}
function forth(){$("li:even").css("background","#841111");}
function fifth(){$("li:odd").css("background","#841111");}
function ffth(){$("li:eq(5)").css("background","#841111");}
function six(){$("li:lt(5)").css("background","#841111");}
</script>
</body>
</html>（二）内容过滤选择器
内容过滤器的过滤规则主要体现在它所包含的子元素或文本内容上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>内容过滤选择器</title>
<style type="text/css">
li{
width: 800px;
height: 50px;
background-color: pink;
margin: 10px;
font-size: 30px;
list-style: none;
}
.fixed{
background-color: red;
position: fixed;
top: 0px;
right: 200px;
}
button{
font-size: 25px;
display: block;
}
</style>
</head>
<body>
<ul>
<li>这里有内容</li>
<li></li>
<li></li>
<li><p>有p元素<p></li>
<li><span>含有span元素</span></li>
</ul>
<div class="fixed">
<button onclick="one()">$("li:contains('这里有内容')")</button>
<button onclick="two()">$("li:empty")</button>
<button onclick="three()">$("li:has(p)")</button>
<button onclick="forth()">$("li:parent")</button>
</div>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
function one(){$("li:contains('这里有内容')").css("background","#3E76C1")}
function two(){$("li:empty").css("background","#3E76C1")}
function three(){$("li:has(p)").css("background","#3E76C1")}
function forth(){$("li:parent").css("background","#3E76C1")}
</script>
</body>
</html> （三）可见性过滤器
根据可不可见状态选择元素
在可见性选择器中，需要注意选择器 :hidden,它不仅包括样式属性display为‘none’的元素，也包括文本隐藏域（<input type=“hidden”/>）和width：0和height：0之类的元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>可见性过滤选择器</title>
<style type="text/css">
li{
width: 800px;
height: 50px;
background-color: pink;
margin: 10px;
list-style: none;
}
button{
font-size: 20px;
}
</style>
</head>
<body>
<ul>
<li style="display: none;">display: none;</li>
<li></li>
<li style="visibility: hidden;">visibility: hidden;</li>
<li></li>
<li></li>
</ul>
<button onclick="one()">$(li:visible)</button>
<button onclick="two()">$("li:hidden")</button>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
function one(){$("li:visible").css("background","#841111")}
function two(){$("li:hidden").show().css("visibility","visible")}
// function two(){console.log($("li:hidden"))}
</script>
</body>
</html>（四）属性过滤选择器
通过元素属性来获取相关元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性过滤选择器</title>
<style type="text/css">
li{
width: 800px;
height: 50px;
list-style: none;
background-color: pink;
margin: 10px;
font-size: 30px;
}
.fixed{
position: fixed;
top: 0px;
right: 400px;
font-size: 30px;
}
button{
font-size: 32px;
display: block;
}
</style>
</head>
<body>
<ul>
<li id="one"> id="one"</li>
<li id="oneone">id="oneone"</li>
<li id="oneonetwo">id="oneonetwo"</li>
<li id="yi"> id="yi"</li>
<li id="er">id="er"</li>
<li></li>
<li id="o">id="o"</li>
<li id="o-ooooo">id="o-ooooo"</li>
<li id="o uu">id="o uu"</li>
</ul>
<div class="fixed">
<button onclick=" first()">$("li[id]")</button><br>
<button onclick="two()">$("li[id=one]")</button><br>
<button onclick="three()">$("li[id!=one]")</button><br>
<button onclick="forth()">$("li[id^=one]")</button><br>
<button onclick="fifth()">$("li[id$=one]")</button><br>
<button onclick="six()">$("li[id*=one]")</button><br>
<button onclick="seven()">$("li[id|=o]")</button><br>
<button onclick="ba()">$("li[id~=uu]")</button><br>
</div>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
function first(){$("li[id]").css("background","#841111");}
function two(){$("li[id=one]").css("background","#841111");}
function three(){$("li[id!=one]").css("background","#841111");}
function forth(){$("li[id^=one]").css("background","#841111");}
function fifth(){$("li[id$=one]").css("background","#841111");}
function six(){$("li[id*=one]").css("background","#841111");}
function seven(){$("li[id|=o]").css("background","#841111");}
function ba(){$("li[id~=uu]").css("background","#841111");}
</script>
</body>
</html>（五）子元素过滤选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子元素过滤选择器</title>
<style type="text/css">
li{
width: 800px;
height: 50px;
background-color: pink;
margin: 10px;
list-style: none;
font-size: 30px;
}
.fixed{
height: 300px;
position: fixed;
top: 0px;
right: 200px;
}
button{
font-size: 32px;
display: block;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<br><br>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<br><br>
<ul>
<li></li>
</ul>
<div class="fixed">
<button onclick="one()">$("li:nth-child(2)")</button>
<button onclick="two()">$("li:eq(2)")</button>
<button onclick="three()">$("li:first-child")</button>
<button onclick="forth()">$("li:last-child")</button>
<button onclick="fifth()">$("li:only-child")</button>
</div>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
function one(){$("li:nth-child(2)").css("background","#841111");}
function two(){$("li:eq(2)").css("background","#841111");}
function three(){$("li:first-child").css("background","#841111");}
function forth(){$("li:last-child").css("background","#841111");}
function fifth(){$("li:only-child").css("background","#841111");}
</script>
</body>
</html>（六）表单对象属性过滤器
主要是通过对所选择的表单元素进行过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单对象属性过滤选择器</title>
<style type="text/css">
.oo{
width: 400px;
height: 50px;
border: 3px solid;
display: block;
margin: 10px;
font-size: 25px;
}
.one{
width: 100px;
height: 50px;
}
.fixed{
height: 300px;
background-color: red;
position: fixed;
top: 0px;
right: 400px;
}
button{
font-size: 30px;
display: block;
}
</style>
</head>
<body>
<form>
<input type="text" value="enabled" class="oo">
<input type="text" value="disabled" disabled="" class="oo">
<input type="text" value="enabled" class="oo">
<input type="text" value="disabled" disabled="" class="oo">
</form>
<input type="checkbox" name="aa" value="已经选中" checked="checked" class="oo">已经选中
<input type="checkbox" name="aa" value="test1" class="oo">test2
<input type="checkbox" name="aa" value="test1" class="oo">test3
<input type="checkbox" name="aa" value="已经选中" checked="checked" class="oo">已经选中
<input type="checkbox" name="aa" value="test1" class="oo">test5
<br><br>
<select class="one">
<option value="选中" selected="selected" class="one">选中</option>
<option value="test" class="one">test</option>
<option value="选中" class="one">选中</option>
<option value="test" class="one">test</option>
<option value="test" class="one">test</option>
</select>
<select class="one">
<option value="选中" selected="selected" class="one">选中</option>
<option value="test" class="one">test</option>
<option value="选中" class="one">选中</option>
<option value="test" class="one">test</option>
<option value="test" class="one">test</option>
</select>
<div class="fixed">
<button onclick="one()">$("input:enabled")</button>
<button onclick="two()">$("input:disabled")</button>
<button onclick="three()">$("input:checked")</button>
<button onclick="forth()">$("option:selected")</button>
</div>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
function one(){$("input:enabled").css("background","#841111");}
function two(){$("input:disabled").css("background","#841111");}
function three(){alert($("input:checked").length);}
function forth(){alert($("option:selected").length);}
</script>
</body>
</html>四．表单选择器
为了使用户能够更加灵活地操作表单，jQuery中专门加入了表单选择器。利用这个选择器，能记起方便地获取到表单的某个或某类型的元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
<style type="text/css">
button{
font-size: 30px;
display: block;
}
</style>
</head>
<body>
<input type="button" value="button" onclick="one()"><br>
<input type="checkbox" name="aa">1
<input type="checkbox" name="aa">2
<input type="checkbox" name="aa">3<br>
<button onclick="two()">$("input:checkbox")</button>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
function one(){$("input:button").css("width","800px");}
function two(){alert($("input:checkbox").length);}
</script>
</body>
</html>五.注意点
1.选择器中含有“.”，“#”。“(”或“]”等特殊字符
如果按照普通方式去处理会出错
应该使用转义符转义在“\\”
例
<div id=“id#aa”>aa<div>
$(“#id#aa”)//出错
$(“#id\\#aa”)//OK2.历史版本遗留问题{其实都可以无视它了，毕竟jQuery的版本已经更新到了3.几，这个1.1.0版本的问题都可以不管了}
属性选择器的@符号问题
正常版本 $(“div[title=‘test’]”);
1.1.0版本 $(“div[@title=‘test’]”);3.选择器中含有空格的注意事项
选择器中，多一个或少一个空格也许会得到不同结果
$(“li：first”);//基本过滤选择器
$(“li ：first”);//后代选择器
2493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
