jQuery选择器

jQuery(selector,context)

  • selector:选择器的类型(一般都是字符串，但是支持函数或者元素对象)

  • context:基于选择器获取元素时候指定的上下文（默认document）

jQuery常用方法

  • appendTo：把jQuery对象添加到一个HTML元素中

  • each：遍历（数组、对象、类数组）

  • noConflict：转让JQ使用$的权利

    let zzz = jQuery.noConflict(true);//=>深度转让:把jQuery这个名字也让出去，返回结果赋值给一个变量，此时这个变量是新的JQ代言人

  • filter：同级筛选

  • children：子级筛选

  • find：后代筛选

  • next/nextAll：弟级筛选

  • parent/parents:获得父亲元素/获得所有父级（前代）元素

  • siblings：获得所有兄弟元素

  • get(i)：获得第i项的原生JS对象，不传参数是把jQuery对象转为数组返回

  • attr(m,n)：获取/设置自定义属性值

  • $().offset()：获取当前元素距离body的偏移量

  • $().remove()：在html中删除元素（该jquery对象的值并没有改变）

jQuery中的ajax

//=>$.ajax([URL],[OPTIONS]) 或者 $.ajax([OPTIONS]) 在OPTIONS中有一个URL字段代表请求的URL地址
    //=>$.get / $.post / $.getJSON / $.getScript 这些方法都是基于$.ajax构建出来的快捷方法，项目中最常使用的还是$.ajax
    /*
     * URL：请求的API接口地址
     * METHOD：请求的方式
     *
     * DATA：传递给服务器的信息可以放到DATA中
     *   如果是GET请求是基于问号传参传递过去的
     *   如果是POST请求是基于请求主体传递过去的
     *
     *   DATA的值可以是对象也可以是字符串(一般常用对象)
     *     如果是对象类型，JQ会把对象转换为 xxx=xxx&xxx=xxx 的模式(x-www-form-urlencoded)
     *     如果是字符串，我们写的是什么就传递什么
     *
     * DATA-TYPE：预设置获取结果的数据格式 TEXT/JSON/JSONP/HTML/SCRIPT/XML...（服务器返回给客户端的响应主体中的内容一般都是字符串[JSON格式居多]），而设置DATA-TYPE='JSON'，JQ会内部把获取的字符串转为JSON格式的对象 =>“他不会影响服务返回的结果，只是把返回的结果进行了二次处理”
     *
     * ASYNC：设置同步或者异步（TRUE->异步 FALSE->同步）
     * CACHE：设置GET请求下是否建立缓存（默认TRUE->建立缓存 FALSE->不建立缓存），当我们设置FALSE，并且当前请求是GET请求，JQ会在请求的URL地址末尾追加随机数（时间辍）
     *
     * SUCCESS：回调函数，当AJAX请求成功执行，JQ执行回调函数的时候会把从响应主体中获取的结果(可能二次处理了)当做参数传递给回调函数
     * ERROR：请求失败后执行的回调函数
     */
    $.ajax({
        url: 'https://www.easy-mock.com/mock/5b0412beda8a195fb0978627/temp/list',
        method: 'GET',
        data: {
            name: 'xxx',
            age: 28
        },
        dataType: 'json',
        async: true,
        cache: false,
        success: (result, textStatus, xhr) => {
            //=>RESULT就是从服务器获取的结果
            console.log(result);
            console.log(textStatus);
            console.log(xhr.getResponseHeader('date'));//=>jqXHR
        },
        error: () => {

        }
    });

jQuery动画

animate:

//=>stop:结束正在运行的动画
//=>finish:结束动画,让元素立即运动到目标位置
$box.stop().animate({
    top: 300,
    left: 500
}, 500, () => {
    /*动画结束后执行的回调函数*/
    $box.css({
        borderRadius: '50%',
        background: 'lightblue'
    });
});

快捷动画:

  • show/hide/toggle
  • fadeIn/fadeOut/fadeToggle
  • slideDown/slideUp/slideToggle
    可以指定具体运动时间，也可以指定'slow' / 'fast'

jquery中的事件绑定

  • on / off：基于DOM2事件绑定实现事件的绑定和移除（兼容了所有的浏览器）
  • one：只绑定一次，第一次执行完成后，会把绑定的方法移除(基于ON/OFF完成的)
  • click / mouseover / mouseout ...：JQ提供快捷绑定方法，但是这些方法最后都是基于ON/OFF完成的
  • delegate：事件委托方法（1.7版本以前用的是live方法）
  • bind / unbind：正常绑定