前端笔记 jQuery 属性操作 - attr() 方法 hover触摸变换 position hover控制display等任意属性

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 1px 5px rgba(34,25,25,0.4);-moz-box-shadow: 0 1px 5px rgba(34,25,25,0.4);-webkit-box-shadow: 0 1px 5px rgba(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	定义过渡效果何时开始。