你必须知道的JQuery

作者: zh_yang | 来源:发表于2017-09-16 23:25 被阅读0次

1、 jQuery 能做什么？

jquery是一个丰富的js库，内部对js的很多复杂的方法进行了封装和加工，比如js很多方法名很冗长，jquery封装后方法就变得简便了，也考虑到了跨浏览器兼容问题，这样我们用js时需要考虑的很多问题它都帮我们解决了，这样我们使用时就比js代码要方便，高效的多。

JQuery对js的优化包括：
选择网页元素
改变结果集
元素的操作：取值和赋值
元素的操作：移动
元素的操作：复制、删除和创建
工具方法
事件操作
特殊效果
AJAX
English：http://devdocs.io/jquery/
　　　：https://api.jquery.com/
中文：http://www.jquery123.com/

方便快捷获取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我们可以很容易地对页面DOM进行修改，例如，为ID为"container"的元素添加一个链接：

$('#container').append('<a href="more.html">more</a>');

响应用户的交互操作
　　jQuery提供了截获形形色色的页面事件（比如用户单击某个链接）的适当方式，而不需要使用事件处理程序拆散HTML代码。此外，它的事件处理API也消除了经常困扰Web开发人员浏览器的不一致性。

$('button.show-details').click(function() {
  $('div.details').show();
});

上面的代码表示：为使用的.show-details样式的button元素添加一个click事件，事件就是：显示使用.details样式的DIV。

为页面添加动态效果
　　jQuery中内置的一批淡入、擦除之类的效果，以及制作新效果的工具包，为此提供了便利。

$(function () {
  $("#btnShow").click(function () {
    $("#msubject").hide("slow");
  });
});

.统一Ajax操作
　　jQuery统一了多种浏览器的Ajax操作，使得开发人员更多的专注服务器端开发。

function (data, type) {
    // 对Ajax返回的原始数据进行预处理
    return data  // 返回处理后的数据
}

7.简化常见的JavaScript任务。
　　除了这些完全针对文档的特性之外，jQuery也改进了对基本的JavaScript数据结构（例如迭代和数组操作等）。

$.each(obj, function(key, value) {
  total += value;
});

2、 jQuery 对象和 DOM 原生对象有什么区别？如何转化？

区别：

DOM原生对象：
是对象；
拥有原生对象的属性和方法；
JQuery对象：
是DOM元原生对象经过包装之后，拥有jQuery的属性和方法（对原生DOM对象的封装）；
是类数组；

转化方法：

JQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。如：

var $a =$("#a") ; //jQuery对象
var a=$a[0]; //DOM对象

反之，用$()方法把原生对象转化为JQuery对象，如：

* var a=document.getElementById("a"); //DOM对象
var $a=$(a); //jQuery对象

3、jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？

JQuery事件是DOM事件的封装，同时支持自定义的扩展。在程序设计中，事件和代理有着相似的作用：它们提供了一种机制，使得行为的实现方式和调用时机可以分离。
不谈jQuery，DOM本身就提供了一系列的javascript事件，例如click，keyup，submit。
为实现相关业务逻辑，通常会为这些事件定义一系列的处理函数，处理函数定义了业务的实现方式，而浏览器知道这些业务的调用时机。 Javascript事件就是这样一种机制，使得行为的实现方式和调用时机可以动态地绑定。
jQuery事件是通过封装javascript事件来实现的，例如.keyup()便onkeyup
的封装。
除了封装大多数的javascript事件，jQuery提供了统一的事件绑定和触发机制：

绑定事件：bind、on、live、delegate、keyup(<function>)；

触发事件：trigger('keyup')、keyup()；

解绑事件：unbind、off、die、undelegate。

JQuery中如何绑定事件

bind

$(selector).bind(event,data,function)参数含义
event:事件类型，如click、change、mouseover等;
data:传入监听函数的参数，通过event.data取到。可选;
function:监听函数，可传入event对象，这里的event是jQuery封装的event对象，与原生的event对象有区别，使用时需要注意。

用法一：基本用法：$(selector).bind(event,function)

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").bind("click",function(){
    $("p").slideToggle();
  });
});
</script>
<p>This is a paragraph.</p>
<button>请点击这里</button>

916-01.gif

这种基本用法可以简化为：$(selector).event(function)

.click(<function>)
//等效于.bind('click', <function>)。

用法二：data用法：$(selector).bind(event,data,function)

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").bind("click","hello",function(e){
    $("p").slideToggle().html(e.data);
  });
});
</script>
<p>This is a paragraph.</p>
<button>请点击这里</button>

916-02.gif

用法三：绑定多个类型事件：$(selector).bind({event:function, event:function, ...})

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").bind({
    click:function(){$("p").slideToggle();},
    mouseover:function(){$("body").css("background-color","red");},  
    mouseout:function(){$("body").css("background-color","#FFFFFF");}  
  });
});
</script>
<p>This is a paragraph.</p>
<button>请点击这里</button>

916-03.gif

delegate
可以用来实现事件代理；它将事件处理函数绑定在指定的根元素上，由于事件会冒泡，它用来处理指定的子元素上的事件。

$(selector).delegate(childSelector,event,data,function)参数：
childSelector:必须。附加事件处理程序的一个或多个子元素。
event:必须。附加到元素的一个或多个事件。
data:可选。规定传递到函数的额外数据。
function:必需。当事件发生时运行的函数。

用法一：基本用法$(selector).delegate(childSelector,event,function)

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").delegate("button","click",function(){
    $("p").slideToggle();
  });
});
</script>
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>

916-04.gif
用法二：data用法$(selector).delegate(childSelector,event,data,function)

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").delegate("button","click","hello",function(e){
    $("p").slideToggle().text(e.data);
  });
});
</script>
</head>
<body>
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>

916-05.gif

用法三：向尚未创建的元素添加事件

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").delegate("p","click",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>这是一个新段落。</p>").insertAfter("button");
  });
});
</script>
<div style="background-color:yellow">
<p>这是一个段落。</p>
<p>请点击任意一个 p 元素，它会消失。包括本段落。</p>
<button>在本按钮后面插入一个新的 p 元素</button>
</div>
<p><b>
注释：</b>通过使用 delegate() 方法，而不是 live()，只有 div 元素中的 p 元素会受到影响。</p>

916-06.gif

<div id="root">
  <a>Alice</a>
  <a>Bob</a>
</div>
<script>
$('#root').delegate('a', 'click', function(){
    console.log('clicked');
});
</script>

它的使用方式比bind稍显复杂，但它的功能非常强大：
自动绑定动态添加的元素。因为事件处理函数绑定在#root上，新加的子元素事件也会冒泡到#root。
性能好于.bind()。只绑定一个事件处理函数，绑定速度相当快。

live

$(selector).live(event,data,function)参数含义
event:事件类型，如click、change、mouseover等;
data:传入监听函数的参数，通过event.data取到。可选;
function:监听函数，可传入event对象

用法一：基本用法$(selector).live(event,function)
　　　：data用法$(selector).live(event,data,function)

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").live("click","hello",function(e){
    $("p").slideToggle().html(e.data);
  });
});
</script>
<p>这是一个段落。</p>
<button>请点击这里</button>

916-07.gif

用法二：向尚未创建的元素添加事件

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").live("click",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").insertAfter("button");
  });
});
</script>
<p>这是一个段落。</p>
<p>点击任意 p 元素会令其消失。包括本段落。</p>
<button>在本按钮后面插入新的 p 元素</button>
<p><b>注释：</b>通过使用 live() 方法而不是 bind() 方法，新的 p 元素同样会在点击时消失。</p>

916-08.gif

$(selector).on( events ,selector ,data ,function )
events（必需）：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"
selector（可选）：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件
data（可选）：当一个事件被触发时，要传递给事件处理函数的event.data
function（必需）：事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false

用法一：基本用法$(selector).on( events ,function )
　　　：data用法$(selector).on( events ,data ,function )

<link href="//code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").on("click",["hello world"],function(e){
    $("p").toggle().text(e.data);
  });
});
</script>
<p>This is a paragraph.</p>
<button type="button">Click me</button>

916-09.gif
用法二：事件代理$(selector).on( events ,selector ,function )

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").on("click","p",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>This is a new paragraph.</p>").appendTo("div");
  });
});
</script>
  <div>
    <h3>这是个h3</h3>
    <p>这是一个段落。</p>
    <p>点击任意 p 元素会令其消失。包括本段落。</p>
  </div>
  <button>在div尾部插入新的 p 元素</button>
  <p><b>注释：</b>与使用 live() 方法、 bind() 方法相似，新的 p 元素同样会在点击时消失。</p>

916-10.gif

JQuery中如何解除绑定事件

unbind（解除unbind绑定的事件）

$(selector).unbind( )删除选中元素所有事件
$(selector).unbind(eventObj)规定要删除的事件对象。
$(selector).unbind(event,function)规定从指定事件上删除一个或多个事件处理程序。

用法一：删除某个事件$(selector).unbind(eventObj)

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").click(function(){
    $("p").slideToggle();
  });
  $("input").mouseenter(function(){
    $("body").css("background","green");
  });
  $("input").mouseout(function(){
    $("body").css("background","white");
  });
  $("button").click(function(){
    $("input").unbind("click");
  });
});
</script>
<p>这是一个段落。</p>
<input type="button" value="click me"></input>
<button>删除 input 元素的click事件处理器</button>

916-11.gif

用法二：删除某个事件上的处理程序$(selector).unbind(event,function)

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
  function changeColor()
  {
    $(this).css("color","red");
  }
  function changeBg()
  {
    $(this).css("background","yellow");
  }
  $(document).ready(function(){
    $("p").click(changeColor).click(changeBg);
    $("button").click(function(){
      $("p").unbind("click",changeColor);
    });
});
</script>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>从 p 元素的 click 事件删changColor框函数</button>

916-12.gif

die（用法和unbind相似，用来解除live绑定的事件）

$(selector).die( )删除选中元素所有事件
$(selector).die(eventObj)规定要删除的事件对象。
$(selector).die(event,function)规定从指定事件上删除一个或多个事件处理程序。

undelegate（移除delegate绑定的事件）

$(selector).undelegate(selector,event,function)的参数：
selector 可选。规定需要删除事件处理程序的选择器。
event 可选。规定需要删除处理函数的一个或多个事件类型。
function 可选。规定要删除的具体事件处理函数。

用法一：$(selector).undelegate()删除所有事件
用法二：$(selector).undelegate(selector)删除满足过滤条件的元素的所有事件
用法三：$(selector).undelegate(event)删除某个事件
用法四：$(selector).undelegate(event,function)删除某个事件的某个函数

.off（移除on绑定的事件）

$(selector).off( event , selector , function )参数
event 可选。规定需要删除处理函数的一个或多个事件类型。
selector 可选。规定需要删除事件处理程序的选择器。
function 可选。规定要删除的具体事件处理函数。

各种事件绑定/解除方法的比较

事实上，.on()才是jQuery事件的提供者。其他的事件绑定方法都是通过.on()来实现的，请看jQuery1.8.2的源码：

bind: function( types, data, fn ) {
    return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
    return this.off( types, null, fn );
},

live: function( types, data, fn ) {
    jQuery( this.context ).on( types, this.selector, data, fn );
    return this;
},
die: function( types, fn ) {
    jQuery( this.context ).off( types, this.selector || "**", fn );
    return this;
},

delegate: function( selector, types, data, fn ) {
    return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
    return arguments.length === 1 ? this.off( selector, "**" ) 
    : this.off( types, selector || "**", fn );
},

既然.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 ) {} );

bind:为一个元素绑定一个事件处理程序，在jQuery 3.0版本中，标记为弃用。
unbind:用来解除bind方法绑定的事件。同样，在jQuery 3.0版本中，标记为弃用。
live：附加一个事件处理器到匹配目前选择器的所有元素，现在和未来。
这种方法是将页面的document元素作为事件代理元素，太消耗资源，已经过时。在新版本中推荐用.on()方法，即时在旧版本中，也推荐使用.delegate()方法来取代.live()方法。
delegate：为所有匹配选择器（selector参数）的元素绑定一个处理器到一个或多个事件，现在或将来，基于根元素的一个特定的组。
在jQuery 3.0中，.delegate()也已被标记为弃用。
delegate方法比live方法好在能指定事件代理元素。。
on：在选定的元素上绑定一个或多个事件处理函数。
从jQuery1.7开始，.on()方法提供了事件处理的所有功能。所以，为了统一和方便，推荐使用.on()方法作为绑定事件的方法。
off:用来移除用.on()方法绑定的事件。

4、jQuery 如何展示/隐藏元素？

基础的展示/隐藏

.hide(duration ,easing, complete)

用于隐藏元素，没有参数时等同于设置display属性.css('display', 'none')
duration（可选）：动画持续多久
easing（可选）：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
complete（可选）：在动画完成时执行的函数

举例：

<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide(2000,"linear",function(){
      $("body").css("background","green")
    });
  });
});
</script>
<p>点击我，我会消失。</p>

916-13.gif

.show( [duration, easing , complete )
用于显示元素，用法和hide类似，举例：

<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide(1000,"linear",function(){
      $(this).show(1000,"linear",function(){
        $("body").css("background","green")
      })
    });
  });
});
</script>
<p>点击我，我会消失。</p>

916-14.gif

.toggle( duration , easing , complete )

事件处理套件也有一个名为.toggle()方法。哪一个被调用取决于传递的参数的设置
用来切换元素的隐藏、显示，类似于toggleClass，用法和show、hide类似

举例：

<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle(1000,"linear");
  });
});
</script>
<p>点击button，我会消失/显示。</p>
<button>click me</click>

916-15.gif

渐变的展示/隐藏 fade

.fadeIn( duration , easing, complete)
通过淡入的方式显示匹配元素，参数含义和上面相同
.fadeOut( duration , easing , complete )
通过淡出的方式隐藏匹配元素
.fadeTo( duration, opacity , easing, complete )
调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果。
第一、二个参数必须，第一个参数设置无意义时会取默认时间；第二个参数设置透明度。

以上三个综合举例：

<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut(1000,"linear",function(){
      $("#div1").fadeIn();
    });
    $("#div2").fadeTo(1000,0.2,"linear");
  });
});
</script>
<style>#div1,#div2{width:80px;height:80px;background:green;float:left;margin-right:20px}</style>
<button>click</button>
<div id="div1">1</div>
<div id="div2">2</div>

916-16.gif

.fadeToggle( duration ,easing ,complete )
通过匹配的元素的不透明度动画，来显示或隐藏它们，方法执行匹配元素的不透明度动画。当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none ，所以元素不再影响页面的布局。举例：

<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle(1000,0);
  });
});
</script>
<style>#div1,#div2{width:80px;height:80px;background:green;margin-right:20px;float:left}#div2{background:red;}</style>
<button>click</button>
<div id="div1">1</div>
<div id="div2">2</div>

916-17.gif

滑动的展示/隐藏 slide

.slideDown( duration , easing , complete )
用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式
.slideUp(duration , easing , complete )
用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。 display 样式属性将被设置为none，以确保该元素不再影响页面布局。
.slideToggle( duration , easing , complete )
用滑动动画显示或隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到其初始值。
如果一个元素的display属性值为inline，然后是隐藏和显示，这个元素将再次显示inline。当一个隐藏动画后，高度值达到0的时候，display 样式属性被设置为none，以确保该元素不再影响页面布局。

综合举例

<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#div1").slideUp(1000,"linear",function(){$("#div1").slideDown()});
  });
  $("#btn2").click(function(){
    $("#div1").slideToggle()
  })
});
</script>
<style>#div1,#div2{width:80px;height:80px;background:green;margin-top:10px}#div1{background:red}</style>
<button id="btn2">toggle</button>
<button id="btn1">click</button>
<div id="div1">1</div>
<div id="div2">2</div>

916-18.gif

另外，还可以用 animate 自定义展示/隐藏效果

5、 jQuery 动画如何使用？

jQuery .animate()方法用于创建自定义动画：

.animate( properties , duration , easing ，step, complete )
其中后四个为可选参数
properties是一个CSS属性和值的对象,动画将根据这组对象移动。
duration (default: 400)：一个字符串或者数字决定动画将运行多久。默认值: "normal"，三种预定速度的字符串("slow", "normal", 或 "fast"或表示动画时长的毫秒数值(如：1000) ）
easing (default: swing)：一个字符串，表示过渡使用哪种缓动函数。jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件
step：每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
complete：在动画完成时执行的函数

简单用法：

<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("#div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    },2000,"swing",function(){$("#div").css({background:"red"})});
  });
});
</script> 
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div id="div" style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

916-19.gif

jQuery animate() - 使用相对值

<script src="/jquery/jquery-1.11.1.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'150px',
      height:'+=150px',
      width:'+=150px'
    });
  });
});
</script> 
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

916-20.gif

jQuery animate() - 使用预定义的值
甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

<script src="/jquery/jquery-1.11.1.min.js"></script>
<script> 
$(document).ready(function(){
  $("#btn1").click(function(){
    $("div").animate({
      height: "toggle"
    });
  });
  $("#btn2").click(function(){
    $("div").animate({
      width: "show"
    });
  });
  $("#btn3").click(function(){
    $("div").animate({
      width: "hide"
    });
  });
});
</script> 
<button id="btn1">toggle</button> <button id="btn2">show</button> <button id="btn3">hide</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;"></div>

916-21.gif

jQuery animate() - 使用队列功能
默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

<script src="/jquery/jquery-1.11.1.min.js"></script>
<script> 
$(document).ready(function(){
  $("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");
  });
});
</script> 
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

916-22.gif

<script src="/jquery/jquery-1.11.1.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");  
    div.animate({left:'100px'},"slow");
    div.animate({fontSize:'3em'},"slow");
  });
});
</script> 
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

916-23.gif

除了这些，JQuery animate 还有一些高级用法，以后在做归纳

6、如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

HTML内容与内部文本内容的区别，相当于原生 JS 中的innerText与innerHTML的区别。
innerText返回元素内包含的文本内容，在多层次的时候会按照元素由浅到深的顺序拼接其内容。
innerHTML回元素的HTML结构，在写入的时候也会自动构建DOM。
JQuery与之对应的两个方法是text() 和 html()

获取内容

$(".box").html() //获取元素内部的html内容，类似于innerHTML
$(".box").text() //获取元素内部的text文本，类似于innerText

设置内容

$(".box").html("<p>设置了一个段落</p>")//设置了元素内部的html内容,标签生效
$(".box").text("设置了一个文本")//设置了元素内部的text文本，标签不生效

text()、html() 的回调函数
上面的两个 jQuery 方法：text()、html() （以及下边提到的val())，拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。如：

<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").text(function(i,origText){
      return origText + "newText"+i; 
    });
  });

  $("#btn2").click(function(){
    $("p").html(function(i,origText){
      return origText + "<b>newHTML</b>"+i; 
    });
  });

});
</script>
<p>oldText</p>
<p>oldHTML</p>
<button id="btn1">添加text</button>
<button id="btn2">添加HTML</button>

916-24.gif
注意第二次点击把新增的<b></b>丢掉了

7、如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？

设置/获取表单内容

$("#ipt").val() //获取表单的html内容
$("#ipt").val(content) //更改表单的内容

如：

<input id="ipt" type="text" value="hello world">
$("#ipt").val()
//"hello world"
$("#ipt").val("jirengu") 
$("#ipt").val()
//"jirengu"

与上边 text()、html()类似 val()同样可拥有回调函数

设置/获取元素属性

.attr()

获取元素特定属性的值.attr(attributeName)

var title = $( "em" ).attr( "title" );

为元素属性赋值.attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) )
普通用法：

$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );

属性JSON形式

  $("#baid").attr({
    "href" : "http://www.baid.com.cn",
    "title" : "bai du"
  });

回调函数用法.attr( attributeName, function(index, attr) )
jQuery 方法 attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("iframe").attr("src", function(i,origValue){
      return origValue + "/app/album/index"; 
    });
  }); 
});
</script>
<button>改变iframe的src值</button>
<iframe src="https://jirengu.com"></iframe>

916-25.gif

.removeAttr()
为匹配的元素集合中的每个元素中移除一个属性（attribute）
.removeAttr() 方法使用原生的 JavaScript removeAttribute() 函数,但是它的优点是可以直接在一个 jQuery 对象上调用该方法，并且它解决了跨浏览器的属性名不同的问题。

$('div').removeAttr('id');

增加/删除DOM元素

创建元素
只需要把DOM字符串传入$方法即可返回一个jQuery对象

var obj = $('<div class="test"><p><span>Done</span></p></div>');

添加元素

.append(content[,content]) / .append(function(index,html))
可以一次添加多个内容，内容可以是DOM对象、HTML string、 jQuery对象。
如果参数是function，function可以返回DOM对象、HTML string、 jQuery对象，参数是集合中的元素位置与原来的html值
如：

$( ".inner" ).append( "<p>Test</p>" );
$( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).append( "<strong>Hello</strong>" );
$( "p" ).append( $( "strong" ) );
$( "p" ).append( document.createTextNode( "Hello" ) );

.appendTo(target)
把对象插入到目标元素尾部，目标元素可以是selector, DOM对象, HTML string, 元素集合, jQuery对象;

$( "h2" ).appendTo( $( ".container" ) );
$( "<p>Test</p>" ).appendTo( ".inner" );

.prepend(content[,content]) / .prepend(function(index,html))
向对象头部追加内容，用法和append类似，内容添加到最开始

$( ".inner" ).prepend( "<p>Test</p>" );

.prependTo(target)
把对象插入到目标元素头部，用法和prepend类似

$( "<p>Test</p>" ).prependTo( ".inner" );

.before([content][,content]) / .before(function)
在对象前面(不是头部，而是外面，和对象并列同级)插入内容，参数和append类似

$( ".inner" ).before( "<p>Test</p>" );
$( ".container" ).before( $( "h2" ) );
$( "p" ).first().before( newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).before( "<b>Hello</b>" );
$( "p" ).before( document.createTextNode( "Hello" ) );

.insertBefore(target)
把对象插入到target之前（同样不是头部，是同级）

$( "h2" ).insertBefore( $( ".container" ) );

.after([content][,content]) / .after(function（index）)
和before相反，在对象后面(不是尾部，而是外面，和对象并列同级)插入内容，参数和append类似

$( ".inner" ).after( "<p>Test</p>" );
$( "p" ).after( document.createTextNode( "Hello" ) );

.insertAfter(target)
和insertBefore相反，把对象插入到target之后（同样不是尾部，是同级）

$( "<p>Test</p>" ).insertAfter( ".inner" );
$( "p" ).insertAfter( "#foo" );

删除元素

.remove([selector])
删除被选元素（及其子元素）

 $("#div1").remove();
$('div').remove('.test');//过滤匹配的元素

.empty()
清空被选择元素内所有子元素

$('body').empty();

.detach()
detach() 方法移除被选元素，包括所有文本和子节点。这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。
detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。

由于.detach的上述特性，衍生出以下用法

普通用法，删除元素

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").detach();
  });
});
</script>
<p>This is a paragraph.</p>
<button>删除 p 元素</button>

916-26.gif
特别用法：移动元素

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("body").append($("p").detach());
  });
});
</script>
<p>This is a paragraph.</p>
<button>移动 p 元素</button>

916-27.gif
特别用法：恢复元素

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var x;
  $("#btn1").click(function(){
    x=$("p").detach();
  });
  $("#btn2").click(function(){
    $("body").prepend(x);
  });
});
</script>
<p>这是一个段落。</p>
<button id="btn1">删除 p 元素</button>
<button id="btn2">恢复 p 元素</button>

916-28.gif
特别用法：并保留其事件绑定

<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("body").append($("p").detach());
  });
 $("p").click(function(){
    $(this).toggleClass("bg")
  });
});
</script>
<style>.bg{background:red}</style>
<p>在本段落移动之后，试着点击该段落，请注意它保留了 click 事件。</p>
<button>移动 p 元素</button>

916-29.gif

包裹元素

wrap(wrappingElement) / .wrap(function(index))
为每个对象包裹一层HTML结构，可以是selector, element, HTML string, jQuery object

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
//包裹元素
$( ".inner" ).wrap( "<div class='new'></div>" );
//结果
<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

.wrapAll(wrappingElement)
把所有匹配对象包裹在同一个HTML结构

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
//包裹元素
$( ".inner" ).wrapAll( "<div class='new' />");
//结果
    <div class="container">
      <div class="new">
        <div class="inner">Hello</div>
        <div class="inner">Goodbye</div>
      </div>
    </div>

.wrapInner(wrappingElement) / .wrapInner(function(index))
用选中的元素包裹指定的HTML

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
//包裹元素
$( ".inner" ).wrapInner( "<div class='new'></div>");
//结果
<div class="container">
  <div class="inner">
    <div class="new">Hello</div>
  </div>
  <div class="inner">
    <div class="new">Goodbye</div>
  </div>
</div>

.unwrap()
把DOM元素的parent移除

pTags = $( "p" ).unwrap();

你必须知道的JQuery

1、 jQuery 能做什么？

2、 jQuery 对象和 DOM 原生对象有什么区别？如何转化？

区别：

转化方法：

3、jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？

JQuery中如何绑定事件

JQuery中如何解除绑定事件

各种事件绑定/解除方法的比较

4、jQuery 如何展示/隐藏元素？

基础的展示/隐藏

渐变的展示/隐藏 fade

滑动的展示/隐藏 slide

另外，还可以用 animate 自定义展示/隐藏效果

5、 jQuery 动画如何使用？

6、如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

7、如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？

设置/获取表单内容

设置/获取元素属性

增加/删除DOM元素

代码展示

8、tab

9、事件绑定

10、事件代理

11、tab切换/滑动

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程

饥人谷技术博客