jQuery

1、参考文献

• jQuery菜鸟教程
  http://www.runoob.com/jquery/jquery-tutorial.html
• jQuery中文在线手册
  http://jquery.cuishifeng.cn/
  https://www.jquery123.com/
• jQuery
  https://jquery.com/
  http://jqueryui.com/
  http://jqueryui.com/download/all/
• jQuery插件库
  http://www.jq22.com/
  https://www.oschina.net/
  https://github.com/search?q=
• jQuery效果
  http://www.php.cn/xiazai/js
  http://www.dowebok.com/tag/fullscreen-onepage-scroll
  https://www.iteye.com/topic/1141474
  https://www.heirui.cn/10628.html
  http://www.runoob.com/jqueryui/jqueryui-tutorial.html
  http://www.jqueryui.org.cn/
  http://sc.chinaz.com/tag_jiaoben/tupianqiehuan.html
  http://www.htmleaf.com/
  http://down.admin5.com/texiao/
  http://www.51xuediannao.com/js/texiao/

2、$用法

image.png

3、选择器

image.png
image.png

• 基本过滤选择器

  
  image.png

• 索引过滤

  
  image.png

• 内容过滤

  
  image.png

• 属性过滤

  
  image.png
  image.png

• 子元素过滤

  
  image.png

4、文档处理

• 内部插入
  append(content|fn) 向每个匹配的元素内部追加内容。

描述：
向所有段落中追加一些HTML标记。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").append("<b>Hello</b>");
结果:
[ <p>I would like to say: <b>Hello</b></p> ]

appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中。

描述:
把所有段落追加到ID值为foo的元素中。
HTML 代码:
<p>I would like to say: </p>
<div></div><div></div>
jQuery 代码:
$("p").appendTo("div");
结果:
<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>

prepend(content) 向每个匹配的元素内部前置内容。

描述:
向所有段落中前置一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").prepend("<b>Hello</b>");
结果:
[ <p><b>Hello</b>I would like to say: </p> ]

prependTo(content) 把所有匹配的元素前置到另一个、指定的元素元素集合中。

描述:
把所有段落追加到ID值为foo的元素中。
HTML 代码:
<p>I would like to say: </p><div id="foo"></div>
jQuery 代码:
$("p").prependTo("#foo");
结果:
<div id="foo"><p>I would like to say: </p></div>

• 外部插入
  after(content|fn) 在每个匹配的元素之后插入内容。

描述:
在所有段落之后插入一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").after("<b>Hello</b>");
结果:
<p>I would like to say: </p><b>Hello</b>

before(content|fn) 在每个匹配的元素之前插入内容。

描述:
在所有段落之前插入一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:
$("p").before("<b>Hello</b>");
结果:
[ <b>Hello</b><p>I would like to say: </p> ]

insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素或元素集合的后面。

描述:
把所有段落插入到一个元素之后。与 $("#foo").after("p")相同
HTML 代码:
<p>I would like to say: </p><div id="foo">Hello</div>
jQuery 代码:
$("p").insertAfter("#foo");
结果:
<div id="foo">Hello</div><p>I would like to say: </p>

insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素或元素集合的前面。

描述：
把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。
HTML 代码:
<div id="foo">Hello</div><p>I would like to say: </p>
jQuery 代码:
$("p").insertBefore("#foo");
结果:
<p>I would like to say: </p><div id="foo">Hello</div>

• 包裹
  wrap(html|element|fn) 把所有匹配的元素用其他元素的结构化标记包裹起来。

html参数描述:
把所有的段落用一个新创建的div包裹起来
HTML 代码:
<p></p>
<p></p>
jQuery 代码:
$("p").wrap("<div class='wrap'></div>");
结果:
<div class='wrap'><p></p></div>
<div class='wrap'><p></p></div>

unwrap() 这个方法将移出元素的父元素。这能快速取消 .wrap()方法的效果。匹配的元素（以及他们的同辈元素）会在DOM结构上替换他们的父元素。

描述:
用ID是"content"的div将每一个段落包裹起来
HTML 代码:
<div>
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
</div>
jQuery 代码:
 $("p").unwrap()
结果:
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>

wrapAll(html|ele) 将所有匹配的元素用单个元素包裹起来。

html描述:
用一个生成的div将所有段落包裹起来
HTML 代码:
<p>Hello</p>
<p>cruel</p>
<p>World</p>
jQuery 代码:
$("p").wrapAll("<div></div>");
结果:
<div>
    <p>Hello</p>
    <p>cruel</p>
    <p>World</p>
</div>

wrapInner(htm|element|fnl) 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。

html描述:
把所有段落内的每个子元素包裹起来
HTML 代码:
<p></p>
<p></p>
jQuery 代码:
$("p").wrapAll("<div></div>");
结果:
<p><div></div></p>
<p><div></div></p>

• 替换
  replaceWith(content|fn) 将所有匹配的元素替换成指定的HTML或DOM元素。

描述:
把所有的段落标记替换成加粗的标记。
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("p").replaceWith("<b>Paragraph. </b>");
结果:
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

replaceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素。

描述:
把所有的段落标记替换成加粗标记
HTML 代码:
<p>Hello</p><p>cruel</p><p>World</p>
jQuery 代码:
$("<b>Paragraph. </b>").replaceAll("p");
结果:
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

detach([expr]) 从DOM中删除所有匹配的元素。

描述:
从DOM中把所有段落删除
HTML 代码:
<p>Hello</p> how are <p>you?</p>
jQuery 代码:
$("p").detach();
结果:
how are

clone([Even[,deepEven]]) 克隆匹配的DOM元素并且选中这些克隆的副本。

描述:
克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。
HTML 代码:
<b>Hello</b><p>, how are you?</p>
jQuery 代码:
$("b").clone().prependTo("p");
结果:
<b>Hello</b><p><b>Hello</b>, how are you?</p>