jq基礎(chǔ)(一)——樣式篇———選擇器

1弥锄、

如何引入jq語句

    <script type="text/javascript">
          $(document).ready(function(){
 
          // 開始寫 jQuery 代碼...
 
         });
    </script>

簡潔寫法(與以上寫法效果相同):

$(function(){
 
   // 開始寫 jQuery 代碼...
 
});

2账月、

    <!-- 使用JS原生語法 -->
    <script type="text/javascript">
        window.onload = function(){
            var p = document.getElementById('imooc1');
            p.innerHTML = 'P1:您好疆导!通過慕課網(wǎng)學(xué)習(xí)jQuery才是最佳的途徑';
            p.style.color = 'red';  
        }
    </script>
    
    <!-- 使用jQuery語法 -->
    <script type="text/javascript">
        $(document).ready(function() {
            var $p = $('#imooc2');
            $p.html('P2:您好赁项!通過慕課網(wǎng)學(xué)習(xí)jQuery才是最佳的途徑').css('color','red');
        });
    </script>

3、

jQuery是一個(gè)類數(shù)組對象,而DOM對象就是一個(gè)單獨(dú)的DOM元素悠菜。

如何把jQuery對象轉(zhuǎn)成DOM對象舰攒? get()方法

<script type="text/javascript">
        var $div = $('div'); //jQuery對象
        var div = $div.get(0) //通過get方法,轉(zhuǎn)化成DOM對象
                /*var div = $div[0] //轉(zhuǎn)化成DOM對象*/
        div.style.color = 'red'; //操作dom對象的屬性
</script>

4悔醋、

DOM對象轉(zhuǎn)化成jQuery對象: $(div)

 <script type="text/javascript">
            var div = document.getElementsByTagName('div'); //dom對象
            var $div = $(div); //將dom節(jié)點(diǎn)div轉(zhuǎn)化為$div的jquery對象
            var $first = $div.first(); //找到第一個(gè)div元素
            $first.css('color', 'red'); //給第一個(gè)元素設(shè)置顏色
    </script>

5摩窃、jQuery選擇器之層級選擇器

http://js.jirengu.com/vufujurabo/1/

$( "parent > child" ) 子選擇器:選擇所有指定“parent”元素中指定的"child"的直接子元素。
$("ancestor descendant") 后代選擇器:選擇給定的祖先元素的所有后代元素, 一個(gè)元素的后代可能是該元素的一個(gè)孩子芬骄,孫子猾愿,曾孫等
$("prev + next") 相鄰兄弟選擇器:選擇所有緊接在“prev”元素后的“next”元素
$("prev ~ siblings") 一般兄弟選擇器:匹配“prev”元素之后的所有 兄弟元素。具有相同的父元素账阻,并匹配過濾“siblings”選擇器

6蒂秘、jQuery選擇器之基本篩選選擇器

http://js.jirengu.com/lezaterimi/1/

7、jQuery選擇器之內(nèi)容篩選選擇器

http://js.jirengu.com/jegezimiqi/1/

8淘太、姻僧??

9琴儿、段化??jQuery選擇器之屬性篩選選擇器

在這么多屬性選擇器中[attr="value"]和[attr="value"]是最實(shí)用的
[attr="value"]能幫我們定位不同類型的元素造成,特別是表單form元素的操作,比如說input[type="text"],input[type="checkbox"]等
[attr
="value"]能在網(wǎng)站中幫助我們匹配不同類型的文件
http://js.jirengu.com/zequwovuke/1/

10雄嚣、jQuery選擇器之子元素篩選選擇器

Paste_Image.png

注意事項(xiàng):

:first只匹配一個(gè)單獨(dú)的元素晒屎,但是:first-child選擇器可以匹配多個(gè):即為每個(gè)父級元素匹配第一個(gè)子元素。這相當(dāng)于:nth-child(1)
:last 只匹配一個(gè)單獨(dú)的元素缓升, :last-child 選擇器可以匹配多個(gè)元素:即鼓鲁,為每個(gè)父級元素匹配最后一個(gè)子元素
如果子元素只有一個(gè)的話,:first-child與:last-child是同一個(gè)
:only-child匹配某個(gè)元素是父元素中唯一的子元素港谊,就是說當(dāng)前子元素是父元素中唯一的元素骇吭,則匹配
jQuery實(shí)現(xiàn):nth-child(n)是嚴(yán)格來自CSS規(guī)范,所以n值是“索引”歧寺,也就是說燥狰,從1開始計(jì)數(shù),:nth-child(index)從1開始的斜筐,而eq(index)是從0開始的
nth-child(n) 與 :nth-last-child(n) 的區(qū)別前者是從前往后計(jì)算龙致,后者從后往前計(jì)算
http://js.jirengu.com/natuxojaka/1/

11、jQuery選擇器之表單元素選擇器

Paste_Image.png

http://js.jirengu.com/rozewivuma/1/

12顷链、jQuery選擇器之表單對象屬性篩選選擇器

Paste_Image.png

注意事項(xiàng):
選擇器適用于復(fù)選框和單選框目代,對于下拉框元素, 使用 :selected 選擇器
在某些瀏覽器中,選擇器:checked可能會錯(cuò)誤選取到<option>元素,所以保險(xiǎn)起見換用選擇器input:checked榛了,確保只會選取<input>元素
http://js.jirengu.com/mocucafudo/1/

13在讶、jQuery選擇器之特殊選擇器this

this,表示當(dāng)前的上下文對象是一個(gè)html對象霜大,可以調(diào)用html對象所擁有的屬性和方法真朗。
$(this),代表的上下文對象是一個(gè)jquery的上下文對象,可以調(diào)用jQuery的方法和屬性值僧诚。
http://js.jirengu.com/petubuzefo/1/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末遮婶,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子湖笨,更是在濱河造成了極大的恐慌旗扑,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,546評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件慈省,死亡現(xiàn)場離奇詭異臀防,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)边败,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,224評論 3 395
  • 文/潘曉璐 我一進(jìn)店門袱衷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人笑窜,你說我怎么就攤上這事致燥。” “怎么了排截?”我有些...
    開封第一講書人閱讀 164,911評論 0 354
  • 文/不壞的土叔 我叫張陵嫌蚤,是天一觀的道長。 經(jīng)常有香客問我断傲,道長脱吱,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,737評論 1 294
  • 正文 為了忘掉前任认罩,我火速辦了婚禮箱蝠,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘垦垂。我一直安慰自己宦搬,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,753評論 6 392
  • 文/花漫 我一把揭開白布乔外。 她就那樣靜靜地躺著床三,像睡著了一般。 火紅的嫁衣襯著肌膚如雪杨幼。 梳的紋絲不亂的頭發(fā)上撇簿,一...
    開封第一講書人閱讀 51,598評論 1 305
  • 那天聂渊,我揣著相機(jī)與錄音,去河邊找鬼四瘫。 笑死汉嗽,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的找蜜。 我是一名探鬼主播饼暑,決...
    沈念sama閱讀 40,338評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼洗做!你這毒婦竟也來了弓叛?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,249評論 0 276
  • 序言:老撾萬榮一對情侶失蹤诚纸,失蹤者是張志新(化名)和其女友劉穎撰筷,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體畦徘,經(jīng)...
    沈念sama閱讀 45,696評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡毕籽,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,888評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了井辆。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片关筒。...
    茶點(diǎn)故事閱讀 40,013評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖杯缺,靈堂內(nèi)的尸體忽然破棺而出蒸播,到底是詐尸還是另有隱情,我是刑警寧澤夺谁,帶...
    沈念sama閱讀 35,731評論 5 346
  • 正文 年R本政府宣布廉赔,位于F島的核電站,受9級特大地震影響匾鸥,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜碉纳,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,348評論 3 330
  • 文/蒙蒙 一勿负、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧劳曹,春花似錦奴愉、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,929評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至蜕劝,卻和暖如春檀头,著一層夾襖步出監(jiān)牢的瞬間轰异,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,048評論 1 270
  • 我被黑心中介騙來泰國打工暑始, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留搭独,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,203評論 3 370
  • 正文 我出身青樓廊镜,卻偏偏與公主長得像牙肝,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子嗤朴,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,960評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 第一章 jQuery簡介 1-1 jQuery簡介 1.簡介 2.優(yōu)勢 3.特性與工具方法 1-2 環(huán)境搭建 進(jìn)入...
    mo默22閱讀 1,587評論 0 11
  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關(guān)注...
    程序員poetry閱讀 16,645評論 18 503
  • 環(huán)境搭建 進(jìn)入官方網(wǎng)站獲取最新的版本 http://jquery.com/download/ 配椭,這里需要注意 j...
    阿r阿r閱讀 799評論 0 7
  • 一、樣式篇 第1章 初識jQuery (1)環(huán)境搭建 進(jìn)入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,386評論 0 44
  • 第一章 入門 基本功能:訪問和操作 dom 元素雹姊,控制頁面樣式股缸,對頁面的事件處理,與ajax完美結(jié)合容为,有豐富的插件...
    X_Arts閱讀 1,047評論 0 2