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

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

作者: S级食材咩咩羊 | 来源:发表于2017-04-09 19:49 被阅读0次

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

  • 库:将代码集合成一个产品,提供给开发者调用。面向对象的代码组织而成的叫类库,面向过程组织而成的叫函数库。
  • 框架:为解决一个(一类)问题而开发的产品,框架用户一般只需要使用框架提供的类或函数,即可实现全部功能。
  • 区别:库提供更灵活的选择,需要自己组织。框架更具有针对性,提供一整套完整的代码。

2.jquery 能做什么?

  • 封装部分JavaScript代码,API友好
  • $(“css选择器”) 代替了 document.getElementsByTagName(“”)、document.getElementById(“”)…
  • $(“css选择器”).css(“color”,”red”) 代替了 document.getElementById(“”).style.color = “red”
  • $(“css选择器”).text(“”) 一个api同时具有读跟写的功能。($(“div”).text(“你好吗”);)
  • $(“css选择器”).on(“click”,function (){}),监听事件

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

  • DOM原生对象:w3c标准用于操作文档的API
  • jQuery对象:包装DOM对象产生的对象。
  • 区别:对象的方法不同
  • 转化:
    • DOM原生对象转化为jQuery对象:$();
    • jQuery对象转化为DOM原生对象:value[index];

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

  • bind():为一个元素绑定一个或多个事件$(‘button’).bind(‘click’,function(){console.log(this)})
  • unbind():解除事件绑定
  • delegate():为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数;适用于当前或未来的元素(比如由脚本创建的新元素)
  • live():这种方法是将页面的document元素作为事件代理元素,太消耗资源,已经过时。
  • on():在选定的元素上绑定一个或多个事件处理函数,提供绑定事件处理的所有功能。
  • off():用来移除on绑定的事件处理函数。
$('button').on('click',function(){
     $('.test').append('<p>新增内容'+ ($('p').length+1) +'</p>')
      console.log($('p').length)

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

$(document).ready(function(){
    $('.show').on('click',function(){
        $('.hide').show();
    })
    $('.hide').on('click',function(){
        $('.hide').hide();
    });
})

6.jquery 动画如何使用?

  • 语法:$(selector).animate({params},speed,callback);
<!DOCTYPE html>
<html>
<head>
    <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <style>
        #ct {
            border: 1px solid black;
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="ct">animate</div>
    <button type="button">动画</button>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script>
        $('button').on('click', function a() {
            $('#ct').animate({
                left: '300px',
            }, 3000);
            $('#ct').animate({
                top: '300px',
                left: '0'
            }, 'slow');
            $('#ct').animate({
                left: '300'
            }, 'slow');
            $('#ct').animate({
                left: '0',
                top: '0'
            }, 'slow');
        });
    </script>
</body>
</html>

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

  • $(‘selector’).html():获取元素内部HTML。
  • $(‘selector’).html(‘…’):设置元素内部HTML。
  • $(‘selector’).text():获取元素内部文本。
  • $(‘selector’).text(‘…’):设置元素内部文本。

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

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

相关文章

网友评论

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

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