day02

1 上章回顾与预习检查

1.1上节检查

  • id选择器
  • class选择器
  • jquery的引用

1.2预习检查

  • 无

2. 本节任务

  1. 属性
  2. CSS类
  3. HTML代码
  4. 文本
  5. 值
  6. CSS

3. 本章内容

  1. 属性
  2. CSS类
  3. HTML代码
  4. 文本
  5. 值
  6. CSS

3.1.1 attr(name)

  • 概述

取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined

  • 示例

获取下边代码中图片的路径

 html代码
```
<img src='smile.jpg'>
```
JQuery代码
```
$('img').attr('src');
```
结果
```
smile.jpg
```

3.1.2 attr(properties)

  • 概述

将一个“名/值”形式的对象设置为所有匹配元素的属性。
这是一种在所有匹配元素中批量设置很多属性的最佳方式。
注意，如果你要设置对象的class属性，你必须使用'className' 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ).

  • 示例

给下边代码中图片标签添加src和alt属性

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

3.1.3 attr(key,value)

  • 概述

为所有匹配的元素设置一个属性值。

  • 示例

将输入框中的值改为java

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

3.1.4 removeAttr(name)

  • 概述

从每一个匹配的元素中删除一个属性

  • 示例

将输入框中的value属性删除

 html代码
```
<input type='text' value='Android'/>
```
JQuery代码
```
$('input').removeAttr("value");
```
结果
```
<input type='text'/>
```

3.2.1 addClass(class)

  • 概述

为每个匹配的元素添加指定的类名。

  • 参数要求

一个或多个要添加到元素中的CSS类名，请用空格分开

  • 示例

给输入框添加name类

 html代码
```
<input type='text' value='Android'/>
```
JQuery代码
```
$('input').addClass('name')
```
结果
```
<input type='text' value='Android' class='name'/>
```

3.2.2 removeClass([class])

  • 概述

从所有匹配的元素中删除全部或者指定的类。

  • 参数要求

一个或多个要删除的CSS类名，请用空格分开

  • 示例

将输入框中的name类删除掉

 html代码
```
<input type='text' value='Android' class='name'/>
```
JQuery代码
```
$('input').removeClass('name')
```
结果
```
<input type='text' value='Android'/>
```

3.2.3 toggleClass(class)

  • 概述

切换类，如果存在就删除一个类，如果不存在就添加一个类。

  • 示例

为匹配的元素切换 'selected' 类

 html代码
```
<span class='selected'>JQuery</span>
```
JQuery代码
```
$('span').toggleClass('selected')
```
结果
```
<span>JQuery</span>
```

3.3.1 html()

  • 概述

取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

  • 示例

获取id为container的html元素

 html代码
```
<div id="container">
    <ul>
        <li>JQuery</li>
        <li>Lucence</li>
    </ul>
</div>
```
JQuery代码
```
$('#container').html()
```
结果
```
<ul>
    <li>JQuery</li>
    <li>Lucence</li>
</ul>
```

3.3.2 html(vale)

  • 概述

设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

  • 示例

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

 html代码
```
<div id="container">
    
</div>
```
JQuery代码
```
$('#container').html("<input type='text'>")
```
结果
```
<ul>
    <input type='text'>
</ul>
```

3.4.1 text()

  • 概述

取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

  • 示例

获取id为containerd的div中的文本

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

3.4.2 text(val)

  • 概述

设置所有匹配元素的文本内容。

  • 示例

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

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

3.5.1 val()

  • 概述

获得第一个匹配元素的当前值。在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值

  • 示例

获取文本框中的值

html代码
```
<input type="text" value="java"/>
```
JQuery代码
```
$('input').val()；
```
结果
```
java
```

3.5.2 val(value)

  • 概述

设置每一个匹配元素的值。在 jQuery 1.2, 这也可以为select元件赋值

  • 示例

设定文本框的值

html代码
```
<input type="text"/>
```
JQuery代码
```
$('input').val('java')；
```
结果
```
<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')
```
结果
```
rgb(221, 160, 221)
```

3.6.2 css(properties)

  • 概述

把一个“名/值对”对象设置为所有匹配元素的样式属性

  • 示例

将所有段落的字体颜色设为红色并且背景为蓝色

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

```

3.6.3 css(name, value)

  • 概述

在所有匹配的元素中，设置一个样式属性的值

  • 示例

将所有段落字体设为紫色

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

```

3.6.4 offset()

  • 概述

获取匹配元素在当前视口的相对偏移。返回的对象包含两个整型属性：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 );
```
结果
```
left: 8, top: 54.399993896484375
```

3.6.5 offset(coordinates)

  • 概述

设置匹配元素相对于document对象的坐标。.offset()方法可以让我们重新设置元素的位置。这个元素的位置是相对于document对象的。如果对象原先的position样式属性是static的话，会被改成relative来实现重定位

  • 示例

设置p标签的偏移量

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

```

3.6.6 position()

  • 概述

获取匹配元素相对父元素的偏移，返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效

  • 示例

获取ul标签的偏移量

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 );
```
结果
```
left: 8, top: 38.399993896484375
```

3.6.7 height()

  • 概述

取得第一个匹配元素当前计算的高度值（px）。在 jQuery 1.2 以后可以用来获取 window 和 document 的高

  • 示例

获取div的高度

html代码
```
<div id="container">
    <ul>
        <li>JQuery</li>
        <li>Lucence</li>
    </ul>
</div>
```
JQuery代码
```
$("#container").height();
```
结果
```
45
```
  • 示例

获取当前浏览器窗口的高度

html代码
```
```
JQuery代码
```
$(window).height();
```
结果
```
375
```
  • 示例

获取当前HTML文档高度

html代码
```
```
JQuery代码
```
$(document).height();
```
结果
```
371
```

3.6.8 height(value)

  • 概述

为每个匹配的元素设置CSS高度(hidth)属性的值。如果没有明确指定单位（如：em或%），默认单位为px

  • 示例

设置div的高度500px

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

3.6.9 width

  • 概述

取得第一个匹配元素当前计算的宽度值（px）。在 jQuery 1.2 以后可以用来获取 window 和 document 的宽

  • 示例

获取div的宽

html代码
```
<div id="container">
    <ul>
        <li>JQuery</li>
        <li>Lucence</li>
    </ul>
</div>
```
JQuery代码
```
$("#container").width();
```
结果
```
1520
```
  • 示例

获取当前浏览器窗口的宽度

html代码
```

```
JQuery代码
```
$(window).width();
```
结果
```
1536
```
  • 示例

获取当前HTML文档宽度

html代码
```

```
JQuery代码
```
$(document).width();
```
结果
```
1536
```

3.6.10 width(value)

  • 概述

为每个匹配的元素设置CSS宽度(width)属性的值。默认单位为px

  • 示例

设置div的宽度为521px；

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

```
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,324评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,303评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,192评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,555评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,569评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,566评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,927评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,583评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,827评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,365评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,941评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2赞 342

推荐阅读更多精彩内容