Mình xin giới thiệu đến các bạn toàn tập tịch tà kiếm phổ jQuery thường được sử dụng, chi tiết nhất
Mình xin tiếp tục giới thiệu đến các bạn p2 của loạt bài bế quan luyện công jQuery, bạn nào chưa xem phần 1 thì hãy xem lại tại link này
Ở phần trước chúng ta đã đi qua những hàm cơ bản, hay sử dụng nhất của jQuery loạt bài này mình van~ tiếp tục với những hàm hay ho của jQuery:
Truy cập vào các phần tử:
- Ví dụ ta có một đoạn HTML như sau, giờ ta muốn từ #here và muốn truy cập vào thằng parent gần nhất.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> Ông cố nó <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> Ông nội nó <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>li-tag<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Cha nó <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>here<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>p-here<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Bắt đầu từ đây<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>here<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Bắt đầu từ đây<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>empty text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
ta làm như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token function">$</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#here'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">parent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => element gần nó nhất <li></li></span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#here'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">children</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => element con của nó <p></p></span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#here'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">parents</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => danh sách các ele là cha nó ( bao gồm cả <body> và <html>)</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#here'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">parents</span><span class="token punctuation">(</span><span class="token string">'tag_name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => hoặc như này để lấy những tag name chỉ định</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#here'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">parentsUntil</span><span class="token punctuation">(</span><span class="token string">'tag_name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => hoặc như này để lấy những tag name cho</span> <span class="token comment">// đến tag_name chỉ định</span> <span class="token comment">// Ta cũng có thể thêm effect hoặc các method khác vào sau :</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#here'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">parents</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hide</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#here'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">parents</span><span class="token punctuation">(</span><span class="token string">'tag_name'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">slideUp</span><span class="token punctuation">(</span><span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#here'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">parentsUntil</span><span class="token punctuation">(</span><span class="token string">'tag_name'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token string">"color"</span><span class="token operator">:</span> <span class="token string">"red"</span><span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// Hoặc find element nào đó</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#li-tag'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'span'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => danh sách các span là con của nó</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#li-tag'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'span.here'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => danh sách các span có class here là con nó</span> <span class="token comment">// hoặc</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#li-tag'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">':contains(đây)'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// hồm 1 element chứa ele có từ đây</span> <span class="token comment">// và list ele chứa từ đây</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#li-tag'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'p:contains(đây)'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// list ele <p></p> chứa từ đây</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
Ngoài ra các bạn có thể laasy các selector của form dễ dàng như sau :
1 2 3 4 5 6 7 8 9 10 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/action_page.php<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>username<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>password<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox1<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox1<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Bike<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox2<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox2<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Bike<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>file<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Reset<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Submit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> |
1 2 3 4 5 6 7 | <span class="token comment">// Với các loại input t có các cách lấy như sau </span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':text'</span><span class="token punctuation">)</span> <span class="token comment">// cho input có type là text</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':password'</span><span class="token punctuation">)</span> <span class="token comment">// cho input có type là password</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':checked'</span><span class="token punctuation">)</span> <span class="token comment">// cho input có type là checkbox và đã đc checked</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">':submit'</span><span class="token punctuation">)</span> <span class="token comment">// cho input có type là submit</span> <span class="token comment">// tương tự các loại còn lại</span> |
Thêm elements
- Ở bài trước chúng ta đã tìm hiểu các loại như : append, after, before, prepend… với bài này mình sẽ chỉ cho các bạn những cách khác để tùy hoafn cảnh sử dụng
1 2 3 4 5 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>here<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Div1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>here<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Div2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
1 2 3 4 5 6 7 8 9 | <span class="token comment">// Bây giờ ta muốn thêm 1 thẻ để bọc ngoài các element có class là here</span> <span class="token comment">// rất nhiều cách để sử dụng nhưn rất dài dòng đơn giản với wrap() t làm như sau:</span> <span class="token function">$</span><span class="token punctuation">(</span> <span class="token string">".here"</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">wrap</span><span class="token punctuation">(</span> <span class="token string">"<div class='here-1'></div>"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ngược với nó ta cũng có : </span> <span class="token function">$</span><span class="token punctuation">(</span> <span class="token string">".here"</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">unwrap</span><span class="token punctuation">(</span> <span class="token string">"<div class='here-1'></div>"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// hoặc nhét nó vào trong không muốn nó ở ngoài</span> <span class="token function">$</span><span class="token punctuation">(</span> <span class="token string">".here"</span> <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">wrapInner</span><span class="token punctuation">(</span> <span class="token string">"<div class='here-1'></div>"</span> <span class="token punctuation">)</span><span class="token punctuation">;</span> |
- Và kết quả như này, rất nhanh và gọn
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <span class="token comment"><!-- wrap() --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>here-1<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>here<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Div1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>here-1<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>here<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Div2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token comment"><!-- và đường nhiên unwrap sẽ trở về ban đầu --></span> <span class="token comment"><!-- wrapInner() --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>here<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>here-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Div1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>here<span class="token punctuation">'</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>here-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Div2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
loại bỏ các phần tử trùng không cần thiết:
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">const</span> jq <span class="token operator">=</span> $<span class="token punctuation">.</span><span class="token function">noConflict</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">jq</span><span class="token punctuation">(</span>document<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">ready</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token function">jq</span><span class="token punctuation">(</span><span class="token string">"button"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">click</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> <span class="token function">jq</span><span class="token punctuation">(</span><span class="token string">".here"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// => <div class="container"></div></span> <span class="token comment">//</span> |
Loop các elements
1 2 3 4 5 6 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Coffee<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Milk<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Soda<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"li"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">index<span class="token punctuation">,</span> item</span><span class="token punctuation">)</span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token operator"><</span>li<span class="token operator">></span><span class="token operator">...</span><span class="token operator"><</span>li<span class="token operator">></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token parameter"><span class="token function">$</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token constant">S</span><span class="token punctuation">.</span>fn<span class="token punctuation">.</span>init <span class="token punctuation">[</span>li<span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// hoặc </span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"li"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token parameter"><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span></span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token constant">S</span><span class="token punctuation">.</span>fn<span class="token punctuation">.</span>init <span class="token punctuation">[</span>li<span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ngoài ra cũng có thể chuyển nó thành array</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"li"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toArray</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span>li<span class="token punctuation">,</span> li<span class="token punctuation">,</span> li<span class="token punctuation">]</span> <span class="token comment">// với từng li là 1 element</span> |
Dường như quả đủ các cách tương tác với element rồi nhỉ, đến đây sẽ là ajax và cách sử dụng chúng
- Với khái niệm thì các bạn tìm trên gg chắc đầy ra, ở đây mình chỉ muốn nói đến các bạn công dụng của nó là t lấy một phần data từ phía server mà không cần load lại trang và hiển thị chúng lên trình duyệt.
$.get()
- Với các chức năng get data đơn giản, t chỉ cần sử dụng phương thức này rất nhanh và tiện
- Cách hoạt động chính là t chỉ cần truyền 1URL và tham số thứ nhất, data trả về trong function() hoặc 1 Promise
- Với tham số thứ 2 là tùy chọn, nếu k có t có thể bỏ luôn function() return ở đây
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token constant">URL</span><span class="token punctuation">,</span>data<span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span>status<span class="token punctuation">,</span>xhr</span><span class="token punctuation">)</span><span class="token punctuation">,</span>dataType<span class="token punctuation">)</span> <span class="token comment">// với rất nhiều cách để call với $.get() này:</span> $<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'demo.php'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span>status<span class="token punctuation">,</span>xhr</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// or</span> status <span class="token operator">===</span> <span class="token number">200</span> <span class="token operator">?</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'success'</span><span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'something'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// hoặc sử dụng như cách này</span> $<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'demo.php'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span> <span class="token parameter">res</span> <span class="token operator">=></span> <span class="token function">alert</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// Bạn có thể sử dụng cách nào nếu bạn muốn</span> |
$.post()
- Có get thì chắc phải có post rồi phải không ?
- Với các tham số và cách hđ thì như $.get nhưng nó được dùng cho mục đích post data lên server
1 2 3 4 5 6 7 8 9 | $<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token constant">URL</span><span class="token punctuation">,</span>data<span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data<span class="token punctuation">,</span>status<span class="token punctuation">,</span>xhr</span><span class="token punctuation">)</span><span class="token punctuation">,</span>dataType<span class="token punctuation">)</span> <span class="token comment">// và cách sử dụng cũng tương tự get.</span> $<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">"post-data.php"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'something'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token parameter">res</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// với callback trả về t có 3 tham số, mặc định t để tham số nhất </span> <span class="token comment">// nó sẽ tự biết là response từ server nhé $.get cũng vậy</span> <span class="token comment">// và cách sd thứ 2 cũng tư tự get();</span> |
$.ajax();
- Với những hàm $.get và $.post ta chỉ làm việc với những thao tác cơ bản, vậy $.ajax() làm được những gì
- Thật ra nó cũng như 2 hàm kia nhưng có nhiều option hơn để chúng ta sd theo nhiều cách
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <span class="token comment">// cách sử dụng cơ bản</span> $<span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span>url<span class="token operator">:</span> <span class="token string">"demo.php"</span><span class="token punctuation">,</span> <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token parameter">res</span> <span class="token operator">=></span> <span class="token function">alert</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ơ thế thì nó i chang thằng $.get rồi còn đâu ?</span> $<span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span> url<span class="token operator">:</span> <span class="token string">"post-data.php"</span><span class="token punctuation">,</span> data<span class="token operator">:</span> <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'something'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> method<span class="token operator">:</span> <span class="token string">'POST'</span><span class="token punctuation">,</span> <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token parameter">res</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// thằng này cũng vậy? khác gì thằng post trên đâu, dài dòng vcl </span> <span class="token comment">// khoan đã nhé với các method khác như </span> <span class="token comment">// và đây là những option mình hay sử dụng chứ kh phải dừng tại đây</span> $<span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span> url<span class="token operator">:</span> <span class="token string">"post-data.php"</span><span class="token punctuation">,</span> data<span class="token operator">:</span> <span class="token punctuation">{</span>name<span class="token operator">:</span> <span class="token string">'something'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> method<span class="token operator">:</span> <span class="token string">'POST/PUT/PATCH/DELETE'</span><span class="token punctuation">,</span> <span class="token comment">// đề có thể sử dụng</span> <span class="token function-variable function">beforeSend</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// ta làm cái gì đó trước khi data đc gửi đi</span> <span class="token comment">// ví dụ ta thêm loading vô chẳng hạn !</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> dataType<span class="token operator">:</span> <span class="token string">'JSON/HTML/SCRIPT...'</span><span class="token punctuation">,</span> <span class="token comment">// khai báo dữ liệu trả về</span> <span class="token function-variable function">success</span><span class="token operator">:</span> <span class="token parameter">res</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function-variable function">error</span><span class="token operator">:</span> <span class="token parameter">err</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ngoài ra chúng t cũng os thể sử dụng nó như $.get, $.post với cách dùng kia</span> <span class="token keyword">const</span> xhr <span class="token operator">=</span> $<span class="token punctuation">.</span><span class="token function">ajax</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> xhr<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// hoặc</span> xhr<span class="token punctuation">.</span><span class="token function">done</span><span class="token punctuation">(</span><span class="token parameter">e</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>e<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">fail</span><span class="token punctuation">(</span><span class="token parameter">err</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token comment">//ngoài ra với các cách trên t có thêm</span> <span class="token punctuation">.</span><span class="token function">always</span><span class="token punctuation">(</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// sẽ luôn chạy với mỗi xhr được send đi</span> <span class="token comment">// tham khảo thêm tại đây : https://www.w3schools.com/jquery/ajax_ajax.asp</span> |