JQ advantage

  • JQ selector, convenient and flexible
  • JQ chain expression, simple code
  • JQ supports AJAX, and the back end communicates with the front end by returning a JSON-formatted string
  • JQ supports events, styles, animations, and JQ manipulates CSS much more readable than JS
  • JQ plug-in more

JQ Basic syntax

  • $(selector).action()

JS and JQ objects rotate each other

  • JS objects can only call JS methods, and JQ objects can only call JQ methods. JS and JQ often interswitch to make it easier to use each other’s methods and properties. Details are as follows:
    • Js object = jq object [0]
    • Jq object = $(js object)

JQ- Basic selector

  • ID selector $(‘# ID value ‘)
  • Element selector $(‘ tag name ‘)
  • Class selector $(‘. Class name ‘)
  • Blend selector $(“div.c1”) div tag for class name c1
  • Combinator selector $(“#id,.className,tagName”)
  • All selectors $(*)
  • Hierarchy selectors X and y are arbitrary selectors
    • $(“x y”) all the descendants of x, find y
    • $(“x > y”) $(“x > y”
    • $(“x + y”) after x, right next to x, looking for y
    • $(“x ~ y”) after x, all brothers, find y

JQ- Basic filter: Used after the selector and filtered when more than one element is selected

  • : first the first
  • The last one
  • :eq(index) The element whose index =index
  • :gt(index) Index >index element
  • :lt(index) Indexes the element
  • :even Index value = even, starting from 0
  • :odd Indicates an odd number, starting from 0
  • :not(element selector e) Removes tags containing e from descendant elements
  • :has(element selector e) selects the tag of the descendant element containing e, as shown in the following example:
    • $(“div:has(h1)”) The descendant element contains the div of h1
    • The descendant element of $(“div:has(.c1)”) contains a div with the class name c1
    • The descendant element of $(“li:not(.c1)”) does not contain li with the class name c1
    • $(“li:not(:has(a))”) descendant of the element li that does not contain the a tag

JQ- Attribute selector: The selector is used after, and is filtered based on the attribute value

  • [attribute]
  • [attribute=’ attribute value ‘] $(“input[type=’checkbox’]”) Find the input tag of type checkbox
  • [attribute!=’ attribute value ‘] $(“input[type=’text’]”) Find input tags whose type is not text