JQ的几组API辨析：

Posted 2020-09-23

1．插入：

Jq的插入一共有八个API可供选择，结果相类似，下面将以例子，简单明了的介绍下用法：

<select name="one" multiple="multiple">

      <option value="">1</option>

      <option value="">2</option>

      <option value="">3</option>

      <option value="">4</option>

</select>

<select name="two" multiple="multiple">

      <option value="">5</option>

</select>

 

需求：在2前面插入5；

这里面就将

$("select[name=one] option:eq(0) ")简写为1；

$("select[name=one] option:eq(1) ")简写为2；

$("select[name=two] option:eq(0) ")简写为5；

2 .before 5；

1 .after 5;

5 .insertBefore 2;

5 insertAfter 1;

以上4个均可以完美完成需求，不同的是前后之分和主体不同。

注：在原生js中也有insertBefore，但是没有insertAfter。

1 .append 5；

5 .appendTo 1；

2 .prepend 5；

5 .prependTo 2；

以上4个貌似也可以完成插入效果上有很大的不同，append 、prepend是将5插入到2的标签内部，在使用时可根据需求加以选择。

 

2.ready和onload

功能：两者是一致的；

用法：$(document).ready(function(){});

简写$(function(){});

Window.onload=function(){};

ready和onload是文档准备API前者是jq API，后者是js API，其更大的区别在于：

1、ready有简写；

2、ready的响应速度快于onload，原因是ready只需DOM结构加载完后执行，而onload需将页面内容加载完成后执行，显然页面内容多于DOM结构，例如：图片等；

3、一个页面允许有多个ready，而只能有一个window.onload。