你必须知道的JQuery

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
  • on

$(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();

代码展示

8、tab

9、事件绑定

10、事件代理

11、tab切换/滑动

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

推荐阅读更多精彩内容

  • JQuery
    1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,321评论 0赞 2
  • JQuery
    1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,162评论 0赞 1
  • jQuery基础(2)
    (续jQuery基础(1)) 第5章 DOM节点的复制与替换 （1）DOM拷贝clone() 克隆节点是DOM的常...
    凛0_0阅读 1,318评论 0赞 8
  • 进阶14 jQuery 基础
    题目1： jQuery 能做什么？ 选择网页元素 改变结果集 元素的操作：取值和赋值 元素的操作：移动 元素的操作...
    cheneyzhangch阅读 419评论 0赞 1
  • jQuery
    题目1：jQuery 能做什么？ jQuery是一个丰富的js库, 内部对js的很多复杂的方法进行了封装和加工, ...
    cctosuper阅读 234评论 0赞 0