浅谈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>

浅谈JQuery-DOM-事件

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

二、JQuery 能做什么？

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

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

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

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

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

推荐阅读更多精彩内容