jquery学习大钢整合常用函数方法:

jquery学习大钢整合常用函数方法:

------------------------------

|-核心函数

  1)each();    //each遍历一个jquery对象

  2)size();     //size判断一个jquery对象里的到底有多少个DOM对象

  3)length;     //和size一样都是判断一个jquery对象里的到底有多少个DOM对象

  4)get();      //把jquery中的每一个DOM对象拿出来

  5)get(index); //把jquery中的第几个DOM对象拿出来

  6)index();    //获取当前元素在该类元素中的索引值 

  7)data();     //设置获取标签属性值


|-选择器

  1.基础

  #id        //ID选择器

  element    //元素选择器

  .class     //类选择器

  *          //通用选择器


  2.层级

  a b        //祖先后代选择器

  a>b        //子元素选择器

  a+b        //找到下一个兄弟选择器

  a-b        //找到上一个兄弟选择器

  a~b        //找到a后面所有的兄弟选择器


  3.基本

  :first     //第一个元素选择器

  :last      //最后一个元素选择器

  :not       //除了第几个其它都选中选择器

  :even      //偶数选择器

  :odd       //奇数选择器

  :eq        //第几个元素选择器

  :gt        //大于选择器

  :lt        //小于选择器


  4.属性

  [attr]        //找到拥有attr属性的元素

  [attr=val]    //找到拥有attr属性并且值为val的元素

  [attr!=val]   //找到拥有attr属性并且值不等于val的元素

  [attr^=val]   //找到拥有attr属性并且值以val开头的元素

  [attr$=val]   //找到拥有attr属性并且值以val结尾的元素

  [attr*=val]   //找到拥有attr属性并且值包含有val的元素


  5.子元素

  :nth-child    //第几个子元素

  :first-child  //第一个子元素

  :last-child   //最后一个子元素

  :only-child   //只含有一个子元素


  6.表单

  :input        //表单元素选择器

  :text         //文本表单选择器

  :password     //密码表单选择器

  :radio        //单选框表单选择器

  :checkbox     //多选框表单选择器

  :submit       //提交按钮选择器

  :reset        //重置按钮选择器

  :button       //button按钮选择器

  :file         //文件上传选择器

  :hidden       //隐藏按钮选择器


  7.表单属性

  :checked      

  :selected


|-筛选

  1.过滤

    eq();          //eq方法第几个

    first();       //first方法第一个

    last();        //last方法最后一个

    not();         //not方法除了

    slice();       //slice方法一个值时表示从0到第N个元素被选中,两个值时表示从第几个元素到第N个元素被选中


  2.查找

    children();    //子元素

    find();        //后代元素

    next();        //下一个元素

    nextAll();     //后面所有元素

    parent();      //父元素

    prev();        //上一个元素

    prevAll();     //前面所有元素

    siblings();    //前后所有元素


  3.串联

    add();         //连接

    andSelf();     //连接自己


|-属性

  1.属性

    attr();        //设置属性

    removeAttr();  //移出属性


  2.css类

    addClass();     //添加类

    removeClass();  //移出类

    toggleClass();  //切换类


  3.html代码

    html();            //取得第一个匹配元素的html内容

    html(val);         //设置每一个匹配元素的html内容

    html(function(index,html));   //此函数返回一个HTML字符串。接受两个参数,index为元素在集合中的索引位置,html为原先的HTML值。



  4.文本

    text();         //获取所有匹配元素的内容

    text(val);      //设置所有匹配元素的文本内容

    text(function(index,html));     //此函数返回一个字符串。接受两个参数,index为元素在集合中的索引位置,text为原先的text值。



  5.值

    val();          //获取表单元素的值

    val(val);       //设置表单元素的值

    val(array);     //check,select,radio等都能使用为之赋值


|-文档处理

  1.内部插入

    append();       //在元素内部向后缀加值

    appendTo();     //把值向后缀加到元素体内

    prepend();      //在元素内部向前缀加值

    prependTo();    //把值向前缀加到元素体内


  2.外部插入

    after();        //在元素后面插入值

    before();       //在元素前面插入值

    insertAfter();  //把值插入到元素后面

    insertBefore(); //把值插入到元素前面


  3.包围

    wrap();         //在每个元素标签外用标签包围

    wrapAll();      //用一个标签包含所有的元素标签

    wrapInner();    //在每个元素里用标签包围


  4.复制

    clone();        //克隆匹配的DOM元素并且选中这些克隆的副本

    clone(true);    //元素以及其所有的事件处理并且选中这些克隆的副本


|-css

  1.css

    css();


  2.位置

    scrollTop();       //获取或设置滚动条顶部偏移的值

    scrollLeft();      //获取或设置滚动条横向偏移的值

    position();        //获取相对父元素的坐标

    offset();          //获取绝对定位坐标


  3.尺寸

    width();           //获取宽 不包含border padding在内的大小

    height();          //获取高 不包含border padding在内的大小

    innerwidth();      //获取宽 padding在内的大小

    innerheihgt();     //获取高 padding在内的大小

    outerWidth();      //获取宽 border在内的大小            

    outerHeight();     //获取高 border在内的大小            


|-事件

  1.页面载入

    ready(fn);  //当文档准备完毕时触发js特效

    javascript中(onload)  //当文档加载完毕时触发js特效


  2.事件处理

    bind();  #bind在高版本里被on代替了

    #$('.close').on('click',function(){//代码})       //把匹配的元素添加绑定事件

    unbind(); #unbind在高版本里被off代替了

    #$('.close').off('click')    //把匹配的元素移除绑定事件

    one();        //把匹配到的元素只绑定一次事件


  3.事件委派

    live();   #live在高版本里被on代替了

    #$(document).on('click','Element',function(){//代码})     //live在未来给元素绑定事件

    die();    #die在高版本里被off代替了

    #$(document).off('click','Element')  //要解除绑定的live事件


  4.事件切换

    hover(fn1,fn2);            //鼠标移入移出来回切换fn1和fn2

    toggle(fn1,fn2,fn3,...);   //每次点击后依次调用函数


  5.事件类型

    change();   //触发每个匹配元素的change事件

    change(fn); //当表单元素值发生改变时触发

    click();    //触发每一个匹配元素的click事件

    click(fn)   //鼠标单击事件触发

    dblclick(); //触发每一个匹配元素的dbclick事件

    dbclick(fn) //鼠标双击事件触发

    error();    //触发每一个匹配元素的error事件

    error(fn)   //当错误发生时触发

    focus();    //触发每一个匹配元素的focus事件

    focus(fn)   //获得焦点后会触发事件

    focusin(fn);  //这跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况

    focusout(fn); //这跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况

    blur();       //触发每一个匹配元素的blur事件

    blur(fn)      //事件会在元素失去焦点的时候触发

    keydown();    //触发每一个匹配元素的keydown事件

    keydown(fn);  //键盘键码按下时触发事件

    keypress();   //触发每一个匹配元素的keypress事件

    keypress(fn); //键盘键码按住时触发事件

    keyup();      //键盘键码按住时触发事件

    keyup(fn);    //键盘键码弹起时触发事件

    load(fn);     //内容加载后触发事件

    mousedown(fn); //鼠标按下触发事件

    mouseup(fn);   //鼠标松开触发事件

    mousemove(fn); //鼠标移动到元素触发事件(move移动,只要鼠标在元素上动就会触发事件)

    mouseout(fn);  //鼠标从元素上离开后会触发事件

    mouseover(fn); //鼠标移入对象触发事件

    resize(fn);    //当文档窗口改变大小时触发事件

    scroll(fn);    //当滚动条发生变化时触发

    select();      //触发每个匹配元素的select事件

    select(fn);    //选中某段文本时触发事件

    submit();      //触发每一个匹配元素的submit事件

    submit(fn);    //表单提交时触发

    unload(fn);    //在窗口关闭时触发


|-效果

  1.基本

    show(fn);        //显示匹配的元素

    hide(fn);        //隐藏匹配的元素

    toggle(fn);      //显示、隐藏互相切换


  2.滑动

    slideDown(speed,fn);    //向下滑动效果

    slideUp(speed,fn);      //向上滑动效果

    slideToggle(speed,fn);  //向上、向下滑动切换


  3.淡入淡出

    fadeIn(speed,fn);           //淡入

    fadeOut(speed,fn);          //淡出

    fadeTo(speed,opacity,fn);   //淡入、淡出切换


  4.自定义

    animate({},speed,fn);       //自定义动画


注意:此文章是站长从千万篇中精心挑选的,请认真对待文章内容。站长提供不易,请动动小手分享一下!如有问题请联系站长,QQ号:1787511717(同微信),邮箱号:1787511717@qq.com,以上内容由沙漏博客的作者颜浩发布到技术学习专栏!
本文章最后修改时间为:2019-02-23 13:17!

内容版权声明:文章由沙漏博客_分享提供!

转载注明出处:https://www.58yanhao.com/a/229.html

分享到:
打赏

觉得本站还不错就打赏一下吧!

支付宝扫一扫打赏

微信扫一扫打赏