JAVA Training - Front End

Articles Catalogue

HTML

  • Html tag library (building blocks, ugly interface)
  1. Pseudo-XML specification
    1. Only one root node
    2. Each node (multiple sub-nodes, multiple attributes, content)
    3. Each node (open node, closed node)
  2. Label Framework (html, head, body)
    1. According to HTML 5 standard
    2. head: Non-display, set line labels
    3. body: the display content of the document
  3. Label type:

    1. Basic label
      1. <a href= "http://www.baidu.com" target="_new">Baidu</a>
      href: target address; target: page display location
      2. <img src="a.jpg" width="250px" height="400px">
      img can lead to image stretching, which is not suitable for background.

    2. Panel Label
      1. <div> </div> (block element)
      2. <span> </span> (in-line elements)

    3. Data Label (Form Label)

      • <form>
        1. Action Data Submission Address
        2. The types of Method requests get, post
          a) Get information on the address bar
          b) Post information on the body of the protocol
      • <input>
        1. Type control type
        2. Value parameter value
      • < Select > drop-down list
      • < textares > multiline text
      • Table > Table Data Display

    4. Location label

      1. <p> Content </p> Paragraph
      2. <br> Next line
      3. & nbsp space

    5. Effect label

      1. <b> bold type
      2. <h1>... Title < H5 >

    6. List label

      1. < ol > < li > < / Li > < / OL > ordered list
      2. < UL > < li > < / Li > < / UL > unordered list

CSS

  • Cascading Style Sheet
    color: red;background-color: green;

    1. Attribute: Style;

    2. Color settings:
      color: red;
      Color: f00/ ff0000; (RGB color value)
      color:rgba(255,0,0,0.5); (a: transparency)
      Priority:
      Range of choice (the larger the range, the smaller the priority)
      Loading order (priority of subsequent loading)
      Specific priority (! important)

    3. usage

      1. In-line use (current label is valid, priority is high, exceptional use)
        <a href="" style= "color: red; background-color: green;">legalization</a>

      2. Intra-page use

        <style type="text/css">
				a{
			/* 		color:red; */
			/* 		color: #f00; */
					color:rgba(255,0,0,0.5);
					background-color: green;"
				}
			</style>

      3. Out-of-page use (selector writes files to support browser caching)
        <link href="a.css" rel="stylesheet">

    4. Selector (Select Style Implementation Labels)

      • a {} Label Selector

      • # a {} id selector id attribute value (unique in the page)

      • Class attribute value of. aa {} class selector (multiple settings)
        <a class="a11 back" href="#">111</a>

      • [aaa='a1'] attribute selector (if the attribute value is numeric or Chinese, single quotation marks must be added)

         <a aaa="a1" href="#">222</a>
[aaa=a1]{
					color:green;
				}

      • a, div {} or selectors a and div are valid

      • Div a {} home selector (all a tags in the div tag)

      • Div > a {} descendant selector (direct descendant a tag in div tag)

      • hover pseudoclass (label status selector)

    5. box model + location

      • Margin: Outer margin (fine-tuned position, occupied in-situ position)
      • border: border (Settings: Color, Style, Thickness)
      • padding: Internal margin (content location changes, may lead to size changes)
      • position+left+right+bottom+top location
        • position: fixed super absolute positioning (ignoring the hierarchy, positioning by the top left corner of the document, a separate layer)
        • position: absolute positioning (the most commonly used positioning, positioning according to the upper left corner of the upper container, the upper container is also absolute positioning)
          iii. position: relative relative relative positioning (positioning in situ)

    6. Common attributes

      • Display display mode (none, block, inline)
      • visibility: hidden invisible hiding
      • float: alignment and positioning
      • Cursor: cursor
      • outline: none; hides the input focus border
      • z-index: Setting the priority of overlapping tag styles
      • overflow: solution beyond scope

    7. Simple css3

    8. Additional Framework and Use

      • Animate.css
      • Buttons.css

JavaScript

  • Not java, do page interaction (animation, events)

usage

  • Events, in-line usage

    <a href="#" onclick="alert(11)">lhy</a>

  • In page

    	<script>
		function ok(){
				alert(11)
		}
		</script>

  • Out of page

    <script type="text/javascript" src="js/my.js" ></script>

Grammar (Weak Type)

			var a = 100;/*Definition of variables*/
			var b = "qwe";	//Change variables at any time
			c = "123";	//var can be omitted
			d = {1,2,3,4};/*array define*/
			e = {name:"123",sex:2};/*Object Definition*/
			alert(e.name);	//Object attributes
			function add(a,b){/*Function definition, no return value, no type of parameter*/
				return a+b;
			}
			function add(a,b，c){
				if(!b)b=100;	//Judge null, undefined, false
				return c(a,b);
			}
			var fun = function(a,b,c);	//Variable value is function
			fun(11,22,function(c,d){	//Anonymous function
				alert(c+d);
			})

null (empty), NaN (calculation failure), undefined (illegal operation, undefined)

BOM

  • Browser Object Model
  • navigator: Browser Basic Information (Browser Compatibility)
  • navigator.product
  • Screen: User Screen Information
    • screen.deviceXDPI
  • History: Browser History
    • history.back(): equivalent to clicking the back button in the browser
    • history.forward(): the same as clicking the forward button in the browser
    • history.length; browser history
  • Location: Get the current page address (URL) and redirect the browser to a new page
    • location.reload: refresh
    • locating.href: Go to the destination address
  • window: Superior to all BOM objects

    • Window method:

      window.open("http://www.baidu.com","_self");
      window.open("index.html","_new","width:100px;height:100px");
      this.resizeTo(300,500);
      this.close();
      window.moveTo();
      window.scrollBy();

    • Dialogue box method

      		alert()	；//MsgBox 
		if(confirm("yes/no"))	//Option Dialog
			alert("yes");
			var str = prompt("input");	//Enter dialog box
			alert(str);

    • timer

      	 var pos;
			function ok(){
				pos = setTimeout(function(){
					alert("ok");
				},3000)
			}
			function size(){
				clearTimeout(pos);
			}

DOM

document object model: document object template (each tag is an object)

  • Getting objects

    1. The label id attribute is a variable name

      mydiv.innerHTML = " ";

    2. Using getElementById

      var d = document.getElementById("my");
      d.innerHTML = "111";

    3. Use

      var d = document.getElementsByTagName();
      d[0].innerHTML = "111";

    4. Use

      var d = document.getElementsByClassName();
      d[0].innerHTML = "111";

  • Modify objects

    1. value/input
    2. name
    3. innerHTML
    4. style
    5. class classList

      d[1].style.color="#0f0 "; // Manipulate css
      var left = d[1].offsetLeft；//read-only

  • Create and delete

    1. Additional label

      • First

        var d = document.getElementsByTagName("div");
        var a = document.createElement("a");
        a.href = "#";
        a.innerText = "My";
        d[0].appendChild(a);

      • Second

        var d = document.getElementsByTagName("div");
        d[0].innerHTML = "qwe";

    2. delete a tap

      var d = document.getElementsByTagName("a");
      d[1].parentElement.removeChild(d[1]);

    3. Event: (Bubble Event: Click on child tag, parent tag linkage response)

      • onclick = ok; // tag add event
      • window.onload = function()//js script joins events
      • Event object, event object (public event)
      • this object, event source itself

Object-oriented

var user={name:"lhy",sex:1,mov:function(x,y){
				alert(x+y);
			},sub:[2,12,"233"]};			//prop
			alert(user.name);
			user.mov(10,11);
			alert(user.sub[2]);

function user(name){			//Class, Construction Method
				this.name = name;		//Instance variables
				this.mov = function(){	//Example method
					add();
				}
				function add(){			//Private methods
					alert(sex);
				}
				var sex = 0;			//private variable
			}
			
			var u = new user("lhy");
			u.mov();
  • inherit
  1. Prototype Inheritance
			function user(){
			}
			user.prototype.age=100;
			var u = new user();
			alert(u.age);
  1. call inheritance
function user(){
				this.age=21;
			}
			function myuser(){
				user.call(this);
				this.name="lhy";
			}
			
			var u = new myuser();
			alert(u.name)
			alert(u.age);

Cavas: Drawing pictures

debugging

  • console.log(), equivalent to syso output

ajax

  • Asynchronous Javascript And XML (Asynchronous Javascript And XML or HTML)
  • Asynchronous request (web server), non-refresh request
  • Steps:
    1. var hr = new XMLHttpRequest(); // Create
    2. hr.open("GET", "js/a.json"); //settings
    3. hr.send(); // send, send with parameters
    4. hr.onreadystatechange; // status change
			function sendmsg(){
				var hr = new XMLHttpRequest();	//Establish
				hr.open("GET","js/a.json");	//Set up
				hr.send();	//Send with parameters
				hr.onreadystatechange=function(){
					if(hr.readyState==4){			//Judgment of state
						var str = hr.responseText;		//Response content
						var obj = eval("("+str+")");//json object to prop
						mya.innerText = obj.name;
					}
				}
				console.log()
			}
  • Asynchronous request processing:
    1. Define onreadystatechange before sending
  • json:
    1. Consistent with the prop object, no method can be added
    2. Key value must be added ", value, number, Boolean can not be added";
    3. Characters: {} - Objects; [] - Arrays; Keys: Values; Keys: Values; Arrays and Objects can be infinitely nested

Bootstrap (css framework)

  • cdn server: content distribution network
  • css custom style (control, label)
  • css grid (dynamic layout)
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  • Root container:
    1. container (fixed width)
    2. container-fluid (100% width)
  • Create rows and manipulate columns (columns do not need to be created, 12 columns)
<div class="row">       //Each row
	<div class="col-md-6 col-sm-10" 
		style="height: 100px;background: #f0f;"></div>
	<div class="col-md-6 col-sm-2" 
		style="height: 100px;background: #f00;"></div>
	</div>

Unable to place (12 columns exceed) automatic Line-Changing

  1. Cleafix: Columns may appear higher than other columns, column height alignment
  2. con-mod-4: Shift the column to the right
  3. col-md-push-3: column sorting
  4. hidden-xs: hiding
  5. visible-xs: Display
  • js tool (control control control)
    1. jQuery Strong Dependency

jQuery (js Tool Library)

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

selector

  • $("label /. class/#id")

Consistent with css selector

$("a")

Get the number of choices

$("a").length

Convert jQuery to JS tag object: $(js tag object) [index]
1. Index conversion
2. jQuery comes with get(index) conversion

var HtmlElement=$("div")[0];

Converting js objects to jQuery:$() is a jQuery object in brackets

var a = document.getElementById("aaa")
var aa = $("a")
alert(aa.length)

Method Continuous Use

var aa = (&quot;a&quot;).add((&quot;a&quot;).add(("a").add(("div")).add($("span"))

Selector container add, add when defining variables, otherwise add fails

var aa = (&quot;a&quot;).add((&quot;a&quot;).add(("a").add(("div"))

ergodic

var aa = (&quot;a&quot;).add((&quot;a&quot;).add(("a").add(("div"))
aa.each(function(i,o){ // i index, o per js object
alert(o)
})

retrieval

  1. Superior
    parent: first-level Supervisor
    parents: selector queries along the superior to find eligibility

    $(o).parents("span").attr("aaa")

  2. Brother
    prev: The previous one
    prevAll: All previous
    next: the latter
    Next All: Later All
    siblings: Query all eligible brothers

  3. subordinate
    children(expr): a layer of sub-elements, a direct child node
    find(expr): All descendants of selectors are searched
    contents(): Find all of the following, including nodes and text

dom operation

  1. text(): (without reference) get + (with reference) set text;

  2. HTML (html script): no parameters to get + (with parameters) setting content (including text, label);

  3. Attr (attribute name, value): (a parameter) get attribute + (two parameters) set attribute value

  4. prop (attribute name, value): same attr;

  5. val (value): (no parameter) get + (parameter) set value property

  6. css (prop object):

    $(o).css({color:"red",background:"green"})

    If there is a minus sign attribute:
    1. "background-color" with quotation marks
    2. backgroundColor, capitalized after minus sign

  7. css (attribute name, value): (a parameter) get attribute + (two parameters) set attribute value

    $(o).css("color","red")

  8. Add and delete

    1. Add:

      	$(".aaa").html("<a href="#">lhy</a>")

       	var a = $("<a></a>").attr("href","#").text("Say what you say and divide it.");
				$(".aaa").append(a)

    2. Delete:

      $(".aaa").remove()	//Delete oneself

      $(".aaa").empty()	//Empty oneself content

  9. Loading completed

    $(function(){
    //window.onload, load ahead of time
    })

  10. Event:

    • Stop bubbling

      event.cancelBubble = true;

    $(function(){
				//$(".classname")
				$(document).bind("click",".aaa",function(){
					event.cancelBubble = true;	//Combining $("attribute value") to solve bubbling problem
					alert(1)
				})
			})

  11. bind method: bind event ()

animation

  1. Hide and display HTML elements

    hide() and show()

  2. Fade

    fadeIn() fadeOut() fadeToggle() fadeTo()

  3. Sliding effect

    slideDown() slideUp() slideToggle()

       $(".bbb").hide(5000,function(){    //Animation Time, Callback Method
        		alert(1);
        	});

  4. Custom animation: animate()

    $(".bbb").animate({width:"50px",height:"50px"},2000);

Ajax

$.post("a.json",{},function(json){
},"json");

	$.ajax({
			type: 'post',
			url: 'a.da',
			dataType: 'json',   Return object type
			async:true,
		contentType:"application/x-www-form-urlencoded"
			'application/json'	   Background processing json
			'multipart/form-data'  file
			data:{}   Request parameters
			success:function(JSON){
				//Result Processing
			}

Keywords: Attribute JSON JQuery Javascript

Added by prasadharischandra on Thu, 15 Aug 2019 14:32:32 +0300

Popular Keywords

©2024 Programming VIP