1.2.1 標簽選擇器 · 多多貓插件開發指南

## 定位獲取標簽內容 ```html <html> <head> <title>我是標題</title> </head> <body> <div>測試文本1</div> <p>測試文本2</p> <p>測試文本3</p> </body> </html> ``` 上面的示例有四段文本內容，那么我們來獲取這四段文本內容，用css選擇器的方式首先是 `title`標簽內容，可以這么寫 ```javascript //定位到title標簽 $('title') //獲取文本 $('title').text() ``` 通過上面的示例我們知道了獲取文本可以使用`text()`方法，`div`標簽內容同上，可以這么寫 ```javascript //定位到div標簽 $('div') //獲取文本 $('div').text() ``` 接下來我們獲取`p`標簽內容，然后有人就說了，這里有兩個`p`標簽，如何取呢？可以這么寫 ```javascript //定位到p標簽 $('p') //獲取第一個p的文本 $('p').eq(0).text() //獲取第二個p的文本 $('p').eq(1).text() ``` 接下來我們再看一個例子 ```html <html> <head> <title>我是標題</title> </head> <body> <div> <p>測試文本1</p> </div> <span> <p>測試文本2</p> </span> </body> </html> ``` 這時候我們如何來分別獲取這兩個`p`標簽的內容呢？我們第一章說過，網頁是標簽的層級結構，一層層包含，那么我們可以這么寫： ```javascript //獲取第一個p標簽內容 $('div p').text() //獲取第二個p標簽內容 $('span p').text() ``` 這時候可能有人問了，為什么不寫成下面這樣 ```javascript //獲取第一個p標簽內容 $('html body div p').text() //獲取第二個p標簽內容 $('html body span p').text() ``` 那是因為html和body都是唯一的，不可能有多個，所以我們即使不寫上它們也不會影響我們的定位<br> **通過上面的示例我們也發現了，我們根本不需要知道所有標簽的含義，只需要知道我們感興趣的內容在哪個位置即可**<br>