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 代码:
I would like to say: 
jQuery 代码:
$("p").append("Hello");
结果:
[ 
I would like to say: Hello
 ]

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

描述:
把所有段落追加到ID值为foo的元素中。
HTML 代码:
I would like to say: 

jQuery 代码:
$("p").appendTo("div");
结果:
I would like to say: 
I would like to say: 

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

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

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

描述:
把所有段落追加到ID值为foo的元素中。
HTML 代码:
I would like to say: 

jQuery 代码:
$("p").prependTo("#foo");
结果:
I would like to say: 

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

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

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

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

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

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

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

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

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

html参数描述:
把所有的段落用一个新创建的div包裹起来
HTML 代码:


jQuery 代码:
$("p").wrap("
");
结果:

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

描述:
用ID是"content"的div将每一个段落包裹起来
HTML 代码:

    
Hello
    
cruel
    
World

jQuery 代码:
 $("p").unwrap()
结果:
    
Hello
    
cruel
    
World

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

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

    
Hello
    
cruel
    
World

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

html描述:
把所有段落内的每个子元素包裹起来
HTML 代码:


jQuery 代码:
$("p").wrapAll("
");
结果:

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

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

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

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

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

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

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

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