Skip to main content

jQuery

很久之前寫的東西

https://jquery.com/

https://www.w3schools.com/jquery/jquery_syntax.asp

語法​

$(selector).action()

Examples:

$(this).hide() - 隱藏當前元素

$("p").hide() - 隱藏所有 <p> 元素。

$(".test").hide() - 隱藏所有帶有 class =“ test” 的元素。

$("#test").hide() - 隱藏 id =“ test” 的元素。

document ready event

$(document).ready(function(){
  // jQuery methods go here...
});

or short one

$(function(){
  // jQuery methods go here...
});

這是為了防止文檔完成加載（準備就緒）之前運行任何jQuery代碼。

jQuery Event​

Mouse EventsKeyboard EventsForm EventsDocument/Window Events
clickkeypresssubmitload
dblclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleaveblurunload
mousedown
mouseup
hover

https://www.w3schools.com/jquery/jquery_events.asp

$(document).ready()

Get/Set content​

  • text() - Sets or returns the text content of selected elements
  • html() - Sets or returns the content of selected elements (including HTML markup)
  • val() - Sets or returns the value of form fields

Add New HTML Content​

  • append() - Inserts content at the end of the selected elements
  • prepend() - Inserts content at the beginning of the selected elements
  • after() - Inserts content after the selected elements
  • before() - Inserts content before the selected elements

Remove Elements/Content​

  • remove() - Removes the selected element (and its child elements)
  • empty() - Removes the child elements from the selected element

jQuery Manipulating CSS​

  • addClass() - Adds one or more classes to the selected elements
  • removeClass() - Removes one or more classes from the selected elements
  • toggleClass() - Toggles between adding/removing classes from the selected elements
  • css() - Sets or returns the style attribute

Return a CSS Property​

css("propertyname");

$("p").css("background-color");

Set a CSS Property​

css("propertyname","value");

$("p").css("background-color", "yellow");

Set Multiple CSS Properties​

css({"propertyname": "value", "propertyname": "value", ...});

$("p").css({"background-color": "yellow", "font-size": "200%"});

jQuery Dimension Methods​

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

https://www.w3schools.com/jquery/jquery_dimensions.asp

jQuery .attr() vs .prop()​

https://cythilya.github.io/2017/09/10/jquery-attr-vs-prop/

https://stackoverflow.com/questions/5874652/prop-vs-attr

Return the value of a property:

$(selector).prop(property)

Set the property and value:

$(selector).prop(property,value)

Set property and value using a function:

$(selector).prop(property,function(index, currentvalue))

Set multiple properties and values:

$(selector).prop({property:value, property:value, ...})