jQuery基础学习 + jQuery AJAX

是在 菜鸟教程 上进行学习的

---

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事件

---

由于自己学 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){
            //某些操作
        },
     });
});

原生 js 的 AJAX 方法基础知识