1. jQuery 能做什么？
jQuery的核心功能主要有下列几个：
方便快捷获取DOM元素：
如果使用纯JavaScript的方式来遍历DOM以及查找DOM的某个部分编写很多冗余的代码，而使用jQuery只需要一行代码就足够了。例如，找到所有应用了.content class样式的div中所有的P标签，只需要下面的一行代码：
$('div.content').find('p');
动态修改页面样式:
使用jQuery我们可以动态的修改页面的CSS即使在页面呈现以后。jQuery仍然能够改变文档中某个部分的类或者个别的样式属性。例如，找到页面所有的ul标签的第一个li子标签，然后为它们增加名为active的样式，代码如下：
$('ul > li:first').addClass('active');
动态改变DOM内容:
jQuery提供了截获形形色色的页面事件（比如用户单击某个链接）的适当方式，而不需要使用事件处理程序拆散HTML代码。
$('button.show-details').click(function() {
$('div.details').show();
});
上面的代码表示：为使用的.show-details样式的button元素添加一个click事件，事件就是：显示使用.details样式的DIV。
简单的页面动画：
jQuery中内置的一批淡入、擦除之类的效果，以及制作新效果的工具包，为此提供了便利。
$('button.show-details').click(function() {
$('div.details').show('slow');
});
给show传一个参数，就可以形成渐现的效果。
对ajax进行了封装:
jQuery统一了多种浏览器的Ajax操作，使得开发人员更多的专注服务器端开发。
$.ajax({
method: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
})
简化常见的JavaScript任务:
除了这些完全针对文档的特性之外，jQuery也改进了对基本的JavaScript数据结构（例如迭代和数组操作等）:
$.each(obj, function(key, value) {
total += value;
});
2. jQuery 对象和 DOM 原生对象有什么区别？如何转化？
区别---两个对象完全不同
- jQuery选择器得到的jQuery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型，两者不等价。jQuery相当于在原生dom对象的外面又做了封装。
- 由于jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法。同理DOM也不可以使用jQuery的方法。
如何转化：
DOM对象转jQuery对象
对于DOM对象，只需用 $() 把DOM对象包装起来，就可得到jQuery对象
var dom =document.getElementById("id"); // DOM对象
var $dom = $(dom); // jQuery对象
jQuery对象转成DOM对象：
有两种方法 [index] 和 .get(index)
- jQuery对象是一个数据对象，通过 [index] 的方法
var $dom = $("#id") ; // jQuery对象
var dom = $dom [0]; // DOM对象
- jQuery提供方法，通过 .get(index) 方法
var $dom = $("#id"); // jQuery对象
var dom = $dom.get(0); // DOM对象
3.jQuery事件
3.1jQuery中如何绑定事件？
.bind()
$('#foo').bind('click', function() {
alert('User clicked on "foo."');
});
.delegate()
$("body").delegate("p", "click", function(){
$(this).after("<p>Another paragraph!</p>");
});
上述代码实现，点击添加另一个段落， .delegate() 绑定所有段落的click事件 - 甚至是新的段落。
.on()
$( "#dataTable tbody tr" ).on( "click", function() {
console.log( $( this ).text() );
});
3.2bind、unbind、delegate、live、on、off都有什么作用?
.bind()将会给所有匹配的元素都绑定一次事件，当元素很多时性能会变差。 而且后来动态新增的元素不会被绑定。
<div id='foo'></div>
<script>
$('#foo').bind('click',function(){
console.log('clicked!');
});
</script>
.unbind()用来解除事件绑定，如果unbind参数为空，则解绑匹配元素的所有事件处理函数
代码示例：
$('#foo').unbind('click');
.delegate()是另一种绑定事件的方式。它将事件处理函数绑定在指定的根元素上， 由于事件会冒泡，它用来处理指定的子元素上的事件。因为事件处理函数绑定在#root上，新加的子元素事件也会冒泡到#root。因为只绑定一个事件处理函数，绑定速度相当快，性能好于.bind()。
代码示例
<div id="root">
<a>Alice</a>
<a>Bob</a>
</div>
<script>
$('#root').delegate('a', 'click', function(){
console.log('clicked');
});
</script>
.live()这个方法提供了一种手段，将委托的事件处理程序附加到一个页面的document元素.由于所有的 .live() 事件被添加到 document 元素上，所以在事件被处理之前，可能会通过最长最慢的那条路径之后才能被触发，所以.delegate的性能会好于.live`。
代码示例：
$("a").live("click", function() { return false; });
on()作为jQuery事件的提供者。其他的事件绑定方法都是通过.on()来实现的，既然.on()是最通用的jQuery事件机制，那么上述的所有例子都可以用.on()来实现
// bind
$( "#foo" ).bind( "click", function( e ) {} );
$( "#foo" ).on( "click", function( e ) {} );
// delegate
$( "#root" ).delegate( "a", "click", function( e ) {} );
$( "#root" ).on( "click", "a", function( e ) {} );
.live()方法,它与delegate是类似的， 不过它强制指定了root是document（即this.context）,因而性能略差。 自jQuery1.7起已经不推荐使用了。
off()移除用.on()绑定的事件处理程序。它也与.on()相似是jQuery事件的提供者，其他是事件解除绑定方法都可以通过.off()来实现
//unbind，bind的对应移除方法
$('#container a').unbind('click');
$('#container a').unbind();//解除匹配元素的所有事件
//off
$('#container a').off('click');
$('#container a').off();
//die ,live的对应移除方法
$('#container a').die('click');
//off
$('#container').off('click', 'a');
//undelegate,delegate的对应移除方法
$('#container a').undelegate('a', 'click');
//off
$('#container a').off('click', 'a');
综上所述推荐使用.on()和off()这一对绑定和解除绑定方法
3.3使用on绑定事件使用事件代理
<ul id="wrap">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<script>
$(function(){
$('#wrap').on('click', 'li', function(ev) {
// this 指向委托的对象 li ,设置了li的背景颜色
$(this).css('background', '#D4DFE6');
});
});
</script>
4.jQuery 如何展示/隐藏元素？
使用show()和hide() 来控制元素的显示或者隐藏
语法
$(selector).hide( [duration ] [, complete ] );//参数可选填
$(selector).show( [duration ] [, complete ] )；//参数可选填
例子：
<button id="hide">hide</button>
<button id="show">show</button>
<div class="box"></div>
<script>
var $button_hide = $('#hide');
var $button_show = $('#show');
var $box = $('.box');
$button_hide.on('click',function(){
//$box.hide();
$box.hide(1000);//设置动画执行时间1秒
})
$button_show.on('click',function(){
$box.show(200);//设置动画执行时间200毫秒
})
</script>
</body>
使用toggle()切换显示/隐藏
语法
.toggle( [duration ] [, complete ] )//参数可选填
例子：
<body>
<button id="hide">toggle</button>
<div class="box"></div>
<script>
var $button_hide = $('#hide');
var $box = $('.box');
$button_hide.on('click',function(){
$box.toggle(500);
});
</script>
</body>
使用slideUp()和slideDown()来实现显示/隐藏
语法
.slideUp( [duration ] [, complete ] )//参数可选填
.slideDown( [duration ] [, complete ] )
例子：
<body>
<button id="hide">hide</button>
<button id="show">show</button>
<div class="box"></div>
<script>
var $button_hide = $('#hide');
var $button_show = $('#show');
var $box = $('.box');
$button_hide.on('click',function(){
$box.slideUp(500);
})
$button_show.on('click',function(){
$box.slideDown(200);
})
</script>
</body>
使用fadeIn()和fadeOut()来实现显示/隐藏
语法
.fadeIn( [duration ] [, complete ] )//参数可选填
.fadeOut( [duration ] [, complete ] )
例子：
<body>
<button id="hide">hide</button>
<button id="show">show</button>
<div class="box"></div>
<script>
var $button_hide = $('#hide');
var $button_show = $('#show');
var $box = $('.box');
$button_hide.on('click',function(){
$box.fadeOut();
})
$button_show.on('click',function(){
$box.fadeIn();
})
</script>
</body>
5. jQuery 动画的使用
.animate()可以帮助我们实现一些稍微辅助的连续动画，使用简单，效果拔群，还可以在动画结束后加入回掉函数。
//语法1
.animate( properties [, duration ] [, easing ] [, complete ] )
//语法2
.animate( properties, options )
最简单的实例：
$("#btn1").click(function(){
$("#box").animate({height:"300px"});
});
给 id="box" 的元素定义了一个动画，速度等其他参数默认，样式是 height 变成 300px
效果演示
全参数版本
$(document).ready(function()
{
$(".btn1").click(function(){
$("#box").animate({height:"300px"},3500,"linear",function(){
alert("执行完毕！");
});
});
$(".btn2").click(function(){
$("#box").animate({height:"100px"});
});
});
使得动画在结束后，弹出“执行完毕”
效果展示
多个属性一起改变
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
注意：这些属性和css属性几乎一样，但是并不是css属性，所以书写时要特别注意。
例如：必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，有“-” 的转成驼峰
效果展示
那如果要改变的只是一个增加值怎么处理呢：
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
});
不常用但是有意思的用法：
$("button").click(function(){
$("div").animate({
height:'toggle' //可以使用： "show"、"hide" 或 "toggle"</span>
});
});
实现连续的动画效果
前面演示了一次动画执行，那么下面实现多次动画的队列执行。
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
实现效果
jquery是支持链式调用的，所以代码可以简化成下面这样
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow")
.animate({width:'300px',opacity:'0.8'},"slow")
.animate({height:'100px',opacity:'0.4'},"slow")
.animate({width:'100px',opacity:'0.8'},"slow");
});
});
再发散一下，可以把需要动画的css属性放在一个数组中，然后遍历数组。这样是不是也可以实现同样效果。
$(document).ready(function(){
$("button").click(function(){
var $div=$("div");
var arr = [
{height:'300px',opacity:'0.4'},
{width:'300px',opacity:'0.8'},
{height:'100px',opacity:'0.4'},
{width:'100px',opacity:'0.8'},
];
arr.forEach(function(action){
$div.animate(action);
});
});
});
6.如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？
设置和获取元素内部 HTML 内容
html([string])
这是一个读写两用的方法，用于获取/修改元素的innerHTML
当没有传递参数的时候，返回元素的innerHTML
当传递了一个string参数的时候，修改元素的innerHTML为参数值
看个例子
//读取
$('div').html()
//写入
$('div').html('123')
设置和获取元素内部文本
text([string])
和html方法类似，操作的是DOM的innerText值
当没有传递参数的时候，返回元素的innerText
当传递了一个string参数的时候，修改元素的innerText为参数值
例子：
//读取
$('div').text()
//写入
$('div').text('123')
7.如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？
设置和获取表单用户输入或者选择的内容
.val([value])
这是一个读写双用的方法，用来处理input的value，当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值
例子：
//读取
$('input').val()
//写入
$('input').val('newValue');
获取元素属性
.attr(attributeName)
获取元素特定属性的值
例子：
var title = $( "em" ).attr( "title" );
设置元素属性
.attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) )
例子：
$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );
$( "#greatphoto" ).attr({
alt: "Beijing Brush Seller",
title: "photo by Kelly Clark"
});
$("div").attr("id", function (arr) {
return "div-id" + arr;
})
网友评论