Comparison between jquery and JS native methods

Input tag Explanation

<input/> as the Type property of the button: button, submit (followed by a comparison of the two)

　　　　

(interaction effects are related to browsers and operating systems)

Limitations of <input/>

<input/> is a self-closing tag (cannot nest other tags), so you cannot define complex style buttons, so-called complex styles, which are generally referred to as a mixed-text button, as shown in:

　　　　　　

If you want to implement a complex button style, we can choose to use the button tag.

Form tags in the search box <form></form>

<form> Basic Structure

　　　　

Action property: determines which port of the form will be submitted to the server

Target property: Determines how the page opens

Method property: By default, get is used

The default behavior of the <input/> submit button:

When the <input/> tag type= "Submit", the form content can be submitted to the server

The button must be placed inside the form element to be submitted, that is, within the <form> tag

Example one: Implementing a simple search box

<HTML><Head>    <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge"/>    <title>Bing Search</title>    <styletype= "Text/css">Body{Background-color:#333;}. Bg-div{position:relative;Background-image:URL (river.jpg);width:1228px;Height:690px;margin:0 Auto;}. Logo{Background-image:URL (logo.png);Height:53px;width:107px;float: Left;margin:-4px 18px 0 0;}. Search-form{float: Left;Background-color:#fff;padding:5px;}. Search-text{Height:25px;Line-height:25px;float: Left;width:350px;Border:0;Outline:None;}. Search-button{Background-image:URL (search-button.png);width:29px;Height:29px;float: Left;Border:0}. Search-box{position:Absolute;Top:150px; Left:200px; }    </style></Head><Body> <Divclass= "Bg-div">     <Divclass= "Search-box">     <Divclass= "logo"></Div>              <formclass= "Search-form"Action= "Https://cn.bing.com/search"Target= "_blank">             <inputtype= "text"class= "Search-text"name= "Q"/>             <inputtype= "Submit"class= "Search-button"value=""/>         </form>     </Div> </Div></Body></HTML>

View Code

Example two: Implementing a search box with smart hints

Knowledge points that need to be mastered:

Complete dynamic effects with JQUERY&JS

Event bindings and event proxies

AJAX () is used to exchange information directly with the server

Other: IE Compatibility View settings:

Comparison between jquery and JS native methods