十四：jquery
2017-12-07 本文已影响0人
饥人谷_一叶之秋
题目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) //设置属性
