题目1: jQuery 能做什么?
JQuery 是个JS库,一些效果JS要用繁重的代码才能实现,但可以通过jQ一些封装好的方法方便快捷,简单明确的就能实现。jQ缺点是,代码是很多是意大利面条式,修改困难。
- 选择网页元素
- 改变结果集
- 元素的操作:取值和赋值
- 元素的操作:移动
- 元素的操作:复制、删除和创建
- 工具方法
- 事件操作
- 特殊效果
- AJAX
jQuery 对象和 DOM 原生对象有什么区别?如何转化?
- 区别:
- jQuery对象和DOM原生对象是两种不同的对象类型,两者不等价。
- 方法不一样,jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法。
- 转化:
- DOM原生对象转化为jQuery对象:
$(document.querySelector('.div1')) - jQuery对象转化为DOM原生对象:
$('.div1>li')[index]
- DOM原生对象转化为jQuery对象:
jQuery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?
在1.7之前的版本中jQuery处理事件有多个方法, (google 搜索: jquery live bind degelate)作用各不相同,后来统一的使用on/off方法:
.on( events [,selector ] [,data ], handler(eventObject) )
各参数意义:
- events:一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click", "keydown.myPlugin", 或者 ".myPlugin"
- selector:一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器,那么被选中的元素总是能触发事件
- data:当一个事件被触发时,要传递给事件处理函数的event.data
- handler(eventObject):事件被触发时,执行的函数。若该函数只是要执行return false的话,那么该参数位置可以直接简写成 false
- bind/unbind:为一个元素绑定/接触绑定一个事件处理程序。jq1.7版本前的绑定和解绑写法。
- delegate:为指定的元素(属于被选元素的子元素)添加一个或
多个事件处理程序,并规定当这些事件发生时运行的函数 - live:这种方法是将页面的document元素作为事件代理元素,太消耗资源,已经过时。在新版本中推荐用.on()法,即时在旧版本中,也推荐使用.delegate()方法来取代.live()方法。
- on:在选定的元素上绑定一个或多个事件处理函数,提供绑定事件处理的所有功能
- off:用来移除on绑定的事件处理函数。
jQuery 如何展示/隐藏元素?
方法 | 效果 |
---|---|
.hide | 用于隐藏元素,没有参数的时候等同于直接设置display属性 |
.show | 用于显示元素,用法和hide类似 |
.toggle | 用来切换元素的隐藏、显示,类似于toggleClass,用法和show、hide类似 |
jQuery 动画如何使用?
http://js.jirengu.com/zimuyamuwe/1/edit
自定义动画http://js.jirengu.com/saweyesesa/1/edit
如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?
$(selector).html(); //没有值时则是获取
$(selector).html('xxx'); // 设置
$(selector).text(); //没有值时则是获取内部文本
$(selector).text('xxx');//设置
如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?
$('input').val(); // 获取
$('input').val('想要设置的内容')
$(selector).attr('id'); // 获取元素属性
$(selector).attr('id', '设置的元素属性值');
题目8: 使用 jQuery实现如下效果
http://js.jirengu.com/wifuzejife/2/edit
题目9:. 使用 jQuery 实现如下效果
http://js.jirengu.com/pucowuyemi/6/edit
题目10:实现如下效果
http://js.jirengu.com/tininusovo/1/edit