前端笔记整理完成

This commit is contained in:
estomm
2022-04-18 23:03:54 +08:00
parent bb9110d289
commit 3d6284517e
50 changed files with 5685 additions and 15 deletions

View File

@@ -1,20 +1,14 @@
## 1 功能
> jquery是js的一个框架。目的是对js的编程方式进行封装提供了新的编程方法。简化过程。
基本内容:
* HTML 元素选取
* HTML 元素操作
* CSS 操作
事件和动画处理
* HTML事件处理
* JavaScript 特效动画
> 主要功能包括以下五个部分。非常重要和关键。
* HTML DOM 遍历和修改
* AJAX
* Utilities
1. HTML元素选取
2. HTML元素操作HTML和CSS、HTML DOM 遍历和修改
3. HTML事件处理
4. JS特效动画
5. AJAX异步请求
## 2 引用
@@ -34,7 +28,7 @@
</script>
</head>
```
## 3 CSS选择器
## 3 基础选择器
### 元素选择器
@@ -65,4 +59,57 @@ $("[href]")
```
$("*") 选取所有元素
$(this) 选取当前 HTML 元素
```
### 组合选择器
```
$("selector1,selector2,...")选取多个选择器指定的元素
```
## 4 层次选择器
### 后代选择器
* 可能是子代也可能是子代的子代
```
$("ancestor descendant")
```
### 子代选择器
* 直接后代
```
$("parent>child")
```
### 相邻选择器
* 同级元素的下一个
```
$("prev+next")
```
### 同级选择器
* 所有同级元素
```
$("prev-siblings")
```
## 5 表单选择器
表单
```
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
```

View File

@@ -30,13 +30,21 @@
* unload
## 2 事件处理
### 事件处理方法
### 直接绑定事件处理方法
回调函数作为参数进行传递。
```
("p").click(function(){$(this).hide()});
$("p").click(function(){$(this).hide()});
```
### $(document).ready()
在加载完成文档后需要执行的函数。
### 通过bind绑定事件处理方法
可以直接在jQuery对事件进行绑定。而不用在html代码中书写js代码了。
* bind绑定
```
$(selector).bind(eventtype,eventdata,handler(eventobject))
```

View File

@@ -79,4 +79,15 @@ $(document).ready(function(){
$(document).ready(function(){
$("p").not(".url");
});
```
## 6 遍历each
遍历所有的子元素。回调函数的两个参数分别是下标和dom对象
```
$('selector').each(function(index,element){
//可以将dom对象转换为jQuery对象
$(element)
})
```

View File

@@ -58,4 +58,17 @@ $("button").click(function(){
alert("数据: \n" + data + "\n状态: " + status);
});
});
```
## 2 GET JSON方法
GET - 从指定的资源请求数据.GET 基本上用于从服务器获得取回数据。注释GET 方法可能返回缓存数据。
```
$.getJSON(URL,callback);
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
```