前端笔记 jQuery 属性操作

jQuery 属性操作 - attr()方法

 

实例

改变图像的 width 属性：

$("button").click(function(){

  $("img").attr("width","180");

});

 

更改 iframe的src属性

$("#m2").click(function(){
    $("#mm").attr("src","模拟2.html");
})

 

常用属性 ：

 float:right;浮动靠右

display:none;隐藏属性

position 属性中

absolute（一般用于隐藏属性，实现重叠遮挡）

1.CSS :hover 选择器

实例

选择鼠标指针浮动在其上的元素，并设置其样式：

a:hover

{

background-color:yellow;

}

 

 

 

2.cursor 属性

a{text-decoration:none;cursor:pointer;outline:none;color:#666;}
a:hover{text-decoration:none;cursor:pointer;outline:none;color:#1777C6;}

设置元素的文本修饰（none去下划线）  不同的光标（变手指）   边框

 

border: 1px dashed#ddd;

设置边框粗细，样式，颜色

 

 

 

3. text-align:center 设置文本或img标签等一些内联对象（或与之类似的元素）的居中。

   margin:0 auto 设置块元素（或与之类似的元素）的居中。

 

 

4.position属性

absolute（一般用于隐藏属性，实现重叠遮挡）

生成绝对定位的元素，相对于 static定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right"以及 "bottom"属性进行规定。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right"以及 "bottom"属性进行规定。

relative

生成相对定位的元素，相对于其正常位置进行定位。

因此，"left:20"会向元素的 LEFT 位置添加 20 像素。

static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right或者 z-index 声明）。

inherit

规定应该从父元素继承 position属性的值。

 

5.：hover控制display等任意属性

#cme-personal-header .navbar.li:hover.nav-nemu{display:block;}
#cme-personal-header .navbar.li .nav-nemu{display:none;position:absolute;top: 50px;left:0;z-index:999;padding: 10px 17px;box-shadow:0 1px5pxrgba(34,25,25,0.4);-moz-box-shadow:0 1px5pxrgba(34,25,25,0.4);-webkit-box-shadow:0 1px5pxrgba(34,25,25,0.4);-webkit-transition:top 1s ease,left 1s ease;-moz-transition:top 1s ease,left 1s ease;-o-transition:top 1s ease,left 1s ease;-ms-transition:top 1s ease,left 1s ease; z-index:99; background: #fff;}

 

被控制的属性必须是触发元素的子元素

 

6.transition属性

实例

把鼠标指针放到 div元素上，其宽度会从 100px逐渐变为 300px：

div

{

width:100px;

transition: width 2s;

-moz-transition: width 2s; /* Firefox 4 */

-webkit-transition: width 2s; /* Safari 和 Chrome */

-o-transition: width 2s; /* Opera */

}

 

定义和用法

transition 属性是一个简写属性，用于设置四个过渡属性：

· transition-property

· transition-duration

· transition-timing-function

· transition-delay

注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。

 

语法

transition: property duration timing-function delay;

值

描述

transition-property

规定设置过渡效果的 CSS 属性的名称。

transition-duration

规定完成过渡效果需要多少秒或毫秒。

transition-timing-function

规定速度效果的速度曲线。

transition-delay

定义过渡效果何时开始。