mirror of
https://github.com/Estom/notes.git
synced 2026-02-04 02:53:57 +08:00
JavaScript&nodejs
This commit is contained in:
shanghai
68
JavaScript/jQuery/1简介.md
Normal file
68
JavaScript/jQuery/1简介.md
Normal file
@@ -0,0 +1,68 @@
|
||||
## 1 功能
|
||||
|
||||
> jquery是js的一个框架。目的是对js的编程方式进行封装，提供了新的编程方法。简化过程。
|
||||
|
||||
基本内容：
|
||||
* HTML 元素选取
|
||||
* HTML 元素操作
|
||||
* CSS 操作
|
||||
|
||||
事件和动画处理
|
||||
* HTML事件处理
|
||||
* JavaScript 特效动画
|
||||
|
||||
|
||||
* HTML DOM 遍历和修改
|
||||
* AJAX
|
||||
* Utilities
|
||||
|
||||
## 2 引用
|
||||
|
||||
|
||||
### 使用本地jquery
|
||||
```
|
||||
<head>
|
||||
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
|
||||
</script>
|
||||
</head>
|
||||
```
|
||||
### 使用CDN
|
||||
|
||||
```
|
||||
<head>
|
||||
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
|
||||
</script>
|
||||
</head>
|
||||
```
|
||||
## 3 CSS选择器
|
||||
|
||||
### 元素选择器
|
||||
|
||||
```
|
||||
$("p")
|
||||
```
|
||||
|
||||
### #id选择器
|
||||
|
||||
```
|
||||
$("#test")
|
||||
```
|
||||
|
||||
### .class 选择器
|
||||
|
||||
```
|
||||
$(".test")
|
||||
```
|
||||
|
||||
### 属性选择器
|
||||
|
||||
```
|
||||
$("[href]")
|
||||
```
|
||||
|
||||
### 特殊选择器
|
||||
|
||||
```
|
||||
$("*") 选取所有元素
|
||||
$(this) 选取当前 HTML 元素
|
||||
```
|
||||
42
JavaScript/jQuery/2事件.md
Normal file
42
JavaScript/jQuery/2事件.md
Normal file
@@ -0,0 +1,42 @@
|
||||
## 1 常见事件
|
||||
> jquery对事件进行了重新封装。采取了与原生JS完全不同的事件处理方法。JS是在HTMLDOM元素中个，添加事件属性，将事件属性与事件响应函数绑定的方法，完成事件响应机制。
|
||||
|
||||
> jquery，大多数DOM事件都有一个等效的jQuery方法对应。调用jQuery对象的事件函数，传递高阶函数作为参数，用于回调。实现事件响应与主进程的异步通信。
|
||||
### 鼠标事件
|
||||
|
||||
* click
|
||||
* dblclick
|
||||
* mouseenter
|
||||
* mouseleave
|
||||
* hover
|
||||
|
||||
### 键盘事件
|
||||
|
||||
* keypress
|
||||
* keydown
|
||||
* keyup
|
||||
|
||||
|
||||
### 表单事件
|
||||
* submit
|
||||
* change
|
||||
* focus
|
||||
* blur
|
||||
|
||||
### 文档/窗口事件
|
||||
* load
|
||||
* resize
|
||||
* scroll
|
||||
* unload
|
||||
|
||||
## 2 事件处理
|
||||
### 事件处理方法
|
||||
回调函数作为参数进行传递。
|
||||
|
||||
```
|
||||
("p").click(function(){$(this).hide()});
|
||||
```
|
||||
### $(document).ready()
|
||||
|
||||
在加载完成文档后需要执行的函数。
|
||||
|
||||
111
JavaScript/jQuery/3动画.md
Normal file
111
JavaScript/jQuery/3动画.md
Normal file
@@ -0,0 +1,111 @@
|
||||
|
||||
# jQuery效果
|
||||
|
||||
## 1 显示和隐藏
|
||||
```
|
||||
$(selector).hide(speed,callback);
|
||||
$(selector).show(speed,callback);
|
||||
$(selector).toggle(speed,callback);
|
||||
|
||||
$("#hide").click(function(){
|
||||
$("p").hide();
|
||||
});
|
||||
|
||||
$("#show").click(function(){
|
||||
$("p").show();
|
||||
});
|
||||
|
||||
$("button").click(function(){
|
||||
$("p").toggle();
|
||||
});
|
||||
```
|
||||
|
||||
## 2 淡入淡出
|
||||
|
||||
```
|
||||
$(selector).fadeIn(speed,callback);
|
||||
$(selector).fadeOut(speed,callback);
|
||||
$(selector).fadeToggle(speed,callback);
|
||||
$(selector).fadeTo(speed,opacity,callback);
|
||||
|
||||
$("button").click(function(){
|
||||
$("#div1").fadeIn();
|
||||
$("#div2").fadeIn("slow");
|
||||
$("#div3").fadeIn(3000);
|
||||
});
|
||||
|
||||
$("button").click(function(){
|
||||
$("#div1").fadeOut();
|
||||
$("#div2").fadeOut("slow");
|
||||
$("#div3").fadeOut(3000);
|
||||
});
|
||||
|
||||
$("button").click(function(){
|
||||
$("#div1").fadeToggle();
|
||||
$("#div2").fadeToggle("slow");
|
||||
$("#div3").fadeToggle(3000);
|
||||
});
|
||||
$("button").click(function(){
|
||||
$("#div1").fadeTo("slow",0.15);
|
||||
$("#div2").fadeTo("slow",0.4);
|
||||
$("#div3").fadeTo("slow",0.7);
|
||||
});
|
||||
```
|
||||
## 3 滑动
|
||||
|
||||
```
|
||||
$(selector).slideDown(speed,callback);
|
||||
$(selector).slideUp(speed,callback);
|
||||
$(selector).slideToggle(speed,callback);
|
||||
|
||||
$("#flip").click(function(){
|
||||
$("#panel").slideDown();
|
||||
});
|
||||
$("#flip").click(function(){
|
||||
$("#panel").slideUp();
|
||||
});
|
||||
|
||||
$("#flip").click(function(){
|
||||
$("#panel").slideToggle();
|
||||
});
|
||||
```
|
||||
|
||||
## 4 jquery效果动画
|
||||
### 定义
|
||||
animate()方法
|
||||
* 必需的 params 参数定义形成动画的 CSS 属性。
|
||||
* 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
|
||||
* 可选的 callback 参数是动画完成后所执行的函数名称。
|
||||
```
|
||||
$(selector).animate({params},speed,callback);
|
||||
```
|
||||
|
||||
### 使用
|
||||
|
||||
```
|
||||
$("button").click(function(){
|
||||
$("div").animate({
|
||||
height:'toggle'
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## 5 停止动画
|
||||
```
|
||||
$(selector).stop(stopAll,goToEnd);
|
||||
|
||||
$("#stop").click(function(){
|
||||
$("#panel").stop();
|
||||
});
|
||||
```
|
||||
|
||||
## 6 jquery动画链
|
||||
```
|
||||
$("#p1").css("color","red")
|
||||
.slideUp(2000)
|
||||
.slideDown(2000);
|
||||
|
||||
$("#p1").css("color","red")
|
||||
.slideUp(2000)
|
||||
.slideDown(2000);
|
||||
```
|
||||
110
JavaScript/jQuery/4操作.md
Normal file
110
JavaScript/jQuery/4操作.md
Normal file
@@ -0,0 +1,110 @@
|
||||
|
||||
## 1 获取设置内容的方法
|
||||
|
||||
* * text() - 设置或返回所选元素的文本内容
|
||||
* * html() - 设置或返回所选元素的内容（包括 HTML 标记）
|
||||
* * val() - 设置或返回表单字段的值
|
||||
|
||||
```
|
||||
$("#btn1").click(function(){
|
||||
alert("Text: " + $("#test").text());
|
||||
});
|
||||
$("#btn2").click(function(){
|
||||
alert("HTML: " + $("#test").html());
|
||||
});
|
||||
$("#btn1").click(function(){
|
||||
alert("值为: " + $("#test").val());
|
||||
});
|
||||
|
||||
$("#btn1").click(function(){
|
||||
$("#test1").text("Hello world!");
|
||||
});
|
||||
$("#btn2").click(function(){
|
||||
$("#test2").html("<b>Hello world!</b>");
|
||||
});
|
||||
$("#btn3").click(function(){
|
||||
$("#test3").val("RUNOOB");
|
||||
});
|
||||
```
|
||||
|
||||
## 2 获取设置属性的方法
|
||||
attr() 方法用于获取属性值。
|
||||
```
|
||||
$("button").click(function(){
|
||||
alert($("#runoob").attr("href"));
|
||||
});
|
||||
|
||||
$("button").click(function(){
|
||||
$("#runoob").attr("href","http://www.runoob.com/jquery");
|
||||
});
|
||||
```
|
||||
jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
|
||||
|
||||
```
|
||||
$("button").click(function(){
|
||||
$("#runoob").attr("href", function(i,origValue){
|
||||
return origValue + "/jquery";
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## 3 添加元素
|
||||
|
||||
* append() - 在被选元素的结尾插入内容
|
||||
* prepend() - 在被选元素的开头插入内容
|
||||
* after() - 在被选元素之后插入内容
|
||||
* before() - 在被选元素之前插入内容
|
||||
|
||||
```
|
||||
$("p").append("追加文本");
|
||||
$("p").prepend("在开头追加文本");
|
||||
$("img").after("在后面添加文本");
|
||||
$("img").before("在前面添加文本");
|
||||
```
|
||||
|
||||
## 4 删除元素
|
||||
|
||||
* remove() - 删除被选元素（及其子元素）
|
||||
* empty() - 从被选元素中删除子元素
|
||||
```
|
||||
$("#div1").remove();
|
||||
$("#div1").empty();
|
||||
```
|
||||
|
||||
|
||||
## 5 CSS设置
|
||||
|
||||
* addClass() - 向被选元素添加一个或多个类
|
||||
* removeClass() - 从被选元素删除一个或多个类
|
||||
* toggleClass() - 对被选元素进行添加/删除类的切换操作
|
||||
* css() - 设置或返回样式属性
|
||||
|
||||
|
||||
```
|
||||
$("button").click(function(){
|
||||
$("h1,h2,p").addClass("blue");
|
||||
$("div").addClass("important");
|
||||
});
|
||||
|
||||
$("button").click(function(){
|
||||
$("h1,h2,p").removeClass("blue");
|
||||
});
|
||||
|
||||
$("button").click(function(){
|
||||
$("h1,h2,p").toggleClass("blue");
|
||||
});
|
||||
|
||||
$("p").css("background-color","yellow");
|
||||
```
|
||||
|
||||
## 7 尺寸设置
|
||||
|
||||
|
||||
|
||||
* width()
|
||||
* height()
|
||||
* innerWidth()
|
||||
* innerHeight()
|
||||
* outerWidth()
|
||||
* outerHeight()
|
||||
|
||||
82
JavaScript/jQuery/5遍历.md
Normal file
82
JavaScript/jQuery/5遍历.md
Normal file
@@ -0,0 +1,82 @@
|
||||
## 1 定义
|
||||
|
||||
与Xpath选择器十分详细。在简介中通过css选择器，能够锁定目标元素。
|
||||
|
||||
|
||||
## 2 向上遍历
|
||||
|
||||
* parent()
|
||||
* parents()
|
||||
* parentsUntil()
|
||||
|
||||
```
|
||||
$(document).ready(function(){
|
||||
$("span").parents("ul");
|
||||
});
|
||||
|
||||
$(document).ready(function(){
|
||||
$("span").parentsUntil("div");
|
||||
});
|
||||
```
|
||||
|
||||
## 3 向下遍历
|
||||
|
||||
* children()
|
||||
* find()
|
||||
|
||||
```
|
||||
$(document).ready(function(){
|
||||
$("div").children();
|
||||
});
|
||||
|
||||
$(document).ready(function(){
|
||||
$("div").find("span");
|
||||
});
|
||||
```
|
||||
|
||||
## 4 水平遍历
|
||||
|
||||
* siblings()
|
||||
* next()
|
||||
* nextAll()
|
||||
* nextUntil()
|
||||
* prev()
|
||||
* prevAll()
|
||||
* prevUntil()
|
||||
|
||||
```
|
||||
$(document).ready(function(){
|
||||
$("h2").siblings();
|
||||
});
|
||||
|
||||
$(document).ready(function(){
|
||||
$("h2").next();
|
||||
});
|
||||
|
||||
$(document).ready(function(){
|
||||
$("h2").nextUntil("h6");
|
||||
});
|
||||
```
|
||||
|
||||
## 5 遍历过滤
|
||||
|
||||
* first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
|
||||
* filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
|
||||
|
||||
```
|
||||
$(document).ready(function(){
|
||||
$("div p").first();
|
||||
});
|
||||
$(document).ready(function(){
|
||||
$("div p").last();
|
||||
});
|
||||
$(document).ready(function(){
|
||||
$("p").eq(1);
|
||||
});
|
||||
$(document).ready(function(){
|
||||
$("p").filter(".url");
|
||||
});
|
||||
$(document).ready(function(){
|
||||
$("p").not(".url");
|
||||
});
|
||||
```
|
||||
61
JavaScript/jQuery/6ajax.md
Normal file
61
JavaScript/jQuery/6ajax.md
Normal file
@@ -0,0 +1,61 @@
|
||||
## 1 load
|
||||
|
||||
### load方法
|
||||
jQuery load() 方法是简单但强大的 AJAX 方法。
|
||||
|
||||
load() 方法从服务器加载数据，并把返回的数据放入被选元素中
|
||||
|
||||
```
|
||||
$(selector).load(URL,data,callback);
|
||||
|
||||
$("#div1").load("demo_test.txt");
|
||||
```
|
||||
|
||||
### load回调参数
|
||||
|
||||
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
|
||||
|
||||
responseTxt - 包含调用成功时的结果内容
|
||||
statusTXT - 包含调用的状态
|
||||
xhr - 包含 XMLHttpRequest 对象
|
||||
|
||||
```
|
||||
$("button").click(function(){
|
||||
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
|
||||
if(statusTxt=="success")
|
||||
alert("外部内容加载成功!");
|
||||
if(statusTxt=="error")
|
||||
alert("Error: "+xhr.status+": "+xhr.statusText);
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## 2 GET方法
|
||||
GET - 从指定的资源请求数据.GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。
|
||||
```
|
||||
$.get(URL,callback);
|
||||
|
||||
$("button").click(function(){
|
||||
$.get("demo_test.php",function(data,status){
|
||||
alert("数据: " + data + "\n状态: " + status);
|
||||
});
|
||||
});
|
||||
```
|
||||
## 3 POST方法
|
||||
|
||||
POST - 向指定的资源提交要处理的数据.POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据
|
||||
|
||||
```
|
||||
$.post(URL,data,callback);
|
||||
|
||||
$("button").click(function(){
|
||||
$.post("/try/ajax/demo_test_post.php",
|
||||
{
|
||||
name:"菜鸟教程",
|
||||
url:"http://www.runoob.com"
|
||||
},
|
||||
function(data,status){
|
||||
alert("数据: \n" + data + "\n状态: " + status);
|
||||
});
|
||||
});
|
||||
```
|
||||
BIN
JavaScript/jQuery/image/border.gif
Normal file
BIN
JavaScript/jQuery/image/border.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Reference in New Issue
Block a user