document有哪些选择器
Jquery\u6709\u54ea\u4e9b\u9009\u62e9\u5668\u9009\u62e9\u5668\u662fjQuery\u6700\u57fa\u7840\u7684\u4e1c\u897f\uff0c\u672c\u6587\u4e2d\u5217\u4e3e\u7684\u9009\u62e9\u5668\u57fa\u672c\u4e0a\u56ca\u62ec\u4e86\u6240\u6709\u7684jQuery\u9009\u62e9\u5668\uff0c\u4e5f\u8bb8\u5404\u4f4d\u901a\u8fc7\u8fd9\u7bc7\u6587\u7ae0\u80fd\u591f\u52a0\u6df1\u5bf9jQuery\u9009\u62e9\u5668\u7684\u7406\u89e3\uff0c\u5b83\u4eec\u672c\u8eab\u7528\u6cd5\u5c31\u975e\u5e38\u7b80\u5355\uff0c\u6211\u66f4\u5e0c\u671b\u7684\u662f\u5b83\u80fd\u591f\u63d0\u5347\u4e2a\u4eba\u7f16\u5199jQuery\u4ee3\u7801\u7684\u6548\u7387\u3002\u672c\u6587\u914d\u5408\u622a\u56fe\u3001\u4ee3\u7801\u548c\u7b80\u5355\u7684\u6982\u62ec\u5bf9\u6240\u6709jQuery\u9009\u62e9\u5668\u8fdb\u884c\u4e86\u4ecb\u7ecd\uff0c\u4e5f\u5217\u4e3e\u51fa\u4e86\u4e00\u4e9b\u9700\u8981\u6ce8\u610f\u548c\u533a\u5206\u7684\u5730\u65b9\u3002\u4e00\u3001\u57fa\u672c\u9009\u62e9\u56681. id\u9009\u62e9\u5668\uff08\u6307\u5b9aid\u5143\u7d20\uff09\u5c06id="one"\u7684\u5143\u7d20\u80cc\u666f\u8272\u8bbe\u7f6e\u4e3a\u9ed1\u8272\u3002\uff08id\u9009\u62e9\u5668\u8fd4\u5355\u4e2a\u5143\u7d20\uff09$(document).ready(function () { $('#one').css('background', '#000'); });2. class\u9009\u62e9\u5668\uff08\u904d\u5386css\u7c7b\u5143\u7d20\uff09\u5c06class="cube"\u7684\u5143\u7d20\u80cc\u666f\u8272\u8bbe\u4e3a\u9ed1\u8272$(document).ready(function () { $('.cube').css('background', '#000'); });3. element\u9009\u62e9\u5668\uff08\u904d\u5386html\u5143\u7d20\uff09\u5c06p\u5143\u7d20\u7684\u6587\u5b57\u5927\u5c0f\u8bbe\u7f6e\u4e3a12px$(document).ready(function () { $('p').css('font-size', '12px'); });4. * \u9009\u62e9\u5668\uff08\u904d\u5386\u6240\u6709\u5143\u7d20\uff09$(document).ready(function () { // \u904d\u5386form\u4e0b\u7684\u6240\u6709\u5143\u7d20\uff0c\u5c06\u5b57\u4f53\u989c\u8272\u8bbe\u7f6e\u4e3a\u7ea2\u8272 $('form *').css('color', '#FF0000'); });5. \u5e76\u5217\u9009\u62e9\u5668$(document).ready(function () { // \u5c06p\u5143\u7d20\u548cdiv\u5143\u7d20\u7684margin\u8bbe\u4e3a0 $('p, div').css('margin', '0'); });\u4e8c\u3001 \u5c42\u6b21\u9009\u62e9\u56681. parent > child\uff08\u76f4\u7cfb\u5b50\u5143\u7d20\uff09$(document).ready(function () { // \u9009\u53d6div\u4e0b\u7684\u7b2c\u4e00\u4ee3span\u5143\u7d20\uff0c\u5c06\u5b57\u4f53\u989c\u8272\u8bbe\u4e3a\u7ea2\u8272 $('div > span').css('color', '#FF0000'); });\u4e0b\u9762\u7684\u4ee3\u7801\uff0c\u53ea\u6709\u7b2c\u4e00\u4e2aspan\u4f1a\u53d8\u8272\uff0c\u7b2c\u4e8c\u4e2aspan\u4e0d\u5c5e\u4e8ediv\u7684\u4e00\u4ee3\u5b50\u5143\u7d20\uff0c\u989c\u8272\u4fdd\u6301\u4e0d\u53d8\u3002 123 456 2. prev + next\uff08\u4e0b\u4e00\u4e2a\u5144\u5f1f\u5143\u7d20\uff0c\u7b49\u540c\u4e8enext()\u65b9\u6cd5\uff09$(document).ready(function () { // \u9009\u53d6class\u4e3aitem\u7684\u4e0b\u4e00\u4e2adiv\u5144\u5f1f\u5143\u7d20 $('.item + div').css('color', '#FF0000'); // \u7b49\u4ef7\u4ee3\u7801 //$('.item').next('div').css('color', '#FF0000');});\u4e0b\u9762\u7684\u4ee3\u7801\uff0c\u53ea\u6709123\u548c789\u4f1a\u53d8\u82721234567893. prev ~ siblings\uff08prev\u5143\u7d20\u7684\u6240\u6709\u5144\u5f1f\u5143\u7d20\uff0c\u7b49\u540c\u4e8enextAll()\u65b9\u6cd5\uff09$(document).ready(function () { // \u9009\u53d6class\u4e3ainside\u4e4b\u540e\u7684\u6240\u6709div\u5144\u5f1f\u5143\u7d20 $('.inside ~ div').css('color', '#FF0000'); // \u7b49\u4ef7\u4ee3\u7801 //$('.inside').nextAll('div').css('color', '#FF0000');});\u4e0b\u9762\u7684\u4ee3\u7801\uff0cG2\u548cG4\u4f1a\u53d8\u8272G1G2G3G4\u4e09\u3001 \u8fc7\u6ee4\u9009\u62e9\u56681. \u57fa\u672c\u8fc7\u6ee4\u9009\u62e9\u5668\u2014\u20141.1 :first\u548c:last\uff08\u53d6\u7b2c\u4e00\u4e2a\u5143\u7d20\u6216\u6700\u540e\u4e00\u4e2a\u5143\u7d20\uff09$(document).ready(function () { $('span:first').css('color', '#FF0000'); $('span:last').css('color', '#FF0000'); });\u4e0b\u9762\u7684\u4ee3\u7801\uff0cG1\uff08first\u5143\u7d20\uff09\u548cG3\uff08last\u5143\u7d20\uff09\u4f1a\u53d8\u8272G1G2G3\u2014\u20141.2 :not\uff08\u53d6\u975e\u5143\u7d20\uff09$(document).ready(function () { $('div:not(.wrap)').css('color', '#FF0000'); });\u4e0b\u9762\u7684\u4ee3\u7801\uff0cG1\u4f1a\u53d8\u8272G1G2\u4f46\u662f\uff0c\u8bf7\u6ce8\u610f\u4e0b\u9762\u7684\u4ee3\u7801\uff1a G1 G2\u5f53G1\u6240\u5728div\u548cG2\u6240\u5728div\u662f\u7236\u5b50\u5173\u7cfb\u65f6\uff0cG1\u548cG2\u90fd\u4f1a\u53d8\u8272\u3002\u2014\u20141.3 :even\u548c:odd\uff08\u53d6\u5076\u6570\u7d22\u5f15\u6216\u5947\u6570\u7d22\u5f15\u5143\u7d20\uff0c\u7d22\u5f15\u4ece0\u5f00\u59cb\uff0ceven\u8868\u793a\u5076\u6570\uff0codd\u8868\u793a\u5947\u6570\uff09$(document).ready(function () { $('tr:even').css('background', '#EEE'); // \u5076\u6570\u884c\u989c\u8272 $('tr:odd').css('background', '#DADADA'); // \u5947\u6570\u884c\u989c\u8272 });A\u3001C\u884c\u989c\u8272#EEE\uff08\u7b2c\u4e00\u884c\u7684\u7d22\u5f15\u4e3a0\uff09\uff0cB\u3001D\u884c\u989c\u8272#DADADA A B C D \u2014\u20141.4 :eq(x) \uff08\u53d6\u6307\u5b9a\u7d22\u5f15\u7684\u5143\u7d20\uff09$(document).ready(function () { $('tr:eq(2)').css('background', '#FF0000'); });\u66f4\u6539\u7b2c\u4e09\u884c\u7684\u80cc\u666f\u8272\uff0c\u5728\u4e0a\u9762\u7684\u4ee3\u7801\u4e2dC\u7684\u80cc\u666f\u4f1a\u53d8\u8272\u3002\u2014\u20141.5 :gt(x)\u548c:lt(x)\uff08\u53d6\u5927\u4e8ex\u7d22\u5f15\u6216\u5c0f\u4e8ex\u7d22\u5f15\u7684\u5143\u7d20\uff09$(document).ready(function () { $('ul li:gt(2)').css('color', '#FF0000'); $('ul li:lt(2)').css('color', '#0000FF'); });L4\u548cL5\u4f1a\u662f\u7ea2\u8272\uff0cL1\u548cL2\u4f1a\u662f\u84dd\u8272\uff0cL3\u662f\u9ed8\u8ba4\u989c\u8272 L1 L2 L3 L4 L5\u2014\u20141.6 :header\uff08\u53d6H1~H6\u6807\u9898\u5143\u7d20\uff09$(document).ready(function () { $(':header').css('background', '#EFEFEF'); });\u4e0b\u9762\u7684\u4ee3\u7801\uff0cH1~H6\u7684\u80cc\u666f\u8272\u90fd\u4f1a\u53d8H1H2H3H4H5H62. \u5185\u5bb9\u8fc7\u6ee4\u9009\u62e9\u5668\u2014\u20142.1 :contains(text)\uff08\u53d6\u5305\u542btext\u6587\u672c\u7684\u5143\u7d20\uff09$(document).ready(function () { // dd\u5143\u7d20\u4e2d\u5305\u542b"jQuery"\u6587\u672c\u7684\u4f1a\u53d8\u8272 $('dd:contains("jQuery")').css('color', '#FF0000'); });\u4e0b\u9762\u7684\u4ee3\u7801\uff0c\u7b2c\u4e00\u4e2add\u4f1a\u53d8\u8272 \u6280\u672f jQuery, .NET, CLR SEO \u5173\u952e\u5b57\u6392\u540d \u5176\u4ed6 \u2014\u20142.2 :empty\uff08\u53d6\u4e0d\u5305\u542b\u5b50\u5143\u7d20\u6216\u6587\u672c\u4e3a\u7a7a\u7684\u5143\u7d20\uff09$(document).ready(function () { $('dd:empty').html('\u6ca1\u6709\u5185\u5bb9');});\u4e0a\u9762\u7b2c\u4e09\u4e2add\u4f1a\u663e\u793a"\u6ca1\u6709\u5185\u5bb9"\u6587\u672c\u2014\u20142.3 :has(selector)\uff08\u53d6\u9009\u62e9\u5668\u5339\u914d\u7684\u5143\u7d20\uff09$(document).ready(function () { // \u4e3a\u5305\u542bspan\u5143\u7d20\u7684div\u6dfb\u52a0\u8fb9\u6846 $('div:has(span)').css('border', '1px solid #000'); });\u5373\u4f7fspan\u4e0d\u662fdiv\u7684\u76f4\u7cfb\u5b50\u5143\u7d20\uff0c\u4e5f\u4f1a\u751f\u6548 A B \u2014\u20142.4 :parent\uff08\u53d6\u5305\u542b\u5b50\u5143\u7d20\u6216\u6587\u672c\u7684\u5143\u7d20\uff09$(document).ready(function () { $('ol li:parent').css('border', '1px solid #000'); });\u4e0b\u9762\u7684\u4ee3\u7801\uff0cA\u548cD\u6240\u5728\u7684li\u4f1a\u6709\u8fb9\u6846 A D3. \u53ef\u89c1\u6027\u8fc7\u6ee4\u9009\u62e9\u5668\u2014\u20143.1 :hidden\uff08\u53d6\u4e0d\u53ef\u89c1\u7684\u5143\u7d20\uff09jQuery\u81f31.3.2\u4e4b\u540e\u7684:hidden\u9009\u62e9\u5668\u4ec5\u5339\u914ddisplay:none\u6216\u7684\u5143\u7d20\uff0c\u800c\u4e0d\u5339\u914dvisibility: hidden\u6216opacity:0\u7684\u5143\u7d20\u3002\u8fd9\u4e5f\u610f\u5473\u7740hidden\u53ea\u5339\u914d\u90a3\u4e9b\u201c\u9690\u85cf\u7684\u201d\u5e76\u4e14\u4e0d\u5360\u7a7a\u95f4\u7684\u5143\u7d20\uff0c\u50cfvisibility:hidden\u6216opactity:0\u7684\u5143\u7d20\u5360\u636e\u4e86\u7a7a\u95f4\uff0c\u4f1a\u88ab\u6392\u9664\u5728\u5916\u3002\u53c2\u7167\uff1ahttp://www.jquerysdk.com/api/hidden-selector\u4e0b\u9762\u7684\u4ee3\u7801\uff0c\u5148\u5f39\u51fa"hello"\u5bf9\u8bdd\u6846\uff0c\u7136\u540ehid-1\u4f1a\u663e\u793a\uff0chid-2\u4ecd\u7136\u662f\u4e0d\u53ef\u89c1\u7684\u3002 div { margin: 10px; width: 200px; height: 40px; border: 1px solid #FF0000; display:block; } .hid-1 { display: none; } .hid-2 { visibility: hidden; } $(document).ready(function() { $('div:hidden').show(500); alert($('input:hidden').val()); }); display: none visibility: hidden \u2014\u20143.2 :visible\uff08\u53d6\u53ef\u89c1\u7684\u5143\u7d20\uff09\u4e0b\u9762\u7684\u4ee3\u7801\uff0c\u6700\u540e\u4e00\u4e2adiv\u4f1a\u6709\u80cc\u666f\u8272 $(document).ready(function() { $('div:visible').css('background', '#EEADBB'); });display: nonevisibility: hidden jQuery\u9009\u62e9\u5668\u5927\u51684. \u5c5e\u6027\u8fc7\u6ee4\u9009\u62e9\u5668\u2014\u20144.1 [attribute]\uff08\u53d6\u62e5\u6709attribute\u5c5e\u6027\u7684\u5143\u7d20\uff09\u4e0b\u9762\u7684\u4ee3\u7801\uff0c\u6700\u540e\u4e00\u4e2aa\u6807\u7b7e\u6ca1\u6709title\u5c5e\u6027\uff0c\u6240\u4ee5\u5b83\u4ecd\u7136\u4f1a\u5e26\u4e0b\u5212\u7ebf $(document).ready(function() { $('a[title]').css('text-decoration', 'none'); }); DOM\u5bf9\u8c61\u548cjQuery\u5bf9\u8c61 jQuery\u9009\u62e9\u5668\u5927\u5168 jQuery\u4e8b\u4ef6\u5927\u5168 \u57fa\u4e8ejQuery\u7684\u63d2\u4ef6\u5f00\u53d1 Wordpress & jQuery \u5176\u4ed6 \u2014\u20144.2 [attribute = value]\u548c[attribute != value]\uff08\u53d6attribute\u5c5e\u6027\u503c\u7b49\u4e8evalue\u6216\u4e0d\u7b49\u4e8evalue\u7684\u5143\u7d20\uff09\u5206\u522b\u4e3aclass="item"\u548cclass!=item\u7684a\u6807\u7b7e\u6307\u5b9a\u6587\u5b57\u989c\u8272
RunJS \u6f14\u793a\u4ee3\u7801jQuery(function($){$("body *:not('.content')").each(function(i,dom){console.log(dom); });}) dd
document选择器常用的有六个，分别是
1、getElementById()
2、getElementsByName()
3、getElementsByTagName()
4、getElementsByClassName()
5、querySelector()
6、querySelectorAll()。
各个选择器的用法：
1、document.querySelector()
querySelector()方法仅仅返回匹配指定选择器的第一个元素。
2、document.getElementById
这个方法将返回一个与之对应id属性的节点对象，它是document对象特有的函数，只能通过其来调用该方法，使用方法下:document.getElementById(‘idName’);
3、getElementsByTagName
这个方法返回一个对象数组（准确的说是htmlCollection集合）,返回元素的顺序是它们在文档中的顺序,传递给getElementsByTagName()方法的字符串可以不区分大小写,使用方法如下:document.getElementsByTagName(tagName);
4、getElementsByClassName
这个方法来获取指定class名的元素,该方法返回文档中所有指定类名的元素集合，作为NodeList对象。NodeList对象代表一个有顺序的节点列表。
NodeList对象我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始),所以有时使用时要指定下标，使用方法如下:document.getElementsByClassName(‘className’);
扩展资料：
选择器的优缺点：
1、querySelector是按css规范来实现的，所以它传入的字符串中第一个字符不能是数字.
2、querySelector()方法返回匹配指定css选择器元素的第一个子元素。该方法只返回匹配指定选择器的第一个元素。如果要返回所有匹配元素，需要使用querySelectorAll()方法替代．
3、query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。静态的就是说选出的所有元素的数组，不会随着文档操作而改变．
绛旓細濡傛灉浣犻渶瑕佷竴缃戞墦灏斤紝document.querySelectorAll鍒欎负浣犳彁渚涗竴涓己澶х殑閫夋嫨鍣锛屾崟鑾锋墍鏈夌鍚堜綘鏉′欢鐨勫厓绱狅紝鍚屾牱浠ョ被鏁扮粍鐨勫舰寮忓憟鐜帮細const elements = document.querySelectorAll('.myClass');杩欐牱锛屼綘灏辫兘瀵规暣涓棌绯昏繘琛屾搷浣滐紝鐏垫椿鑰岄珮鏁堛備絾璇锋敞鎰忥紝杩欎簺鏂规硶杩斿洖鐨勯兘鏄師濮嬬殑DOM鍏冪礌瀵硅薄锛岃岄潪jQuery瀵硅薄...
绛旓細涓婇潰绗笁涓猟d浼氭樉绀"娌℃湁鍐呭"鏂囨湰鈥斺2.3 :has(selector)(鍙閫夋嫨鍣鍖归厤鐨勫厓绱)$(document).ready(function () { // 涓哄寘鍚玸pan鍏冪礌鐨刣iv娣诲姞杈规 $('div:has(span)').css('border', '1px solid #000'); });鍗充娇span涓嶆槸div鐨勭洿绯诲瓙鍏冪礌,涔熶細鐢熸晥 A B 鈥斺2.4 :parent(鍙栧寘鍚瓙鍏冪礌鎴栨枃鏈殑鍏...
绛旓細6銆 document.querySelectorAll(CSS selectors) 路 杩斿洖鏂囨。涓尮閰嶆寚瀹 CSS 閫夋嫨鍣鐨勬墍鏈夊厓绱犵殑闆嗗悎 7銆 document.createAttribute(attributename) 路 鐢ㄤ簬鍒涘缓涓涓寚瀹氬悕绉扮殑灞炴э紝骞惰繑鍥濧ttr 瀵硅薄灞炴 8銆 document.addEventListener(event, function, [useCapture]) 路 鐢ㄤ簬鍚戞枃妗ｆ坊鍔犱簨浠 路...
绛旓細澶栭儴寮曠敤鐨凧S鍙互鐢document锛屼綘鍦ㄥ摢涓〉闈㈠紩鐢ㄨ繖涓狫S锛宒ocument灏辨寚鍝釜椤甸潰鐨勬枃妗ｆ爲銆備綘璇寸殑闂锛屼竴鑸潵鐪嬪簲璇ヨ繕鏄唬鐮侀棶棰橈紝涓嶇煡閬撳叿浣撴庝箞鍐欑殑锛屼絾鏄洿鎺ュ啓xx.value涓鑸潵璁插簲璇ユ槸涓嶅ソ浣跨殑鈥︹﹀缓璁繕鏄敤document.getElementById()鎴栬卝Query鐨勫厓绱閫夋嫨鍣鍚 閭ｄ釜document.getElementsByName()涓鑸槸鑾峰彇澶氫釜...
绛旓細HTML 鐨凞OM querySelector()鏂规硶鍙互涓嶉渶瑕侀澶栫殑jQuery绛夋敮鎸侊紝涔熷彲浠ユ柟渚跨殑鑾峰彇DOM鍏冪礌锛岃娉曡窡jQuery绫讳技銆傝幏鍙栨枃妗ｄ腑id=鈥漜ontainer鈥濈殑鍏冪礌 娉ㄦ剰锛 querySelector() 鏂规硶浠呬粎杩斿洖鍖归厤鎸囧畾閫夋嫨鍣鐨勭涓涓厓绱犮傚鏋滀綘闇瑕佽繑鍥炴墍鏈夌殑鍏冪礌锛岃浣跨敤 querySelectorAll() 鏂规硶鏇夸唬銆傚弬鏁扮被鍨嬪彲浠ヤ负濡備笅锛氭寚瀹...
绛旓細querySelector 鍜 querySelectorAll 浣滀负鏌ユ壘 DOM 鐨勫張涓閫斿緞锛屾瀬澶у湴鏂逛究浜嗗紑鍙戣咃紝浣跨敤瀹冧滑锛屼綘鍙互鍍忎娇鐢 CSS 閫夋嫨鍣涓鏍峰揩閫熷湴鏌ユ壘鍒颁綘闇瑕佺殑鑺傜偣銆傜敤娉曪細document.querySelectorAll("#test")[0];document.querySelectorAll("div.test>p:first-child")[0];document.querySelectorAll( '.test ...
绛旓細()鍦╦query閲岄潰琛ㄧず涓涓閫夋嫨鍣锛屾嫭鍙烽噷闈㈠～鍐欎竴瀹氱殑琛ㄨ揪寮忓氨鍙互閫変腑浣犳兂瑕佺殑鍏冪礌锛宩query鐨勯夋嫨鍣ㄩ櫎浜嗚兘寰堝ソ鍦伴伒寰猚ss鐨勮〃杈惧紡澶栵紝杩橀澶栨彁渚涗簡涓浜涙洿涓у寲鐨勯夋嫨鏂瑰紡锛屾瘮濡$("div li:nth-child(2)")閫変腑鐨勬槸div涓殑绗2涓猯i鍏冪礌銆傚叧浜庨夋嫨鍣ㄧ殑鏇村鐢ㄦ硶鍙互鐧惧害涓涓媕query鐨刟pi (document)鏄竴涓夋嫨鍣...
绛旓細2. selector锛閫夋嫨鍣锛夊拰 data锛堟暟鎹級鏄彲閫夌殑锛'[name="btn-edit"],[name="pub-notice"]' 灏辨槸 selector锛岃繖浜 selector 蹇呴』鏄 document 鐨勫瓙鍏冪礌銆傚彲浠ユ妸 selector 鐞嗚В涓猴紝鍦ㄩ夋嫨浜 document 涔嬪悗锛岃繘琛岀殑鍐嶄竴娆￠夋嫨銆3. 鑷充簬 dlog 鍑芥暟锛宩Query 涓槸娌℃湁瀹氫箟鐨勩備綘鐪嬬湅鏄惁鍦ㄤ唬鐮佸唴鐨...
绛旓細(selector)鏄痡query鐨閫夋嫨鍣,鐢ㄤ簬閫変腑涓涓垨涓缁勯〉闈㈠厓绱(HTML DOM),骞惰繑鍥瀓query瀵硅薄 document灏辨槸HTML DOM Document 瀵硅薄,瀵瑰簲鏁翠釜html鏂囨。,(document)灏辨槸瀵筪ocument鐨刯query鎿嶄綔 鏈甯哥敤鐨勬槸$(document).ready(function(){}),鍗崇粦瀹氭枃妗ｅ姞杞藉畬姣曞悗浜嬩欢 鑰$(document).bind('contextmenu',function(){...
绛旓細涓句釜鏍楀瓙锛document.getElementsByClassName("wrapper");//鍙栧緱DOM涓墍鏈塩lass="wrapper"鐨勫厓绱犺В閲婏細querySelector()鍜宷uerySelectorAll()鏄柊鏍囧噯鐨凷electorsAPI(閫夋嫨绗PI)銆侷E8+銆丗F3.5+銆丼afari3.1+銆丆hrome銆丱pera10+鏀寔querySelector()鎺ュ彈涓涓猚ss閫夋嫨鍣浣滀负鍙傛暟,鐒跺悗杩斿洖DOM涓尮閰嶇殑绗竴涓厓绱...
