jQuery學(xué)習(xí)筆記第二節(jié)/Jq的設(shè)計(jì)思想之選擇元素
1.jQuery的設(shè)計(jì)思想
- 選擇網(wǎng)頁(yè)元素
- 模擬 CSS 選擇符
- 獨(dú)有表達(dá)式的選擇
- 多種篩選的選擇
- Jq 的寫法
- 方法函數(shù)化,在 JQ 中使用"="就很少了,因?yàn)榉椒ǘ己瘮?shù)化了.
- 鏈?zhǔn)讲僮?Jq 很吊的一點(diǎn)就是可以鏈?zhǔn)讲僮?對(duì)于一個(gè)元素的操作都可以寫在一行里面.吊吊的
- 取值賦值合體,一般在一個(gè)方法中.一個(gè)參數(shù)就是取值,兩個(gè)參數(shù)就是賦值.
- Jq 和 Js 的關(guān)系
- 可以混編.而且混編是一種很爽的編碼方式.但是有一點(diǎn)需要注意:就是千萬(wàn)不可以亂調(diào) API,意思就是 JS 對(duì)象不可以調(diào)用 JQ的方法,JQ對(duì)象不可以調(diào)用 JS 的方法,這個(gè)是一定要切記的!
可以看到使用 JQ 的來(lái)進(jìn)行元素的選擇更加的迅速和方便了,并且兼容性更好,減少了很多的不必要的繁瑣的 JS 操作.
2.Jq 庫(kù)文件的導(dǎo)入問(wèn)題
上一份的筆記是使用下載的 JQ 文件,這里就不在下載了.推薦使用CDN來(lái)完成 JQ的庫(kù)文件的加載.
注意:
Jq是有版本的,如果需要兼容 IE67.8的話,那么就只能使用低版本的 Jq庫(kù)文件
3.關(guān)于 Jq 選擇器的簡(jiǎn)單了解
- 1.js 選擇元素的方式
1.//這里我們先看看JS 選擇元素的方法,參考下面的代碼
2.<!DOCTYPE html>
3.<html>
4. <head>
5. <meta charset="UTF-8">
6. <title>原生 JS 操作元素</title>
7. </head>
8. <body>
9. <div id="frist_div">
10. 我是第一個(gè)div
11. </div>
12. <div class="second_div">
13. 我是第二個(gè)div
14. </div>
15. <ul class="out_Li_list">
16. <li class="inner_li">
<a >百度一下,你就知道</a>
</li>
17. </ul>
18. </body>
19. <script type="text/javascript">
20. var frist_element = document.getElementById("frist_div");
21. var second_element =document.getElementsByClassName("second_div");
22. var thind_element = document.getElementsByTagName("li");//這里獲取到的是一個(gè)集合.
23. </script>
24.</html>
可以看到使用 JS 來(lái)獲取元素是一個(gè)很麻煩的事情.需要調(diào)用的方法很長(zhǎng)而且如果獲取的是一個(gè)集合的話,還需要進(jìn)行一個(gè) for 循環(huán)來(lái)進(jìn)行遍歷.
- 2.使用 Jq 來(lái)進(jìn)行元素的選擇
<script type="text/javascript">
//這里代碼快使用 JQ 來(lái)進(jìn)行元素的獲取
var $div_one = $("#frist_div");
var $div_two = $(".second_div");
var $inner_li = $(".out_Li_list>li"); //這里獲取的是 UL下面的所有的li.
var $li_element = $(".inner_li"); //單獨(dú)的 li.
</script>
我們可以發(fā)現(xiàn)使用 JQ 來(lái)進(jìn)行元素的選擇是一個(gè)非常簡(jiǎn)單的事情,代碼很少了.被封裝的很簡(jiǎn)單.
4.一個(gè)簡(jiǎn)單的總結(jié)
jQuery的廣義語(yǔ)法.png
其實(shí) Jq 很簡(jiǎn)單,首先第一步就是選中某個(gè)元素,然后就是給這個(gè)元素執(zhí)行某些 action即可.
好了.今天的 B 就裝到這里.再見(jiàn)
