美文网首页
Jquery 方法--自己总结持续更新-1

Jquery 方法--自己总结持续更新-1

作者: 柠檬树QAQ | 来源:发表于2017-02-26 22:09 被阅读0次
    parent() --查找父节点
    parents()--查找祖先节点 --parents(‘div’)--在所有祖先节点中找到div
    ***closest()--当前元素指定的最近的祖先元素,必须要接受一个参数--(只能选择到一个唯一的元素)--他的祖先节点包括自身
    attr()----设置或返回元素属性
    sibling()--兄弟节点--sibling(div)--所有div 的兄弟节点
    创建元素
    $(function () {
     $(function () {
           document.createElement('div');//原生
           $('<div id="box">hellow word</div>')//JQ
        })
    })
    
    添加节点
    jianshu()把元素添加到指定节点的里面的最后---appendChildren()
    $('div').append($div)
    appendTo() 与append相反    $div appendTo($('div'))
    
    prepend() 把元素添加到指定节点里面的最前面
    $('div').prepend($div)
    prependTo() --$div.prependTo($('div'))
    
    before() 把元素添加到指定节点的前面(添加到外面)---insertBefore
    $('div').before($div)
    insertBefore()---$div.insertBefore($('div'))
    
    after() 把元素添加到指定节点的后面
    $('div').after($div)
    insertAfter()--$div.after($('div'))
    
    两种方法的区别于比较:例如$('div').before($div).css('background','red');---后续(css('background','red'))改变的是前面的元素($('div'))
    $div.insertBefore($('div')).css('background','red');--后续改变的是也是前面的元素($div) 不过 元素不同 --看需求!
    以上默认操作行为都是剪切
    --end--
    
    remove()---删除元素---$('要删除的元素').remove();
    clone()----克隆-------var $div=$('div').clone()---克隆一个元素--默认操作行为克隆结构 不会克隆事件---.clone(true)--深度克隆 可以复制事件
    index()----索引值,代表当前元素在所有兄弟元素排第几(从0开始);--$('#span').index('span')--在所有的span标签中查找此时和兄弟节点没关系!
    outerWidth()---元素节点的绝对宽度(padding+border+width)--outerWidth(true)--(padding+border+width+margin)
    innerWidth()---(不包含border)
    width(200)-----设置宽度为200px;
    innerWidth(200)-(width=200-padding)
    outerWidth(200)-(width=200-padding-border)
    outerWidth(200,true)--(width=200-padding-border-border)
    $(window).height()-----可视区的高度
    $(document).height()---页面的的高度;
    scrollTop()------------滚动距离;
    $(document).scrollTop(200)----设置滚动距离
    $(document).scrollTop()==$(document).height()-$(window).height()---到达底部时的滚动距离
    $(obj).offset().top------元素距离Y轴的距离-距离值 相对于页面
    $(obj).position().left---不认margin值 定位距离
    $(obj).offsetParent()----找到相对定位的父级--$(obj).offset().left-$(obj).offsetParent().offset().left
    
    事件对象:
    ev.pageX---鼠标的坐标相对于 页面X轴
    ev.eventX--鼠标的坐标相对于 可视区X轴
    ev.which---键盘的键值
    ev.target--事件源 --当前元素---事件委托
    ev.stopPropagation()---阻止冒泡
    ev.preventDefault()----阻止默认事件
    return false;---------阻止默认事件和冒泡
    事件委托:
        写法 $('obj').delegate('被委托元素','事件',fn)
        ev.delegateTarget()---(找到)委托人
        $(ev.delegateTarget).undelegate()--解除绑定
    
    trigger---主动触发  $('#input').trigger('click')--调用input的点击事件|| $('#input').click()--调用input的点击事件
    命名空间---$('div').on('click.abc',function(){})--加命名空间 还是原来的点击事件 只不过加了个识别符--trigger('click.abc')--区别对待
    
    JS中的运动
    .hide||show('normal'):--正常速度 默认400 改变-时间  宽高  背景色 里面可以直接添加时间 改变时间的值
    toggle()-如果元素隐藏就让他显示 如果显示就让他隐藏 hide()/show()合体
    fadeOut() || fadeIn()淡入淡出 -默认时间400
    fadeToggle()--淡入淡出 fadeOut() || fadeIn()-合体版
    sideUp()||sideDown()---显示隐藏 改变高度
    sideToggle---显示隐藏-合体版
    animate()-**-参数: 1、对象{width:'300',height:'300'}设置样式属性 和值
                       2、时间 默认是400
                       3、运动形式 --swing(缓冲-快慢快)--linear(匀速)
                       4、回调函数 --
                       5、数值运算--{width:'+=100'}--每次触发事件 width会累加
                       6、json 形式-{duration:1000,easing:'linear',complete:function(){alert('回调')}}
                       7、step--可以检测定时器的每一次的变化-(可拓展-非常有意思 里面有一个比例值-pos)配置参数×
                       8、delay()--在链式运动中 可以起到 延时的作用括号内接受时间值
    stop()--停止运动 默认情况下 只停止当前运动(在链式运动中只停止当前的链的运动 不会影响后面的运动)如果接受一个true 就会全部停止
            如果接受值为两个 true(stop(true,true))那么就会停止到当前链式的运动的目标点,不会影响后面的运动
            清空队列行为--
    finish()--停止运动效果 所有运动都会到达指定目标点
    parseJSON--把类似json形式的字符串转换成真正的json
    

    相关文章

      网友评论

          本文标题:Jquery 方法--自己总结持续更新-1

          本文链接:https://www.haomeiwen.com/subject/iuxawttx.html