是在 菜鸟教程 上进行学习的
0.前言
jQuery是一个JavaScript函数库,严格来说jQuery不是个框架,和 vue,react 还是不同的
1. jQuery 安装
通过百度 CDN 引用 jQuery
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
2. jQuery 语法
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
基础语法: $(selector).action();
- 美元符号定义 jQuery
- 选择符(selector)“查询"和"查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
例子:
- $(this).hide();- 隐藏当前元素
- $(“p”).hide(); - 隐藏所有 <p> 元素
- $(“p.test”).hide(); - 隐藏所有 class=“test” 的 <p> 元素
- $("#test").hide(); - 隐藏所有 id=“test” 的元素
文档就绪事件
所有 jQuery 函数位于一个 document ready 函数中
$(document).ready(function(){
//开始写jQuery代码
});
间接写法(常用)
$(function(){
//开始写jQuery代码
});
jQuery入口函数(上面提到的)和 js 入口函数 window.onload = function(){};的区别
2.1 jQuery 选择器
大体上和 CSS 选择器差不多的
- $(“p”) - 选中所有 <p> 元素
- $("#demo") - 选中所有 id 为 demo 的元素
- $(".btn") - 选中所有 class 为 btn 的元素
- $(“p.btn”) - 选中所有 class 为 btn 的 <p> 元素
- $(“div>p”) - 选中 <div> 的所有子代 <p> 元素
。。。。。。
一些特殊的
- $("*") - 选中所有元素
- $(this) - 选中当前元素
$(function(){
$("button").click(function(){
//this就是当前元素即button
$(this).hide();
})
});
- $(“p:first”) - 选取第一个 <p> 元素
- $(“ul li:first”) - 选取第一个 <ul> 元素的第一个 <li> 元素
- $(“ul li:first-child”) - 选取每个 <ul> 元素的第一个 <li> 元素
- $("[href]") - 选取带有 href 属性的元素
- $(“a[target=’_blank’]”) - 选取所有 target 属性值等于 “_blank” 的 <a> 元素
2.2 jQuery 事件
由于自己学 jQuery 主要只是想学 Ajax 而已,所以就学到这些基础部分就 ok 了,具体部分请自行查看 jQuery 菜鸟教程
AJAX — jQuery
语法:
$.ajax();
$(function(){
$.ajax({
//请求类型,get或post
type : "get",
//请求的url地址
url : "url",
//传输的数据,这行不能省略,如果没有数据向后台提交也要写成data:{}的形式
data : {},
//传输的数据的类型,一般为json
dataType : "json",
//传输成功后执行的函数
success : function(data){
//某些操作
},
//传输失败后执行的函数
error : function(data){
//某些操作
},
});
});