Hướng Dẫn Cài đặt Và Sử Dụng | JQuery | Học Web Chuẩn

Trang chủ » Cách Sử Dụng Jquery Trong Html » Hướng Dẫn Cài đặt Và Sử Dụng | JQuery | Học Web Chuẩn

Có thể bạn quan tâm

Hướng dẫn cài đặt và sử dụng
  • Trang chủ
  • Tham khảo
  • jQuery
  • Hướng dẫn cài đặt và sử dụng

Hướng dẫn cài đặt

  • Chúng ta có thể download phiên bản mới nhất tại: http://jquery.com/download/, sử dụng tag <script> kết nối file jquery nội dung như sau:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tiêu đề</title> <script src="jquery.js"></script> <script> //Code jquery viết ở đây... </script> </head> <body> //Code html viết ở đây... </body> </html>

Nếu không muốn download, chúng ta có thể kết nối file jquery tới file html thông qua một số cách sau:

  • Kết nối trực tiếp từ trang web jquery với phiên bản mới nhất: https://code.jquery.com/jquery-latest.js.

<script src="https://code.jquery.com/jquery-latest.js"></script>

  • Sử dụng CDN Google: tất cả phiên bản jquery có sẵn tại đây: https://developers.google.com/speed/libraries/devguide?hl=vi#jquery
  • Sử dụng CDN Microsoft: tất cả phiên bản jquery có sẵn tại đây: http://www.asp.net/ajaxlibrary/cdn.ashx

Hướng dẫn sử dụng

Có 2 cách viết một nội dung jquery:

  • Viết nội dung jquery bên trong một $(document).ready(), điều này sẽ giúp cho đoạn script chạy sau khi các đoạn code trong file html đã được load xong, không bao gồm việc load các liên kết ngoài như image, iframe, file css, file script,...

$(document).ready(function(){ //Nội dung jquery viết ở đây... });

Chúng ta có thể viết gọn lại như sau:

$(function(){ //Nội dung jquery viết ở đây... });

  • Viết nội dung jquery bên trong $(window).load(), điều này sẽ giúp cho đoạn script chạy khi toàn bộ trang web đã được load xong, bao gồm tất cả image, iframe, và cả các liên kết ngoài.

$(window).load(function(){ //Nội dung jquery viết ở đây... });

Ví dụ đơn giản sử dụng jquery

Html viết:

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Tiêu đề</title> <script src="https://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $('p').css('color','#ff0000'); }); </script> </head> <body> <p>hocwebchuan</p> </body> </html>

Hiển thị trình duyệt:

hocwebchuan

Link liên quan

  • <p></p>

Bộ chọn jQuery (selector)

HTML & XHTML

HƯỚNG DẪN HỌC

  • Hướng dẫn học
  • Hướng dẫn học XHTML & HTML5
  • Hướng dẫn học CSS
  • Hướng dẫn học CSS3
  • Hướng dẫn học Responsive
  • Hướng dẫn học ES6
  • Hướng dẫn học React.js
  • Hướng dẫn học jQuery
  • Hướng dẫn học PHP
  • Hướng dẫn học Laravel
  • Hướng dẫn học Wordpress
  • Hướng dẫn học Webpack
  • Hướng dẫn học SCSS

THAM KHẢO

Bộ chọn jQuery (Selectors)

  • $('*')
  • $('tag')
  • $('tag.tênclass')
  • $('tag#tênid')
  • $('selector1, selector2, selectorN')
  • $('parent > child')
  • $('tag:eq()')
  • $('tag:gt()')
  • $('tag:lt()')
  • $('tag:even')
  • $('tag:odd')
  • $('tag:first')
  • $('tag:last')
  • $('tag:first-child')
  • $('tag:first-of-type')
  • $('tag:last-child')
  • $('tag:last-of-type')
  • $('tag:nth-child()')
  • $('tag:nth-last-child()')
  • $('tag:nth-of-type()')
  • $('tag:nth-last-of-type()')
  • $('tag:only-child')
  • $('tag:only-of-type')
  • $('tag:animated')
  • $('tag[attribute]')
  • $('tag[attribute="value"]')
  • $('tag[attribute!="value"]')
  • $('tag[attribute|="value"]')
  • $('tag[attribute^="value"]')
  • $('tag[attribute$="value"]')
  • $('tag[attribute*="value"]')
  • $('tag[attribute~="value"]')
  • $('tag:lang(language)')
  • $(tag[bộ chọn thuộc tính 1][bộ chọn thuộc tính n])
  • $('tag:parent')
  • $('tag:empty')
  • $('tag:text')
  • $('tag:button')
  • $('tag:checkbox')
  • $('tag:checked')
  • $('tag:disabled')
  • $('tag:enabled')
  • $('tag:file')
  • $('tag:focus')
  • $('tag:hidden')
  • $('tag:image')
  • $('tag:input')
  • $('tag:password')
  • $('tag:radio')
  • $('tag:reset')
  • $('tag:selected')
  • $('tag:submit')
  • $('tag:visible')
  • $('tag:root')
  • $('tag:has(selector)')
  • $('tag:header')
  • $('prev + next')
  • $('prev ~ siblings"')
  • $('tag:not(selector)')
  • $('tag:contains(text)')

Hàm jQuery (Selectors)

  • .add()
  • .addBack()
  • .addClass()
  • .after()
  • .andSelf()
  • .animate()
  • .append()
  • .appendTo()
  • .attr()
  • .before()
  • .bind()
  • .blur()
  • .change()
  • .children()
  • .clearQueue()
  • .click()
  • .clone()
  • .closest()
  • .contents()
  • .context
  • .css()
  • .dblclick()
  • .delay()
  • .delegate()
  • .dequeue()
  • .detach()
  • .die()
  • .each()
  • .empty()
  • .end()
  • .eq()
  • .error()
  • .fadeIn()
  • .fadeOut()
  • .fadeTo()
  • .fadeToggle()
  • .filter()
  • .find()
  • .finish()
  • .first()
  • .focus()
  • .focusin()
  • .focusout()
  • .get()
  • .has()
  • .hasClass()
  • .height()
  • .hide()
  • .hover()
  • .html()
  • .index()
  • .innerHeight()
  • .innerWidth()
  • .insertAfter()
  • .insertBefore()
  • .is()
  • .jquery
  • .keydown()
  • .keypress()
  • .keyup()
  • .last()
  • .length
  • .live()
  • .load()
  • .map()
  • .mousedown()
  • .mouseenter()
  • .mouseleave()
  • .mousemove()
  • .mouseout()
  • .mouseover()
  • .mouseup()
  • .next()
  • .nextAll()
  • .nextUntil()
  • .not()
  • .off()
  • .offset()
  • .offsetParent()
  • .on()
  • .one()
  • .outerHeight()
  • .outerWidth()
  • .parent()
  • .parents()
  • .parentsUntil()
  • .position()
  • .prepend()
  • .prependTo()
  • .prev()
  • .prevAll()
  • .prevUntil()
  • .remove()
  • .removeAttr()
  • .removeClass()
  • .removeData()
  • .removeProp()
  • .replaceAll()
  • .replaceWith()
  • .resize()
  • .scroll()
  • .scrollLeft()
  • .scrollTop()
  • .select()
  • .selector()
  • .serialize()
  • .serializeArray()
  • .show()
  • .siblings()
  • .size()
  • .slice()
  • .slideDown()
  • .slideToggle()
  • .slideUp()
  • .stop()
  • .submit()
  • .text()
  • .toArray()
  • .toggle()
  • .toggleClass()
  • .trigger()
  • .triggerHandler()
  • .unbind()
  • .undelegate()
  • .unload()
  • .unwrap()
  • .val()
  • .width()
  • .wrap()
  • .wrapAll()
  • .wrapInner()

Tham khảo CSS

  • CSS - Tham khảo
  • CSS - Bộ chọn (selectors)
  • CSS - Thuộc tính
  • CSS3 - Tham khảo
  • CSS3 - Bộ chọn (selectors)
  • CSS3 - Thuộc tính
  • Xem thêm ví dụ về CSS

Tham khảo HTML/XHTML

  • Tham khảo HTML/XHTML
  • Tag theo function
  • Tag theo giá trị DTD
  • Tham khảo HTML4/XHTML
  • Tham khảo HTML5
  • Xem thêm ví dụ về HTML

Tham khảo JQUERY

  • jQuery - Tham khảo
  • jQuery - Cài đặt và sử dụng
  • jQuery - Bộ chọn (selectors)
  • jQuery - Hàm (function)
  • jQuery - Ajax

Tham khảo Thêm

  • Lang codes
  • Font chữ
  • Mã ký tự
  • MIME
  • Đơn vị trong HTML & CSS
  • Giá trị màu trong HTML & CSS
  • Thuộc tính tổng quát

CHUYÊN ĐỀ

  • Chuyên đề
  • Chuyên đề HTML/CSS
  • Chuyên đề HTML5/CSS3
  • Chuyên đề jQuery/JS
  • jQuery/JS plugin

GÓP Ý - LIÊN HỆ

  • CÔNG CỤ TẠO CSS3CSS3 GENERATOR
  • BỘ CÔNG CỤGENERATOR TOOLS
  • CÔNG CỤ HỖ TRỢWEB TOOLS
  • CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
  • CÔNG CỤ KIỂM TRA RESPONSIVE TEST
  • CHIA SẺ HAYWEB & TOOLS
  • Follow us on hocwebchuan.com
  • Short URL
  • Rabbie theme

Từ khóa » Cách Sử Dụng Jquery Trong Html