jquery

作者: Wensx | 来源:发表于2017-08-23 10:27 被阅读0次

    题目1: jQuery 能做什么?

    jQuery能选取并操作HTML元素,修改元素属性,CSS属性操作,监听事件并进行对应的操作,设置javascript动画,Ajax

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

    JQuery对象包含更多的对象属性,DOM对象就是对应的元素
    J->D: $('#id')[0]
    D->J: $(document.querySelector('#id'))

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

    jQuery使用一般使用.on绑定事件:
    如:$('element').on('click',function(){})

    .on( events [, selector ] [, data ], handler(eventObject) )
    

    events
    类型: String
    一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click", "keydown.myPlugin", 或者 ".myPlugin"。

    selector
    类型: String
    一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null
    或者忽略了该选择器,那么被选中的元素总是能触发事件。

    data
    类型: Anything
    当一个事件被触发时,要传递给事件处理函数的event.data

    handler(eventObject)
    类型: Function()
    事件被触发时,执行的函数。若该函数只是要执行return false
    的话,那么该参数位置可以直接简写成 false。

    .bind():为一个元素绑定一个事件处理程序。
    .unbind():从元素上删除一个以前附加事件处理程序。
    .delegate():为所有匹配选择器(selector参数)的元素绑定一个处理器到一个或多个事件,现在或将来, 基于根元素的一个特定的组
    .on():在选定的元素上绑定一个或多个事件处理函数。
    .off():移除一个事件处理函数。
    .live():附加一个事件处理器到符合目前选择器的所有元素匹配,现在和未来。

    推荐使用.on代理事件写法:

    $('#parent').on('click',$('.child'),function(){})
    

    题目4:jQuery 如何展示/隐藏元素?

    展示:.show()
    隐藏: .hide()
    展示/隐藏切换: .toggle()

    题目5: jQuery 动画如何使用?

    jQuery动画一般使用.animate()方法

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

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

    duration (默认: 400
    )
    类型: Number or String
    一个字符串或者数字决定动画将运行多久。(愚人码头注:默认值: "normal", 三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如:1000) )

    easing (默认: swing
    )
    类型: String
    一个字符串,表示过渡使用哪种缓动函数。(译者注:jQuery自身提供"linear" 和 "swing")

    complete
    类型: Function()
    在动画完成时执行的函数。

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

    • 使用.html()来设置和获取内部HTML内容如:
    考虑以下的HTML:
    <div class="demo-container">
      <div class="demo-box">Demonstration Box</div>
    </div>
    获取内容
    $('div.demo-container').html();
    结果如下:
    <div class="demo-box">Demonstration Box</div>
    这种方法使用浏览器的innerHTML 属性。有些浏览器返回的结果可能不是原始文档的 HTML 源代码。例如,如果属性值只包含字母数字字符,Internet Explorer有时丢弃包裹属性值的引号。
    
    设置内容
    $('div.demo-container')
      .html('<p>All new content. <em>You bet!</em></p>');
    这行代码将替换 <div class="demo-container">里的所有内容
    结果:
    <div class="demo-container">
      <p>All new content. <em>You bet!</em></p>
    </div>
    
    • 使用.text()来获取设置文本内容
    <div class="demo-container">
      <div class="demo-box">Demonstration Box</div>
      <ul>
        <li>list item 1</li>
        <li>list <strong>item</strong> 2</li>
      </ul>
    </div>
    代码$('div.demo-container').text() 将提供下面的结果:
    Demonstration Box list item 1 list item 2
    
    $('div.demo-container').text('<p>This is a test.</p>');代码语句将输出以下 DOM :
    <div class="demo-container">
    <p>This is a test.</p>
    </div>
    

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

    $('selector').val():获取表单用户输入值;
    $('selector').val('…'):设置输入值;
    
    $('selector').attr('name'):获取元素属性;
    $('selector').attr('name','xxx'):设置元素属性的值;
    

    题目8:

    link

    题目9:

    link

    题目10:

    link

    题目11:

    link

    相关文章

      网友评论

        本文标题:jquery

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