jquery Summary section

Source: Internet
Author: User

1, in <script>, if you need to open the page to load the part, you need to write first

$ (function () {
});

Then write the ID of the input or div that needs to be easyui, or they won't become the plugin you want. Of course, other functions, such as the onclick (), should be written out.

2, $.get ()
$.get () is a simplified $.ajax (). Usage such as

$ ("button"). Click (function () {
$.get ("Demo_ajax_load.txt", function (Result) {
$ ("div"). html (result);
});
});


Here are 2 points of knowledge:
A, if you want to get the value returned by the server, you must use the method that adds the function later. The reason is: it is an asynchronous call, JS will not get the value of the remote server before it executes, it will cause the following value is not what you want. Like what:

var str= "";
$.get ("Index/sertime", function (data) {str=data;});
alert (str);

You will find that the last Str is not the result from the server. Because the server has not got the value before, it is already alert. But if you execute the statement the second time, you'll get the last thing you returned from the server.
The solution to this problem can be rewritten as follows:

$.get ("Index/sertime", function (data) {alert (data);});

Alternatively, you can use the following method.
b, replace the simplified version of the $.get with $.ajax
$.get equivalent to:

$.ajax ({
Url:url,
Data:data,
Success:success,
Datatype:datatype
});

$.get the use of transport parameters:

$.get ("test.php", {name: "John", Time: "2pm"});

Usage of $.ajax:

$ ("#ButAjax"). Click (function () {
$.ajax ({
Type: "POST",//default is get
URL: "/test/getperson",
Data: "Id=1&firstname=c&lastname=hy",
Async:true,//Async
Cache:false,//Do not load cache
Success:function (obj) {
Alert (obj.id + obj. FirstName + obj. LastName + obj. Man);
},
Error:function () {
Alert ("Request Failed");
}
});
});

Visible, $.get and $.ajax, are called asynchronously by default. So if you want the JS statement to execute the next statement after this sentence is executed, you can set Async to False, that is, do not invoke asynchronously. So, the same:

var str= "";
$.ajax ({url: "Index/sertime", async:false,success:function (data) {str=data;});
alert (str);

In this way, the result is what you want. That is, if the page is in the open state, and then click the button, you want to assign a value to what control, you will change async to false.

3, javascript:void (0) and javascript: Meaning
In the <a> tab, the original link is abolished, and there are 3 ways to use the JS function.
A, <a href= "#" onclick= "Myclick ()" > Link </a>, this is generally not recommended because it will appear in the Address bar # or cause other issues that affect the user experience.
B, <a href= "javascript:void (0)" id= "a1″> link </a> In this way, set its click events in the JS script

$ (function () {
$ ("#a1 ″)." Click (function () {alert ("link A1″);});
});

C, <a href= "javascript:;" id= "a2″> link </a> this way is similar to the previous one, also set its Click event in the JS script, but for the time being use this more, It is said that the second type, although it does not have a return value, does not execute any code if it is written.

$ (function () {
$ ("#a2 ″)." Click (function () {alert ("link A2″);});
});

Easyui Summary Section
1. Wording
Easyui can be written in 2 ways. One is to write the label directly, by adding: class= "easyui-type", such as class= "Easyui-tabs" in the label. Another way of writing is to write a simple input or div with the tag, and then write the code in the JS file, such as:

$ ("P"). Panel ()

2. Easyui properties, methods, events, constructors
A, in the JS write UI constructor, it seems that can only write JS properties or events, such as:

$ (' #tt '). Tabs ({
Border:false,
Onselect:function (title) {Alert (title+ ' is selected ');}
});

b, the value of the attribute, and the wording of the assignment

$ (' P '). Panel (). Title

The above notation is only a notation of values. If you need to assign a value, you still need to write the constructor again

$ (' P '). Panel ({title: "This is the post-change title"});

In this way, you can change only one property, and the other property will not change.
C, the method of writing
How to do without parameters:

$ (' TT '). Tabs (' getselected ');

The notation of the parameter method:

$ (' P '). Panel (' move ', {left:100,top:100});

3. Tabs Plug-in
Tabs is a combination of multiple panel. In practice, the method of adding tabs is as follows:

function AddTab (tit) {
if (!$ (' #tt '). Tabs (' exists ', tit)} {//See if this title exists
$ (' #tt '). Tabs (' Add ', {title:tit, content: ' Tab Body '});
}}

4. DataGrid Edit
A, paging statements

SELECT * FROM (
Select RowNum r, field1,field2 from table_name where rownum > = page* rows) where R < (page-1) * rows

B, double-click the row, do the operation
Write in the constructor:

Ondblclickrow:function () {
var selected = $ (' #test '). DataGrid (' getselected ');
if (selected) {
window.open ("Dataview.action? Id= "+selected.id);
}}

C, delete

function Delaff () {
$.messager.confirm (' Confirm ', ' Is it really deleted? ', function (r) {
if (r) {
var selected = $ (' #test '). DataGrid (' getselected ');
if (selected) {
var index = $ (' #test '). DataGrid (' Getrowindex ', selected);
$ (' #test '). DataGrid (' DeleteRow ', index);
Deletesubmit (selected);
}
}
});
}
function Deletesubmit (selected)
{
var url= "Datadelete.action? Id= "+selected.id;
$.post (
Url
);
}

The deletion of the page and the deletion in the database are implemented.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.