JQuery is a lightweight, free and open source library for JavaScript functions

document.getElementById(“user”).value $(“#user”).val(); The core idea of jQuery is to write less, but do more

Lightweight: The intrusion of a framework or technology into our project is very low (conversely, our project or code is very low on the technology)

2, 1) jQuery advantage can greatly simplify the JS code 2) can like CSS selector elements 3) can be controlled by changing the CSS styles page oDiv. The effect of style. The backgroundColor = “red”; $(“div”).css(“background-color”, “red”); 4) Compatible with common browsers (Google/Firefox/Apple/Open)

Js: uncompressed (262KB), study or research before the project goes online or jquery-1.8.3.min.js: compressed (92KB) after the project goes online

< / div > < div > < div > < div > < div > < div > < div > >< script SRC =”js/jquery-1.8.3.min.js”>

When importing a jQuery library file, it will fail to import the file if the file is imported into the wrong path

var oDiv = jQuery(“#demo”); var oDiv = $(“#demo”); JQuery == $, so calling jQuery() is equivalent to calling $()

Document Ready Event Function: This function executes immediately after the browser has loaded all the HTML elements. Window.onload = function(){// This code executes immediately after the browser has loaded all the HTML elements;}

$(function(){$(function(){$(function(){

// This code executes as soon as the browser loads all the HTML elements

$(document).ready(function(){$(document).ready(function(){

// This code executes as soon as the browser loads all the HTML elements

});

3. When should I use the document ready event function? If you want to get the element, the code that gets the element is executed before the element has been loaded by the browser, so you can’t get it! At this point, you can put the code to get the element in the document ready event function, because this function is executed immediately after the browser has loaded all the HTML elements. At this point, all the elements have already been loaded. Any element fetched in this function can be retrieved!

As long as the code that retrieves the element is executed after the element is loaded, it can be retrieved (whichever way you use it!).

JQuery is faster when executing because jQuery executes after the page element itself is loaded. If there is content in the element, it does not load. The jQuery document-ready event function can write more than one, while the JS function can only write one.

If you click on an element, it triggers the click event, executing testFn(). If you click on the element, it triggers the click event

Method two: (JS) through the code to get the element, return is the JS object that represents the element, and then through the [object.onclick] attribute for the element to bind the click event. Simply clicking on this element triggers the click event to execute the function var oB1 = document.getElementById(“b1”); Ob1.onclick = function(){alert(“JS: B1 button was clicked… “){alert(“JS: B1 button was clicked… “); ); } (jQuery) fetches an element through the selector, returns a jQuery object representing the element, and binds the element to the click event through the [object.click] function. $(“#b1″).click(function(){alert(” function(){return function(); $(“#b1”).click(function(){alert(); ); });

1. Basic selector

$("div") -- matches all div elements $("span") -- matches all span elements 2)class selector $(".mini") -- matches all elements with a class value of mini $(" str.mini ") -- <span class="mini">... <span class="mini">... </span> <span class="mini">... </span> <div class="mini">... </div> <div class="mini">... </div>

3) the ID selector

$("#one") -- matches an element with id one

4) Multi-element selector

$("div,span,.mini,#one") -- matches all divs, all spans, and all elements with class mini and id one

2) Hierarchy selector 1) descendant selector

$("#box1 input") -- matches all the input elements inside the box1 element

Adjacent Brother Selector Adjacent Brother Selector: If two elements are adjacent to each other and have the same parent element, these two elements are adjacent siblings. The adjacent sibling selector selects the nearest sibling element

$("#two+span") -- $("#two").next("span") -- $("#two").prev("span") -- $("#two").prev("span") - matching id value for the two elements of the front next to the span of sibling elements -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- < span > 000 < / span > < div id = "# two" > < / div > < span > 111 < / span > -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - $(" # two "). NextAll () - id for two matched elements behind all of the sibling elements $(" # two "). NextAll (" div ") - id for two matched elements behind all the brothers to div elements $("#two").prevall ("div") -- matches the siblings of all siblings within the siblings of the element with id two; $("#two").prevall ("div") -- matches the siblings of all siblings within the siblings of the element with id two

3. The basic filter selector matches elements according to subscripts:

$("div").eq(n) -- matches the n+1 div element in all divs $("div:eq(n)") -- matches the n+1 div element in all divs $("div:first") -- matches the first div element in all divs $(" div "). Eq (0) - the first div elements of matching all div $(" div: last ") - match all finally a div elements in the div $(" div "). Eq ($(" div "). The length - 1) - $("div").eq(-1) -- Matches the last div element in all divs

4. Form selector

$(":input") -- Matches all form item elements (including input, select, textarea, button) $(":text") -- Matches all plain text fields $(":password") -- Matches all password fields : $(" radio ") - match all single box $(" : "checkbox) - match all checkbox $(: radio:" checked ") - match all the selected single box $(" : the checkbox: checked ") - Matches all checked boxes that are selected

1) Press F12 to check if there is any error in the browser’s Console window. If there is, check according to the error message! 2) You can also add debugger breakpoints to the program!

1. HTML element manipulation

$("<div></div>") -- create a div element and return a jQuery $("<div> this is a div element </div>") -- create a div element with content and return a jQuery $("<input type='text'/>") $("<input type='text'/>"

Add child element — append()

$(" body "), append (" < table > < tr > < td > this is a td element < / td > < / tr > < / table > "); Var $div = $("<div> this is a div </div>"); $("body").append($div) -- Adds a div element to the body

(3) remove()

$("div").remove() -- Removes all matched div elements

(4) Replacewith ()

$("div").replacewith ("<p> ").replacewith ("<p> "). </p>")

2, HTML content and value manipulation

<div>div111</div> <input type="text"/> <select>... </select>

HTML () function — Gets all of the content of the element (everything wrapped in the start and end tags)

If more than one element is matched by a selector, the HTML () function can also set the contents of the element. If more than one element is matched by a selector, it sets the contents of all elements -- the JS equivalent of the innerHTML attribute

The text() function — gets all text content in the element (the value gets the text, not the label)

The text() function also sets the text content of the element (only text) -- in JS this corresponds to the innerText property (which is not compatible in some browsers).

Val () function — Gets or sets the value of a form item element

The form item element: input/select/option/textarea

3, HTML element attributes or CSS attribute operations

<div name="aaa" style="border:2px solid red"></div>

The prop() function, which either sets the value of an element’s property or sets the value of an element’s attr(), can set the difference between prop() and attr() for an element: The prop function, which is used to obtain or set the value of an element’s property (intrinsic property), has been available since version 1.6 of jQuery.

The attr function is a pre-jQuery function that gets or sets the value of the element's attribute (the custom attribute). The attr function is used to get or set the value of the element's attribute (the custom attribute)

CSS () function – You can get or set the CSS style of an element

4, animation function show () – set elements to display status \, equivalent to the CSS (\ “display”, “block | inline”); Hide () — sets the element to a hidden state, equivalent to CSS (“display”, “none”); Toggle () — Toggles the display state of an element to the hidden state if the element itself is displayed or to the displayed state if the element itself is hidden

SlideToggle () — toggles the display state of an element to be hidden if the element itself is displayed or to be displayed if the element itself is hidden

5, parent()/parents()/find() parent() — Get the parent of the current element $(“:checked”).parent().parent(); $(“:checked”).parent().parent(); $(“:checked”).parents(“tr”)

Find (“span”) — find(“span”) — find(“span”) — find(“span”) — find(“span”) — find(“span”) — find(“span”) — find(“span”