JavaWeb Classic_03_jQuery

JavaWeb Classic_03_jQuery

Today’s tasks

1. jQuery Hello world

2. jQuery
Selector

3. jQuery
filter

4. jQuery
Element screening

Class Notes

1, jQuery Introduction

What is
jQuery?

jQuery, as the name suggests, is JavaScript and query (Query), which is a js class library that assists JavaScript development.

jQuery
The core idea! ! !

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, and the syntax design of jQuery can make development more convenient, such as operating
document
object, choice
DOM
Elements, Animating Effects, Event Handling, Using
Ajax
and other features

First experience with

2, jQuery ! ! !

Requirement: use
jQuery
Bind the click event to a button
?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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 object
//
btnObj.onclick = function () {
//
alert("js native click event");
//
}
// }
$(function () { // Indicates that after the page is loaded, it is equivalent to window.onload = function () {}
var $btnObj = $("#btnId"); // Indicates to query label objects by id
$btnObj.click(function () { // bind click event
alert("jQuery click event");
});
});
</script>
</head>
<body>
<button id="btnId">SayHello</button>
</body>
</html>

common problem?

1
,use
jQuery
be sure to introduce
jQuery
Library?

Answer: yes, must

2
,
jQuery
middle
$
what exactly is it?

Answer: it is a function

3
, How to add a click response function to the button?

Answer:

1
,use
jQuery
Query to label object

2
, using the label object
.click( function(){} );

3, jQuery core functions

$
yes
jQuery
The core function of can complete
jQuery
many functions.
$()
is to call
$
this function

1
, the incoming parameter is
[
function
]
hour:

Indicates after the page has loaded. equivalent to
window.onload = function(){}

2
, the incoming parameter is
[HTML
string
]
hour:

will create this for us
html
label object

3
, the incoming parameter is
[
selector string
]
hour:

$(“#id
attribute value
“);

id
selector, according to
id
query tag object

$(”
tag name
“);

Tag name selector, query the tag object according to the specified tag name

$(“.class
attribute value
“);
type selector, which can be based on
class
attribute query tag object

4
, the incoming parameter is
[DOM
object
]
hour:

will put this
dom
object converted to
jQuery
object

4, jQuery object and dom object distinction< /strong>

4.1, what is jQuery object, what is dom Object

Dom
Object

1.
pass
getElementById()
The label object queried is
dom
object

2.
pass
getElementsByName()
The label object queried is
dom
object

3.
pass
getElementsByTagName()
The label object queried is
dom
object

4.
pass
createElement()
The object created by the method is
dom
object

The effect of the DOM object Alert is:
[object HTML
Tag name
Element]

jQuery
Object

5.
pass
JQuery
which provided
APIs
The object created is
JQuery
object

6.
pass
JQuery
packaged
dom
object, too
JQuery
object

7.
pass
JQuery
which provided
APIs
The object queried is
JQuery
object

jQuery
object
alert
The result is:
[object Object]

4.2、Question: jQuery What is the nature of the object?

jQuery
object is
dom
array of objects
+ jQuery
A series of functional functions provided.

Differences between

4.3, jQuery objects and Dom objects

jQuery
object cannot be used
DOM
Object properties and methods

DOM
Objects also cannot be used
jQuery
Object properties and methods

4.4, Dom object and jQuery object conversion

1
,
dom
Object converted to
jQuery
Object (
*
Key points)

1
, first
DOM
object

2
,
$(DOM
object
)
can be converted to
jQuery
object

2
,
jQuery
Object to
dom
Object (
*
Key points)

1
, first
jQuery
object

2
,
jQuery
object
[
subscript
]
Take out the corresponding
DOM
object

5, jQuery selector (*****< strong>Key points)

5.1, basic selectors (****important)

#ID selector:
according to
id
Find label object

.class selector:
according to
class
Find label object

element
Selector:
Find tag object by tag name

* Selector:
means any, all elements

selector1
,
selector2
Combined selector:
merge selector
1
,Selector
2
result and returns

p.myClass

Indicates that the tag name must be
p
label, and
class
type also is
myClass

5.2
, level selector (
****
Key points)

ancestor descendant descendant selector:
Matches all descendant elements under the given ancestor element

parent > child child element selector:
Matches all child elements under the given parent element

prev + next adjacent element selector:
matches all
prev
after the element
next
the element

Sibling element selector after prev ~ siblings:
to match
prev
Everything after the element
siblings
the element

5.3, filter selectors

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, starting from 0
start counting

:odd matches all elements with an odd index value, starting from 0
start counting

:eq(index)
matches an element at a given index

:gt(index) matches all elements greater than the given index value

:lt(index) matches all elements less than the given index value

:header matches such as h1, h2, h3
heading elements like

: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
the element

:text
matches all text input boxes

:password
Matches all password input boxes

:radio
matches all checkboxes

:checkbox
match all checkboxes

:submit matches all submit buttons

:image matches all img
Label

:reset matches all reset buttons

:button matches all input type=button