jQuery学习笔记

最新推荐文章于 2022-09-16 14:43:31 发布

kagula086

最新推荐文章于 2022-09-16 14:43:31 发布

阅读量112

点赞数

分类专栏： JavaScript或前端

本文链接：https://blog.csdn.net/lee353086/article/details/112683120

版权

JavaScript或前端专栏收录该内容

44 篇文章 2 订阅

订阅专栏

这是一篇关于jQuery的学习笔记，涵盖了选择器的使用、元素的添加、删除和修改，包括标签属性、类属性和样式属性的操作。还讨论了查询、事件处理以及网络请求，如文件上传的示例。此外，提到了一些附加资源，如toggle元素操作和jQuery的deferred对象详细解析。

摘要由CSDN通过智能技术生成

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