Web front-end foundation (06)

###Object classification in JavaScript

1. Built-in objects: number/string/boolean, etc.
2. Browser related objects BOM: Browser Object Model
3. Page related objects DOM: Document Object Model
   ###BOM browser related content

• window: The properties and methods of the object are called global properties and global methods, and window can be omitted when accessing.

1. Common methods in window:

• window.isNaN() Determine whether the variable is NaN
• window.alert() pops up a prompt box
• window.confirm() pops up a confirmation box
• parseInt()/parseFloat() convert a string or value to an integer/to a decimal
• var timer =setInterval(method, time interval) start the timer
• clearInterval(timer) Stop the timer

2. Common attributes in window:

• history: History (history of the current window)
  window.history.length Get the number of history pages
  history.back() Return to the previous page
  history.forward() Go to the next page
• location: location
  window.location.href Get and modify the browser's access address location.href="http://www.baidu.com";
  location.reload(); refresh
• screen
  screen.width/height to get the screen resolution
• navigator help/navigation
  navigator.userAgent Get browser version information

###event

• What is an event: Some specific time points provided by the system, events include: mouse events, keyboard events, state change events

• Mouse events:

  1. onclick mouse click event
  2. onmouseover mouse move in event
  3. onmouseout mouse out event
  4. onmousedown mouse down event
  5. onmouseup mouse up event
  6. onmousemove mouse movement event

• Keyboard events

  1. onkeydown keyboard press event
  2. onkeyup keyboard up event
     event.keyCode Get key code String.fromCharCode() Convert key code into character

• State change event

  1. onload page load complete event
  2. onchange value change event
  3. onresize window size change event

• Event binding (the way to add events to elements)

  1. Event property binding
  2. Dynamic binding (add events to the element later through js code)

• Event delivery (event bubbling): If there are multiple element events at a certain location that need to be responded to, the response sequence is from the bottom to the upper level (similar to bubbles), so it is also called event bubbling
  ###DOM

• Document Object Model Document Object Model, including content related to the page

• Get element by id var d = document.getElementById("id")

• Get and modify the text content of the element innerText

• Get and modify the html content of the element innerHTML

• Get and modify the value of the element input.value element object.name/id/value
  

• The DOM related content in native JavaScript is basically fully covered in the jQuery framework, so you only need to master the use of the
  jQuery framework ###jQuery framework

• This is a framework written in js language, which encapsulates the native js language, and its role: to improve development efficiency.

• The jQuery framework is an ordinary js file, which can be imported through external import.

• The js object and the jq object are converted to each other: (The js object and the jq object are not the same thing, and they cannot call each other's methods. Sometimes they can only be the js object but need to use the methods in the jq framework. At this time, you need to use the following way to convert js (The object is converted to jq. Similarly, sometimes you can only get the jq object but you need to call the method in the js object, so you need to use the following method to convert the jq object into a js object)

  //js method of obtaining objects
  var js = document.getElementById("d1");
  //jq method of obtaining objects
  var jq = $("#d1");

  1. js to jq: var jq = $(js);
  2. jq to js: var js = jq[0];
     ###Selector

1. Basic selector usage is the same as in css

• id selector$("#id")
• Tag name selector $("div")
• class selector $(".class")
• Group selector $("#id,div,.class")
• Arbitrary element selector $("*")

2. Level selector

• $("div span") matches all spans in the div (including all descendant spans)
• $("div>span") matches all span child elements in the div
• $("div+span") matches the span behind the div
• $("div~span") matches all spans behind the div
• Level-related methods:
  1. $("#abc").prev("div") matches the div element whose id is abc element
  2. $("#abc").prevAll() matches the brother elements whose id is abc element
  3. $("#abc").next() matches the younger brother element whose id is abc element
  4. $("#abc").nextAll() matches the younger brother elements whose id is abc element
  5. $("#abc").siblings() matches all siblings with id abc
  6. $("#abc").parent() The parent element of the matched element
  7. $("#abc").children() matches all child elements of the element

3. Filter selector

• $("div:first") matches the first div
• $("div:last") matches the last div
• $("div:eq(n)") matches the div with subscript n starting from 0
• $("div:lt(n)") matches divs whose subscript is less than n
• $("div:gt(n)") matches divs whose subscript is greater than n
• $("div:not(.abc)") matches all divs and excludes divs whose class value is abc
• $("div:even") matches divs with even subscripts
• $("div:odd") matches the div whose subscript is the base

4. Content selector

• $("div:has§") matches the div that contains the p child element
• $("div:empty") matches an empty div
• $("div:parent") matches a non-empty div
• $("div:contains('xxx')") matches a div containing xxx text

5. Visible selector

• $("div:visible") matches all displayed divs
• $("div:hidden") matches all hidden divs
• Show and hide related methods:
  1. $("#abc").show() show
  2. $("#abc").hide() hide
  3. $("#abc").toggle() Show hide switch

###Selector review:

1. Base selector

• Tag name div
• id #id
• class .class
• Group div,#id,.class
• Any element *

2. Level selector

• Descendants div span
• Child element div>span
• Brother div+span
• Brothers div~span
• Related methods:
  brother.prev() brothers.prevAll() brothers.next() brothers.nextAll()
  all brothers.siblings() parent elements.parent() children elements.children()

3. Filter selector

• The first div: first
• The last div: last
• Nth div: eq(n)
• Less than n divs: lt(n)
• Greater than n divs: gt(n)
• Does not contain div:not(xxx)
• Even div:even
• Base div:odd

4. Content selector

• Contains child elements div: has(xxx)
• Empty element div:empty
• Non-empty element div:parent
• Element div that contains text: contains(xxx)

5. Visible selector

• All visible elements div: visible
• All invisible divs: hidden
• Related methods: show.show() hide.hide() show hide switch.toggle()

---

Exercise:

1. Timer

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var i = 0;
			//开启定时器每隔1秒调用- -次myfn方法
			//直接调用方法写括号,把方法作为参数传递时不写括号
			var time1 = setInterval(myfn, 1000);
			function myfn() {
    
    
				console.log(i++);
				if(i>10){
    
    
					// 停止定时器
					clearInterval(time1)
				}
			}
			// 第二种
			var time2 = setInterval(function(){
    
    
				console.log("第二种:"+i)
				if(i>10){
    
    
					// 停止定时器
					clearInterval(time2)
				}
			},2000);
			
			//只执行一次的定时器
			setTimeout(function(){
    
    
				alert("时间到");
			},3000);
				
		</script>
	</body>
</html>

2. Timer practice

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="mydiv"></div>
		<script type="text/javascript">
			//实现每隔1秒钟 往mydiv里面添加一-张图片当10秒后停止添加
			var timer = setInterval(function(){
    
    
				mydiv.innerHTML+="<img width='150' height='100' src='../images/img8.jpg'>";
			}, 1000);
			//创建一个10秒后执行的定时器
			setTimeout (function(){
    
    
				clearInterval(timer);
			},10*1000);
		</script>
	</body>
</html>

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(){
    
    
		console.log("鼠标按下");
		}
		function upfn(){
    
    
		console. log("鼠标抬起");
		}
		function movefn(){
    
    
		console.log("鼠标移动");
		}
		function overfn(){
    
    
		//快捷写法 clog 
		console.log("鼠标移入");
		}
		function outfn(){
    
    
		console.log("鼠标移出");
		}
		</script>
	</body>
</html>

4. Keyboard events

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type= "text/javascript">
		//页面加载完成事件!
		onload =
		function(){
    
    
		i1.value="abc";
		function downfn(){
    
    
		//得到按键编码
		console.1log("键盘按下:"+event.keyCode);
		function upfn(){
    
    
		//把按键编码转成字符
		console.log("键盘抬起:"+String.fromCharCode(event.keyCode)) ;
		}
		</script>
	</head>
	<body>
		<input type= "text" onkeydown= "downfn()" onkeyup="upfn()" />
		<script type="text/javascript">
		function downfn(){
    
    
		console.log("键盘按下");
		}
		function upfn(){
    
    
		console.log("键盘抬起");
		}
		</script>

	</body>
</html>

5. Value change event

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="属性事件绑定"
			onclick="alert('事件触发!')"/>
		<input type="button" value="动态绑定" id="btn" />
		<select id="s" onchange="changefn()">
			<option value="bj">北京</option>
			<option value="sh">上海</option>
			<option >广州</option>
		</select>
		<script type="text/javascript">
			//动态绑定事件 工作中使用多,可以将js代码和html代码分离
			btn.onclick = function(){
    
    
				alert("动态绑定成功!");
			}		
			function changefn(){
    
    
				//当值改变时得到下拉选里面的值
				alert(s.value);
			}			
			onresize = function(){
    
    
				console.log("窗口尺寸改变了");
			}
		</script>
	</body>
</html>

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="按钮" onclick="alert('按钮')"/>
			</p>
		</div>
	</body>
</html>

7. Introduce jQuery

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="d1">		
		</div>
		<input type="text" />
		<!-- 引入jq框架 script标签如果引入了文件就不能在标签体内继续写代码否则不执行 -->
		<script src="../js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//通过id选择器选择到页面中的div然后修改里面的文本为abc
			$("#d1").text("abc");
			//原生js写法
			/* var d1 = document.getElementById("d1");
			d1.innerText="abc"; */
			//val() 等效js中的value属性 不能混用
			$("input").val("测试");	 
		 //js获取对象的方式 
		 var js = document.getElementById("d1");
		 //jq获取对象的方式
		 var jq = $("#d1");			
		</script>
	</body>
</html>

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转jq" id="b1"/>
		<input type="button" value="jq转js" id="b2"/>	
		<script src="../js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// jQuery中的动态绑定事件的方式
			$("#b1").click(function(){
    
    
				//得到js对象
				var js = document.getElementById("i1");
				//js对象转成jq对象
				var jq = $(js);
				//jq.val() 获取文本框的值
				alert(jq.val());
			});
			$("#b2").click(function( ){
    
    
				//得到js对象
				var jq = $("#i1");
				//jq对象转成js对象，jq对象实际上就是一个数组
				var js = jq[0];
				alert(js.value);
			});
		</script>
	</body>
</html>

---

To be continued...