HTML --- jQuery study notes

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/qq_44779847/article/details/102742852

jQuery ###
- What is jQuery
1. is a JavaScript framework
2. allow programmers to write more less achieved
3. Simplified native js code
4. jQuery itself through a written language js file js
5. You can like css as find elements through the selector
JS: var div = document.getElementById ( "the above mentioned id");
JQ: $ ( "# the above mentioned id")
6. may be the same style as batch add css
JS: var imgs = document.getElementsByTagName ( " IMG ");
for (var I = 0; I <imgs.length; I ++) {
imgs [I] .style.display =" none ";
}
JQ: $ (" IMG ") CSS (." the display "," none ");
7. The compatibility problem can be solved portion
#### incorporated jQuery

Since jq js file itself is a so introducing a normal manner and is introduced by js file as src attribute Script tag
#### js objects and each object conversion jq

js turn JQ
var JQ = $ (js);
jq turn JS
var JS jq = [0];
### selector
#### base selector
Tag name selector $ ( "div")
id selector $ ( "# id")
Class selector $ ( ". Class")
Bank selector $ ( "div, # id, .class")
Any element selector $ ( "*")
#### level selector
$ ( "Div span") matches all div inside the span
$ ( "Div> span") which span the child elements matching div
$ ( "Div + span") to match the span element div brother
$ ( "Div ~ span") to match the div brothers span element
- level and related methods
1. All the siblings matched elements
  $ ( "# abc") siblings ();. // get all the brothers with id abc elements
  $ ( "# abc") siblings ( "div");. // get id of the element abc All div brothers
2. Brother, matching elements
  $ ( "# abc") prev ();. To give his brother element elements
  $ ( "# abc") prev ( "p");. P element brother get elements
3. Brothers matched elements
  $ ( "# abc") prevAll ();. Get all the elements of brother elements
  $ ( "# abc") prevAll ( "span");. Get all the elements of the elements brother
4. Brother, matching elements
  $ ( "# abc") next ();. To get elements of brother elements
  $ ( "# abc") next ( "p");. P elements obtained element brother
5. Brothers matched elements
  $ ( "# abc") nextAll ();. The brothers get element elements
  $ ( "# abc") nextAll ( "p");. Brothers get elements p element
  #### filter Selector
$ ( "Div: first") matches all the first div element in a div
$ ( "Div: last") all final matches in a div element div
$ ( "Div: even") matches all div index is an even number in the div element
$ ( "Div: odd") matches all the div odd subscript div element
$ ( "Div: eq (n)") matches all div div element in the subscript value of n
$ ( "Div: lt (n)") div element matching index value n of less than all of the div
$ ( "Div: gt (n)") matches all index values greater than n div div elements
$ ( "Div: not (.abc )") matches all div values in class is not abc
#### content selector
$ ( "Div: has§") matching child elements contained div p
$ ( "Div: empty") matches the empty div
$ ( "Div: parent") matching non-empty div
$ ( "Div: contains ( ' xxx')") div xxx comprising matching text
#### seen selector
$ ( "Div: hidden") matches all the hidden div
$ ( "Div: visible") matches all visible div
- and hide the display related methods
$ ( "# abc") hide (); hidden.
$ ( "# Abc") Show (); display.
$ ( "# . abc ") toggle (); hidden, the display switching
#### attribute selector
$ ( "Div [id]") div id attribute matching element comprising
$ ( "Div [id = 'xxx']") matching the id of the div element xxx
$ ( "Div [id! = 'Xxx']") not matching the id value xxx div with
#### sub-element selector
$ ( "Div: first-child") is the div element match, and the first child element
$ ( "Div: last-child") is matching the div element, and is the last child element
$ ( "Div: nth-child (n)") is matched div element, and is the n th element of from 1 start
#### sheet selectors
$ ( ": Input") form matching the form all controls
$ ( ": Password") matches any password box
$ ( ": Radio") matches all radio
$ ( ": Checkbox") matches all multiple choice
$ ( ": Checked") to match all the selected radio, checkbox, drop-down option
$ ( "Input: checked") matches all selected radio and multiple choice
$ ( ": Selected") to match all the selected drop-down option

### to create and add elements

Create an element
var d = $ ( "
abc
”);
Add elements
parent element .append (d); // add to the rearmost
parent element .prepend (d); // add to the front
Insert an element
$ ( "# abc") before ( new element);.
$ ( "# Abc") the After (new element).;
Remove elements
$ ( "# abc") the Remove ();.
#### to access and modify elements of the text
$ ( "# abc") text ();.
. $ ( "# Abc") text ( "xxx" );
#### html content access and modify elements in the
$ ( "# abc") html ();. Gets
$ ( "# ABC") html ( "<h1 of> ABC </ h1 of>");.
## ## get css styles and modify elements of
$ ( "# abc") css ( "left");. get left property values
$ ( "# abc") css ( "left", "100px");. assignment
$ . ( "#abc") css ( { "width": "100px", "height": "200px"});
attribute #### to retrieve and modify elements
. $ ( "# abc") attr ( "class "); Gets
$ (" # abc ") attr (." class "," c1 "); assigning
### to obtain child elements, and parent elements
element objects .children ()
element object .parent ()

### jQuery events related to
1. common events

Mouse events: click events click the mouse into the mouse out event mouseover mousedown mouseout mouse down the mouse to move the mouse to lift mouseup mousemove
Keyboard events: keydown keyboard by pressing the keyboard raised keyup
Status change events: the page loads $ (function () {}) get lost focus focus focus blur submit the form submission value change change change the window size of a resize
2. event simulation
element object .trigger ( "event name");
3. move the mouse out of the merger event
element object .hover (the mouse into execution method, a mouse out of the execution method);
### animation-related
IF (this.value == "hidden") {
$ ( "img") hide (3000, function (). {
Alert ( 'animation done');
});
} the else IF (this.value == "display") {
$ ( "IMG") Show (2000, function (.) {
Alert ( 'XXX');
} );
} the else IF (this.value == "fade" ) {
$ ( "IMG"). fadeOut (1000);.
} the else IF (this.value == " fade" ) {
. $ ( "IMG") fadeIn (2000);
} the else IF ( "this.value == slide up ") {
$ ( "IMG") slideUp (2000).;
}else if(this.value==“下滑”){
$(“img”).slideDown(2000);
}else{//自定义
$(“img”).animate({“left”:“200px”},1000)
.animate({“top”:“200px”},1000)
.animate({“left”:“0px”},1000)
.animate({“top”:“0px”},1000)
.animate({“width”:“200px”},1000)
.animate({“width”:“100px”},1000)
.fadeOut(3000,function(){
$(“img”).remove();
});
}
```
  });
```
});

HTML --- jQuery study notes

Guess you like