jQuery\u7684\u7b5b\u9009\u51fd\u6570\u63d0\u4f9b\u4e86\u4e32\u8054\u3001\u67e5\u627e\u548c\u8fc7\u6ee4\u51fd\u6570\uff0c\u4e3a\u6211\u4eec\u7684jQuery\u5bf9\u8c61\u64cd\u4f5c\u5e26\u6765\u4e86\u5f88\u591a\u7684\u65b9\u4fbf\uff0c\u4eca\u5929\u6211\u4eec\u5c31\u6765\u6e29\u4e60\u4e0bjQuery\u5e26\u6765\u7684\u8fd9\u4e9b\u7b5b\u9009\u51fd\u6570\u3002<\/p>\n
1\uff1a\u4e32\u8054\u51fd\u6570\uff1a<\/strong> return\uff1ajQuery\uff1b<\/p>\n explain\uff1a<\/p>\n \u52a0\u5165\u5148\u524d\u6240\u9009\u7684\u52a0\u5165\u5f53\u524d\u5143\u7d20\u4e2d<\/p>\n \u5bf9\u4e8e\u7b5b\u9009\u6216\u67e5\u627e\u540e\u7684\u5143\u7d20\uff0c\u8981\u52a0\u5165\u5148\u524d\u6240\u9009\u5143\u7d20\u65f6\u5c06\u4f1a\u5f88\u6709\u7528\u3002<\/p>\n test\uff1a<\/p>\n <div><p>test<\/p><\/div><\/p>\n example\uff1a<\/p>\n $(\u201cdiv\u201d).find(\u201cp\u201d).andSelf().addClass(\u201cclass1\u201d);<\/p>\n result\uff1a<\/p>\n <div><p class=\u201dclass1\u201d>test<\/p><\/div><\/p>\n (2):end()<\/em><\/p>\n return :jQuery;<\/p>\n explain:<\/p>\n \u56de\u5230\u6700\u8fd1\u7684\u4e00\u4e2a”\u7834\u574f\u6027”\u64cd\u4f5c\u4e4b\u524d\u3002\u5373\uff0c\u5c06\u5339\u914d\u7684\u5143\u7d20\u5217\u8868\u53d8\u4e3a\u524d\u4e00\u6b21\u7684\u72b6\u6001\u3002<\/p>\n \u5982\u679c\u4e4b\u524d\u6ca1\u6709\u7834\u574f\u6027\u64cd\u4f5c\uff0c\u5219\u8fd4\u56de\u4e00\u4e2a\u7a7a\u96c6\u3002\u6240\u8c13\u7684”\u7834\u574f\u6027”\u5c31\u662f\u6307\u4efb\u4f55\u6539\u53d8\u6240\u5339\u914d\u7684jQuery\u5143\u7d20\u7684\u64cd\u4f5c\u3002\u8fd9\u5305\u62ec\u5728 Traversing \u4e2d\u4efb\u4f55\u8fd4\u56de\u4e00\u4e2ajQuery\u5bf9\u8c61\u7684\u51fd\u6570–‘add’, ‘andSelf’, ‘children’, ‘filter’, ‘find’, ‘map’, ‘next’, ‘nextAll’, ‘not’, ‘parent’, ‘parents’, ‘prev’, ‘prevAll’, ‘siblings’ and ‘slice’–\u518d\u52a0\u4e0a Manipulation \u4e2d\u7684 ‘clone’\u3002<\/p>\n test:<\/p>\n <div><p>test<\/p><\/div><\/p>\n example:<\/p>\n $(\u201cdiv\u201d).find(\u201cp\u201d).end();<\/p>\n \/\/$(\u201cdiv\u201d).find(\u201cp\u201d)\uff1a<p>test<\/p><\/p>\n result:<div><p>test<\/p><\/div><\/p>\n 2:\u67e5\u627e\u51fd\u6570:<\/strong> return :jQuery;<\/p>\n explain:<\/p>\n \u628a\u4e0e\u8868\u8fbe\u5f0f\u5339\u914d\u7684\u5143\u7d20\u6dfb\u52a0\u5230jQuery\u5bf9\u8c61\u4e2d\u3002\u8fd9\u4e2a\u51fd\u6570\u53ef\u4ee5\u7528\u4e8e\u8fde\u63a5\u5206\u522b\u4e0e\u4e24\u4e2a\u8868\u8fbe\u5f0f\u5339\u914d\u7684\u5143\u7d20\u7ed3\u679c\u96c6\u3002<\/p>\n test:<\/p>\n <p>test1<\/p><a>test2<\/a><\/p>\n example\uff1a<\/p>\n $(\u201cp\u201d).add(\u201ca\u201d);<\/p>\n result:<\/p>\n [<p>test1<\/p>,<a>test2<\/a>]\/\/\u6570\u7ec4<\/p>\n (2):children([expr]);<\/em><\/p>\n return:jQuery<\/p>\n explain:<\/p>\n \u53d6\u5f97\u4e00\u4e2a\u5305\u542b\u5339\u914d\u7684\u5143\u7d20\u96c6\u5408\u4e2d\u6bcf\u4e00\u4e2a\u5143\u7d20\u7684\u6240\u6709\u5b50\u5143\u7d20\u7684\u5143\u7d20\u96c6\u5408\u3002<\/p>\n \u53ef\u4ee5\u901a\u8fc7\u53ef\u9009\u7684\u8868\u8fbe\u5f0f\u6765\u8fc7\u6ee4\u6240\u5339\u914d\u7684\u5b50\u5143\u7d20\u3002\u6ce8\u610f\uff1aparents()\u5c06\u67e5\u627e\u6240\u6709\u7956\u8f88\u5143\u7d20\uff0c\u800cchildren()\u4e4b\u8003\u8651\u5b50\u5143\u7d20\u800c\u4e0d\u8003\u8651\u6240\u6709\u540e\u4ee3\u5143\u7d20\u3002<\/p>\n test:<\/p>\n <div><span>Hello Again<\/span><\/div><\/p>\n example:<\/p>\n $(\u201cdiv\u201d).children();<\/p>\n result:<span>Hello Again<\/span><\/p>\n (3):find(expr)<\/em><\/p>\n return:jquery<\/p>\n explain:<\/p>\n \u641c\u7d22\u6240\u6709\u4e0e\u6307\u5b9a\u8868\u8fbe\u5f0f\u5339\u914d\u7684\u5143\u7d20\u3002\u8fd9\u4e2a\u51fd\u6570\u662f\u627e\u51fa\u6b63\u5728\u5904\u7406\u7684\u5143\u7d20\u7684\u540e\u4ee3\u5143\u7d20\u7684\u597d\u65b9\u6cd5\u3002<\/p>\n \u6240\u6709\u641c\u7d22\u90fd\u4f9d\u9760jQuery\u8868\u8fbe\u5f0f\u6765\u5b8c\u6210\u3002\u8fd9\u4e2a\u8868\u8fbe\u5f0f\u53ef\u4ee5\u4f7f\u7528CSS1-3\u7684\u9009\u62e9\u5668\u8bed\u6cd5\u6765\u5199\u3002<\/p>\n test:<\/p>\n <p><span>Hello<\/span>, how are you?<\/p><\/p>\n example:<\/p>\n $(“p”).find(“span”);<\/p>\n result:<span>Hello<\/span><\/p>\n (4):next([expr])<\/em><\/p>\n return :jquery<\/p>\n explain:<\/p>\n \u53d6\u5f97\u4e00\u4e2a\u5305\u542b\u5339\u914d\u7684\u5143\u7d20\u96c6\u5408\u4e2d\u6bcf\u4e00\u4e2a\u5143\u7d20\u7d27\u90bb\u7684\u540e\u9762\u540c\u8f88\u5143\u7d20\u7684\u5143\u7d20\u96c6\u5408\u3002<\/p>\n \u8fd9\u4e2a\u51fd\u6570\u53ea\u8fd4\u56de\u540e\u9762\u90a3\u4e2a\u7d27\u90bb\u7684\u540c\u8f88\u5143\u7d20\uff0c\u800c\u4e0d\u662f\u540e\u9762\u6240\u6709\u7684\u540c\u8f88\u5143\u7d20\uff08\u53ef\u4ee5\u4f7f\u7528nextAll\uff09\u3002\u53ef\u4ee5\u7528\u4e00\u4e2a\u53ef\u9009\u7684\u8868\u8fbe\u5f0f\u8fdb\u884c\u7b5b\u9009\u3002<\/p>\n test:<\/p>\n <p><span>Hello<\/span><a>h1<\/a><\/p>;<\/p>\n example:<\/p>\n $(\u201cspan\u201d).next();<\/p>\n result:<a>h1<\/a>;<\/p>\n (5):nextAll([expr])<\/em><\/p>\n return:jQuery<\/p>\n explain:\u67e5\u627e\u5f53\u524d\u5143\u7d20\u4e4b\u540e\u6240\u6709\u7684\u540c\u8f88\u5143\u7d20\u3002<\/p>\n test:<div>h1<\/div><div>h2<\/div><div>h3<\/div>;<\/p>\n example:<\/p>\n $(\u201cdiv:first\u201d).nextAll();<\/p>\n result:<div>h2<div>,<div>h3<\/div>;:<\/p>\n (6):offsetParent()<\/em><\/p>\n return :jQuery<\/p>\n explain:<\/p>\n \u8fd4\u56de\u7b2c\u4e00\u4e2a\u5339\u914d\u5143\u7d20\u7528\u4e8e\u5b9a\u4f4d\u7684\u7236\u8282\u70b9\u3002<\/p>\n \u8fd9\u8fd4\u56de\u7236\u5143\u7d20\u4e2d\u7b2c\u4e00\u4e2a\u5176position\u8bbe\u4e3arelative\u6216\u8005absolute\u7684\u5143\u7d20\u3002\u6b64\u65b9\u6cd5\u4ec5\u5bf9\u53ef\u89c1\u5143\u7d20\u6709\u6548\u3002<\/p>\n (7):parent([expr])<\/em><\/p>\n return:jQuery<\/p>\n explain:<\/p>\n \u53d6\u5f97\u4e00\u4e2a\u5305\u542b\u7740\u6240\u6709\u5339\u914d\u5143\u7d20\u7684\u552f\u4e00\u7236\u5143\u7d20\u7684\u5143\u7d20\u96c6\u5408\u3002<\/p>\n \u4f60\u53ef\u4ee5\u4f7f\u7528\u53ef\u9009\u7684\u8868\u8fbe\u5f0f\u6765\u7b5b\u9009\u3002<\/p>\n test:<\/p>\n <div><p>Hello<\/p><p>Hello<\/p><\/div><\/p>\n example:<\/p>\n $(\u201cp\u201d).parent();<\/p>\n result:<div><p>Hello<\/p><p>Hello<\/p><\/div>;<\/p>\n (8):parents([expr])<\/em><\/p>\n return:jquery;<\/p>\n explain:\u53d6\u5f97\u4e00\u4e2a\u5305\u542b\u7740\u6240\u6709\u5339\u914d\u5143\u7d20\u7684\u7956\u5148\u5143\u7d20\u7684\u5143\u7d20\u96c6\u5408\uff08\u4e0d\u5305\u542b\u6839\u5143\u7d20\uff09\u3002<\/p>\n test:<\/p>\n <body><div><p><span>Hello<\/span><\/p><span>Hello Again<\/span><\/div><\/body><\/p>\n example:$(\u201cspan\u201d).parents(\u201cp\u201d);<\/p>\n result:<p><span><Hello><\/span><\/p><\/p>\n (9):prev([expr])<\/em><\/p>\n return:jquery<\/p>\n explain:<\/p>\n \u53d6\u5f97\u4e00\u4e2a\u5305\u542b\u5339\u914d\u7684\u5143\u7d20\u96c6\u5408\u4e2d\u6bcf\u4e00\u4e2a\u5143\u7d20\u7d27\u90bb\u7684\u524d\u4e00\u4e2a\u540c\u8f88\u5143\u7d20\u7684\u5143\u7d20\u96c6\u5408\u3002<\/p>\n \u53ef\u4ee5\u7528\u4e00\u4e2a\u53ef\u9009\u7684\u8868\u8fbe\u5f0f\u8fdb\u884c\u7b5b\u9009\u3002\u53ea\u6709\u7d27\u90bb\u7684\u540c\u8f88\u5143\u7d20\u4f1a\u88ab\u5339\u914d\u5230\uff0c\u800c\u4e0d\u662f\u524d\u9762\u6240\u6709\u7684\u540c\u8f88\u5143\u7d20\u3002<\/p>\n test:<\/p>\n <div><span>Hello Again<\/span><\/div><p>And Again<\/p><\/p>\n example:<\/p>\n $(\u201cp\u201d).prev();<\/p>\n result:<div><span>Hello Again<\/span><\/div>;<\/p>\n (9):prevAll([expr])<\/em><\/p>\n return:jQuery<\/p>\n explain:<\/p>\n \u67e5\u627e\u5f53\u524d\u5143\u7d20\u4e4b\u524d\u6240\u6709\u7684\u540c\u8f88\u5143\u7d20;<\/p>\n test:<\/p>\n <div><\/div><div><\/div><div><\/div><div><\/div><\/p>\n example:<\/p>\n $(\u201cdiv:last\u201d).prevAll();<\/p>\n result:<div><\/div><div><\/div><div><\/div><\/p>\n (10):siblings([expr])<\/em><\/p>\n return :jquery<\/p>\n explain:<\/p>\n \u53d6\u5f97\u4e00\u4e2a\u5305\u542b\u5339\u914d\u7684\u5143\u7d20\u96c6\u5408\u4e2d\u6bcf\u4e00\u4e2a\u5143\u7d20\u7684\u6240\u6709\u552f\u4e00\u540c\u8f88\u5143\u7d20\u7684\u5143\u7d20\u96c6\u5408\u3002<\/p>\n test:<\/p>\n <p>Hello<\/p><div><span>Hello Again<\/span><\/div><p>And Again<\/p><\/p>\n example:$(“div”).siblings()<\/p>\n result:<\/p>\n [ <p>Hello<\/p>, <p>And Again<\/p> ]<\/p>\n 3:\u8fc7\u6ee4\u51fd\u6570\uff1a<\/strong> return:jQuery<\/p>\n explain:\u83b7\u53d6\u7b2cN\u4e2a\u5143\u7d20.\u8fd9\u4e2a\u5143\u7d20\u7684\u4f4d\u7f6e\u662f\u4ece0\u7b97\u8d77\u3002<\/p>\n test:<p> This is just a test.<\/p> <p> So is this<\/p><\/p>\n example:$(\u201cp\u201d).eq(1);<\/p>\n result:<p> So is this<\/p><\/p>\n (2):filter(expr)<\/em><\/p>\n return:jQuery<\/p>\n explain:<\/p>\n \u7b5b\u9009\u51fa\u4e0e\u6307\u5b9a\u8868\u8fbe\u5f0f\u5339\u914d\u7684\u5143\u7d20\u96c6\u5408\u3002<\/p>\n \u8fd9\u4e2a\u65b9\u6cd5\u7528\u4e8e\u7f29\u5c0f\u5339\u914d\u7684\u8303\u56f4\u3002\u7528\u9017\u53f7\u5206\u9694\u591a\u4e2a\u8868\u8fbe\u5f0f<\/p>\n test:<\/p>\n <p>Hello<\/p><p>Hello Again<\/p><p class=”selected”>And Again<\/p><\/p>\n example:<\/p>\n $(“p”).filter(“.selected”);<\/p>\n result:<\/p>\n <p class=”selected”>And Again<\/p><\/p>\n (3):filter(fn)<\/em><\/p>\n return:jquery<\/p>\n explain:<\/p>\n \u7b5b\u9009\u51fa\u4e0e\u6307\u5b9a\u51fd\u6570\u8fd4\u56de\u503c\u5339\u914d\u7684\u5143\u7d20\u96c6\u5408<\/p>\n test:<\/p>\n <p><ol><li>Hello<\/li><\/ol><\/p><p>How are you?<\/p><\/p>\n example:<\/p>\n $(“p”).filter(function(index) { result:<\/p>\n <p>How are you?<\/p><\/p>\n (4):hasClass(class)<\/em><\/p>\n return:jQuery<\/p>\n explain:<\/p>\n \u68c0\u67e5\u5f53\u524d\u7684\u5143\u7d20\u662f\u5426\u542b\u6709\u67d0\u4e2a\u7279\u5b9a\u7684\u7c7b\uff0c\u5982\u679c\u6709\uff0c\u5219\u8fd4\u56detrue\u3002\u8fd9\u5176\u5b9e\u5c31\u662f is(“.” + class)\u3002<\/p>\n test:<\/p>\n <div class=”protected”><\/div><div><\/div><\/p>\n example:<\/p>\n $(\u201cdiv\u201d).hasClass(“protected”)<\/p>\n result:<\/p>\n true<\/p>\n (5):is(expr)<\/em><\/p>\n return:jquery<\/p>\n explain:<\/p>\n \u7528\u4e00\u4e2a\u8868\u8fbe\u5f0f\u6765\u68c0\u67e5\u5f53\u524d\u9009\u62e9\u7684\u5143\u7d20\u96c6\u5408\uff0c\u5982\u679c\u5176\u4e2d\u81f3\u5c11\u6709\u4e00\u4e2a\u5143\u7d20\u7b26\u5408\u8fd9\u4e2a\u7ed9\u5b9a\u7684\u8868\u8fbe\u5f0f\u5c31\u8fd4\u56detrue\u3002<\/p>\n test:<\/p>\n <form><input type=”checkbox” \/><\/form><\/p>\n explam:<\/p>\n $(“input[type=’checkbox’]”).parent().is(“form”)<\/p>\n result:<\/p>\n true;<\/p>\n (6):map(callback)<\/em><\/p>\n return:jQuery<\/p>\n explain:<\/p>\n \u5c06\u4e00\u7ec4\u5143\u7d20\u8f6c\u6362\u6210\u5176\u4ed6\u6570\u7ec4\uff08\u4e0d\u8bba\u662f\u5426\u662f\u5143\u7d20\u6570\u7ec4);<\/p>\n test:<\/p>\n <p><b>Values: <\/b><\/p> explam:<\/p>\n $(“p”).append( $(“input”).map(function(){ result:<\/p>\n
\uff081\uff09\uff1aandSelf()<\/em><\/p>\n
(1):add(exp);<\/em><\/p>\n
(1):eq(insex);<\/em><\/p>\n
return $(“ol”, this).length == 0;
});<\/p>\n
<form>
<input type=”text” name=”name” value=”John”\/>
<input type=”text” name=”password” value=”password”\/>
<input type=”text” name=”url” value=”http:\/\/ejohn.org\/<\/a>“\/>
<\/form><\/p>\n
return $(this).val();
}).get().join(“, “) );<\/p>\n