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>
