jQuery Study Notes
- kagula
- January 15, 2021
Selector
$("#myid")
$("div#myid")
$(".myClassName")
$("#mainTable tbody") //tbody is a html tag under the mainTable.
Add
$("#warning_parameter_setting").append("<span class=\"selected\"></span>");
var inputchange='<input id="inptchange" type="hidden">';
$("body").before(inputchange);//insert the content at the front of body.
Delete
$("span.selected").remove();
$("#sideMenu").children(".nav-item").removeClass("active open");
Modify
//<span id="spanLoginName" name="spanLoginName"> ...登陆中... </span>
$("span#spanLoginName").html(g_user.loginName);//suggest using text method.
$("span#spanDevicePort").html('...');
$("#mainTable tbody").html("");//set empty value
$("#mainTable tbody").text("");//reserved characters will be escaped.
$("#inptchange").val(myVal);//assignment a value.
Tag’s attribution
$("img").attr("width","180");
$(".progress-bar").width(percentComplete + '%');
$('#button').attr('disabled',"true"); //add disabled attribution.
...
$("#id").attr("readonly":"readonly"); //$("#ID").attr({ readonly: 'true' });
...
$("#imgId").attr('src',path);
...
$('#button').removeAttr("disabled");
...
$("#id").removeAttr("readonly");
Tag’s class attribution
$("#warning_parameter_setting").addClass("active open");//both active and open are class name.
//<button type="button" class="btn red-mint display-hide" id="btnClear">删除线条</button>
... ...
$("#btnClear").removeClass("display-hide");
- reference to《jQuery基础 – 添加/移除CSS类》
Tag’s style attribution
$("div#allMap").css("margin-top","30px");//add margin-top style
$("div#kagula_alert").css("display", "block");//add display style
$('#test').css('display', null);//remove display style
$('#test').css('display', '');//remove display style
Query
var username=$("#username").val();
$.each(data.children, function(index, el){
eachChildren(el, 0);
})
Event
$("span.selected").remove();
//input元素 input propertychange 事件的绑定
$("#inptchange").bind("input propertychange",function () {
//...
});
$("#inptchange").trigger("input"); //fire out the input event.
$("#fileInput").change(function(){
//...
});
Network
var data={userName:username,password:password};
var selectValue = $("#selectDevicePort").val();
var arr=selectValue.split(",");
var data={deviceIndex:arr[0],port:arr[1]};
console.log('updateMap(), data=' + JSON.stringify(data));
//post json string to HTTP server.
$.post('/queryDeviceMapInfo.do', 'data='+JSON.stringify(data),function (objRes) {
//返回的JSON字符串自动会转为JSON对象
if(objRes.code&&objRes.code=="0")
{
//... ...
}
else
{
console.log("get map info failed.");
}
});
var jsonReq={"loginname":value.account,"password":value.myPassword,"idGroupInfo":idGroupInfo};
$.ajax({
type: "POST",
contentType:"application/json",
url: "DAS2017/user/add.do",
data: JSON.stringify(jsonReq),
success: function (data) {
if(data.code==0)
{
console.log("如果添加用户成功,刷新列表。");
}
else {
console.log("如果添加用户失败,弹出错误提示。");
}
},
eror: function (data) {
console.log(data);
}
});
The previous code could be corresponding with the below
@RequestMapping(value = "/saveEdit.do",
method = RequestMethod.POST,
consumes = "application/json")
@ResponseBody
public Object saveEdit(@RequestBody UserInfo ui) {
RetMsg rm = new RetMsg();
//... ...
return rm;
}//function
File upload example
- Demo_fileUpload.htm is a standalone html file, can be find at https://github.com/kagula/webcc20200813/tree/master/htmlRoot