mirror of
https://github.com/Estom/notes.git
synced 2026-02-03 18:44:19 +08:00
前端笔记整理完成
This commit is contained in:
@@ -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
|
||||
```
|
||||
@@ -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))
|
||||
```
|
||||
@@ -79,4 +79,15 @@ $(document).ready(function(){
|
||||
$(document).ready(function(){
|
||||
$("p").not(".url");
|
||||
});
|
||||
```
|
||||
|
||||
## 6 遍历each
|
||||
|
||||
遍历所有的子元素。回调函数的两个参数分别是下标和dom对象
|
||||
```
|
||||
|
||||
$('selector').each(function(index,element){
|
||||
//可以将dom对象转换为jQuery对象
|
||||
$(element)
|
||||
})
|
||||
```
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
```
|
||||
Reference in New Issue
Block a user