1 上章回顧與預(yù)習(xí)檢查

1.1上節(jié)檢查

id選擇器
class選擇器
jquery的引用

1.2預(yù)習(xí)檢查

2. 本節(jié)任務(wù)

屬性
CSS類
HTML代碼
文本
值
CSS

3. 本章內(nèi)容

屬性
CSS類
HTML代碼
文本
值
CSS

3.1.1 attr(name)

概述

取得第一個匹配元素的屬性值。通過這個方法可以方便地從第一個匹配元素中獲取一個屬性的值。如果元素沒有相應(yīng)屬性，則返回 undefined

示例

獲取下邊代碼中圖片的路徑

 html代碼
```
<img src='smile.jpg'>
```
JQuery代碼
```
$('img').attr('src');
```
結(jié)果
```
smile.jpg
```

3.1.2 attr(properties)

概述

將一個“名/值”形式的對象設(shè)置為所有匹配元素的屬性。
這是一種在所有匹配元素中批量設(shè)置很多屬性的最佳方式。
注意，如果你要設(shè)置對象的class屬性，你必須使用'className' 作為屬性名?；蛘吣憧梢灾苯邮褂?addClass( class ) 和 .removeClass( class ).

示例

給下邊代碼中圖片標(biāo)簽添加src和alt屬性

 html代碼
```
<img/>
```
JQuery代碼
```
$('img').attr({src:'smile.jpg',alt:'this is my lovely smile'});
```
結(jié)果
```
<img src='smile.jpg' alt='this is my lovely smile'/>
```

3.1.3 attr(key,value)

概述

為所有匹配的元素設(shè)置一個屬性值。

示例

將輸入框中的值改為java

 html代碼
```
<input type='text' value='Android'/>
```
JQuery代碼
```
$('input').attr("value","java");
```
結(jié)果
```
<input type='text' value='java'/>
```

3.1.4 removeAttr(name)

概述

從每一個匹配的元素中刪除一個屬性

示例

將輸入框中的value屬性刪除

 html代碼
```
<input type='text' value='Android'/>
```
JQuery代碼
```
$('input').removeAttr("value");
```
結(jié)果
```
<input type='text'/>
```

3.2.1 addClass(class)

概述

為每個匹配的元素添加指定的類名。

參數(shù)要求

一個或多個要添加到元素中的CSS類名，請用空格分開

示例

給輸入框添加name類

 html代碼
```
<input type='text' value='Android'/>
```
JQuery代碼
```
$('input').addClass('name')
```
結(jié)果
```
<input type='text' value='Android' class='name'/>
```

3.2.2 removeClass([class])

概述

從所有匹配的元素中刪除全部或者指定的類。

參數(shù)要求

一個或多個要刪除的CSS類名，請用空格分開

示例

將輸入框中的name類刪除掉

 html代碼
```
<input type='text' value='Android' class='name'/>
```
JQuery代碼
```
$('input').removeClass('name')
```
結(jié)果
```
<input type='text' value='Android'/>
```

3.2.3 toggleClass(class)

概述

切換類，如果存在就刪除一個類，如果不存在就添加一個類。

示例

為匹配的元素切換 'selected' 類

 html代碼
```
<span class='selected'>JQuery</span>
```
JQuery代碼
```
$('span').toggleClass('selected')
```
結(jié)果
```
<span>JQuery</span>
```

3.3.1 html()

概述

取得第一個匹配元素的html內(nèi)容。這個函數(shù)不能用于XML文檔。但可以用于XHTML文檔。

示例

獲取id為container的html元素

 html代碼
```
<div id="container">
    <ul>
        <li>JQuery</li>
        <li>Lucence</li>
    </ul>
</div>
```
JQuery代碼
```
$('#container').html()
```
結(jié)果
```
<ul>
    <li>JQuery</li>
    <li>Lucence</li>
</ul>
```

3.3.2 html(vale)

概述

設(shè)置每一個匹配元素的html內(nèi)容。這個函數(shù)不能用于XML文檔。但可以用于XHTML文檔。

示例

為id為containerd的div添加html為<input type='text'>元素

 html代碼
```
<div id="container">
    
</div>
```
JQuery代碼
```
$('#container').html("<input type='text'>")
```
結(jié)果
```
<ul>
    <input type='text'>
</ul>
```

3.4.1 text()

概述

取得所有匹配元素的內(nèi)容。結(jié)果是由所有匹配元素包含的文本內(nèi)容組合起來的文本。這個方法對HTML和XML文檔都有效。

示例

獲取id為containerd的div中的文本

 html代碼
```
<div id="container">
    <ul>
        <li>JQuery</li>
        <li>Lucence</li>
    </ul>
</div>
```
JQuery代碼
```
$('#container').text()；
```
結(jié)果
```
JQuery
Lucence
```

3.4.2 text(val)

概述

設(shè)置所有匹配元素的文本內(nèi)容。

示例

為取id為containerd的div中添加This is my div文本

 html代碼
```
<div id="container">
    
</div>
```
JQuery代碼
```
$('#container').text('This is my div')；
```
結(jié)果
```
<div id="container">
    This is my div
</div>
```

3.5.1 val()

概述

獲得第一個匹配元素的當(dāng)前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多選，將返回一個數(shù)組，其包含所選的值

示例

獲取文本框中的值

html代碼
```
<input type="text" value="java"/>
```
JQuery代碼
```
$('input').val()；
```
結(jié)果
```
java
```

3.5.2 val(value)

概述

設(shè)置每一個匹配元素的值。在 jQuery 1.2, 這也可以為select元件賦值

示例

設(shè)定文本框的值

html代碼
```
<input type="text"/>
```
JQuery代碼
```
$('input').val('java')；
```
結(jié)果
```
<input type="text" value='java'/>
```

3.6.1 css(name)

概述

訪問第一個匹配元素的樣式屬性

示例

取得第一個段落的color樣式屬性的值

html代碼
```
<p style="color: plum;">This is my p tag !</p>
```
JQuery代碼
```
$('p').css('color')
```
結(jié)果
```
rgb(221, 160, 221)
```

3.6.2 css(properties)

概述

把一個“名/值對”對象設(shè)置為所有匹配元素的樣式屬性

示例

將所有段落的字體顏色設(shè)為紅色并且背景為藍色

html代碼
```
<p style="color: plum;">This is my p tag !</p>
```
JQuery代碼
```
$("p").css({ "color": "#ff0011", "background": "blue" });
```
結(jié)果
```

```

3.6.3 css(name, value)

概述

在所有匹配的元素中，設(shè)置一個樣式屬性的值

示例

將所有段落字體設(shè)為紫色

html代碼
```
<p>This is my p tag !</p>
```
JQuery代碼
```
$("p").css("color","plum");
```
結(jié)果
```

```

3.6.4 offset()

概述

獲取匹配元素在當(dāng)前視口的相對偏移。返回的對象包含兩個整型屬性：top 和 left。此方法只對可見元素有效

示例

獲取id為container容器的偏移量

html代碼
```
<div id="container">
    <ul>
        <li>JQuery</li>
        <li>Lucence</li>
    </ul>
</div>
```
JQuery代碼
```
var container = $("#container");
var offset = container.offset();
console.log( "left: " + offset.left + ", top: " + offset.top );
```
結(jié)果
```
left: 8, top: 54.399993896484375
```

3.6.5 offset(coordinates)

概述

設(shè)置匹配元素相對于document對象的坐標(biāo)。.offset()方法可以讓我們重新設(shè)置元素的位置。這個元素的位置是相對于document對象的。如果對象原先的position樣式屬性是static的話，會被改成relative來實現(xiàn)重定位

示例

設(shè)置p標(biāo)簽的偏移量

html代碼
```
<p>This is my p tag !</p>
```
JQuery代碼
```
$("p").offset({ top: 100, left: 300 });
```
結(jié)果
```

```

3.6.6 position()

概述

獲取匹配元素相對父元素的偏移，返回的對象包含兩個整型屬性：top 和 left。為精確計算結(jié)果，請在補白、邊框和填充屬性上使用像素單位。此方法只對可見元素有效

示例

獲取ul標(biāo)簽的偏移量

html代碼
```
<div id="container">
    <ul>
        <li>JQuery</li>
        <li>Lucence</li>
    </ul>
</div>
```
JQuery代碼
```
var ul = $("ul");
var position = ul.position();
console.log( "left: " + position.left + ", top: " + position.top );
```
結(jié)果
```
left: 8, top: 38.399993896484375
```

3.6.7 height()

概述

取得第一個匹配元素當(dāng)前計算的高度值（px）。在 jQuery 1.2 以后可以用來獲取 window 和 document 的高

示例

獲取div的高度

html代碼
```
<div id="container">
    <ul>
        <li>JQuery</li>
        <li>Lucence</li>
    </ul>
</div>
```
JQuery代碼
```
$("#container").height();
```
結(jié)果
```
45
```

示例

獲取當(dāng)前瀏覽器窗口的高度

html代碼
```
```
JQuery代碼
```
$(window).height();
```
結(jié)果
```
375
```

示例

獲取當(dāng)前HTML文檔高度

html代碼
```
```
JQuery代碼
```
$(document).height();
```
結(jié)果
```
371
```

3.6.8 height(value)

概述

為每個匹配的元素設(shè)置CSS高度(hidth)屬性的值。如果沒有明確指定單位（如：em或%），默認(rèn)單位為px

示例

設(shè)置div的高度500px

html代碼
```
<div id="container">
    <ul>
        <li>JQuery</li>
        <li>Lucence</li>
    </ul>
</div>
```
JQuery代碼
```
$("#container").height(500);
```
結(jié)果
```
45
```

3.6.9 width

概述

取得第一個匹配元素當(dāng)前計算的寬度值（px）。在 jQuery 1.2 以后可以用來獲取 window 和 document 的寬

示例

獲取div的寬

html代碼
```
<div id="container">
    <ul>
        <li>JQuery</li>
        <li>Lucence</li>
    </ul>
</div>
```
JQuery代碼
```
$("#container").width();
```
結(jié)果
```
1520
```

示例

獲取當(dāng)前瀏覽器窗口的寬度

html代碼
```

```
JQuery代碼
```
$(window).width();
```
結(jié)果
```
1536
```

示例

獲取當(dāng)前HTML文檔寬度

html代碼
```

```
JQuery代碼
```
$(document).width();
```
結(jié)果
```
1536
```

3.6.10 width(value)

概述

為每個匹配的元素設(shè)置CSS寬度(width)屬性的值。默認(rèn)單位為px

示例

設(shè)置div的寬度為521px；

html代碼
```    
<div id="container">
    <ul>
        <li>JQuery</li>
        <li>Lucence</li>
    </ul>
</div>  
```
JQuery代碼
```
$("#container").width(521);
```
結(jié)果
```

```

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

day02

day02

1 上章回顧與預(yù)習(xí)檢查

1.1上節(jié)檢查

1.2預(yù)習(xí)檢查

2. 本節(jié)任務(wù)

3. 本章內(nèi)容

3.1.1 attr(name)

3.1.2 attr(properties)

3.1.3 attr(key,value)

3.1.4 removeAttr(name)

3.2.1 addClass(class)

3.2.2 removeClass([class])

3.2.3 toggleClass(class)

3.3.1 html()

3.3.2 html(vale)

3.4.1 text()

3.4.2 text(val)

3.5.1 val()

3.5.2 val(value)

3.6.1 css(name)

3.6.2 css(properties)

3.6.3 css(name, value)

3.6.4 offset()

3.6.5 offset(coordinates)

3.6.6 position()

3.6.7 height()

3.6.8 height(value)

3.6.9 width

3.6.10 width(value)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

day02

1 上章回顧與預(yù)習(xí)檢查

1.1上節(jié)檢查

1.2預(yù)習(xí)檢查

2. 本節(jié)任務(wù)

3. 本章內(nèi)容

3.1.1 attr(name)

3.1.2 attr(properties)

3.1.3 attr(key,value)

3.1.4 removeAttr(name)

3.2.1 addClass(class)

3.2.2 removeClass([class])

3.2.3 toggleClass(class)

3.3.1 html()

3.3.2 html(vale)

3.4.1 text()

3.4.2 text(val)

3.5.1 val()

3.5.2 val(value)

3.6.1 css(name)

3.6.2 css(properties)

3.6.3 css(name, value)

3.6.4 offset()

3.6.5 offset(coordinates)

3.6.6 position()

3.6.7 height()

3.6.8 height(value)

3.6.9 width

3.6.10 width(value)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av