题目1: jQuery 能做什么?
- 选择网页元素
- 改变结果集
- 元素的操作:取值和赋值,移动,复制,删除和创建
- 工具方法
- 事件操作
- 特殊效果
- AJAX
题目2: jQuery 对象和 DOM 原生对象有什么区别?如何转化?
- 区别:
- jQuery选择器得到的jQuery对象和标准的JavaScript中document.getElementByld()取的的dom对象是两种不同的对象类型,两者不等价;
- jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法、乱使用会报错。
- 转换:
- jQuery对象转是一个数据对象,通过[index]的方法
var $v = $("#v"); //jQuery对象
var v = $v[0]; //dom对象
alert(v.checked) // 检测这个checkbox是否被选中
2.jQuery本身提供,通过。get(index)方法
var $v = $("#v"); //jQuery对象
var v = $v.get(0); //dom对象
alert(v.checked) //检测这个checkbox是否被选中
DOM对象转成jQuery对象
对于DOM对象只需要用$()把DOM对象包装起来,就可以得到jQuery对象
var v = document.getElementByid('v'); //DOM对象
var $v = $(v); //jQuery对象
题目3:jQuery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?
- bind()是最直接的绑定方法,会绑定事件类型和处理函数到DOM element上。这个方法是存在最久的,而且也很好的解决了浏览器在事件处理中的兼容问题。.click(), .hover()...这些非常方便的事件绑定,都是bind的一种简化处理方式对于利用ID选出来的元素是非常好的,不仅仅是很快的可以hook上去(因为一个页面只有一个id),而且当事件发生时,handler可以立即被执行(相对于后面的live, delegate)实现方式,但是它会绑定事件到所有的选出来的元素上,它不会绑定到在它执行完后动态添加的那些元素上,当元素很多时,会出现效率问题。
- .live()方法用到了事件委托的概念来处理事件的绑定。它和用.bind()来绑定事件是一样的。.live()方法会绑定相应的事件到你所选择的元素的根元素上,即是document元素上。那么所有通过冒泡上来的事件都可以用这个相同的handler来处理了。它的处理机制是这样的,一旦事件冒泡到document上,jQuery将会查找selector/event metadata,然后决定那个handler应该被调用。
- .delegate()有点像.live(),不同于.live()的地方在于,它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation.
- .bind(), .live(), .delegate()都是通过.on()来实现的,.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的
- 推荐使用on和off
- on绑定事件使用事件代理的写法
$('.box li').on('click', function(){
var str = $(this).text()
})
题目4:jQuery 如何展示/隐藏元素?
- 展示:
$(selector).show(speed,callback);
可选的参数speed:规定元素从隐藏到完全可见的速度,默认为0.
可选的参数callback:show函数执行完之后,要执行的函数。
本质上show方法是修改元素的display为block
- 隐藏
$(selector).hide(speed,callback);
参数同上,本质上hide方法是修改元素display为none。
题目5: jQuery 动画如何使用?
$(selector).animane({parement},speed,callback);
aninmate()
方法用于创建自定义动画
params
(必选)定义形成动画的CSS属性
speed
(可选)规定效果的时长。值:slow,fast或秒。
callback
(可选)动画完成后所执行的函数
.delay()
设置一个定时器,以延迟执行队列中后续的项目。
.clearQueue()
从列队中删除所有还没有运行过的项目。
.stop
在匹配的元素上停止当前正在运行的动画。
.finish()
针对匹配的元素停止当前正在运行的动画,删除所有的队列中的动画,并结束所有动画。
题目6:如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?
-
$(selector).html()
设置HTML内容 -
$(selector).text()
设置文本内容
题目7:如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?
- val();获取表单输入框的值,有值的话就是设置
$('input').val()//获取值
$('input').val('11') //设置值
- attr();获取属性,有值的话就是设置
$('img').attr('src')//获取属性
$('img').attr('src',newSrc) //设置属性