jQuery
2017-12-28 本文已影响0人
1w1ng
jQuery 能做什么？
jQuery将JavaScript的代码进行了封装，处理了兼容性问题，提供API进行调用，可以完成以下工作：
- 选择网页元素
- dom操作
- 事件操作
- 元素样式操作
- 特殊效果
- AJAX
jQuery 对象和 DOM 原生对象有什么区别？如何转化？
区别：
- DOM原生对象就是原生JS获得的对象
- jQuery对象是DOM原生对象经过包装之后，拥有jQuery的属性和方法，是类数组对象。
转化：
- jQuery对象转化成DOM对象，可以通过[index]的方法
var $node = $("#node"); // jQuery对象
var node = $node[0]; // DOM对象
- DOM对象转化成jQuery对象
var node = document.getElementById("id"); //DOM对象
var $node = $(node); //jQuery对象
jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？
-
bind()向匹配元素附加一个或多个事件处理器 -
unbind()从匹配元素移除一个被添加的事件处理器 -
delegate()向匹配元素的当前或未来的子元素附加一个或多个事件处理器 -
live()附加一个事件处理器到匹配目前选择器的所有元素，现在和未来。
以上几种方法是jQuery1.7以前的方法，现在推荐使用on()和off()来绑定/解除事件。
-
on()在选定的元素上绑定一个或多个事件处理函数。 -
off()移除一个事件处理函数
//普通的绑定事件，最简单的事件用法
$('div').on('click', function(e){
console.log(this);
console.log(e);
});
//事件代理，想让div下面所有的span绑定事件，可以把事件绑定到div上
$('div').on('click', 'span', function(e){
console.log(this);
console.log(e);
});
//在绑定事件的时候给事件传递一些参数
$('div').on('click', {name: 'wing', age: 20}, function(e){
console.log(e.data);
});
jQuery 如何展示/隐藏元素？
- 使用
hide()和show()方法来隐藏和显示HTML元素。
使用hide()和show()方法
- 使用
toggle()方法来切换hide()和show()方法
使用toggle()方法
jQuery 动画如何使用？
基础方法：
.hide([duration ] [,easing ] [,complete ])隐藏元素
.show( [duration ] [, easing ] [, complete ] )显示元素
.toggle( [duration ] [, easing ] [, complete ] )切换元素的显示、隐藏
- duration：表示动画持续多久
- easing：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
- complete：在动画完成时执行的函数
渐变：
.fadeIn( [duration ] [, easing ] [, complete ] )通过淡入的方式显示
.fadeOut( [duration ] [, easing ] [, complete ] )通过淡出的方式隐藏
.fadeTo( duration, opacity [, easing ] [, complete ] )调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果
.fadeToggle( [duration ] [, easing ] [, complete ] )通过匹配的元素的不透明度动画，来显示或隐藏它们，方法执行匹配元素的不透明度动画。
渐变
滑动：
.slideDown( [duration ] [, easing ] [, complete ] ) 用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去
.slideUp( [duration ] [, easing ] [, complete ] ) 用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去
.slideToggle( [duration ] [, easing ] [, complete ] ) 用滑动动画显示或隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。
滑动
自定义动画：
.animate( properties [, duration ] [, easing ] [, complete ] )
- properties是一个CSS属性和值的对象,动画将根据这组对象移动。
自定义动画
如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
html([string])
这是一个读写两用的方法，用于获取/修改元素的innerHTML
- 当没有传递参数的时候，返回元素的
innerHTML - 当传递了一个string参数的时候，修改元素的
innerHTML为参数值
$('body').html(); // 获取元素内部HTML内容
$('body').html('123') //设置元素内部HTML内容
text()
和html方法类似，操作的是DOM的innerText值
$('body').text(); // 获取元素内部
$('body').text('123') //设置元素内部
如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
.val([value])
这个方法用来处理input的value，当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值
获取设置表单用户输入或选择的内容：
$('input').val(); // 获取表单的内容
$('input').val('newValue'); // 设置表单的内容
设置和获取元素属性？
.attr()
获取元素特定属性的值
$('div').attr('id'); //获取 div 的 id 的属性
$('div').attr('id', 'newId'); //设置 div 的 id 属性为newId
.css()
这是个和attr非常相似的方法，用来处理元素的css
获取元素style特定property的值
$(this).css('background-color');
$(this).css({
"width",
"height",
"color",
"background-color"
});
设置元素style特定property的值
$(this).css('background-color', 'red');
$(this).css({
width: '100px',
height: '20px',
color: 'red'
});
还有其他方法操作css：
-
.addClass()为元素添加class，不是覆盖原class -
.removeClass()移除元素单个/多个/所有class -
.hasClass(className)检查元素是否包含某个class，返回true/false -
.toggleClass(className)toggle是切换的意思，方法用于切换
使用 jQuery实现如下效果
代码预览地址：
