jquery DOM&事件

问答

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

• 库的的概念和意义是用来提供一些方法的集合，避免重复定义相同功能的函数，并有一定的模式兼容性。

• 而所谓框架，更应该是按照开发者按照框架的设计去做一些事，而非简单的工具集的概念，框架可以提供相应的库或者基于库来实现，但库一般不会具备框架的规范性。

• 他们都是对原生代码的封装，一个注重整体，一个注重细节，框架帮助你解决“代码如何组织”的问题，类库帮助你解决“如何把代码写得更少/巧/强壮”的问题；它们解决的是不同层面的问题。

2.jquery 能做什么？

• jQuery是一个兼容多浏览器的JavaScript库，它封装了很多方法，可以让使用者代码写的更少，更轻松。
• 它的功能有HTML文档操作、事件处理、动画设计和Ajax交互。

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

Jquery 对象是 DOM 原生对象包装后形成的。他们都有自己特定的方法，不能相互使用。

转化：

• jQuery对象转成DOM对象

      var $div = $('#div');//jquery对象
      var div = $div[0];//[index]方式转为DOM对象

• DOM对象转成jQuery对象

      var div = document.getElementById('div');//DOM对象
      var $div = $(div);//用$()转化

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

• bind:为一个元素绑定一个事件处理程序。在jQuery 3.0中，.bind()已被标记为弃用。

 $('#foo').bind('click', function() {
    alert('User clicked on "foo."');
  });

• unbind:用.bind()方法绑定的事件处理程序可以使用.unbind()移除。在jQuery 3.0中，.unbind()已被标记为弃用。

$('#foo').unbind();

• delegate:事件代理,在jQuery 3.0中，.delegate()已被标记为弃用。

$("body").delegate("p", "click", function() {
    $(this).toggleClass("chosen");
  });

• live:该事件会在事件冒泡中传递给其所有的祖辈元素，一直传递到document
  对象为止。从jQuery 1.7开始，该函数被标记为已过时；从jQuery 1.9开始被移除。

$("#btn a").live("click",function(){ 
    console.log('1');//如果有新的a元素创建，也会触发该事件。
});

• on：提供绑定事件处理的所有功能。

$( "#div" ).on( "click",function() {
    console.log('1');
});

on()方法可以将以上各种事件绑定的方法都替代掉。

• off:移除.on()绑定的事件处理函数。

$("p").off() //除所有段落上的事件：

• on()绑定事件代理：

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

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

• 展示元素：
  .show(duration,complete)
  duration (默认: 400) 一个字符串或者数字决定动画将运行多久。
  complete 在动画完成时执行的函数。

$('#btn').on('click',function(){
        $('#div').show(800);
      })

• 隐藏元素：
  .hide(duration,complete)

$('#btn').on('click',function(){
        $('#div').hide(800);
      })

demo预览

6.jquery 动画如何使用？

.animate()根据一组 CSS 属性，执行自定义动画。
语法:.animate( properties , duration , easing , complete )
properties 参数定义形成动画的 CSS 属性。
duration (默认: 400)一个字符串或者数字决定动画将运行多久。("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如：1000)
easing (默认: swing)一个字符串，表示过渡使用哪种缓动函数。
complete 在动画完成时执行的函数。
如：

$('#btn').on('click',function(){
       $('#div').animate({
         opacity:0.5,
         left:'50px',
         height:100px;
       },5000)
     })

demo预览

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

• 获取和设置元素内部HTML内容

$('#ct').html() //获取元素内部HTML内容
$('#ct').html('<div>设置ct内的HTML内容</div>') //设置元素内部HTML内容

• 获取和设置元素内部文本

$('#ct').text()//获取元素内部文本
$('#ct').text('设置ct') //设置元素内部文本

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

• 获取和设置表单用户输入或者选择的内容

$('.input').val() //获取表单用户输入或者选择的内容
$('.input').val('设置表单内容') //设置表单用户输入或者选择的内容

• 获取和设置元素属性

 $('#img').attr('scr') //获取元素属性
$('#img').attr('scr','./images/1.png') //设置元素属性

代码

task25-1：效果预览
task25-2：效果预览 a href="#"会跳转到本页面顶部，一般建议写成javascript:void(0);点了没有反应，写#点了会跳一下。
task25-3：效果预览