1
jq 拖放
jq没有专门用于拖放的函数和事件，但是我们可以把拖放这个事件分为三个阶段。分别是点击阶段——开始准备拖拽，移动阶段——拖拽和停止阶段——拖放结束。
点击阶段：鼠标点击——事件mousedown
移动阶段：鼠标移动——事件mousemove，同时记录移动的路线——获取鼠标的位置和开始时物体的位置，同时修改物体的css属性
停止阶段：鼠标松开——事件mouseup,停止移动事件
需要使用的方法和属性
bind：jq的事件设置
unbind: jq的事件停止设置
offset：jq的css操作
pagex/y : jq的鼠标位置读取
这个代码是从别人那里看来的，自己学习了,非常感谢这位
http://www.jq22.com/code494
function drag() {
var obj = $('#a1');
obj.bind('mousedown', start); //bind 多个事件
function start(e) {
var ol = obj.offset().left; //offset 获取元素原来的偏移量 相对于屏幕左侧和上端
var ot = obj.offset().top;
deltaX = e.pageX - ol; //pageX 是鼠标当前的坐标x
deltaY = e.pageY - ot; //获取到图片的偏移量
$(document).bind({
'mousemove': move, //鼠标按下移动
'mouseup': stop //鼠标松开
});
return false; //阻止函数继续运行,有时候会一直循环目前的函数
}
function move(e) {
obj.css({
"left": (e.pageX - deltaX), //相当于 ol+delta,定位了最终的位置
"top": (e.pageY - deltaY)
});
return false;
}
function stop() {
$(document).unbind({ //移除事件
'mousemove': move,
'mouseup': stop
});
}
}
drag();
2
jq 输入框简单的互动
输入框获得焦点时，其背景色改变；输入时改变；离开输入框时改变
$('input').keydown(function () {
$(this).css('background-color', 'lightblue');
});
$('input').keyup(function () {
$(this).css('background-color', 'lavender');
});
$('input').blur(function () {
$(this).css('background-color', 'white');
});
3
js的this 详解
感谢：http://www.jb51.net/article/41656.htm
this
.1 全局调用
this就代表全局对象Global。
var x = 1;
function test(){
alert(this.x);
}
test(); // 1
var x = 1;
function test(){
this.x = 0;
}
test();
alert(x); //0
.2作为对象方法的调用
this代指对象
function test(){
alert(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m(); // 1
.3构造函数
生成新对象，this就是指新对象
function test(){
this.x = 1;
}
var o = new test();
alert(o.x); // 1
此时的this不是全局对象
var x = 2;
function test(){
this.x = 1;
}
var o = new test();
alert(x); //2
.4apply方法调用
var x = 0;
function test(){
alert(this.x);
}
var o={};
o.x = 1;
o.m = test;
o.m.apply(); //0
apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。
如果把最后一行代码修改为
o.m.apply(o); //1
证明了这时this代表的是对象o
4
box局部阴影实现
boxshadow {
position: relative;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding: 10px;
background: white;
}
/* Make the image fit the box */
boxshadow img {
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
}
boxshadow::after { //局部阴影设置用伪类：：after ,不能把这个内容盖住box和上面的图片
content: '';
position: absolute;
z-index: -1; /* hide shadow behind image */
-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one half of the remaining 30% */
height: 100px;
bottom: 0;
}
5
function outerFunction() {
var innerVariable = "I'm sort of a secret.";
return function innerScope() {
var inaccessible = "Nothing can touch me.";
return innerVariable;
}
}
只能直接訪問outer的不能訪問inner
6
log();
var log = function() {
console.log(greeting);
var greeting = 'Hello!';
}
显示 'log is not a function'
7
两种方法定义函数
1）
var funkyFunction = function() {
return function() {
return "FUNKY!"
}
}
function funky() {
return function() {
return "FUNKY!"
}}
调用函数——funky()
调用函数返回——funky()()
8
var kittens = ['Milo', 'Otis', 'Garfield'];
function appendKitten(name) {
var k = kittens;
k.push(name)
console.log(k is:${ k});
}
appendKitten('broom');
console.log(kitten is:${ kittens})
两个输出是 一样的，为什么局部变量会改变全局變量？
答案：
因為數組賦值時是引用傳遞，變量k和kittens指向同一個地址，局部k改變了引用地址的值也就是改變了全局變量kittens的引用地址的值。
所以，應該要復製出新的數組
var k = kittens.slice();
直接賦值
複製新數組
又見類似題目
var a = [1,2,3];
var b = a;
a = [4,5,6];
alert(b); //[1,2,3]
var a = [1,2,3];
var b = a;
a.pop();
alert(b); //[1,2]
當變量只是對當前內容增刪改時, 變量引用的地址內容隨之改變
若變量賦值其他值, 變量引用的地址改變
注意: 數組的方法裡面, 有的是直接修改調用數組的值pop push splice, 有的不會slice concat
9
const letters = ["alpha", "gamma", "delta"]
[...letters.slice(0, 1), 'beta', ...letters.slice(1)]
輸出["alpha", "beta", "gamma", "delta"]
10
回调函数使用
<script language="javascript" type="text/javascript">
var f;
function d(){
alert("我是Jquery定义的函数d");
}
var e = function(){
alert("我也是Jquery定义的函数e");
}
function a(callback) {
alert("我是parent函数a！");
d();
if (typeof callback === "function"){
//alert(callback);
callback();
}
}
function b(){
alert("我是回调函数b");
d();
e();
f();
}
function c(){
alert("我是回调函数c");
d();
e();
f();
}
function test1() {
a(b);
}
function test2() {
a(c);
}
$(function(){
f = function(){
alert("我是回调函数f");
}
});
</script>
</head>
<body >
<h1>学习js回调函数</h1>
<button onClick=test1()>test a(b)</button> //依次 alert adbdef
<button onClick=test2()>test a(c)</button> // adcdef
<p>应该能看到调用了两个回调函数</p>
<p > </p>
</body>
11
dom遍历html标签嵌套
var tree = document.querySelector('#grand-node');
// var t
var data = tree.childNodes[1]; //子元素
while (data.childNodes[1] != undefined){ //1 代表着选定节点的嵌套子标签代码. 0 是选定节点的文本
data = data.childNodes[1];
}
return data;
12
报错：Cannot read property 'setAttribute' of null
因为js运行的时候页面还没加载完成，所以最好把js 的script标签放在末尾
13
事件
addEventListener.(event, function(){} )
如果要显示ASCII码
input.addEventListener('keydown', function(e) {
console.log(e.which)
})
事件自带 preventDefault 方法，使用可以阻止事件发生，交互
input.addEventListener('keydown', function(event) {
if (event.which === 71) {
return event.preventDefault() //输入g时 不显示
}
})
stopPropagation 停止事件的传播，阻止它被分派到其他 Document 节点
let divs = document.querySelectorAll('div')
function bubble(e) {
console.log(this.firstChild.nodeValue.trim() + ' bubbled')
}
for (let i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', bubble)
}
以上代码,如果点击嵌套的div , 一次会console显示多行
const divs = document.querySelectorAll('div')
function bubble(e) {
// stop! that! propagation!
e.stopPropagation()
console.log(this.firstChild.nodeValue.trim() + ' bubbled')
}
for (let i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', bubble)
}
以上使用了stopPropagation, 点击嵌套的也只会显示一行
14
dom事件keydown, 记录下每次摁下的键，若过程中满足要求的摁键序列，alert。否则，重新记录
const code = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65]
// ASCII码 对应 方向键左上右下，B A
let index = 0;
function init() {
var body=document.querySelector('body');
var keycodes = "";
body.addEventListener('keydown', function(e1){
keycodes += e1.keyCode; //记录每次摁下的键值
var c = code.join('').slice(0,2*index + 2); //对应当前项的字符串序列
console.log(index); //键摁对的对应项
console.log(keycodes);
console.log(c);
if (keycodes == c){ //顺序对应,index加1, 否则 重置index和keycodes
// alert('you did it!');
index++;
if (index == code.length) {alert('you get it ');}
}else {
index = 0;
keycodes = '';
}
})
}
修改：只要过程中任意顺序符合标准，即认可
keycodes = parseInt(e.detail || e.which || e.location);
if (keycodes == code[index]){ //顺序对应,index加1, 否则 重置index和keycodes
......
}
}
.......
})
15
网友评论