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、$用法
3、选择器
-
基本过滤选择器
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");
结果:
[ HelloI would like to say:
]
insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素或元素集合的后面。
描述:
把所有段落插入到一个元素之后。与 $("#foo").after("p")相同
HTML 代码:
I would like to say:
Hello
jQuery 代码:
$("p").insertAfter("#foo");
结果:
HelloI would like to say:
insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素或元素集合的前面。
描述：
把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。
HTML 代码:
HelloI 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");
结果:
HelloHello, how are you?