WEB-jQuery

Time:2021-1-17

1 jQuery overview

JQuery is a fast and concise JavaScript framework. The purpose of jQuery design is “write less, do more”, that is to advocate writing less code and doing more things. It encapsulates the common function code of JavaScript, provides a simple JavaScript Design pattern, optimizes HTML document operation, event processing, animation design and Ajax interaction.
The core features of jQuery can be summarized as follows: it has unique chain syntax and short and clear multi-functional interface; it has efficient and flexible CSS selector, and can extend CSS selector; it has convenient plug-in extension mechanism and rich plug-ins. JQuery is compatible with various mainstream browsers, such as IE 6.0 +, FF 1.5 +, Safari 2.0 +, opera 9.0 +, etc.

1.1 advantages

(1) Can greatly simplify the JS code

JavaScript mode:

var ele =  document.getElementsByTagName ("P"); // label
var ele =  document.getElementsByClassName ("info"); // style
var ele =  document.getElementById ("name"); // ID attribute

There are three ways of jQuery selector

Var ele = $("P"); // access tag
Var ele = $(". Info"); // access the class style of CSS
Var ele = $("#name"); // access ID attribute

(2) You can get HTML elements like CSS selectors
Get all the divs in CSS and add styles to them

Div {CSS attribute... }

Get all div in jQuery and add border style to div:

$("div").css("border", "2px solid red");

(3) You can control the effect of the page by modifying the CSS properties
(4) Compatible with common browsers
For example, innerText attribute, removenode() function and replacenode() function in JS can’t be used in some browsers.
The corresponding functions (text function, remove function, replacewith function) are provided in jQuery
Common browsers: Google browser, Firefox browser, apple browser, oppen browser~~~~

1.2 introduction of HTML into jquery

<script type="text/javascript"></script>

Note that the < script > tag should be in the < head > section of the page.

2 events

Document ready event function provided by query (short form)

<script> 
$(function () {// execute immediately after the browser loads a complete HTML web page}); 
</script>

Its complete writing method is as follows:

<script>
$(document). Ready (function () {// execute immediately after the browser loads a complete HTML web page});
</script>

When the button click event is triggered:

$("button").click(function() {..some code... } )

WEB-jQuery

3 selector

3.1 basic selector

(1) Element name selector 
$("div") -- select all div elements 
$("span") -- select all span elements 

(2) Class / class selector 
$(". S1") -- select all elements with class value S1 (the element with class value S1 may be any element) 
$("span. S1") -- select all span elements with class value S1 

(3) ID selector 
$("#one") -- select the element with id one 

(4) Multi element selector 
$("div, span,. S1, # one") -- select all div elements, all span elements, all elements with class value S1, and elements with id one

3.2 level selector

$("div span") -- select all span elements within all Div 
$("############################################# 
$("#two"). Prev ("span") -- select the span sibling element immediately before the element with ID two 
$("#two ~ span") -- select all the span siblings after the element with ID two $("#two"). Nextall ("span") -- select all the span siblings after the element with ID two 
$("#two"). Prevall ("span") -- select all the span siblings in front of the element with ID two 
$("#two"). Siblings ("span") -- select all span siblings before and after the element with ID two

3.3 basic filter selector

(1) Select the first div element 
$("div:first") 
$("div:eq(0)") 
$("div").eq(0) 

(2) Select the last div element 
$("div:last") 
$("div:eq(-1)") 
$("div").eq(-1) 

(3) Select the N + 1st div element (n starts from zero) 
$("div:eq(n)") 
$("div").eq(n)

4 AJAX

Ajax overview:
Ajax = asynchronous JavaScript and XML.
In short, without overloading the whole web page, AJAX loads data through the background and displays it on the web page to achieve partial refresh.
Application cases using Ajax: Google maps, Tencent Weibo, Youku video, Renren, etc.

JQuery and Ajax:
JQuery provides several Ajax related methods.
Through the jQuery Ajax method, you can use HTTP get and HTTP post to request text, HTML, XML or JSON from a remote server – at the same time, you can load these external data directly into the selected elements of the web page.

Local refresh:
WEB-jQuery

4.1 jQuery Ajax interaction

Jquery load() method:

$(selector).load(URL,data,callback);

The required URL parameter specifies the URL you want to load.
The optional data parameter specifies the set of query string key / value pairs to be sent with the request.
The optional callback parameter is the name of the function to be executed after the load() method completes.

JQuery $. Get() method:
The $. Get () method requests data from the server through an HTTP get request.

$.get(URL,callback);

RequiredURLParameter specifies the URL you want to request.
OptionalcallbackParameter is the name of the function executed after the request succeeds.

JQuery $. Post() method:
The $. Post () method requests data from the server through an HTTP post request.

$.post(_URL_,_data_,_callback_);

RequiredURLParameter specifies the URL you want to request.
OptionaldataParameter specifies the data to be sent with the request.
OptionalcallbackParameter is the name of the function executed after the request succeeds.
Classic case:

<script>
    $(document).ready(function() {
        $.ajax({
            type: "POST",
            url: "https://p.3.cn/prices/mgets",
            contentType: "application/json;charset=utf-8",
            Data: {// the parameter of the splice
                "skuIds": "J_100003717483"
            },
            dataType: "jsonp",
            Success: function (data) {// the returned result            
                $('# rtndata'). Text ("return data:+ JSON.stringify (data));
                $('# - itemid'). Text ("commodity No.: + data [0]. ID));
                $('# itemprice'). HTML ("commodity price: < span style =) color:red '>" + data[0].p +"</span>");
            },
            error: function(data) {
                Alert ("submit failed"+ JSON.stringify (data));
            }
        });
    });
</script>

Recommended Today

Background management system menu management module

1 menu management page design 1.1 business design Menu management, also known as resource management, is the external manifestation of system resources. This module is mainly to add, modify, query and delete the menu. CREATE TABLE `sys_menus` ( `id` int(11) NOT NULL AUTO_INCREMENT, `Name ` varchar (50) default null comment ‘resource name’, `URL ` varchar […]