jQuery video through train from getting started to becoming proficient:
1, jQuery object access
each(callback)
Execute a function with each matching element as the context.
This means that every time the function passed in is executed, the this keyword in the function points to a different DOM element (a different matching element every time). Moreover, each time the function is executed, a numeric value representing the position of the element as the execution environment in the matched element set will be passed to the function as a parameter (zero based integer). Returning 'false' will stop the loop (just like using 'break' in a normal loop). Return 'true' to jump to the next loop (just like using 'continue' in a normal loop).
Parameters:
callback is the function to be executed for each matching element
Note: two parameters can be passed in the callback function. The first parameter represents the value of iteration from 0; The second represents the this object;
size() and length
-
size() the number of elements in the jQuery object.
-
length the number of elements in the jQuery object. Consistent with the effect of size();
selector
Returns the original selector passed to jQuery().
In other words, it returns what selector you use to find this element. It can be used with context to accurately detect selector queries. These two properties are useful for plug-in developers.
context
Return the original DOM node content passed to jQuery(), that is, the second parameter of jQuery(). If not specified, the context points to the current document.
It can be used with selector to accurately detect selector queries. These two properties are useful for plug-in developers.
get([index])
Get one of the matching elements.
This allows you to select an actual DOM element and manipulate it directly, rather than through the jQuery function$ (this).get(0) is equivalent to $(this)[0].
Parameters:
[index] get the element at the index position
index([selector|element])
Search for matching elements and return the index value of the corresponding element, counting from 0.
If not If the index() method passes parameters, the return value is the position of the first element in the jQuery object collection relative to its sibling elements.
If the parameter is a set of DOM elements or jQuery objects, the return value is the position of the passed element relative to the original collection.
If the parameter is a selector, the return value is the position of the original element in the matching element relative to the selector. If no matching element is found, - 1 is returned.
Parameters:
Selector is a selector that represents a jQuery object from which elements will be found.
Element gets the element of the index position. It can be a DOM element or a jQuery selector.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="div1">
I'm the first div Content of
<p>1</p>
<p>2</p>
</div>
<div>I'm the second div Content of</div>
<div>I'm the third div Content of</div>
<div>I'm the fourth div Content of</div>
<script>
// Callback callback function
/*
each(callback) Execute a function with each matching element as the context.
jQuery Functions are basically called through jQuery objects;
jQuery Object - > all objects obtained through $(selector) are called jQuery objects
jQuery Object is actually a pseudo array
Each time the function passed in is executed, the this keyword in the function points to a different DOM element (a different matching element each time)
*/
$("div").each(function(i){
console.log(this.innerHTML,$(this).html(),i)
})
// Size () the number of elements in the jQuery object.
// Length the number of elements in the jQuery object.
console.log($("div").size()); // Removed
console.log($("div").length);
// The selector returns the original selector passed to jQuery().
// context returns the original DOM node content passed to jQuery(), that is, the second parameter of jQuery().
// console.log($("p",document.getElementById("#div1")).selector,$("p","#div1").context);
console.log($("#div1 > p").selector);
/*
get([index])
Get one of the matching elements. num indicates the number of matching elements.
No arguments: get a collection of all matching DOM elements.
Parameter: gets the element at the index position
*/
console.log($("div")) // Get 4 div s through jQuery
console.log($("div").get()) // DOM array
console.log($("div").get(1).innerHTML) // DOM element node
console.log($("div")[1].innerHTML) // DOM element node
/*
index([selector|element])
Search for matching elements and return the index value of the corresponding element, counting from 0.
If not If the index() method passes parameters, the return value is the position of the first element in the jQuery object collection relative to its sibling elements.
*/
$("div").click(function(){
console.log($(this).index());
})
/*
API file:
size() No parameters need to be passed
:not(selector) Parameters must be passed
get([index]) You can pass parameters or not
wrap(html|ele|fn) Parameters can be passed in various cases
*/
</script>
</body>
</html>2, Data cache
data([key],[value])
Store data on the element and return the jQuery object.
If the jQuery collection points to multiple elements, the corresponding data will be set on all elements.
Parameters:
key is the name of the stored data
key,value:
key: stored data name
value: any data to be stored
obj a key / value pair for setting data
removeData([name|list])
Remove stored data on element
And $(...) The data(name, value) function does the opposite
Parameters:
Name: stored data name
list: removes arrays or strings separated by spaces
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="div1">
</div>
<script>
/*
data([key],[value]) data([key],[value])
key: The name of the stored data String
value: Any data to be stored, any
*/
console.log($("#div1").data("userName")); // undefined
// Set data
$("#div1").data("userName","zhangsan")
$("#div1").data("userPwd","123")
console.log($("#div1").data("userName")); // zhangsan
// Modify data
$("#div1").data("userName","wangwu")
console.log($("#div1").data("userName")); // wangwu
$("#div1").data("stuInfo",{
stuId:10001,
stuName:"Zhang San",
stuAge:12
})
console.log($("#div1").data("stuInfo"));
/* $("#div1").removeData("userName");
$("#div1").removeData("userPwd"); */
// $("#div1").removeData("userName userPwd");
$("#div1").removeData(["userName","userPwd"]);
console.log($("#div1").data("userName")); // undefined
console.log($("#div1").data("userPwd")); // undefined
</script>
</body>
</html>3, Queue control
queue(element,[queueName])
Displays or operates on a queue of functions executed on matching elements
element,[queueName] Element,String
Element: check the DOM element of the additional queue
queueName: a string value containing the name of the sequence. The default is fx, the standard effect sequence.
dequeue([queueName])
Remove a queue function from the front of the queue and execute it.
[queueName] String
Queue name, default to fx
clearQueue([queueName])
Clear all queues on the object that have not yet been executed
If there are no parameters, the animation queue is cleared by default. This is similar to stop(true), but stop() can only empty the animation queue, and this can empty all passes queue() creates a new queue.
queueName Boolean
A string containing the queue name. The default is Fx, the animation queue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<style>
div {
margin: 3px;
width: 40px;
height: 40px;
position: absolute;
left: 0px;
top: 30px;
background: green;
display: none;
}
div.newcolor {
background: blue;
}
span {
color: red;
}
</style>
</head>
<body>
<!-- <button id="show">Show Length of Queue</button>
<span></span>
<div></div> -->
<button id="start">Start</button>
<button id="stop">Stop</button>
<div></div>
<script>
/* // Add a mouse click event to a button
$("#show").click(function () {
// Displays the queue of functions executed on matching elements
var n = $("div").queue("fx");
$("span").text("Queue length is: " + n.length);
});
function runIt() {
// A total of 8 functions are bound to div
// 2s Show div
$("div").show(2000);
// 2s From left 0 to left 200
$("div").animate({
left: '+=200'
}, 2000);
// slideToggle If it is displayed, it is hidden; Show if hidden
$("div").slideToggle(1000); // hide
$("div").slideToggle("fast"); // display
// 1.5s From left 200 to left 0
$("div").animate({
left: '-=200'
}, 1500);
// hide
$("div").hide("slow");
// display
$("div").show(1200);
// hide
$("div").slideUp("normal", runIt);
}
runIt(); */
// Add a mouse click event to the start button
$("#start").click(function () {
// display
$("div").show("slow");
// 5s from 0 to 200
$("div").animate({
left: '+=200'
}, 5000);
// Insert a function into the function queue
$("div").queue(function () {
$(this).addClass("newcolor"); // Added a class
// Remove a queue function from the front of the queue and execute it.
$(this).dequeue();
});
// From 200 to 0
$("div").animate({
left: '-=200'
}, 1500);
// Insert a function into the function queue
$("div").queue(function () {
$(this).removeClass("newcolor"); // Remove a class
$(this).dequeue();
});
$("div").slideUp();
});
$("#stop").click(function () {
/* // Empty queue function
$("div").queue("fx", []); // The current function will continue to execute
// Stops all animations running on the specified element.
$("div").stop(); */
// stop will instantly complete the animation queue
// clearQueue([queueName]) empties all queues on the object that have not yet been executed
// $("div").clearQueue();
// $("div").stop();
/*
stop() --->onle for animate
clearQueue() --->remove any function attached to a standard jquery queue
stop()It is only used for animate. clearQueue() clears the queue of all unexecuted functions, and the current function will be executed at the original speed
*/
});
</script>
</body>
</html>4, Plug in mechanism
jQuery.fn.extend(object)
Extend the set of jQuery elements to provide new methods (usually used to make plug-ins).
object Object
Used to extend jQuery objects.
jQuery.extend(object)
Extend the jQuery object itself.
Used to add new functions to the jQuery namespace.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" name="hobby" value="Football"> Football
<input type="checkbox" name="hobby" value="Basketball"> Basketball
<input type="checkbox" name="hobby" value="badminton"> badminton
<input type="checkbox" name="hobby" value="Table Tennis"> Table Tennis
<button id="checkAll">Select all</button>
<button id="uncheckAll">None</button>
<button id="reverseCheck">Reverse selection</button>
<script>
// jQuery.fn.extend(object) extends the set of jQuery elements to provide new methods (usually used to make plug-ins).
// If it is used to manipulate page elements, it must be jQuery fn. extend(object)
jQuery.fn.extend({
checkAll: function () {
// this is the jQuery object
return this.each(function () {
// this in each is a dom object
this.checked = true;
})
},
uncheckAll: function () {
// this is the jQuery object
return this.each(function () {
// this in each is a dom object
this.checked = false;
})
},
reverseCheck: function () {
// this is the jQuery object
return this.each(function () {
// this in each is a dom object
this.checked = !this.checked;
})
},
})
// The above encapsulated methods can be accessed through jQuery objects
$("#checkAll").click(function () {
$("input[type=checkbox]").checkAll();
})
$("#uncheckAll").click(function () {
$("input[type=checkbox]").uncheckAll();
})
$("#reverseCheck").click(function () {
$("input[type=checkbox]").reverseCheck();
})
// jQuery.extend(object) extends the jQuery object itself.
// If there is no associated with the page element, jQuery extend(object)
jQuery.extend({
min: function (a, b) {
return a < b ? a : b;
},
max: function (a, b) {
return a > b ? a : b;
},
equals: function(a,b){
return a === b;
}
});
console.log($.min(2,5));
console.log($.max(2,5));
console.log($.equals(5,"5"));
</script>
</body>
</html>5, Multi library coexistence
jQuery.noConflict([extreme])
Run this function to transfer control of the variable $to the library that first implements it.
This helps ensure that jQuery does not conflict with $objects in other libraries. After running this function, you can only use jQuery variables to access jQuery objects. For example, where you want to use $("div p"), you must replace it with jQuery("div p"). '' Note: '' this function must be used after you import the jQuery file and before importing another conflicting Library ''. Of course, it should also be before other conflicting libraries are used, unless jQuery is the last imported.
extreme Boolean
Pass in true to allow jQuery variables to be completely restored
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="js/jquery.min.js"></script> -->
</head>
<body>
<div id="div1">
I am div1 Content of
</div>
<script src="js/comm.js"></script>
<script>
console.log("Not introduced jQuery before:",$("div1"));
</script>
<script src="js/jquery.min.js"></script>
<script>
console.log("Introduced jQuery after:",$("div1"));
</script>
<script>
// Run this function to transfer control of the variable $to the library that first implements it.
jQuery.noConflict();
console.log("After multi database coexistence:",$("div1"));
// JQuery let $out. You can only use jQuery
console.log(jQuery("#div1"));
jQuery(function($){
// //Code that uses $as the jQuery alias
console.log($("#div1"))
})
</script>
</body>
</html>