jQuery选择器、Dom操作、样式、事件处理
2017-04-19 本文已影响29人
饥人谷_米弥轮
1.说说库和框架的区别？
- 库相当于工具箱，里面有各种已经做好的工具，当你需要的时候，就可以直接使用
- 框架就相当于一栋刚建好的房子，房子里面的空间已经给你规定好规则做什么用，你只能按照这个规则去填充使用这个空间
- 框架和类库最重要的区别是控制权的反转。框架就像一个模具，它需要你把原材料放在模具里面，然后成品就出来了，由于模具已经造好，所以原材料不能乱加，人家要什么你就给什么，控制权在模具。但是类库就不一样了，控制权在你手中，想实现什么功能就实现什么功能，类库只是帮你封装好了大量实用的函数，帮助你实现自己的目的，你要做的只是根据自己的需要合适地调用这些函数。
2. jquery 能做什么？
- 将原生DOM元素的功能实现并且满足良好的兼容性，最重要的是，可以简化代码。
- jquery是一个丰富的js库，内部对js的很多复杂的方法进行了封装和加工，比如js很多方法名很冗长，jquery封装后方法就变得简便了，也考虑到了跨浏览器兼容问题，这样我们用js时需要考虑的很多问题它都帮我们解决了，这样我们使用时就比js代码要方便，高效的多。
3.jquery 对象和 DOM 原生对象有什么区别？如何转化？
- jquery 对象和 DOM 原生对象的区别在于：
- jquery对象是一个类数组对象只能使用jquery对象方法，而DOM原生对象则是Object，可以使用原生Js方法和属性
- DOM原生对象转jquery对象：
- dom = document.querySelector('div');
- $dom = $(dom);
- jquery对象转DOM原生：
- dom = $dom[0]
4.jquery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
-
bind()向匹配元素添加一个或多个事件处理器
-
unbind()向匹配元素移除一个或多个事件处理器
-
delegate() 为指定的元素（被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
-
live() 向当前或未来的匹配元素添加一个或多个事件处理器
-
on() 为指定的元素,添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）
-
off() 为指定的元素,移除一个或多个事件处理程序
浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式 -
推荐使用on()、off()方法因为这两个方法更高效、简洁、灵活。如果项目中引用jquery版本为低版本，推荐用delegate(),高版本jquery可以使用on()来代替
on代理事件写法： <ul class="ct"> <li>a-1</li> <li>a-2</li> <li>a-3</li> <li>b-1</li> <li>b-2</li> </ul> <script type="text/javascript"> $('.ct').on('click','li',function(){alert('1')}) </script>
5.jquery 如何展示/隐藏元素？
$(selector).hide() //隐藏元素
$(selector).show() //展示元素
6.jquery 动画如何使用？
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});
7.如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
$(selector).html() //获取元素内部HTML内容
$(selector).html('<span></span>') //设置元素内部HTML内容
$(selector).text() //获取元素内部内容文本
$(selector).text('jquery选择器') //设置元素内部内容文本
8.如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
$(selector).val() //获取表单内容
$(selector).val('jquery') //设置表单内容
$(selector).attr() //获取元素属性
$(selector).attr('data-username','jquery') //设置元素属性
