码迷,mamicode.com
首页 > Web开发 > 详细

jQuery

时间:2019-10-01 20:52:58      阅读:155      评论:0      收藏:0      [点我收藏+]

标签:bin   lte   返回结果   finish   attr   false   数组   seo   支持   

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

jQuery

标签:bin   lte   返回结果   finish   attr   false   数组   seo   支持   

原文地址:https://www.cnblogs.com/wangshouren/p/11615852.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!