jQuery的选择器
jQuery_1.4_API中文版(手册)
一.ID选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的封装原理</title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> //id选择器 function testId() { var inp = $("#uname"); alert(inp); } </script> </head> <body> <h3>jQuery选择器</h3> <input type="button" name="" id="" value="测试ID" onclick="testId()"> <hr> 用户名:<input type="text" name="uname" id="uname" value=""> </body> </html>
—————————————————————————————————————————————————————————————————————————————————————————————————————————— <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的封装原理</title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> //id选择器 function testId() { var inp = $("#uname"); alert(inp.val()); } </script> </head> <body> <h3>jQuery选择器</h3> <input type="button" name="" id="" value="测试ID" onclick="testId()"> <hr> 用户名:<input type="text" name="uname" id="uname" value="张三"> </body> </html>
————————————————————————————————————————————————————
二.标签(元素)选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的封装原理</title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> //标签选择器 function testEle() { var inps = $("input"); alert(inps); alert(inps.length); } </script> </head> <body> <h3>jQuery选择器</h3> <input type="button" name="" id="" value="测试标签选择器" onclick="testEle()"> <hr> 用户名:<input type="text" name="uname" id="uname" value="张三"> </body> </html>
数组的长度为2
——————————————————————————————————————————————————————
三.类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的封装原理</title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> //类选择器 function testClass(){ var inps = $(".common"); alert(inps); alert(inps.length);//数组可以.length } </script> <style type="text/css"> .common{} </style> </head> <body> <h3>jQuery选择器</h3> <input type="button" name="" id="" value="测试标签选择器" onclick="testEle()" class="common"> <input type="button" name="" id="" value="测试类选择器" onclick="testClass()"> <hr> 用户名:<input type="text" name="uname" id="uname" value="张三" class="common"> </body> </html>
四.混合选择器
<script type="text/javascript"> //测试子选择器 function testChild() { var inps = $("div>input"); alert(inps.length); }
</script> <style type="text/css"> .common{} #showdiv{ width: 300px; height: 300px; border: solid 2px orange; } </style>
<input type="button" name="" id="" value="测试子选择器" onclick="testChild()"> <hr> <div id="showdiv"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> </div>
//测试子选择器 //指定某一div下的input元素 function testChild() { var inps = $("#showdiv>input"); alert(inps.length); }
__________________________________________________________________________________________
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的封装原理</title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> //类选择器 function testClass(){ var inps = $(".common"); alert(inps); alert(inps.length);//数组可以.length //组合选择器 function testAll() { var eles = $("h3,input"); alert(eles); } } //测试子选择器 //指定某一div下的input元素 function testChild() { var inps = $("#showdiv>input"); alert(inps.length); } //测试层级选择器 function testCj() { var inp = $("input:first"); alert(inp.val()); } </script> <style type="text/css"> .common{} #showdiv{ width: 300px; height: 300px; border: solid 2px orange; } </style> </head> <body> <h3>jQuery选择器</h3> <input type="button" name="" id="" value="测试标签选择器" onclick="testEle()" class="common"> <input type="button" name="" id="" value="测试类选择器" onclick="testClass()"> <input type="button" name="" id="" value="测试子选择器" onclick="testChild()"> <input type="button" name="" id="" value="测试层级选择器" onclick="testCj()"> <hr> <!--用户名:<input type="text" name="uname" id="uname" value="张三" class="common">--> <div id="showdiv"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> </div> </body> </html>
_______________________________________________________________________________________________
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的封装原理</title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> function testCj2() { var tds = $("td"); alert(tds.length); } </script> </head> <body> <h3>jQuery选择器</h3> <input type="button" name="" id="" value="测试层级选择器" onclick="testCj2()"> <table border="1px" height="300px"> <tr> <td width="100px"></td> <td width="100px"></td> <td width="100px"></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> </body> </html>
现在要去除width=100的td
<script type="text/javascript"> function testCj2() { var tds = $("td:not(td[width])"); alert(tds.length); } </script>
————————————————————————————————————————————————————————
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的封装原理</title> <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript"> function testCj2() { var tds = $("td:not(td[width])"); alert(tds.html()); } </script> </head> <body> <h3>jQuery选择器</h3> <input type="button" name="" id="" value="测试层级选择器-not" onclick="testCj2()"> <table border="1px" height="300px"> <tr> <td width="100px"></td> <td width="100px"></td> <td width="100px"></td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </body> </html>