Table of contents
2. The first experience of jQuery! ! !
4. Difference between jQuery object and dom object
4.1. What is a jQuery object and what is a dom object
4.2. Question: What is the nature of jQuery objects?
4.3. Differences between jQuery objects and Dom objects
4.4. Interchange between Dom object and jQuery object
5. jQuery selector (***** key)
5.1, basic selector (**** key)
5.2, level selector (**** key)
1. Introduction to jQuery
What is jQuery?
jQuery, as the name suggests, is JavaScript and query (Query), which is a js class library that assists JavaScript development.
The core idea of jQuery! ! !
Its core idea is write less, do more (write less, do more), so it realizes many browser compatibility issues.
jQuery popularity
jQuery is now the most popular JavaScript library, used by more than 55% of the world's top 10,000 most visited websites.
jQuery benefits! ! !
jQuery is free and open source. The syntax design of jQuery can make development more convenient, such as manipulating document objects, selecting DOM elements, making animation effects, event handling, using Ajax and other functions
2. The first experience of jQuery! ! !
Requirement: Use jQuery to bind a button click event?
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// window.onload = function () {
// var btnObj = document.getElementById("btnId");
// // alert(btnObj);//[object HTMLButtonElement] ====>>> dom 对象
// btnObj.onclick = function () {
// alert("js 原生的单击事件");
// }
// }
$(function () { // 表示页面加载完成 之后，相当 window.onload = function () {}
var $btnObj = $("#btnId"); // 表示按 id 查询标签对象
$btnObj.click(function () { // 绑定单击事件
alert("jQuery 的单击事件");
});
});
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>common problem
1. Do I have to import the jQuery library to use jQuery?
Answer: yes, must
2. What is $ in jQuery?
Answer: it is a function
3. How to add a click response function to the button?
Answer:
1. Use jQuery to query the label object
2. Use the label object.click( function(){} )
3. jQuery core functions
$ is the core function of jQuery, which can complete many functions of jQuery. $() is to call $ this function
1. When the input parameter is [function]: it means that the page is loaded. Equivalent to window.onload = function(){}
2. When the input parameter is [HTML string]: the html tag object will be created for us
3. When the input parameter is [selector string]: $("#id attribute value"); id selector, query the tag object according to id $("tag name"); tag name selector, according to the specified tag name query tag object $(“.class attribute value”); type selector, you can query tag object according to class attribute
4. When the input parameter is [DOM object]: the dom object will be converted into a jQuery object
4. Difference between jQuery object and dom object
4.1. What is a jQuery object and what is a dom object
Dom object
1. The label object queried by getElementById() is a Dom object
2. The label object queried by getElementsByName() is a Dom object
3. The tag object queried by getElementsByTagName() is a Dom object
4. The object created by the createElement() method is a Dom object
The effect of the DOM object Alert is: [object HTML tag name Element]
jQuery object
5. The object created through the API provided by JQuery is a JQuery object
6. The Dom object wrapped by JQuery is also a JQuery object
7. The object queried through the API provided by JQuery is a JQuery object
The effect of the jQuery object Alert is: [object Object]
4.2. Question: What is the nature of jQuery objects?
The jQuery object is an array of dom objects + a series of functional functions provided by jQuery.
4.3. Differences between jQuery objects and Dom objects
jQuery objects cannot use properties and methods of DOM objects
DOM objects also cannot use properties and methods of jQuery objects
4.4. Interchange between Dom object and jQuery object
1. Convert dom object to jQuery object (*key point)
1. There is a DOM object first
2. $(DOM object) can be converted into a jQuery object
2. Convert jQuery object to dom object (*key point)
1. First there is jQuery object
2. jQuery object [subscript] takes out the corresponding DOM object
5. jQuery selector (***** key)
5.1, basic selector (**** key)
#ID selector: Find label objects based on id
.class selector: Find label objects according to class
element selector: Find tag objects based on tag name
* Selector: means any, all elements
selector1, selector2 combination selector: Combine the results of selector 1 and selector 2 and return
p.myClass indicates that the tag name must be a p tag, and the class type must be myClass
5.2, level selector (**** key)
ancestor descendant descendant selector: match all descendant elements under the given ancestor element
parent > child child element selector: match all child elements under the given parent element
prev + next adjacent element selector: matches all next elements immediately after the prev element
Prev ~ Sibling element selector after siblings: matches all siblings elements after the prev element
5.3, filter selector
Basic filter:
:first get the first element
:last Get the last element
:not(selector) removes all elements matching the given selector
:even matches all elements with an even index value, counting from 0
:odd matches all elements with an odd index value, counting from 0
:eq(index) matches an element with a given index value
:gt(index) matches all elements greater than the given index value
:lt(index) matches all elements less than the given index value
:header matches heading elements like h1, h2, h3
:animated matches all elements that are being animated
Content filter:
:contains(text) matches elements that contain the given text
:empty matches all empty elements that do not contain child elements or text
:parent matches elements with child elements or text
:has(selector) matches elements that contain the elements matched by the selector
Attribute filter:
[attribute] matches elements that contain the given attribute.
[attribute=value] matches elements where the given attribute is a certain value
[attribute!=value] matches all elements that do not contain the specified attribute, or the attribute is not equal to the specified value.
[attribute^=value] matches elements where the given attribute starts with some value
[attribute$=value] matches elements where the given attribute ends with some value
[attribute*=value] matches the given attribute to an element containing some value
[attrSel1][attrSel2][attrSelN] Composite attribute selector, used when multiple conditions need to be met at the same time.
Form filter:
:input matches all input, textarea, select and button elements
:text matches all text input boxes
:password matches all password input boxes
:radio matches all radio buttons
:checkbox matches all checkboxes
:submit matches all submit buttons
:image matches all img tags
:reset matches all reset buttons
:button matches all input type=button buttons
:file matches all input type=file file uploads
:hidden matches all invisible elements display:none or input type=hidden
Form object attribute filter:
:enabled matches all enabled elements
:disabled matches all disabled elements
:checked matches all checked radio, checkbox, and option tag objects in the drop-down list
:selected matches all selected options
6. jQuery element filtering
eq() Gets the element at a given index The function is the same as: eq()
first() The function of getting the first element is the same as: first l
ast() The function of getting the last element is the same as: last
filter(exp) leaves matching elements
is(exp) judges whether it matches the given selector, and returns as long as there is a match, true
has(exp) returns the element that contains the element that matches the selector. The function is the same as :has
not(exp) deletes the elements matching the selector. The function is the same as: not
children(exp) Returns the child elements that match the given selector The function is the same as parent>child
find(exp) Returns descendant elements that match the given selector The function is the same as ancestor descendant
next() Returns the next sibling element of the current element. The function is the same as prev + next
nextAll() Returns all sibling elements behind the current element. The function is the same as that of prev ~ siblings
nextUntil() returns the following element from the current element to the specified matching element parent() returns the parent element
prev(exp) returns the previous sibling element of the current element
prevAll() Returns all sibling elements in front of the current element
prevUnit(exp) returns the previous element from the current element to the specified matching element
siblings(exp) returns all sibling elements
add() adds the elements of the selector matched by add to the current jquery object
