任务25-jquery DOM&事件
1. 说说库和框架的区别？
- 库（library）：我们可以简单的认为它就是一个工具箱，里面有可以直接拿来使用的方法和工具，以及可以调用的API。一些已经封装好了的函数可以实现特定的效果，只需要在使用的时候用少量的代码去调动，这里的控制权在于 你，你来决定怎样使用库。
- 框架（framework）：可以简单理解为搭好的模型架子，我们可以直接往里面添加内容或进行装饰。而框架对于开发者，开发者只需在这个框架中添加自己的东西而实现具体的功能。常见的框架有Angular, React，Vue等。
2. jquery 能做什么？
jQuery是一个兼容多浏览器的JavaScript库，核心理念是write less，do more，它的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax等。除此之外，jQuery还提供API让开发者编写插件。总之，使用jQuery能使开发者很轻松的开发出功能强大的静态或动态页面。
3. jquery 对象和 DOM 原生对象有什么区别？如何转化？
- 区别：
jQuery对象是通过jQuery包装DOM对象后产生的对象，只能使用jQuery里的方法，无法使用DOM对象的任何方法。同样，DOM原生对象也不能使用jQuery里的方法。 - 转化：
-
jQuery -> 原生：jQuery对象是一个类似数组的对象，可以使用[index]或者get(index)方法转换为DOM对象，如：
<pre>var $p1 = $('.p1'); //jQuery对象 var p1 = $p1[0];//DOM对象 var p1 = $p1.get(0);//DOM对象</pre>
-
jQuery -> 原生：jQuery对象是一个类似数组的对象，可以使用[index]或者get(index)方法转换为DOM对象，如：
-
原生 -> jQuery:用$()把DOM对象包起来，就可以转化成jQuery对象，如：
<pre>var p1 = document.getElementById('div1');//DOM对象 var $p1 = $(p1);//jQuery对象</pre>
4. jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
绑定事件：在一个元素上增加一个事件类型和要实现的事件。绑定事件的方法有.bind()、.live()、.delegate()和.on()。.unbind()、.die()、.undelegate()和.off()分别是上述对应的解除绑定的方法。
- bind:为一个元素绑定一个事件处理程序，在jQuery3.0版本中，已被标记为弃用。如：
<pre>$("#btn").bind("click",function(){ console.log($(this).text()); });</pre> - unbind:用来解除bind绑定的事件。同样在jQuery3.0版本中，标记为弃用。如：
<pre>$("#btn").unbind();</pre> - live:附加一个事件处理器到匹配目前选择器的所有元素，现在和未来。在新版本中推荐用.on()方法，即时在旧版本中，也推荐使用.delegate()方法来取代.live()方法。如：
<pre>$("#btn a").live("click",function(){ console.log($(this).text());//如果有新的a元素创建，也会触发该事件。 });</pre> - delegate():为所有匹配选择器（selector参数）的元素绑定一个处理器到一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素。在jQuery3.0中，delegate()也被标记为弃用。如：
<pre>$("#btn").delegate("click","a",function(){ console.log($(this).text());//事件冒泡到btn元素上，只有它的子元素a才会触发。 });</pre> - on:在选定的元素上绑定一个或多个事件处理函数。它提供绑定事件处理的所有功能。如：
<pre>$("#btn").on("click",function(){ console.log($"clicked"); });</pre> - off:移除
.on()绑定的事件处理函数。
<pre>$("#btn").off();</pre>
推荐使用on()：这个方法可以将以上各种事件绑定的方法都替代掉。
on绑定事件代理：
<pre>$("#btn").on("click","a",function(){ console.log($(this).text()); });</pre>
5. jquery 如何展示/隐藏元素？
- 展示：
语法：$(selector).show(speed,callback);
可选的参数speed：规定元素从隐藏到完全可见的速度，默认为0。
可选的参数callback：show函数执行完之后，要执行的函数。
本质上show方法是修改元素的display为block。
代码如：
<pre>$('#btn').on('click', function() { $('.div1').show(1000); // 表示以1s的速度显示div });</pre> - 隐藏：
语法：$(selector).hide(speed,callback);
选的参数speed：规定元素从隐藏到完全可见的速度，默认为0。
可选的参数callback：show函数执行完之后，要执行的函数。
本质上show方法是修改元素的display为none。
代码：
<pre>$('#btn').on('click', function() { $('.div1').hide(1000); // 表示以1s的速度隐藏div });</pre>
6. jquery 动画如何使用？
jQuery animate() 方法用于创建自定义动画。
语法：$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
如：
<pre>$("#btn").on("click",function(){ $(".div1").animate({ width:"100px",//宽度变为100px height:"100px",//高度变为100px left:"50px"//向左移动50px },5000)//持续5秒 animate(){ //加入多个动画 }; });</pre>
7. 如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
- 用html()方法可以设置和获取元素内部HTML内容。
<pre>console.log($("#test").html());//获取内部html console.log($("#test").html("<span>hello</span>"));//改变内部html</pre> - 用text()方法可以设置和获取元素内部文本内容。
<pre>console.log($("#test").text());//获取内部text console.log($("#test").text("改变text"));//改变内部text值</pre>
8. 如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
-
通过val()方法可以设置和获取表单用户输入或者选择的内容
<pre>console.log($('.text1').val()); //获得class为text1 console.log($('.text1').val('饥人谷'));//</pre> -
通过attr() 方法可以设置或返回元素的属性
<pre>console.log($('#img').attr('src')); // console.log($('#img').attr('data-src','./images/1.png'));//</pre>
本文版权归本人和饥人谷所有，转载请注明来源。
