jQuery介绍及其DOM操作、事件

问答

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

  • 库是一些方法的集合,避免定义重复功能的函数并具有一定的模式兼容性。类似于一个工具箱,里面有很多的工具,比如jQuery,可以很方便的调用里面的方法和函数,实现一些功能。
  • 框架更应该是一种对开发者的规范,开发者按照框架的设计去实现以下功能或效果,并非简单的工具集的概念,框架可以提供相应的库或者基于库来实现,但是库一般不具备框架的规范性。比如bootstrap,提供了一种完整的规范和功能,我们在它的基础上进行调整。

2. jquery 能做什么?

  • jquery是一个轻量级的JS库,实现了各种方法的封装,既有良好的兼容性,方便简洁。
    1.选取DOM元素并进行操作,css样式操作
    2.表单的验证和ajax请求
    3.丰富多样的选择器 $(“[data-value=2]”)选择data-value为2的元素 ,$(“div#intro .head”)选取 id=”intro”的元素中的所有class=”head”的元素
    3.annimate动画,hide,fade,slide及toggle等各种效果,可以很简单的实现

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

  • 区别:DOM对象是使用元素的js方法获取的html元素对象,使用jQuery库中选择器的方法选取的对象是jQuery对象,jQuery对象可以使用jQuery的各种方法,DOM 对象只能使用Javascript 固有的方法。
  • 转化:使用$(selecter).action()的形式可以操作jQuery的方法,DOm对象前加$可以将DOM转化为jQuery;$()获取的是一个满足条件的所有元素的类数组,因此jQuery使用[index] 和 .get(index)方法可以转化为DOm。
    1
    2
    3
    4
    5
    6
    var $ct = $(".ct"); //jQuery 对象
    var ct = $ct [0]; //DOM 对象
    var ct = $ct.get(0); //DOM 对象
    var ct = $ct.eq(0);//获取jQuery对象
    var ct = document.querySelector('.ct')//DOM对象
    $(ct).addClass('.hover')//加$可直接用jQuery方法

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

1
2
3
$("div").on("click",function(){
//todo...
})
  • 一般使用on方法绑定一个事件。
  • 作用
    • bind为每个匹配元素的特定事件绑定事件处理函数。但只能针对已经存在的元素进行事件的设置,若是用js操作再添加同名新元素,不能自动绑定了
      • unbind:bind()的反向操作,从每一个匹配的元素中删除绑定的事件。
      • delegate为每个匹配元素的子元素绑定事件处理函数,类似事件代理
      • live附加一个事件处理器到匹配目前选择器的所有元素,现在和未来。监听器绑定到document上的,所以事件的处理得等待层层冒泡,直到冒泡到根节点才开始处理。jQuery1.7以后不再建议使用 .live() 方法。
      • on在选定的元素上绑定一个或多个事件处理函数,是上面三种方法的综合
      • offoff() 方法移除用.on()绑定的事件处理程序。
  • 推荐使用on方法
  • 使用on绑定事件。
    • .on( events [,selector ] [,data ], handler(eventObject) )
    • events:一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如”click”, “keydown.myPlugin”, 或者 “.myPlugin”
    • selector:一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器,那么被选中的元素总是能触发事件
    • data:当一个事件被触发时,要传递给事件处理函数的event.data
    • handler(eventObject):事件被触发时,执行的函数。若该函数只是要执行return false的话,那么该参数位置可以直接简写成 false
  • 事件代理的写法:
    1
    2
    3
    4
    $('div').on('click', 'span', function(e){
    console.log(this);
    console.log(e);
    });//当div 下面的任何一个span元素进行事件操作时,代理到div上

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

  • $(selector).show();//显示
  • $(selector).hide();//隐藏
  • $(selector).css(‘display’,’none’)和$(selector).css(‘display’,’block’)也可以

    6.jquery 动画如何使用?

  • $(selector).animate({params},speed,callback);
    必需的 params 参数定义形成动画的 CSS 属性。
    可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
    可选的 callback 参数是动画完成后所执行的函数名称。
  • 多个动画放在一起会按顺序执行,它们会形成一个动画序列,可使用。clearQueue()、.finish()和.stop(true, true)方法清除
    1
    2
    3
    4
    5
    6
    $("#btn16").on('click', function(){
    $div3.animate({
    width:'150px',
    height: '150px',
    }, 500);
    });

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

  • 使用$(‘selector’).html()获取HTML 内容,$(‘selector’).html(value)设置HTML内容。
  • 使用$(‘selector’).text()获取元素内部文本,$(‘selector’).text(value)设置文本内容。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    $('p').on('click',function(){
    console.log($(this).html());
    })//输出html
    $("p").on('click',function(){
    console.log($(this).text());
    })//输出text
    $('p').on('click',function(){
    $(this).html('设置的是<a>html</a>');
    })//设置html
    $('p').on('click',function(){
    $(this).text('设置的是<a>text</a>');//设置里面内容为文本内容
    })

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

  • 使用$(‘selector’).val()获取表单内容,$(‘selector’)..val(val)设置表单内容
  • 使用$(‘selector’).attr(attributeName)获取元素属性,$(‘selector’).attr(attributeName,value)设置元素属性,$(‘selector’).removeAttr(attributeName)移除属性;
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
     <input id="ipt" type="text">
    <button>获取表单内容</button>
    <button>设置表单内容</button>
    <button>获取表单属性</button>
    <button>设置表单属性为textarea</button>


    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
    $("button").eq(0).on('click',function(){
    console.log($("#ipt").val());
    })
    $("button").eq(1).on('click',function(){
    $("#ipt").val('设置表单内容');
    })
    $("button").eq(2).on('click',function(){
    console.log($("#ipt").attr('type'));
    })
    $("button").eq(3).on('click',function(){
    $("#ipt").attr("type","textarea");
    })
    </script>

代码

  • 1.gitlab库链接
  • 2.gitlab库链接
  • 问题: 点奢侈品2的时候页面跳到了顶部,可能是什么原因?如何解决
    • 是因为a链接的href=“#”表示跳转到当前页面,所以会跳到上面
    • 解决办法,将#改成javascript:void(0)或者在js中阻止a标签跳转的默认事件e.preventDefault()
    1. gitlab库链接
文章目录
  1. 1. 问答
    1. 1.1. 1.说说库和框架的区别?
    2. 1.2. 2. jquery 能做什么?
    3. 1.3. 3.jquery 对象和 DOM 原生对象有什么区别?如何转化?
    4. 1.4. 4.jquery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?
    5. 1.5. 5.jquery 如何展示/隐藏元素?
    6. 1.6. 6.jquery 动画如何使用?
    7. 1.7. 7.如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?
    8. 1.8. 8.如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?
  2. 2. 代码
,