Web Front-end Basics (06)

###JavaScript object classification

Built-in objects: number/ String/Boolean, etc
BOM: Browser Object Model Browser Object Model
Document Object Model ###BOM

Window: The properties and methods of this object are called global properties and methods, and the window can be omitted when accessed.

Common methods in Windows:

Window.isnan () checks if the variable is a NaN
Window.alert () Displays an information dialog box
Window.confirm () A confirmation dialog box is displayed
ParseInt ()/parseFloat() converts a string or value to an integer/decimal
Var timer =setInterval Enable the timer
ClearInterval (timer) Stops the timer

Common properties in Windows:

History.back () returns the previous page history.forward() goes to the next page
Location: window.location.href Get and modify the browser access address location.href= “www.baidu.com”; location.reload(); The refresh
Screen Screen screen.width/height Gets the screen resolution
Navigator Help/Navigation Navigator. userAgent Gets the version information of the browser

# # #

What is an event: a mouse event, a keyboard event, a state change event, provided by the system at a specific point in time
Mouse events:
1. Onclick Mouse click event
2. Onmouseover mouseover event
3. Onmouseout Mouse out event
4. Onmousedown Mouse down event
5. Onmouseup Mouse lift event
6. Onmousemove Mouse movement event
Keyboard events
1. Onkeydown Keyboard down event
2. Event.keycode retrieves the keyCode string.fromcharcode () converts the keyCode into characters
State change event
1. Onload page load completion event
2. Onchange Indicates the event that the value changes
3. Onresize Indicates the window size change event
Event binding (how to add events to elements)
1. Event attribute binding
2. Dynamic binding (adding events to elements later through JS code)
Event passing (event bubbling): If events of multiple elements need to be responded to at one location, the response order is passed from bottom to top (similar to bubbles), so it is also called event bubbling ###DOM
Document Object Model Document Object Model, including the content related to the page
Var d = document.getelementById (” id “)
Gets and modifies the innerText of the element’s text content
InnerHTML Gets and modifies the HTML content of the element
Gets and modifies the value of the element input.value Element object. name/id/value\
###jQuery framework ###jQuery framework
This is a framework written by THE JS language, the original JS language encapsulation, role: improve the efficiency of development.
The jQuery framework is a normal JS file that can be imported externally.
Js object and jq object conversion to each other: (js object and jq object is not a thing, can’t call each other’s way, sometimes only js object but need to use in jq framework method at this time will need to use the following method to js object to jq, similarly sometimes gets only jq object but need to call the inside of the js object method, To convert jQ objects into JS objects, use the following method)

Var js = document.getelementById (” d1 “); Var jq = $(“#d1”);
1. Var jq = $(js);
2. Jq to js: var js = jq[0]; # # # selector

The base selector is used as in CSS

Id selector $(“#id”)
Tag name selector $(” div “)
Class selector $(“.class”)
Group selector $(“#id,div,.class”)
Arbitrary element selector $(“*”)

Hierarchy selector

$(” div span “) matches all spans within div (including all descendant spans)
$(” div>span “) matches all span child elements within div
$(” div+span “) matches the span following div
$(” div~span “) matches all spans following div
Hierarchical methods:
1. $(“# ABC “).prev(” div “) matches the older div element with id ABC
2. $(“# ABC “).prevall () matches the sibling element whose id is ABC
3. $(“# ABC “).next() matches the sibling element with id ABC
4. $(“# ABC “).nextall () matches the siblings of the element whose ID is ABC
5. $(“# ABC “).siblings() matches all siblings of the ABC element
6. $(“# ABC “).parent() matches the parent of the element
7. $(“# ABC “).children() matches all the children of the element

Filter selector

$(” div:first “) matches the first div
$(” div:last “) matches the last div
$(” div:eq(n) “) matches div with subscript n starting at 0
$(” div:lt(n) “) matches div with subscript less than n
$(” div:gt(n) “) matches div with subscript greater than n
$(” div:not(.abc) “) matches all divs, excluding those whose class value is ABC
$(” div:even “) matches div with even subscripts
$(” div:odd “) matches div with subscript base

Content selector

$(” div:has§ “) matches div that contains p child elements
$(” div:empty “) matches the empty div
$(” div:parent “) matches a non-empty div
$(” div:contains(‘ XXX ‘) “) matches div containing XXX text

Visible selector

$(” div:visible “) matches all displayed divs
$(” div:hidden “) matches all hidden divs
Display and hide related methods:
1. $(” # ABC “). The show ()
2. $(” # ABC “). Hide ()
3. $(“# ABC “).toggle() shows the hidden toggle

### Selector review:

Base selector

Tag name div
id #id
class .class
Grouping div, # id, class
Any element

Hierarchy selector

Descendants div span
Child elements div > span
Brother div + span
Younger brothers div – span
Prev () siblings.prevall () siblings.next() siblings.nextall () siblings.parent() siblings.children()

Filter selector

The first div: first
Last div:last
The first n div: eq (n)
< n div:lt(n)
> n div:gt(n)
Do not include the div: not (XXX)
Even the div: even
Base div: odd

Content selector

Contains child elements div:has(XXX)
An empty div elements: the empty
Non-empty element div:parent
Contains text element div: Contains (XXX)

Visible selector

All visible elements div:visible
All invisible div:hidden
Related methods: display.show () hide.hide() show hide toggle()

Practice:

Timer 1.

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var i = 0;
			// Enable the timer to call the myfn method every 1 second
			// Call the method directly and pass the method as an argument without parentheses
			var time1 = setInterval(myfn, 1000);
			function myfn(a) {
				console.log(i++);
				if(i>10) {// Stop the timer
					clearInterval(time1)
				}
			}
			/ / the second
			var time2 = setInterval(function(){
				console.log("Second kind :"+i)
				if(i>10) {// Stop the timer
					clearInterval(time2)
				}
			},2000);
			
			// The timer is executed only once
			setTimeout(function(){
				alert("Time's up");
			},3000);
				
		</script>
	</body>
</html>
Copy the code

2. Timer exercises

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="mydiv"></div>
		<script type="text/javascript">
			// Add an image to mydiv every 1 second and stop after 10 seconds
			var timer = setInterval(function(){
				mydiv.innerHTML+="";
			}, 1000);
			// Create a timer to execute after 10 seconds
			setTimeout (function(){
				clearInterval(timer);
			},10*1000);
		</script>
	</body>
</html>
Copy the code

3. Mouse events

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 300px;
				height: 300px;
				background-color:red;
			}
		</style>
	</head>
	<body>
		<div onmouseover= " overfn()" onmouseout= " outfn()" onmousedown= " downfn()"
		onmouseup= "upfn()" onmous emove= " movefn()">
		</div>
		<script type="text/javascript">
		function downfn(a){
		console.log("Mouse down");
		}
		function upfn(a){
		console. log("Mouse up");
		}
		function movefn(a){
		console.log("Mouse movement");
		}
		function overfn(a){
		// Quick clog
		console.log("Mouse in");
		}
		function outfn(a){
		console.log("Mouse out");
		}
		</script>
	</body>
</html>
Copy the code

4. Keyboard events

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
		<script type= "text/javascript">
		// Page load complete event!
		onload =
		function(){
		i1.value="abc";
		function downfn(a){
		// Get the key code
		console.1log("Keyboard press :"+event.keyCode);
		function upfn(a){
		// Convert key encoding to character
		console.log("Keyboard lift :"+String.fromCharCode(event.keyCode)) ;
		}
		</script>
	</head>
	<body>
		<input type= "text" onkeydown= "downfn()" onkeyup="upfn()" />
		<script type="text/javascript">
		function downfn(a){
		console.log("Keyboard down");
		}
		function upfn(a){
		console.log("Keyboard up");
		}
		</script>

	</body>
</html>
Copy the code

5. Value change events

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="Property event binding"
			onclick="Alert (' event triggered! ')"/>
		<input type="button" value="Dynamic binding" id="btn" />
		<select id="s" onchange="changefn()">
			<option value="bj"> Beijing </option> <option value="sh"> </option> <option > Guangzhou </option> </select> <script type="text/javascript">
			// Dynamic binding events can be used to separate JAVASCRIPT code from HTML code
			btn.onclick = function(){
				alert("Dynamic binding successful!");
			}		
			function changefn(a){
				// Get the value in the dropdown when the value changes
				alert(s.value);
			}			
			onresize = function(){
				console.log("Window size changed");
			}
		</script>
	</body>
</html>
Copy the code

6. Event delivery

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				border:1px solid red;
			}		
		</style>
	</head>
	<body>
		<div onclick="alert('div')">
			<p onclick="alert('p')">
				<input type="button" value="Button" onclick="Alert (' button ')"/>
			</p>
		</div>
	</body>
</html>
Copy the code

7. Introduction of jQuery

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="d1">		
		</div>
		<input type="text"/ > <! <script SRC = <script SRC =".. / js/jquery - 1.4.2. Js. "" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// Select div from page with id selector and change the text inside to ABC
			$("#d1").text("abc");
			// Native JS
			/* var d1 = document.getElementById("d1"); d1.innerText="abc"; * /
			// The val() equivalent js value attribute cannot be mixed
			$("input").val("Test");	 
		 // how to get the object
		 var js = document.getElementById("d1");
		 // How jq gets objects
		 var jq = $("#d1");			
		</script>
	</body>
</html>
Copy the code

8. Object conversion

<! DOCTYPE html> <html> <head> <meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="i1"/>
		<input type="button" value="Js turned jq." " id="b1"/>
		<input type="button" value="Jq turned js." " id="b2"/>	
		<script src=".. / js/jquery - 1.4.2. Js. "" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// Dynamically bind events in jQuery
			$("#b1").click(function(){
				// Get the js object
				var js = document.getElementById("i1");
				// The js object becomes a Jq object
				var jq = $(js);
				//jq.val() gets the value of the text box
				alert(jq.val());
			});
			$("#b2").click(function( ){
				// Get the js object
				var jq = $("#i1");
				// The jq object is converted into a js object. The Jq object is actually an array
				var js = jq[0];
				alert(js.value);
			});
		</script>
	</body>
</html>
Copy the code

To be continued…

Practice:

Related Posts

The execution timing of the JS function

JavaScript image synthesis download

The difference between call, apply and bind