jQuery

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 原生对象有什么区别？如何转化？

区别---两个对象完全不同

  1. jQuery选择器得到的jQuery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型，两者不等价。jQuery相当于在原生dom对象的外面又做了封装。
  2. 由于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)

  1. jQuery对象是一个数据对象，通过 [index] 的方法
var $dom = $("#id") ;  // jQuery对象
var dom = $dom [0];   // DOM对象
  1. 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;
})
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,362评论 5赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,330评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,247评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,560评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,580评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,569评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,929评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,587评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,840评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,366评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,945评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2赞 342

推荐阅读更多精彩内容