JS中的拖拽

2021-09-25 13:33:21 字數 2101 閱讀 3897

元素新增類名:

dom.classname = "a,b,c"

dom.setattribute = ("class",a,b,c)

獲取類名列表

dom.classlist

box.classlist.remove("b");

box.classlist.add("c");

1. jquer拖拽

$("#box p.mp").draggable(

});$("#box").resizable();

2. jquery事件

$("#box").click(funcion(){});

$("#box").mouseclick(function(){});

排他思想

$("button").click(function());

$("button").each(function(index,item));

3. jquery外掛程式

jquery外掛程式有很多,所謂的外掛程式就是依賴於jquery庫而存在的字型檔

4. jquery獲取元素尺寸

$("#box").width(); 獲取計算後的高度

getcomputerstyle dom

$("#box").innerwidth(); 獲取計算後元素內容加padding的寬度

$("#box").outerwidth(); 盒子真實寬度

$("#box").outerwidth(true); 盒子真實寬度加margin

5.jquery獲取元素乾淨位置

offset()

top left right bottom

6.jquery滑鼠滾輪事件

在jquery中沒有滑鼠滾輪事件,需要使用外掛程式

jquery-1.12.3.min.js

7.jquery視窗方法

$(window).scrolltop(); 卷屏高度

$(window).width(); 視窗寬度

$(window).height(); 視窗高度

物件型別(object)

基本資料型別:number string boolean null undefined

物件型別:array object regexp function

資料儲存型別:txt json xml

1. 物件的建立方式

1) 字面量建立

var obj = {};

2) new 建構函式方式建立

var obj = new object();

obj.name = "張三",

obj.age = 13

注:兩種建立方式各有各的加值方式,不允許雜糅,各用各的,雖然沒有問題,但這是不規範的

{} 是物件的組織形式,界定符

物件:一切皆物件,物件就是乙個包含無序屬性的集合

2. 物件鍵值對中鍵的命名方式

1) 數字 字母 下劃線 以及 特殊字元

2) 如果是字母下劃線開頭可以不用引號

但如果是數字字母或特殊字元開頭的必須加引號

eg: "@qwe", "222", "2wef", " ", " 2we#", " var", "in", "float"

3) 物件與json的區別

物件的鍵可以寫引號(特殊情況下必須寫),

寫的話單引號雙引號都可以,但是json的鍵必須是雙引號

4) 建構函式例項化

使用 new object() 方式建構函式,就是使用建構函式 object() 來例項化物件

5) 物件的值

物件的值可以是任何資料型別:數字 字串 正則 陣列 物件 函式 null undefined ……

6) this 在不同地方的指向

函式中的this指向函式的擁有者

1) 直接使用() 呼叫的函式指向window

2) 函式繫結到事件處理程式,其中this指向事件源

3) 在定時器中呼叫的this指向window

4) 在物件的方法中使用this指向呼叫方法的這個物件

JS 拖拽事件

這裡寫的是乙個原生js實現拖拽的效果,首先 1 實現拖拽的三大事件,是要首先清楚的 onmousedown 滑鼠按下的時候 onmousemove 滑鼠移動的時候 onmouseup 滑鼠鬆開的時候 2 給目標元素加上onmousedown時間,記錄滑鼠按下的時候,滑鼠距離所在元素的位置 就是滑鼠距...

js拖拽事件

doctype html utf 8 js拖拽事件 title page style head page div body html 這裡寫的是乙個原生js實現拖拽的效果,首先 實現拖拽的三大事件,是要首先清楚的 onmousedown 滑鼠按下的時候 onmousemove 滑鼠移動的時候 onm...

原生JS拖拽

想要讓整個元素移動需要三個事件 滑鼠按下 onmousedown 滑鼠移動 onmousemove 滑鼠抬起 onmouseup html 登入會員 關閉使用者名稱 登入密碼 登入會員 頁面效果如下 jsvar login document.queryselector login 獲取整個彈框的內容...