浅谈JQuery-DOM-事件

一、说说库和框架的区别？

• <strong>库</strong>的概念和意义是用来提供一些方法的集合，避免定义重复功能的函数并具有一定的模式兼容性。类似于一个工具箱，里面有很多的工具，比如jQuery，就封装了很多js代码，让你使用起来更加方便快捷。
• <strong>框架</strong>更应该是规范开发者按照框架的设计去做一些事情，并非简单的工具集的概念，框架可以提供相应的库或者基于库来实现，但是库一般不具备框架的规范性。

二、JQuery 能做什么？

• 取得文档中的元素。
  $('div.content').find('p');
• 修改页面的外观，而且，即使在页面已经呈现之后，jQuery仍然能够改 变文档中某个部分的类或者个别的样式属性。
  $('ul > li:first').addClass('active');
• 改变文档的内容。可以改变文本、插入或翻转图像、列表重新排序，甚至对 HTML文档的整个结构都能重写和扩充
  $('#container').append('<a href="more.html">more</a>');
• 响应用户的交互操作。jQuery提供了截获形形色色的页面事件（比如用户单击某个链接） 的适当方式，而不需要使用事件处理程序拆散HTML代码。
  $('button.show-details').click(function() {
  $('div.details').show();
  });
• 为页面添加动态效果。
  $('div.details').slideDown();
• 简化常见的JavaScript任务。改进了对基本的JavaScript数据结构的操作（例如迭代和数组操作等）。
  $.each(obj, function(key, value) { total += value;});

三、jQuery 对象和 DOM 原生对象有什么区别？如何转化？

• jquery对象返回的是类数组对象,而且jquery对象只能用他自己的方法。

• DOM原生对象只可以用ES中的方法和属性,不能用jquery中的方法。
  <b>如何转换：</b>
  //转换成DOM原生对象,因为是类数组对象，直接访问下标即可
  var ct=$('#ct').children();
  var p1=$('#ct').children()[0];
  $(p1);//转换成Jq对象

  
  Paste_Image.png

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

• <b>bind()</b>可以为被选元素绑定一个或者多个监听事件，因为是直接绑定在被选元素上，所以没有事件代理功能，会使事件监听程序积累很多。
  $(".btn").bind("click",function(){
  $("p").slideToggle();
  });
• <b>unbind()</b>取消被选元素的事件监听程序
  $(.btn").click(function(){
  $("p").unbind();
  });
• <b>delegate()</b>方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
  $('#container').delegate('a', 'click', function() {
  alert("1") ；
  });
• <b>on()</b>方法在被选元素及子元素上添加一个或多个事件处理程序。
  自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。
  $('#ct li a').on('click',function(){
  alert("1");
  });//被选元素
  $('#ct').on('click','li a',function(){
  }//子元素
  提示：如需移除事件处理程序，请使用off()方法。
  $("button").click(function(){
  $("p").off("click");
  });
  提示：如需添加只运行一次的事件然后移除，请使用one() 方法。
  $("p").one("click",function(){
  $(this).animate({fontSize:"+=6px"});
  });

五、jquery 如何展示/隐藏元素？

    $(.hide).on('click',function(){ 
      $("p").hide(); //隐藏
    })
    $(.hide).on('click',function(){ 
      $("p").show(); //显示
    })
    $(.hide).on('click',function(){ 
      $("p").toggle(); //显示的隐藏，隐藏的显示
    })

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

• 获取HTML内容：
  $(".wrap").html()
• 设置HTML内容：
• 获取文本内容：
  $(".wrap").text( );
• 设置文本内容：
  $(".wrap").text("<div>1</div>");

实例：

    $(".wrap").html("<div>1</div>")
    $('.btn1').on('click',function(){        
      alert($('.ct').html());
    });
    $('.btn2').on('click',function(){ 
      var val=$('.input2').val(); 
      if(val){ 
        $('.ct').html(val); 
      }
    });
    $('.btn3').on('click',function(){
       alert($('.ct').text());
    });
    $('.btn4').on('click',function(){ 
      var val = $('.input3').val(); 
      if(val){ 
        $('.ct').text(val);
       } else{ 
      $('.input3').val('请输入内容！！'); 
      }
    });

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

• 获取内容：
  $(".selector").val();
• 获取属性值：
  $(".selector").attr("href");
• 设置属性值：
  $(".selector").attr("class","active");
  实例：
  <a href="http://www.baidu.com">百度</a>
  <input class="name" type="text" placeholder="输入你的名字" value=''>
  <button class="btn1">获取姓名</button>
  <button class="btn2">修改链接href属性</button>
  <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
  <script>
  $('.btn1').on('click',function(){
  alert('你输入的名字是：'+$('.name').val());
  })
  $('.btn2').on('click',function(){
  $('a').attr('href','http://www.google.com')
  })
  </script>