jQuery

作者: Eazer | 来源:发表于2017-06-29 01:57 被阅读0次

    1. jQuery 能做什么?

    • 选择网页元素
    • 改变结果集
    • 元素的操作:取值和赋值
    • 元素的操作:移动
    • 元素的操作:复制、删除和创建
    • 工具方法
    • 事件操作
    • 特殊效果
    • AJAX

    2. jQuery 对象和 DOM 原生对象有什么区别?如何转化?

    • jQuery对象是一个类数组对象,拥有jQuery的方法和属性
    • DOM原声对象是JS对象,拥有原生JS DOM的方法和属性

    DOM对象转jQuery对象
    var btn = document.querySelector(".btn")
    $(btn)

    jQuery对象转DOM对象
    $('.btn')[0]

    3.jQuery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?

    • 绑定事件:bind、on、live、delegate
    • 触发事件:trigger('keyup')、keyup()
    • 解绑事件:unbind、off、die、undelegate

    bind:将一个处理程序附加到元素的事件中
    unbind:从元素中删除先前附加的事件处理程序
    delegate:根据特定的一组根元素,将处理程序附加到于现在或者将来的选择器匹配的所有元素的一个或多个事件
    live:附加一个事件处理器到匹配目前选择器的所有元素,现在和未来。
    on:在选定的元素上绑定一个或多个事件(推荐使用)
    off:移除一个事件处理函数(推荐使用)

    $( "#dataTable tbody tr" ).on( "click", function() {
      console.log( $( this ).text() );
    });
    
    $( "#dataTable tbody" ).on( "click", "tr", function() {
      console.log( $( this ).text() );
    });
    

    4.jQuery 如何展示/隐藏元素?

    • duration:动画持续多久
    • easing:表示过渡使用哪种缓动函数,jQuery自身提供"linear" 和 "swing"
    • complete:在动画完成时执行的函数

    使用toggle()切换展示/隐藏元素

    .toggle( [duration ] [, easing ] [, complete ] )
     $('btn').toggle()
    

    使用show()、hide()展示/隐藏元素

    .show( [duration ] [, easing ] [, complete ] )
    .hide([duration ] [,easing ] [,complete ])
    $('.btn').show()
    $(',btn').hide()
    

    5. jQuery 动画如何使用?

    渐变

    .fadeln( [duration ] [, easing ] [, complete ] )
    

    通过淡入的方式显示匹配元素,参数含义和上面相同

    .fadeOut( [duration ] [, easing ] [, complete ] )
    

    通过淡出的方式隐藏匹配元素

    $('#book').fadeIn('slow', function() { })
    $('#book').fadeOut('slow', function() { })
    

    .fadeTo( duration, opacity [, easing ] [, complete ] )
    

    调整匹配元素的透明度,方法通过匹配元素的不透明度做动画效果

    $('#book').fadeTo('slow', 0.5, function() {
      // Animation complete.
    });
    

    .fadeToggle( [duration ] [, easing ] [, complete ] )
    

    通过匹配的元素的不透明度动画,来显示或隐藏它们,方法执行匹配元素的不透明度动画。当被可见元素调用时,元素不透明度一旦达到0,display样式属性设置为none ,所以元素不再影响页面的布局。

    $("button:first").click(function() {
    $("p:first").fadeToggle("slow", "linear");
    });
    

    滑动

    .slideDown( [duration ] [, easing ] [, complete ] )
    

    用滑动动画显示一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面的下面部分滑下去,弥补了显示的方式

    .slideUp( [duration ] [, easing ] [, complete ] )
    

    用滑动动画隐藏一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面的下面部分滑上去,当一个隐藏动画后,高度值达到0的时候,display 样式属性被设置为none,以确保该元素不再影响页面布局。 display 样式属性将被设置为none,以确保该元素不再影响页面布局。

    $('#book').slideDown('slow', function() {
        // Animation complete.
    });
    
    $('#book').slideUp('slow', function() {
        // Animation complete.
    });
    

    .slideToggle( [duration ] [, easing ] [, complete ] )
    

    用滑动动画显示或隐藏一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面中,在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中,所以display可以方便以后可以恢复到其初始值。

    如果一个元素的display属性值为inline,然后是隐藏和显示,这个元素将再次显示inline。当一个隐藏动画后,高度值达到0的时候,display 样式属性被设置为none,以确保该元素不再影响页面布局。

    $('#clickme').click(function() {
     $('#book').slideToggle('slow', function() {
     // Animation complete.
     });
    });
    

    自定义

    .animate( properties [, duration ] [, easing ] [, complete ] )
    

    properties是一个CSS属性和值的对象,动画将根据这组对象移动。

    $('#clickme').click(function() {
      $('#book').animate({
        opacity: 0.25,
        left: '+=50',
        height: 'toggle'
      }, 5000, function() {
        // Animation complete.
      });
    });
    

    6.如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?

    html([string])
    这是一个读写两用的方法,用于获取/修改元素的innerHTML

    1.当没有传递参数的时候,返回元素的innerHTML
    2.当传递了一个string参数的时候,修改元素的innerHTML为参数值

    $('div').html()
    
    $('div').html('123')
    

    text()
    和html方法类似,操作的是DOM的innerText值

    7.如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?

    $('.input').val('123')  //设置input的value
    $('.input').val()   //获取input的value
    $('.input').attr('type') //获取input的type属性
    $('.input').attr('type','password')  //设置input的type属性为password
    

    【个人总结,如有错漏,欢迎指出】
    :>

    相关文章

      网友评论

        本文标题:jQuery

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