[toc]
## `scrollTop()` 获取距离 top 的滚动距离
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
<style>
body {
height: 20000px;
}
</style>
</head>
<body>
<script>
$(function() {
$(document).click(function() {
alert($(window).scrollTop());
});
});
</script>
</body>
</html>
```
## 编写弹窗
### 增加 div 标签
#### 原生 js 写法
```javascript
window.onload = function() {
var oDiv = document.createElement("div");
oDiv.innerHTML = "hello world";
document.body.appendChild(oDiv);
};
```
#### jquery 写法
```javascript
$(function() {
var oDiv = $("<div>hello world</div>");
$("body").append(oDiv);
});
```
## 点击注册, 弹出弹框
#### 先布局
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
<style>
#login {
width: 300px;
height: 300px;
border: 1px #000 solid;
position: absolute;
}
#close {
right: 0;
top: 0;
position: absolute;
background: #ccc;
}
</style>
</head>
<body>
<input type="button" value="注册" id="input1" />
<div id="login">
<p>
用户名
<input type="text" />
</p>
<p>
密码
<input type="text" />
</p>
<div id="close">关闭</div>
</div>
</body>
</html>
```
写 js, 点击显示(动态写入 html 代码)
> [备忘]需要手敲, 帮助同学们加深理解...
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
<style>
#login {
width: 300px;
height: 300px;
border: 1px #000 solid;
position: absolute;
}
#close {
right: 0;
top: 0;
position: absolute;
background: #ccc;
}
</style>
</head>
<body>
<input type="button" value="注册" id="input1" />
</body>
<script>
var str = "";
$(function() {
$("#input1").click(function() {
if (!str) {
str += '<div id="login">';
str += "<p>";
str += "用户名";
str += '<input type="text" />';
str += "</p>";
str += "<p>";
str += "密码";
str += '<input type="text" />';
str += "</p>";
str += '<div id="close">关闭</div>';
str += "</div>";
var oDiv = $(str);
$("body").append(oDiv);
}
});
});
</script>
</html>
```
设置 div 垂直水平居中
```javascript
oDiv.css("left", ($(window).width() - oDiv.outerWidth()) / 2);
```
设置 div 垂直居中
```javascript
oDiv.css("top", ($(window).height() - oDiv.outerHeight()) / 2);
```
设置有滚动条时的垂直居中
```javascript
$(window).on("resize scroll", function() {
oDiv.css("left", ($(window).width() - oDiv.outerWidth()) / 2);
oDiv.css(
"top",
($(window).height() - oDiv.outerHeight()) / 2 + $(window).scrollTop()
);
});
```
给关闭按钮添加功能
```javascript
// 给关闭按钮添加功能
$("#close").on({
click: function() {
oDiv.remove();
str = "";
},
mouseover: function() {
$(this).css("cursor", "pointer");
}
});
```
## (加戏) `$(document)`,`$(window)`,`$('body')`的区别
document 文档
window 浏览器窗口
body 标签
如果有滚动条, window 的宽度会加上滚动条的宽度
window 的高度, 是展示给用户的高度, 而 document 和 body 是实际高度
## scrollTop
scrollTop 的最大值 = document 的高度 - window 的高度
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 2000px;
}
</style>
</head>
<body></body>
<script>
$(function() {
// console.log("$(document).width");
// console.log($(document).width());
// console.log("$(document).outerWidth");
// console.log($(document).outerWidth());
// console.log("$(window).width");
// console.log($(window).width());
// console.log("$(window).outerWidth");
// console.log($(window).outerWidth());
// console.log('$("body").width');
// console.log($("body").width());
// console.log('$("body").outerWidth');
// console.log($("body").outerWidth());
console.log("$(document).height");
console.log($(document).height());
console.log("$(document).outerHeight");
console.log($(document).outerHeight());
console.log("$(window).height");
console.log($(window).height());
console.log("$(window).outerHeight");
console.log($(window).outerHeight());
console.log('$("body").height');
console.log($("body").height());
console.log('$("body").outerHeight');
console.log($("body").outerHeight());
});
</script>
</html>
```
## `one`()--事件只执行一次
原来的点击事件, 每次点击, 都会执行
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
<style>
div {
height: 200px;
width: 200px;
border: 1px solid red;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
$(function() {
$("div").on("click", function() {
alert("hello world");
});
});
</script>
</html>
```
只执行一次的写法
```javascript
$(function() {
$("div").one("click", function() {
alert("hello world");
});
});
```
## `offset`() `position`()
什么是 offset?
先布局
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 200px;
background-color: red;
overflow: hidden;
margin: 20px;
}
#div2 {
width: 100px;
height: 100px;
background-color: yellow;
margin: 30px;
}
</style>
</head>
<body>
<div id="div1"><div id="div2"></div></div>
</body>
</html>
```
再写 js
```javascript
$(function() {
console.log(document.getElementById("div2").offsetLeft);
});
```
如果父级有定位的话, 值还会变...
```css
#div1 {
width: 200px;
height: 200px;
background-color: red;
overflow: hidden;
margin: 20px;
position: relative;
}
```
所以如果想获取到左边屏幕的距离, 你还需要先判断父级是否有定位, 然后需要加上父级到屏幕的距离, 如果父级还有父级呢?
```javascript
$(function() {
console.log($("#div2").offset().left);
});
```
## `offsetParent`() `parent()`
parent 获取父级
offsetParent 获取有定位的父级
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 200px;
border: 1px solid red;
}
#div2 {
width: 100px;
height: 100px;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="div1"><div id="div2"></div></div>
<script>
$(function() {
$("#div2")
.parent()
.css("background", "red");
});
</script>
</body>
</html>
```
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 200px;
border: 1px solid red;
}
#div2 {
width: 100px;
height: 100px;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="div1"><div id="div2"></div></div>
<script>
$(function() {
$("#div2")
.offsetParent()
.css("background", "red");
});
</script>
</body>
</html>
```
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#div1 {
width: 200px;
height: 200px;
border: 1px solid red;
/* position: relative; */
/* position: fixed; */
position: absolute;
}
#div2 {
width: 100px;
height: 100px;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="div1"><div id="div2"></div></div>
<script>
$(function() {
$("#div2")
.offsetParent()
.css("background", "red");
});
</script>
</body>
</html>
```
## `val`()
value 值, 没有参数表示取值, 有参数表示赋值
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
</head>
<body>
<input type="button" value="123" />
</body>
<script>
$(function() {
console.log($("input").val());
});
</script>
</html>
```
```javascript
$(function() {
$("input").val(456);
});
```
## `size`() 获取一组元素的长度
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
</head>
<body>
<ul>
<li>this is tag li1</li>
<li>this is tag li2</li>
<li>this is tag li3</li>
<li>this is tag li4</li>
</ul>
</body>
<script>
$(function() {
alert($("li").size());
});
</script>
</html>
```
注意 jquery 版本
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
</head>
<body>
<ul>
<li>this is tag li1</li>
<li>this is tag li2</li>
<li>this is tag li3</li>
<li>this is tag li4</li>
</ul>
</body>
<script>
$(function() {
alert($("li").length);
});
</script>
</html>
```
## `each`() jquery 的循环
- `each()` 是 jquery 的循环
- `each()` 接收一个函数做参数, 函数有两个参数, key, value
- `key` 是下标
- `value` 是一个对象
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
</head>
<body>
<ul>
<li>this is tag li1</li>
<li>this is tag li2</li>
<li>this is tag li3</li>
<li>this is tag li4</li>
</ul>
</body>
<script>
$(function() {
$("li").each(function(key, value) {
console.log("li's key: " + key + ", " + "li's value: " + value);
console.log(value.innerHTML);
});
});
</script>
</html>
```
## ev 对象, 记录了事件的一些信息
`ev.data.name` // 传递参数
`ev.target` // 当前操作的事件源
`ev.type` // 当前操作的事件类型
```html
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script>
$(function() {
$("#div1").on("click", { name: "hello" }, function(ev) {
console.log(ev.data.name); // 传递参数
console.log(ev.target); // 当前操作的事件源
console.log(ev.type); // 当前操作的事件类型
});
});
</script>
</head>
<body>
<div id="div1">aaaa</div>
</body>
</html>
```
`event.pageX` 和 `event.pageY`：获取鼠标当前相对于页面的坐标
可以确定元素在当前页面的坐标值，是以页面为参考点
```html
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script>
$(function() {
$(document).on("mousemove", function(ev) {
console.log(ev.pageX + "," + ev.pageY);
});
});
</script>
</head>
<body></body>
</html>
```
pageX pageY clientX clientY screenX screenY
pageX pageY 距离文档左上角的 x,y(受滚动条影响)
clientX clientY 当前文档的可视区域的左上角(不受滚动条影响)
screenX screenY 到整个显示器的左上角 x,y
## 编写拖拽
先布局
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
```
```javascript
$(function() {
var disX = 0;
var disY = 0;
$("div").mousedown(function(ev) {
disX = ev.pageX - $(this).offset().left;
disY = ev.pageY - $(this).offset().top;
$(document).mousemove(function(ev) {
$("div").css("left", ev.pageX - disX);
$("div").css("top", ev.pageY - disY);
});
$(document).mouseup(function() {
$(document).off();
});
return false;
});
});
```
## 简单动画
### `hover`()
鼠标移入移出的一个结合版
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
<style>
div {
width: 200px;
height: 200px;
}
#div1 {
background: red;
}
#div2 {
background: blue;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
<script>
$(function() {
$("#div1").hover(
function() {
$("#div2").css("background", "yellowgreen");
},
function() {
$("#div2").css("background", "blue");
}
);
});
</script>
</html>
```
### `show`() `hide`()
show ==> display:block
hide ==> display:none
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
<style>
div {
width: 200px;
height: 200px;
}
#div1 {
background: red;
}
#div2 {
background: blue;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
<script>
$(function() {
$("#div1").hover(
function() {
$("#div2").hide();
},
function() {
$("#div2").show();
}
);
});
</script>
</html>
```
可以接收时间作为参数
```javascript
$(function() {
$("#div1").hover(
function() {
$("#div2").hide(7000);
},
function() {
$("#div2").show(7000);
}
);
});
```
### `fadeIn`() `fadeOut`() 淡入 淡出
```javascript
$(function() {
$("#div1").hover(
function() {
$("#div2").fadeOut();
},
function() {
$("#div2").fadeIn();
}
);
});
```
也可以设置时间(默认 400)
```javascript
$(function() {
$("#div1").hover(
function() {
$("#div2").fadeOut(7000);
},
function() {
$("#div2").fadeIn(7000);
}
);
});
```
### `slideDown`() `slideUp`() 向下展开, 向上卷起
```javascript
$(function() {
$("#div1").hover(
function() {
$("#div2").slideUp();
},
function() {
$("#div2").slideDown();
}
);
});
```
同样可以设置时间
```javascript
$(function() {
$("#div1").hover(
function() {
$("#div2").slideUp(7000);
},
function() {
$("#div2").slideDown(7000);
}
);
});
```
### `fadeTo`()
给淡入淡出一个结束点
两个参数, 一个是时间, 一个是透明度
```javascript
$(function() {
$("#div1").hover(
function() {
$("#div2").fadeTo(7000, 0.1, function() {
alert("完事儿!!!!");
});
},
function() {
$("#div2").fadeTo(5000, 1, function() {
alert("变回来了!!!!");
});
}
);
});
```
## `get`()
原生 js 和 jquery 真的不能混用吗?
比如要弹出元素内容...
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
</head>
<body>
<div>this is a div tag</div>
</body>
<script>
$(function() {
alert($("div").html());
});
</script>
</html>
```
get: 把 jquery 转成原生 js
```javascript
$(function() {
alert($("div").get(0).innerHTML);
});
```
再来试试 li 循环, 注意 get 不加参数, 表示一个集合
```javascript
console.log($("li"));
console.log($("li").get());
```
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
</head>
<body>
<ul>
<li>this is a li tag 1</li>
<li>this is a li tag 2</li>
<li>this is a li tag 3</li>
<li>this is a li tag 4</li>
<li>this is a li tag 5</li>
<li>this is a li tag 6</li>
<li>this is a li tag 7</li>
<li>this is a li tag 8</li>
<li>this is a li tag 9</li>
<li>this is a li tag 10</li>
</ul>
</body>
<script>
$(function() {
for (var i = 0; i < $("li").get().length; i++) {
console.log($("li").get(i).innerHTML);
}
});
</script>
</html>
```
如果我把`get`去掉呢?
```javascript
$(function() {
for (var i = 0; i < $("li").length; i++) {
console.log($("li").get(i).innerHTML);
}
});
```
注意, `console.log($('li'))`, 会发现`length`属性
如果是下标呢?
```javascript
$(function() {
for (var i = 0; i < $("li").length; i++) {
console.log($("li")[i].innerHTML);
}
});
```
注意`$('li')[0]`和`$('li').eq(0)`的区别
如果想给第一个 li 设置背景...
## `outerWidth`() width+padding+border, 如果是 true, 再加上 margin
原生的 offsetWidth width+padding+border
他俩最根本的区别...
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
<style>
div {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
$(function() {
alert($("div").outerWidth());
});
</script>
</html>
```
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
<style>
div {
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
$(function() {
alert($("div")[0].offsetWidth);
});
</script>
</html>
```
当 display:none 的时候...
offsetWidth ==> 0
jquery 的 outerWidth 依然有值
`visibility: hidden;` 呢?
## `text`()
先看看 text()和 html()的区别
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
</head>
<body>
<div><p>hello world</p></div>
</body>
<script>
$(function() {
console.log($("div").html());
console.log($("div").text());
});
</script>
</html>
```
如果 div 比较多呢...
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
</head>
<body>
<div><p>hello world_0</p></div>
<div><p>hello world_1</p></div>
<div><p>hello world_2</p></div>
<div><p>hello world_3</p></div>
<div><p>hello world_4</p></div>
<div><p>hello world_5</p></div>
<div><p>hello world_6</p></div>
<div><p>hello world_7</p></div>
<div><p>hello world_8</p></div>
<div><p>hello world_9</p></div>
<div><p>hello world_10</p></div>
<div><p>hello world_11</p></div>
<div><p>hello world_12</p></div>
<div><p>hello world_13</p></div>
</body>
<script>
$(function() {
console.log($("div").html());
console.log($("div").text());
});
</script>
</html>
```
那再试试赋值?
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
</head>
<body>
<div><p>hello world_0</p></div>
<div><p>hello world_1</p></div>
<div><p>hello world_2</p></div>
<div><p>hello world_3</p></div>
<div><p>hello world_4</p></div>
<div><p>hello world_5</p></div>
<div><p>hello world_6</p></div>
<div><p>hello world_7</p></div>
<div><p>hello world_8</p></div>
<div><p>hello world_9</p></div>
<div><p>hello world_10</p></div>
<div><p>hello world_11</p></div>
<div><p>hello world_12</p></div>
<div><p>hello world_13</p></div>
</body>
<script>
$(function() {
var str = "<p>hello China</p>";
// console.log($("div").html(str));
console.log($("div").text(str));
});
</script>
</html>
```
## `remove`() : `detach`() 这两个都是删除节点
先试试自杀...
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script>
$(function() {
$("div").remove();
});
</script>
</body>
</html>
```
删除操作, 会返回操作的值, 如果自杀之前, 已经有点击事件了, 那么恢复后, 事件还在吗?
```javascript
$(function() {
$("div").click(function() {
alert("hello world");
});
var oDiv = $("div").remove();
$("body").append(oDiv);
});
```
那 `detach`呢?
```javascript
$(function() {
$("div").click(function() {
alert("hello world");
});
var oDiv = $("div").detach();
$("body").append(oDiv);
});
```
## `$()` === `$(document).ready()`
`$()` !== `window.onload`
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<script src="js/jquery.js"></script>
</head>
<body>
<img src="https://www.xujunhao.com/hello.jpg" />
</body>
<script>
// window.onload = function() {
// alert("hello world");
// };
$(function() {
alert("hello world");
});
</script>
</html>
```
`$()`相当于...
```javascript
$(document).ready(function() {
alert("hello world");
});
```
window.onload, 只执行一次
document.ready, 可以执行很多次
- 每日单词
- JavaScript 入门
- JavaScript 基础
- JavaScript 基础回顾
- JavaScript 函数
- 匿名函数,多维数组,数据类型转换
- JavaScript 类型转换, 变量作用域
- js 运算符(一)
- js 运算符(二)
- js 流程控制语句
- JavaScript 扫盲日
- JavaScript 牛刀小试(一)
- JavaScript 牛刀小试(二)
- JavaScript 再谈函数
- JavaScript-BOM
- JavaScript-定时器(一)
- JavaScript-定时器(二)
- 番外-轮播图源码
- JavaScript 轮播图和 DOM 简介
- JavaScript-DOM 基础-NODE 接口-属性
- JavaScript-DOM 基础-NODE 接口-方法
- NodeList-接口-HTMLCollection-接口
- Document 节点
- CSS 复习与扩展(一)
- CSS 复习与扩展(二)
- 走进 jQuery 的世界
- 使用 jquery
- 使用 jquery-2
- jquery 中高级
- jquery 备忘清单-1
- jquery 备忘清单-2
- 聊聊 json
- jquery 备忘清单-3