你必须知道的JQuery

简公子简公子

本文原载于简书,作者饥人谷_杨少

1、 jQuery 能做什么?

jquery是一个丰富的js库,内部对js的很多复杂的方法进行了封装和加工,比如js很多方法名很冗长,jquery封装后方法就变得简便了,也考虑到了跨浏览器兼容问题,这样我们用js时需要考虑的很多问题它都帮我们解决了,这样我们使用时就比js代码要方便,高效的多。
JQuery对js的优化包括:
选择网页元素
改变结果集
元素的操作:取值和赋值
元素的操作:移动
元素的操作:复制、删除和创建
工具方法
事件操作
特殊效果
AJAX
English:devdocs.io/jquery/
    :api.jquery.com/
中文: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>


这种基本用法可以简化为:$(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>


用法三:绑定多个类型事件:$(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>
  • 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>

用法二: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>

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

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

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

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

用法二:事件代理$(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>

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>

用法二:删除某个事件上的处理程序$(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>
  • 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>
  • .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>
  • .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>

渐变的展示/隐藏 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>
  • .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>

滑动的展示/隐藏 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>

另外,还可以用 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>
  • 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>
  • 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>
  • 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>
<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>

除了这些,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>

注意第二次点击把新增的<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>
  • .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>

特别用法:移动元素

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

特别用法:恢复元素

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

特别用法:并保留其事件绑定

<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>
  • 包裹元素

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切换/滑动



  1. 关注饥人谷学员精选专栏,长期发布最适合前端新手的技术教程
  2. 加入优质前端资源QQ群 551837286 ,每日一题、公开课直播、博客推荐等更多资源放送
文章被以下专栏收录
1 条评论
推荐阅读