jQuery

Posted 2022-12-11 wangshouren

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: `json/data.json?page=$page`,
            method: 'get',
            async: false,//=>同步false/异步true
            dataType: 'json',//=>把从服务器端获取的JSON字符串转化为对象(这样设置后，JQ内部会帮我们转换)
            success: result => 
                //=>result:从服务器端获取的结果
                imgData = result;
            
        );

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：正常绑定