十四:jquery

作者: 饥人谷_一叶之秋 | 来源:发表于2017-12-07 21:40 被阅读0次

    题目1: jQuery 能做什么?

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

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

    • 区别:
    1. jQuery选择器得到的jQuery对象和标准的JavaScript中document.getElementByld()取的的dom对象是两种不同的对象类型,两者不等价;
    2. jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法、乱使用会报错。
    • 转换:
    1. jQuery对象转是一个数据对象,通过[index]的方法
    var $v = $("#v"); //jQuery对象
    var v = $v[0]; //dom对象
    alert(v.checked)  // 检测这个checkbox是否被选中
    

    2.jQuery本身提供,通过。get(index)方法

    var $v = $("#v"); //jQuery对象
    var v = $v.get(0); //dom对象
    alert(v.checked) //检测这个checkbox是否被选中
    

    DOM对象转成jQuery对象
    对于DOM对象只需要用$()把DOM对象包装起来,就可以得到jQuery对象

    var  v = document.getElementByid('v'); //DOM对象
    var $v = $(v); //jQuery对象
    

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

    • bind()是最直接的绑定方法,会绑定事件类型和处理函数到DOM element上。这个方法是存在最久的,而且也很好的解决了浏览器在事件处理中的兼容问题。.click(), .hover()...这些非常方便的事件绑定,都是bind的一种简化处理方式对于利用ID选出来的元素是非常好的,不仅仅是很快的可以hook上去(因为一个页面只有一个id),而且当事件发生时,handler可以立即被执行(相对于后面的live, delegate)实现方式,但是它会绑定事件到所有的选出来的元素上,它不会绑定到在它执行完后动态添加的那些元素上,当元素很多时,会出现效率问题。
    • .live()方法用到了事件委托的概念来处理事件的绑定。它和用.bind()来绑定事件是一样的。.live()方法会绑定相应的事件到你所选择的元素的根元素上,即是document元素上。那么所有通过冒泡上来的事件都可以用这个相同的handler来处理了。它的处理机制是这样的,一旦事件冒泡到document上,jQuery将会查找selector/event metadata,然后决定那个handler应该被调用。
    • .delegate()有点像.live(),不同于.live()的地方在于,它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation.
    • .bind(), .live(), .delegate()都是通过.on()来实现的,.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的
    • 推荐使用on和off
    • on绑定事件使用事件代理的写法
    $('.box li').on('click', function(){
        var str = $(this).text()
    })
    

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

    • 展示:
    $(selector).show(speed,callback);
    可选的参数speed:规定元素从隐藏到完全可见的速度,默认为0.
    可选的参数callback:show函数执行完之后,要执行的函数。
    本质上show方法是修改元素的display为block
    
    • 隐藏
    $(selector).hide(speed,callback);
    参数同上,本质上hide方法是修改元素display为none。
    

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

    $(selector).animane({parement},speed,callback);
    

    aninmate()方法用于创建自定义动画
    params(必选)定义形成动画的CSS属性
    speed(可选)规定效果的时长。值:slow,fast或秒。
    callback(可选)动画完成后所执行的函数
    .delay()设置一个定时器,以延迟执行队列中后续的项目。
    .clearQueue()从列队中删除所有还没有运行过的项目。
    .stop在匹配的元素上停止当前正在运行的动画。
    .finish()针对匹配的元素停止当前正在运行的动画,删除所有的队列中的动画,并结束所有动画。

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

    • $(selector).html()设置HTML内容
    • $(selector).text()设置文本内容

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

    • val();获取表单输入框的值,有值的话就是设置
    $('input').val()//获取值
    $('input').val('11') //设置值
    
    • attr();获取属性,有值的话就是设置
    $('img').attr('src')//获取属性
    $('img').attr('src',newSrc) //设置属性
    

    题目8: 使用 jQuery实现如下效果

    效果

    题目9:

    效果

    题目10:

    效果

    题目11:

    效果

    相关文章

      网友评论

        本文标题:十四:jquery

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