Java Knowledge Summary-18

Source: Internet
Author: User

Grammar rules
$ (selector). function ()
$.function ()

JQuery selection
* Selector---represents all the elements
Multiple selectors can be split with ","

Basic selector tag #id. classname
Property Selector [attribute =/! =/^=/$=/*= (inclusive) value] [Selector 2]
Hierarchy selector > (all child elements under the parent element) + next element) ~ all elements After
Pseudo-Class selector: First:last:not (selector): Even (even): odd (odd): eq (index): gt:lt
: Contains ()--Contains: empty: Has (content included):p Ar:hid:va
Child element selector: First-chile:last-child:nth-child (Index)-value can be filled in even odd 3n 2 3n+1 ...
Form selector: Label elements for forms such as Input:text
Form Property Selector: Enabled:d isabled

Filter (after selector is selected) EQ () First () Last () Hasclass ()---return boolean type
Map ()--map the original array to another array, with Funcation decision

Find var p = $ ("div"). Find ("p[class= ' strong") can use selectors multiple times
. Children ()--all child elements (regardless of descendant elements)
。 Parents ("div")-all DIV elements in all ancestor elements (without root elements)
Series $ (' a '). Add (' div ')
. Add ("span")--Add a second selector selection to the original base
. End ()--Returns an empty collection until the result is restored to the most recent destructive operation
. Children ()--all child elements (regardless of descendant elements)

jquery syntax
$ (selector). Operation;
$ (this). Hide ()-hides the current element
$ ("P"). Hide ()-hides all paragraphs take labels as selectors
$ ("p. Test"). Hide ()-Hides all class= "test" paragraphs
$ ("#test"). Hide ()-hides all elements of the id= "test"

jquery does not have a name selector,
The jquery object is an array
End () in the chain syntax can be restored before the method of the destruction of the array, back to the previous state

Because jquery objects cannot use the properties of the DOM, you need to convert the jquery object to a DOM object
$ (domobject)-Jqueryobject This operation gets the jquery object
$ (XXX). Get (0)/$ (XXX) [0]-Domobject This operation gets the DOM object
$ (XXX). EQ () Gets the jquery object

AddClass ()--Add a class to the label for example: calss= "a b C D"

FILE-Ready Events
$ (document). Ready (function () {
Start writing JQuery code to prevent the page from getting the element before it has finished loading.


selector example
$ ("P") element selector---Select all <p> tags
$ ("button"). Click (function () {
$ ("P"). Hide ();
}); Select all paragraphs and override the Click event
$ ("#test") ID selector---Select elements by ID
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ ("#test"). Hide ();
$ (". Test") class selector---Select elements by class
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ (". Test"). Hide ();
Other advanced usage
$ ("Tr:even") Select the <tr> element of the even position
$ ("*") Select all elements
$ ("P.intro") pick <p> element with class intro
$ ("ul li:first-child") Select the first <li> element of each <ul> element
$ ("[href]") Select an element with an HREF attribute
$ ("a[target!= ' _blank ')" selects all <a> elements for which the target property value is not equal to "_blank"

Action elements:

To change a property:
Text ()-Sets or returns the text content of the selected element
HTML ()-Sets or returns the contents of the selected element (including HTML tags) only valid for the first obtained element
Val ()-Sets or returns the value of a form field

. CSS ()--Change CSS Properties
. Toggleclass ()--toggle class (on the basis of the selection of the addition of the class, some removed)

Tag properties:
. attr ()--changing properties
. Prop ()--this method is set when the value is Boolean
Removeprop (' name ')--Delete each Name property

Add Delete Element
Internal insertion
Append ()-Inserts an object at the end of the selected element
AppendTo ()-Inserts an object at the header of the selected element
Prepend ()-Inserts content at the beginning of the selected element
External insert
After ()-Inserts the content after the selected element
Before ()-insert content before selected element
Insertbefault ()
InsertAfter ()
Wrap ()---Package
Unwrap ()---remove package
ReplaceWith ()--replace content
ReplaceAll ()--Replace the element with a matching element

Settings with callback functions
$ ("#btn1"). Click (function () {
$ ("#test1"). Text (function (i,origtext) {
Return "Old text:" + origtext + "New Text:hello world!
(Index: "+ i +") ";
The attr () method is used to get/set the property value.
$ ("button"). Click (function () {
$ ("#w3s"). attr ({
"href": "Http://",
"title": "W3Schools jQuery Tutorial"
});//Set properties
attr ("name")--Get the value
attr (' name ', ' a ')--Set the value

$ ("P"). Append ("Some appended text.");
To delete an element:
Remove ()-Deletes the selected element (and its child elements)
Empty ()-Deleting a child element from the selected element does not delete the element
$ ("#div1"). Remove ();

jquery Encapsulated Ajax
$ (selector). Load (url,data,callback);
The required URL parameter specifies the URL that you want to load.
The optional data parameter specifies the collection of query string key/value pairs that are sent with the request.
The optional callback parameter is the function name that is executed after the load () method completes.
$ ("#div1"). Load ("Demo_test.txt"); The contents of the file "Demo_test.txt" are loaded into the specified <div> element
The JQuery get () and post () methods are used to request data from the server over an HTTP get or POST request.
$.get (Url,callback);
The required URL parameter specifies the URL that you want to request.
The optional callback parameter is the name of the function that executes after the request succeeds.
$ ("button"). Click (function () {
$.get ("demo_test.php", function (data,status) {
Alert ("Data:" + Data + "Nstatus:" + status);
}); Retrieve data from a file on the server via Ajax:
$.post (Url,data,callback,type);
The required URL parameter specifies the URL that you want to request.
The optional data parameter specifies the information to be sent along with the request.
The optional callback parameter is the name of the function that executes after the request succeeds.
The optional type represents how the returned data is processed and is automatically recognized
$ ("button"). Click (function () {
$.post ("demo_test_post.html",
{name: "Donald Duck", City: "Duckburg"},
function (data,status) {
Alert ("Data:" + Data + "Nstatus:" + status);
The callback function that executes can also be the name of another function

Event Name:
Page event: Click DblClick mouseenter MouseLeave
Mouse events: KeyPress keydown KeyUp
Form event: Submit change focus Blur
Document/Window Events: Load resize scroll unload (etc. loaded) ready (unequal picture loading) page loading complete event

$ (' P '). On (' click ', Function () {})--add Event
$ ([' P '). One (* * *)--Add a single event
Triggerhander does not start the browser default event does not generate event bubbling

Effect Method:
The FadeIn ()---is used to fade in the hidden element. The optional speed parameter specifies the length of the effect. It can take the following values: "Slow", "fast", or milliseconds. The callback parameter is the name of the function that is executed after fading completes.
The FadeOut ()----method is used to fade out visible elements. Optional Parameters Ibid.
Fadetoggle ()----If the element has faded out, fadetoggle () adds a fade effect to the element. Optional Parameters Ibid.
FadeTo ()----If the element has been faded in, then Fadetoggle () adds the length of time required by the speed parameter that the fade effect requires for the element. It can take the following values: "Slow", "fast", or milliseconds.

Java Knowledge Summary-18

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.