美文网首页前端基础类学习我爱编程
jQuery选择器、Dom操作、样式、事件处理

jQuery选择器、Dom操作、样式、事件处理

作者: 饥人谷_米弥轮 | 来源:发表于2017-04-19 22:02 被阅读29次

    1.说说库和框架的区别?

    • 库相当于工具箱,里面有各种已经做好的工具,当你需要的时候,就可以直接使用
    • 框架就相当于一栋刚建好的房子,房子里面的空间已经给你规定好规则做什么用,你只能按照这个规则去填充使用这个空间
    • 框架和类库最重要的区别是控制权的反转。框架就像一个模具,它需要你把原材料放在模具里面,然后成品就出来了,由于模具已经造好,所以原材料不能乱加,人家要什么你就给什么,控制权在模具。但是类库就不一样了,控制权在你手中,想实现什么功能就实现什么功能,类库只是帮你封装好了大量实用的函数,帮助你实现自己的目的,你要做的只是根据自己的需要合适地调用这些函数。

    2. jquery 能做什么?

    • 将原生DOM元素的功能实现并且满足良好的兼容性,最重要的是,可以简化代码。
    • jquery是一个丰富的js库,内部对js的很多复杂的方法进行了封装和加工,比如js很多方法名很冗长,jquery封装后方法就变得简便了,也考虑到了跨浏览器兼容问题,这样我们用js时需要考虑的很多问题它都帮我们解决了,这样我们使用时就比js代码要方便,高效的多。

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

    • jquery 对象和 DOM 原生对象的区别在于:
    • jquery对象是一个类数组对象只能使用jquery对象方法,而DOM原生对象则是Object,可以使用原生Js方法和属性
    • DOM原生对象转jquery对象:
      • dom = document.querySelector('div');
      • $dom = $(dom);
    • jquery对象转DOM原生:
      • dom = $dom[0]

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

    • bind()向匹配元素添加一个或多个事件处理器

    • unbind()向匹配元素移除一个或多个事件处理器

    • delegate() 为指定的元素(被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

    • live() 向当前或未来的匹配元素添加一个或多个事件处理器

    • on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)

    • off() 为指定的元素,移除一个或多个事件处理程序
      浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式

    • 推荐使用on()、off()方法因为这两个方法更高效、简洁、灵活。如果项目中引用jquery版本为低版本,推荐用delegate(),高版本jquery可以使用on()来代替

        on代理事件写法:
        
        <ul class="ct">
            <li>a-1</li>
            <li>a-2</li>
            <li>a-3</li>
            <li>b-1</li>
            <li>b-2</li>
        </ul>
        <script type="text/javascript">
            $('.ct').on('click','li',function(){alert('1')})
        </script>
      

    5.jquery 如何展示/隐藏元素?

        $(selector).hide() //隐藏元素
        $(selector).show() //展示元素
    

    6.jquery 动画如何使用?

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

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

        $(selector).html()   //获取元素内部HTML内容
        $(selector).html('<span></span>')   //设置元素内部HTML内容
    
        $(selector).text()   //获取元素内部内容文本
        $(selector).text('jquery选择器')   //设置元素内部内容文本
    

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

        $(selector).val()  //获取表单内容
        $(selector).val('jquery')  //设置表单内容
    
        $(selector).attr()  //获取元素属性
        $(selector).attr('data-username','jquery')  //设置元素属性
    

    9.实现如下效果

    效果
    gitHub代码

    10.使用 jquery 实现如下效果

    效果
    gitHub代码

    11.实现如下效果

    效果
    gitHub代码

    相关文章

      网友评论

        本文标题:jQuery选择器、Dom操作、样式、事件处理

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