jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。
jQuery 能做什么?
1、选取页面元素;
2、ajax
3、实现动画
4、jsonp
5、事件的操作
6、改变结果集
7、元素的操作
8、CSS的操作
9、DOM的遍历和修改
jQuery 对象和 DOM 原生对象有什么区别?如何转化?
jquery对象是通过jQuery去获取的对象,jQuery对象只能使用jQuery对象的方法和属性;
DOM对象是通过原生js去获取的对象,DOM对象只能使用DOM对象的方法和属性;
DOM对象转化成jQuery对象: $(dom)
jQuery对象转化成DOM对象: $('selector')[index]
jQuery中如何绑定事件?bind、unbind、delegate、live、on、off都有什么作用?推荐使用哪种?使用on绑定事件使用事件代理的写法?
如何绑定事件:先获取jQuery对象,然后调用相关的API.
.bind() 为一个元素绑定一个事件处理程序
.unbind() 从元素上删除以前附加的一个事件处理程序
.delegate() 为所有匹配选择器(selector参数)的元素绑定一个或多个事件处理函数,基于一个指定的根元素的子集,匹配的元素包括那些目前已经匹配到的元素,也包括那些今后可能匹配到的元素。
.live() 附加一个事件处理器到匹配目前选择器的所有元素,现在和未来。
.on() 在选定的元素上绑定一个或者多个事件;
.off() 移除一个事件处理函数
推荐使用.on() 和 .off() 这两个API
使用on绑定事件代理的写法:
$('ul').on('click','li',function() { //事件代理,把事件委托在ul上,监听 li
console.log(this);
}
jQuery 如何展示/隐藏元素?
jQuery展示元素 :通过调用.show()
jQuery隐藏元素: 通过调用.hide()
jQuery 动画如何使用?
调用.animate() 的方法
如何设置和获取元素内部 HTML 内容?如何设置和获取元素内部文本?
1. 设置元素内部的HTML内容: $('selector').html('HTML')
2. 获取元素内部的HTML内容:$('selector').html()
3. 设置元素内部文本: $('selector').text("content");
4. 获取元素内部文本: $('selector').text();
如何设置和获取表单用户输入或者选择的内容?如何设置和获取元素属性?
1. 设置表单用户输入或选择的内容: $('selector').val("Text")
2. 获取表单输入或者选择的内容: $('selector').val()
3. 设置元素的属性: $('selector').attr('property':'value')
4. 获取元素的属性: $('selector').attr('property')
使用 jQuery实现如下效果
. 使用 jQuery 实现如下效果
实现如下效果
左右切换的 Tab 效果