美文网首页
jQury选择器_Dom操作_样式_事件处理

jQury选择器_Dom操作_样式_事件处理

作者: 漂于行 | 来源:发表于2017-01-23 21:56 被阅读0次

    题目1: 说说库和框架的区别?

    框架也算是库的一种,但倾向于重量级一些,倾向于提供整套的解决方案,倾向于创造一些需要你来遵守的规则和范例。

    比如 AngularJS 就算是一个框架,因为它提供了一整套的解决方案,需要你按照它设计好的方式来写代码。而 jQuery 的分类则比较模糊一些,可以说是库,也可以说是框架。

    题目2: jquery 能做什么?

    Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。

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

    DOM对象是我们用传统的方法(javascript)获得的对象,jQuery对象就是用jQuery的类库选择器获得的对象。JQuery对象就是通过jQuery包装DOM对象后产生的对象。JQuery对象是jQuery独有的,其可以使用jQuery里的方法,但是不能使用DOM的方法;
    相互转化的方法:jquery->dom:jquery对象[0] //利用jquery类数组特性 选择第一个index
    dom->jquery:$(dom对象) //很多时候要先把dom对象先转化为jquery对象后再使用

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

    jquery中绑定事件有以下几种,
    1.最简单常见的是bind(type,handle),这种方式的写法和type(handle)的写法的基本作用是相同的(如$(“a”).click(function(){})),对应的取消事件的绑定方法是unbind:如果不带参数默认移除所有绑定的事件监听,若带参数则移除指定的事件监听(如$(“p”).unbind(“click”)),这种是直接在符合条件的元素的事件类型上绑定监听函数,因此每生成一个新的元素,就需要给新元素绑定一次事件,比较麻烦,
    2.于是有了live这种方式(如$(“a”).live(type,function(){})),这种方式实现了事件的代理,把监听函数绑定在$(document)对象上,每次有事件触发时,通过事件冒泡,$(document)会首先接收到,并且判断target是否是目标元素(如上例中$(“a”)),事件类型是否是该类型(type),若都符合条件会执行该监听函数,解决了bind的弊端,但是又有新的缺点,如果dom树结构比较深,点击的目标需要通过层层遍历经历事件冒泡到达顶端,性能低,开销大,在老版本的juery中已经被废弃。
    3.delegate,实现指定代理对象(如$(".div1").delegate(“a”,type,function(){})),这样代理方从$(document)对象变成了一个更具体的$(".div1")对象,减少了查找范围,缩短了冒泡旅程,比live更精确,效率高。
    3.on这种方式把以上三种方法做了统一(如$(".div1").on(type,“a”,,function(){}),注意第二个参数是个子元素选择标签),对应的off是移除事件绑定的方式,在jquery的新的版本上都是支持的,也是现在比较推荐的写法。

    $('ul').on('click', 'li', function() {
        console.log($(this).text());
    });
    

    用on 在ul上绑定事件,监听li的变化。推荐使用on(),这个方法可以将以上的各种事件绑定的方法都替代掉。

    题目5:jquery 如何展示/隐藏元素?

    jquery对象.hide(时间参数(可选),回调函数(可选));
    jquery对象.show(时间参数(可选),回调函数( 可选));

    题目6: jquery 动画如何使用?

    $(selector).animate({params},speed,callback);
    必需的 params 参数定义形成动画的 CSS 属性。
    可选的 speed 参数规定效果的时长。它可以取以下值:“slow”、“fast” 或毫秒。
    可选的 callback 参数是动画完成后所执行的函数名称。
    当动画 100% 完成后,即调用回调函数 Callback。

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

    • html();获取html内容,有值的话就是设置html内容
    $('div').html();//获取内容
    $('div').html('<p>我是段落</p>');//设置内容
    
    • text();获取文本元素,有值的话就是设置文本内容
     $('p').text();//获取文本
     $('p').text('我不是段落')//设置文本
    

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

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

    题目9: 使用 jquery实现如下效果

    demo1

    题目10:. 使用 jquery 实现如下效果

    demo2

    题目11:实现如下效果

    demo3
    //还是 不是很懂加 selector 第二个可选参数的作用。

    相关文章

      网友评论

          本文标题:jQury选择器_Dom操作_样式_事件处理

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