天天看點
傳回

web開發之路——javascript、dom、jQuery（上）JavaScriptDomjQuery

JavaScript

JavaScript是一門程式設計語言，浏覽器内置了JavaScript語言的解釋器，是以在浏覽器上按照JavaScript語言的規則編寫相應代碼之，浏覽器可以解釋并做出相應的處理。

1、代碼存放形式以及存放的位置

1、JavaScript代碼存在形式

javascript是浏覽器可以直接編譯的語言，他可以實作網頁的各種“動作”。

JavaScript的存在形式分為兩種

第一種是直接寫在中

第二種是通過檔案導入

2、JavaScript代碼存在位置

javascript可以寫在head中，但是寫在head中會，如果是通過檔案的形式導入的，如果檔案通路不到，頁面會一直卡着等待導入，使頁面加載不出來。

是以JavaScript通常都是寫在body中的最下面

JavaScript聲明變量

1、變量聲明

name = “dingyi” —-> 全局變量

var age = 18 —–> 局部變量

2、注釋

// —-> 單行注釋

—–> 多行注釋

3、文法格式

類似java的文法格式，每行還有分号，函數體要有{}

2、JavaScript資料類型

1、數字

var age = 18;

var age = Number(18);

Number(‘13’) 或 parseInt(‘123’) —-> 将字元轉化為數字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
<script>
var age = ;
console.log(age, typeof age);
age = parseInt(age); //更改變量類型
//var age = Number(18);
console.log(age, typeof age); //用來調試用的，在“審查元素”的console中檢視


var age2 = ;
console.log(parseInt(age));
console.log(parseFloat(age));

var a1 = , a2 = , a3 =;//一次定義多個變量
</script>
</body>
</html>

2、字元串

var name = ‘dingyi’;

var name = ‘dingyi ‘;

name.trim();—–>去除空格

name.trimLeft();

name.trimRight();

name.charAt(1); —->’i’

name.chartAt(0); —–> ‘d’ 索引取值

name.substring(1,2); —-> ‘i’ 取一段值

name.substring(1,3); —-> ‘in’

name.indexOf(‘i’); —-> 1 找到索引下标

name.length; —-> 擷取字元串長度

3、布爾值

var status = true;

var status = false;

var status = Boolen(1==1)

4、數組和字典

var li = [11,22,33] —-> 建立數組

var li = Array(11,22,33) —-> 建立數組

添加：

li.push(88) —-> [11,22,33,88]

li.unshift(“oo”) —-> [“oo”, 11, 22, 33, 88]

li.splice(1,0,’dingyi’) —-> [“oo”, “dingyi”, 11, 22, 33, 88]

—-> 1代表位置，0是固定的，不是零的話資料不會插入,”dingyi”是元素

移除：

i = li.pop() —-> 移除最後一個值，并複制給i

j = li.shift() —-> 移除第一個元素，并指派給j

li.splice(1,2) —-> 這裡跟添加的splice名字一樣，1代表索引位置，2代表移除多少個

切片：

li = [11, 22, 33, 44]

li.slice(0,2) —-> 切片 [11,22]

合并：

li = [11, 22, 33, 44]

n = [‘dingyi’]

m = li.concat(n)

m —> [11, 22, 33, 44, ‘dingyi’] 原來的li不變

翻轉：

li.reverse() —> [44, 33, 22, 11] 翻轉的是li本身

字元串化：

n = li.join(‘-‘) —-> “44-33-22-11”

長度：

li.length

字典：

aa = {‘dd’:11, ‘xx’:22}

s = JSON.stringify(aa) —> 把字典轉化為字元串

m = JSON.parse(s) —> 把字元串轉化成字典

undefined：

未定義類型

例如不給變量指派：var name；

name就是undefined類型

null：

null是一個特殊值

null和 undefined的布爾值都是false

3、循環語句

1、JavaScript的兩種for循環

li = [, , , ]
for(var i in li){
    console.log(i);
}
輸出結果是：




傳回的是索引
           
d = {'k1':, 'k2':}
for(var i in d){
    console.log(item);
}
傳回的是 k1 k2
           
for(var i=;i<;i++){
    console.log(i);
}

//列印數組中所有的元素
for(var i=;i<li.length;i++){
    console.log(li[i]);
}

//周遊字典
d = {'k1':, 'k2':}
for(var i in d){
    console.log(d[i]);
}

2、while循環

while(true){
    continue;
    berak;
}

4、條件語句 

if(條件){
    語句;
}else if(條件){
    語句;
}else{
    語句;
}
           
switch(name){
    case :
        console.log('111111');
        break;
    case :
        console.log('222222');
    default:
        console.log('sss');
}

異常處理 

try{
    代碼塊;
}catch(錯誤){
    代碼塊;
}finally{
    最後執行的代碼塊;
}

5、函數

1、普通函數

function dy1(arg){
    console.log(arg);
    return 'dingyi'
}
res = dy1()
console.log(res)

2、匿名函數

var f = function(arg){
    console.log(arg);
};
f();

3、自執行函數

(function(形參){
    console.log();
})(參數);

6、面向對象 

function Foo(name, age){
    this.Name = name;
    this.Age = age;
    this.Func = function(arg){
        return this.Name + arg;
    }
}
var obj = new Foo('alex', );

console.log(obj.Name);
console.log(obj.Age);
var ert = obj.Func('sb');
console.log(ret);

Dom

文檔對象模型（Document Object Model，DOM）是一種用于HTML和XML文檔的程式設計接口。它給文檔提供了一種結構化的表示方法，可以改變文檔的内容和呈現方式。我們最為關心的是，DOM把網頁和腳本以及其他的程式設計語言聯系了起來。DOM屬于浏覽器，而不是JavaScript語言規範裡的規定的核心内容。

dom是把整體HTML封裝成了類，主要的操作有兩步：

1、查找元素

2、修改元素

比如有一個網頁，内容如下

<h1>index</h1>
<h1>index</h1>

可以通過dom修改HTML代碼

tags = document.getElementsByTagName('h1') //擷取了所有的h1标簽
---> [<h1>index</h1>, <h1>index</h1>]
tags[].innerText = '123';
tags[].innerText = 'xxx';

網頁就會變成：

<h1>123</h1>
<h1>xxx</h1>

1、選擇器

找标簽常用的有三種方式

1、是document.getElementsByTagName() —> 根據标簽類型

2、是document.getElementByID() —-> 根據ID查找

3、是document.getElementsByClassName() —> 根據樣式名查找

還有一種：

document.getElementsByName() —> 根據标簽的Name屬性，主要針對input

—> 這個擷取的是一個清單，就算隻有一個name

2、建立标簽 

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title></title>
</head>
<div>
        <div id="n1">c1</div>
        <a>asdasdasd</a>
</div>
<ul>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
</ul>

<div>
        <div class="c1">1</div>
        <div class="c1">2</div>
        <div class="c1">3</div>
</div>

<form>
        <p>使用者名:<input name="username" value="123"></p>
        <p>密碼：<input name="pwd" value="456"></p>
</form>

<script type="text/javascript">
        var nid = document.getElementById('n1'); //根據ID查找标簽
        nid.innerText = "dingyi"; //可以通過innerText屬性來修改标簽的值

        var lis = document.getElementsByTagName('li'); //通過标簽自己的名字來尋找所有的這種标簽，傳回的是一個數組
        for(var i in lis){
                var item = lis[i];
                item.innerText = i;
        }

        var lis2 = document.getElementsByClassName('c1'); //通過css的樣式名來尋找标簽，傳回的也是一個數組
        for(var i in lis2){
                var item = lis2[i];
                item.innerText = i;
        }

        var username = document.getElementsByName('username')[]; //通過标簽的name屬性來查找标簽，傳回的也是一個數組，隻有一個name的時候，通過索引來定位
        var pwd = document.getElementByName('pwd')[];
        console.log(username.value, pwd.value); //input标簽是自閉和的，是以要修改值得時候不是通過innerText，而是通過value
</script>
<body>
</body>
</html>

3、dom 标簽的屬性

對于屬性的修改，預設屬性是可以修改的，标簽自身沒有的屬性是不能夠修改的

var nid = document.getElementById('dingyi');
undefined
nid.id
"dingyi"
nid.name = '999'; -----> 不會添加name屬性
"999"
nid.className = 'aaa'; ----> 會添加class屬性
"aaa"

對于本身沒有的屬性，可以通過setAttribute進行設定

nid.setAttribute('name', '123123') ; ----> 将會建立name屬性
undefined

nid.setAttribute('sb', 'lalala'); ----> 自己自定義的屬性也可以定義

注：預設屬性可以通過xxx.屬性名 來進行設定，而其他屬性是通過setAttribute()、getAttribute()進行設定

class是通過 ‘xxx.className’ 進行修改

setAttribute()、getAttribute()可以修改所有資料

<div id = "dingyi" aaa="asa" class="c1" style="font-size: 30px; color:red;">

</div>

對于style屬性的修改，可以用

var nid = document.getElementById('dingyi');
nid.style.color= 'green';
nid.style.fontSize = px; // font-size這種中間有'-'的，把'-'去掉，并把S大寫
           
var nid = document.getElementById('dingyi');
undefined
nid
<div id="dingyi" aaa="asa" class="c1" style="font-size: 30px; color:red;">

</div>
nid.className='asdasdasd';
"asdasdasd"
nid
<div id="dingyi" aaa="asa" class="asdasdasd" style="font-size: 30px; color:red;">

</div>
nid.setAttribute('class','ddd');
undefined
nid
<div id="dingyi" aaa="asa" class="ddd" style="font-size: 30px; color:red;">

</div>
nid.style.fontSize = 'px';
"120px"
nid
<div id="dingyi" aaa="asa" class="ddd" style="font-size: 120px; color: red;">

</div>
nid.style.color = 'green';
"green"
nid
<div id="dingyi" aaa="asa" class="ddd" style="font-size: 120px; color: green;">

</div>

4、送出表單 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form id='form1' action="https://www.sougou.com/web" method="get">
    <input name="query" type="text">
    <input type="submit" value="送出">
    <div onclick="Submit();">
        送出
    </div>
</form>
<script>
    function Submit(){
        document.getElementById('form1').submit();
    }
</script>
</body>
</html>

通過對div設定onclick屬性（單擊事件），出發Submit方法，在Submit中，找到form1并送出表單

5、組織表單預設行為

事件表

web開發之路——javascript、dom、jQuery（上）JavaScriptDomjQuery
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<form id='form1' action="" method="get">
    <input name="query" type="text">
    <input type="submit"  onclick="return MySubmit(); " value="送出">
</form>

<script>
    function MySubmit(){
        var q = document.getElementsByName('query')[];
        if(q.value.trim()){
            return true;
        }else{
            alert('請輸入内容');
            return false;
        }
    }

</script>
</body>
</html>

點選送出按鈕之後，先執行自己定義的事件，在執行預設事件，自己定義的事件能夠先認證使用者是否輸入，如果沒有輸入傳回false，阻止預設事件的執行

定時器和跑馬燈執行個體

confirm()

出發之後會彈出一個對話框，可以點選”是”或”否”，點選”是”傳回true，點選”否”傳回false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button"  value="來點我啊" onmousemove="Myconfirm();">

<script>
    function Myconfirm(){
        var ret = confirm("sssbbb");
           console.log(ret);
    }

</script>
</body>
</html>
           
window.location.href --->傳回目前路徑
"file:///D:/python/dom/test04.html"

window.location.href = 'http://103.160.102.74:8888' ---> 跳轉到
           
window.location.reload() ----> 重新整理目前頁面

定時器

setInterval(“操作”,”間隔(毫秒)”)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>歡迎丁一來日</title>
</head>
<body>
<input type="button" onclick="stop_interval()" value="不日了">
<script>
    //setInterval("alert('123')", 2000);
    obj1 = setInterval("Func()", );

    obj2 = setTimeout("alert('timeout_test')", ); //隻執行一次操作，用法和setInterval一樣
    function Func(){
        var text = document.title;
        var firstchar = text.charAt();
        var subtext = text.substring(, text.length);
        var newtext = subtext + firstchar;
        console.log(text, firstchar, subtext, newtext)
        document.title = newtext;
    }

    function stop_interval(){
        //清除定時器，點選停止
        clearInterval(obj1);
        //清除timeout計時器
        clearTimeout(obj2);
    }


</script>
</body>
</html>

搜尋框

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title></title>

        <style>
            .gray{
                color:gray;
            }
            .black{
                color:black;
            }
        </style>
        <script type="text/javascript">
            function Enter(){
               var id= document.getElementById("tip")
               id.className = 'black';
               if(id.value=='請輸入關鍵字'||id.value.trim()==''){
                    id.value = ''
               }
            }
            function Leave(){
                var id= document.getElementById("tip")
                var val = id.value;
                if(val.length==||id.value.trim()==''){
                    id.value = '請輸入關鍵字'
                    id.className = 'gray';
                }else{
                    id.className = 'black';
                }
            }
        </script>
    </head>
    <body>
        <input type='text' class='gray' id='tip' value='請輸入關鍵字' onfocus='Enter();'  onblur='Leave();'/>
    </body>
</html>

jQuery

jQuery是一個相容多浏覽器的javascript庫，核心理念是write less,do more(寫得更少,做得更多)，對javascript進行了封裝，是的更加便捷的開發，并且在相容性方面十分優秀。

jQuery幫助文檔

http://www.php100.com/manual/jquery/

1、jQuery選擇器

id選擇器

标簽選擇器

class選擇器

組合選擇器

層級選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id='n1'></div>
    <div class='c1'>11</div>
    <div class='c1'>22</div>
    <a>啦啦啦</a><br>
    <span id='n2'> 卡卡卡 </span>
<script src = "jquery-3.2.1.js"></script>
<script>
    //id選擇器
    $("#n1").text('123') //$就代表jQuery，'#n1'代表找到id是n1的标簽 .text 表示修改内容
    //标簽選擇器
    $('div').text('xxx') //找到所有的div。把div的内容都變成xxx
    //class選擇器
    $('.c1').text('ooo') //'.c1'代表樣式名是c1的标簽，# 是id  . 是class
    //組合選擇器
    $('.c1, a, #n2').text('ok') //同時尋找多個标簽,用逗号隔開
</script>
</body>
</html>
           
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
<div id='n1'>
    <div>
        <div class='c1'>
            <span>
                <a>asdasd</a>
            </span>
        </div>
    </div>
</div>

<script src = "jquery-3.2.1.js"></script>
<script>
//層級選擇器
$('#n1 div .c1 span a').text('xxxxxxx') //嵌套的标簽的查詢，'#n1 '代表n1下的所有标簽,$('#n1 a')也能達到效果
</script>
</body>
</html>

2、jQuery其他選擇器和篩選器

3、其他選擇器

1、parent > child

在給定的父元素下比對所有的子元素

比對表單中所有的子級input元素。
HTML 代碼:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery 代碼:
$("form > input")

結果:
[ <input name="name" /> ]

2、prev + next

比對所有緊接在 prev 元素後的 next 元素

比對所有跟在 label 後面的 input 元素
HTML 代碼:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery 代碼:
$("label + input")

結果:
[ <input name="name" />, <input name="newsletter" /> ]

3、prev ~ siblings

比對 prev 元素之後的所有 siblings 元素

找到所有與表單同輩的 input 元素

HTML 代碼:
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery 代碼:
$("form ~ input")

結果:
[ <input name="none" /> ]

4、:first

擷取第一個元素

擷取比對的第一個元素

HTML 代碼:
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery 代碼:
$('li:first');

結果:
[ <li>list item 1</li> ]

5、:not(selector)

去除所有與給定選擇器比對的元素

在jQuery 1.3中，已經支援複雜選擇器了（例如:not(div a) 和 :not(div,a)）

查找所有未選中的 input 元素

HTML 代碼:
<input name="apple" />
<input name="flower" checked="checked" />

jQuery 代碼:
$("input:not(:checked)")

結果:
[ <input name="apple" /> ]

6、:even

比對所有索引值為偶數的元素，從 0 開始計數

查找表格的1、3、5...行（即索引值0、2、4...）

HTML 代碼:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代碼:
$("tr:even")

結果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]

7、:odd

比對所有索引值為奇數的元素，從 0 開始計數

查找表格的2、4、6行（即索引值1、3、5...）

HTML 代碼:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代碼:
$("tr:odd")

結果:
[ <tr><td>Value 1</td></tr> ]

8、:eq(index)

比對一個給定索引值的元素

查找第二行

HTML 代碼:
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代碼:
$("tr:eq(1)")

結果:
[ <tr><td>Value 1</td></tr> ]

9、:contains(text)

比對包含給定文本的元素

查找所有包含 "John" 的 div 元素

HTML 代碼:
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn

jQuery 代碼:
$("div:contains('John')")

結果:
[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

10、:first-child

比對第一個子元素

類似的 :first 比對第一個元素，而此選擇符将為每個父元素比對一個子元素

在每個 ul 中查找第一個 li

HTML 代碼:
<ul>
  <li>John</li>
  <li>Karl</li>
  <li>Brandon</li>
</ul>
<ul>
  <li>Glen</li>
  <li>Tane</li>
  <li>Ralph</li>
</ul>

jQuery 代碼:
$("ul li:first-child")

結果:
[ <li>John</li>, <li>Glen</li> ]

11、:input

比對所有 input, textarea, select 和 button 元素

查找所有的input元素，下面這些元素都會被比對到。

HTML 代碼:
<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" />
    <input type="reset" />

    <input type="submit" />
    <input type="text" />
    <select><option>Option</option></select>

    <textarea></textarea>
    <button>Button</button>

</form>

jQuery 代碼:
$(":input")

結果:
[ 
    <input type="button" value="Input Button"/>,
    <input type="checkbox" />,

    <input type="file" />,
    <input type="hidden" />,
    <input type="image" />,

    <input type="password" />,
    <input type="radio" />,
    <input type="reset" />,

    <input type="submit" />,
    <input type="text" />,
    <select><option>Option</option></select>,

    <textarea></textarea>,
    <button>Button</button>,
 ]

12、:text

比對所有的單行文本框

查找所有文本框

HTML 代碼:
<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="image" />
  <input type="file" />
  <input type="submit" />
  <input type="reset" />
  <input type="password" />
  <input type="button" />
  <select><option/></select>
  <textarea></textarea>
  <button></button>
</form>

jQuery 代碼:
$(":text")

[ <input type="text" /> ]

:password、:radio、:checkbox、:submit、:image、:reset、:button、:file 都類似

13、:checked

比對所有選中的被選中元素(複選框、單選框等，select中的option)，對于select元素來說，擷取選中推薦使用 :selected

查找所有選中的複選框元素

HTML 代碼:
<form>
  <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
  <input type="checkbox" name="newsletter" value="Weekly" />
  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>

jQuery 代碼:
$("input:checked")

結果:
[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]

14、:selected

比對所有選中的option元素

查找所有選中的選項元素

HTML 代碼:
<select>
  <option value="1">Flowers</option>
  <option value="2" selected="selected">Gardens</option>
  <option value="3">Trees</option>
</select>

jQuery 代碼:
$("select option:selected")

結果:
[ <option value="2" selected="selected">Gardens</option> ]

4、篩選器

1、eq(index|-index)

擷取目前鍊式操作中第N個jQuery對象，傳回jQuery對象，當參數大于等于0時為正向選取，比如0代表第一個，1代表第二個。當參數為負數時為反向選取，比如-1為倒數第一個，具體可以看以下示例。

類似的有get(index),不過get(index)傳回的是DOM對象。

參數index描述:
    擷取比對的第二個元素

HTML 代碼:
<p> This is just a test.</p> <p> So is this</p>

jQuery 代碼:
$("p").eq(1)

結果:
[ <p> So is this</p> ]

參數-index描述:
    擷取比對的第二個元素

HTML 代碼:
<p> This is just a test.</p> <p> So is this</p>

jQuery 代碼:
$("p").eq(-2)

結果:
[ <p> This is just a test.</p> ]

更多篩選器參考http://www.php100.com/manual/jquery/

2、children([expr])

取得一個包含比對的元素集合中每一個元素的所有子元素的元素集合。

可以通過可選的表達式來過濾所比對的子元素。注意：parents()将查找所有祖輩元素，而children()隻考慮子元素而不考慮所有後代元素。

隻在子元素裡找，不包括子元素的子元素

查找DIV中的每個子元素。

HTML 代碼:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代碼:
$("div").children()

結果:
[ <span>Hello Again</span> ]

在每個div中查找 .selected 的類。

HTML 代碼:
<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>

jQuery 代碼:
$("div").children(".selected")

結果:
[ <p class="selected">Hello Again</p> ]

3、find(expr|obj|ele)

搜尋所有與指定表達式比對的元素。這個函數是找出正在處理的元素的後代元素的好方法。

所有搜尋都依靠jQuery表達式來完成。這個表達式可以使用CSS1-3的選擇器文法來寫。

也包括子元素的子元素

從所有的段落開始，進一步搜尋下面的span元素。與$("p span")相同。

HTML 代碼:
<p><span>Hello</span>, how are you?</p>

jQuery 代碼:
$("p").find("span")

結果:
[ <span>Hello</span> ]

4、next([expr])

取得一個包含比對的元素集合中每一個元素緊鄰的後面同輩元素的元素集合。

這個函數隻傳回後面那個緊鄰的同輩元素，而不是後面所有的同輩元素（可以使用nextAll）。可以用一個可選的表達式進行篩選。

找到每個段落的後面緊鄰的同輩元素。

HTML 代碼:
<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

jQuery 代碼:
$("p").next()

結果:
[ <p>Hello Again</p>, <div><span>And Again</span></div> ]

找到每個段落的後面緊鄰的同輩元素中類名為selected的元素。

HTML 代碼:
<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>

jQuery 代碼:
$("p").next(".selected")

結果:
[ <p class="selected">Hello Again</p> ]

5、nextAll([expr])

查找目前元素之後所有的同輩元素。

可以用表達式過濾

給第一個div之後的所有元素加個類

HTML 代碼:
<div></div><div></div><div></div><div></div>

jQuery 代碼:
$("div:first").nextAll().addClass("after");

結果:

[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]

6、prev([expr])

取得一個包含比對的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合。

可以用一個可選的表達式進行篩選。隻有緊鄰的同輩元素會被比對到，而不是前面所有的同輩元素。

找到每個段落緊鄰的前一個同輩元素。

HTML 代碼:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代碼:
$("p").prev()

結果:
[ <div><span>Hello Again</span></div> ]


找到每個段落緊鄰的前一個同輩元素中類名為selected的元素。

HTML 代碼:
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

jQuery 代碼:
$("p").prev(".selected")

結果:
[ <p class="selected">Hello Again</p> ]

7、prevAll([expr])

查找目前元素之前所有的同輩元素

可以用表達式過濾。

給最後一個之前的所有div加上一個類

HTML 代碼:
<div></div><div></div><div></div><div></div>

jQuery 代碼:
$("div:last").prevAll().addClass("before");

結果:
[ <div class="before"></div>, <div class="before"></div>, <div class="before"></div> ]

8、siblings([expr])

取得一個包含比對的元素集合中每一個元素的所有唯一同輩元素的元素集合。可以用可選的表達式進行篩選。

除了自己的所有同輩元素

找到每個div的所有同輩元素。

HTML 代碼:
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代碼:
$("div").siblings()

結果:
[ <p>Hello</p>, <p>And Again</p> ]

找到每個div的所有同輩元素中帶有類名為selected的元素。

HTML 代碼:
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

jQuery 代碼:
$("div").siblings(".selected")

結果:
[ <p class="selected">Hello Again</p> ]

5、小例子，左邊菜單欄 

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title></title>
        <style>
                .the_left{
                        float: left;
                        width: %;
                        height:px;
                        background-color:antiquewhite;
                }

                .the_right{
                        float: left;
                        width: %;
                        height:px;
                        background-color:blue;
                }
                .the_title{
                        background-color:black;
                        color:white;
                        height:px;
                        line-height:px;
                }
                .the_body{

                }
                .hide{
                        display:none;
                }
        </style>
</head>

<body>
        <div>
                <div class="the_left">
                        <div class="item">
                                <div class="the_title" onclick="shou(this);">菜單1</div> <!--this是特殊的變量，表示把自己傳進去-->
                                <div class="the_body hide">
                                        <div>1.1</div>
                                        <div>1.2</div>
                                        <div>1.3</div>
                                </div>
                        </div>


                        <div class="item">
                                <div class="the_title"  onclick="shou(this);">菜單2</div>
                                <div class="the_body hide">
                                        <div>2.1</div>
                                        <div>2.2</div>
                                        <div>2.3</div>
                                </div>
                        </div>


                        <div class="item">
                                <div class="the_title"  onclick="shou(this);">菜單3</div>
                                <div class="the_body hide">
                                        <div>3.1</div>
                                        <div>3.2</div>
                                        <div>3.3</div>
                                </div>
                        </div>


                </div>
                <div class="the_right"></div>
        </div>
<script src = "jquery-3.2.1.js"></script>

<script>
        function shou(ths){
                //$(ths) ----> 擷取菜單1,2,3
                $(ths).next().removeClass('hide') //自己的下一個标簽的hide類移除
                $(ths).parent().siblings().find('.the_body').addClass('hide') //自己的父标簽的所有兄弟下的是body類的标簽，添加hide類
        }

</script>
</body>
</html>
Web開發 javascript jquery DOM
上一篇: web項目開發 之 前端規範 --- JavaScript編碼規範 聲明：本文轉自。原文位址：。感謝作者的分享！更多文章：w3好奇者 JavaScript編碼規範
下一篇: H.264句法和文法總結（十一）宏塊層預測句法

繼續閱讀