[前端]Dom、Js、JQuery

DomApi、JQuery手册

目录

• DomApi、JQuery手册
  • DomApi
  • JQuery
  • JQuery UI
  • JS代码片段

DomApi

//1. 创建元素
document.createElement("canvas")
// 选择元素
document.querySelector(".element")
// 添加元素
.appendChild(this.dragWrapDom)
// 修改高度
dom.style.width = 12+'px'
// 修改显示状态
.style.display = "none"
//cssText
dom.style.cssText = `
   ${width+1}px;
  height: ${height+1}px;
`
//canvas修改高度
canvasDom.width = 400

JQuery

//是选取页面上所有的div
$("div")

//是指创建一个DIV
$('<div>')

// 触发事件，鼠标左键up事件
$("xx").trigger('mouseup')

// 获取input值
$("input[name='test']").val()
$("input[type='text']").attr("value")

// 键盘事件
// keyup 事件会在按键释放时触发，也就是你按下键盘起来后的事件
// keypress 当按钮被按下时，会发生该事件，我们可以理解为按下并抬起同一个按键。
// keydown 当按钮被按下时，发生 keydown 事件
// 按键码 
//详细用法：https://www.cnblogs.com/zqifa/p/js-jquery-keyboard.html

$(document).keypress(function(e) {
    //ctrl+Enter提交表单
    if (e.ctrlKey && e.which === 13){
        $("form").submit();
    }
});

// http请求
$.get(`${url}/Express/get_detail`, {id}, (res)=>{
  console.log("查询")
  console.log(res)
})

// post
$.post(`${url}/Express/update_info`,
    {id, json1: JSON.stringify(canvasJson), json2: JSON.stringify(placeholderJson)},
    (res, status) =>{
      if("success" === status) {
        console.log('upload success', res, status)
      }
  })

JQuery UI

//元素可拖拽，并且限制范围在".board-wrap"内，不可scroll
 $(".canvas-drag-wrap").draggable({disabled: true, containment: ".board-wrap", scroll: false })

JS代码片段

//监测页面离开事件，如果未保存则发出提醒
window.onbeforeunload=function(e){
  var e = window.event||e;
　e.returnValue=("确定离开当前页面吗？");
}