码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 属性+CSS

时间:2016-09-26 12:25:35      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:

一、属性

1.attr(name|properties|key,value|fn)(设置或返回被选元素的属性值)

$("img").attr("src") //获取属性值

$("img").attr("src","mumu.png") //数字属性值

$("img").attr({src:"mumu.png",alt:"无法加载"}) //修改多个属性值

 

2.removeAttr(name)(从每一个匹配的元素中删除一个属性)

Html代码:

<img src="mumu.png">

jQuery 代码:

$("img").removeAttr("src")

结果:

<img>

 

 

3.prop(name|properties|key,value|fn)(获取在匹配的元素集中的第一个元素的属性值)

jQuery 代码:

$("input[type=‘checkbox‘]").prop("checked")

 

 

4.removePrope(name)(用来删除由.prop()方法设置的属性集)

Html代码:

jQuery 代码:

结果:

 

5.addClass(class|fn)(为每个匹配的元素添加指定的类名)

Html代码:

<p>mumu</p>

jQuery 代码:

$("p").addClass("selected")

结果:

<p class="selected">mumu</p>

 

 

6.removeClass([class|fn])(从所有匹配的元素中删除全部或者指定的类。)

$("p").removeClass("selected") //删除一个class

$("p").removeClass() //删除所有的class

$(‘li:last‘).removeClass(function() {return $(this).prev().attr(‘class‘); }); //回调函数

 

 

7.toggleClass(class|fn[,sw])(如果存在(不存在)就删除(添加)一个类)

$("p").toggleClass("selected")

//回调函数:根据父元素来设置class属性

$("div.foo").toggleClass(funtion(){

if($(this).parent().is(‘.bar‘)){

return ‘happy‘;

}else{return ‘sad‘;}

});

 

 

8.html([val|fn])(取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档)

$("p").html() //返回p元素的内容

$("p").html("mumu") //设置p元素的内容

$("p").html(funtion(){retun "这个p元素的index是:"+n;}) //回调函数

 

 

9.rext([val|fn])(取得所有匹配元素的内容)

$("p").text() //返回p元素的文本内容

$("p").text("mumulan") //设置p元素的文本内容

$("p").text(function(n){return "这个 p 元素的 index 是:" + n;}); //回调函数

 

 

10.val([val|fn|arr])(获得匹配元素的当前值)

$("input").val() //获取文本框的值

$("input").val("mumu") //设置文本框的值

$(‘input:text.items‘).val(function() {return this.value + ‘ ‘ + this.className;}); //回调函数

 

二、CSS

1.css(name|pro|[,val|fn])(访问匹配元素的样式属性)

$("p").css("color") //获取p元素的color样式属性的值

$("p").css("color","red") //设置p元素color样式属性的值为red

$(p).css(color:"#f00",background:"#ff0") //多个设置

 

//参数name,回调函数:逐渐增加div的大小

$("div").click(function() {
  $(this).css({
    width: function(index, value) {
      return parseFloat(value) * 1.2;
    },
    height: function(index, value) {
      return parseFloat(value) * 1.2;
    }
  });
});

 

 

2.jQuery.cssHooks(直接向 jQuery 中添加钩子,用于覆盖设置或获取特定 CSS 属性时的方法,目的是为了标准化 CSS 属性名或创建自定义属性)

(详情查看jQuery API)

 

3.offset([coordinates])(获取匹配元素在当前视口的相对偏移)

无参数:获取第二段的偏移

Html代码:

<p>mumu</p><p>2nd bigbang</p>

jQuery 代码:

var p = $("p:last");
var offset = p.offset();
p.html("left:"+offset.left+",rop:"+offset.top)

结果:

<p>Hello</p><p>left: 0, top: 35</p>

 

 

参数coordinates:设置第二段的偏移

Html代码:

<p>mumu</p><p>2nd bigbang</p>

jQuery 代码:

$("p:last").offset({top:10,lest:30})

 

4.position()(获取匹配元素相对父元素的偏移)

Html代码:

<p>mumu</p><p>2nd bigbang</p>

 

jQuery 代码:

var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );

结果:

<p>Hello</p><p>left: 15, top: 15</p>

 

 

5.scrollTop([val])(获取匹配元素相对滚动条顶部的偏移)

无参数:获取第一段相对滚动条顶部的偏移

Html代码:

<p>mumu</p><p>2nd bigbang</p>

jQuery 代码:

var p = $("p:first");
$("p:last").html("scrollTop:"+p.scrollTop());

结果:

<p>Hello</p><p>scrollTop: 0</p>

 

参数val设置相对滚动条顶部的偏移

jQuery 代码:

$("div.demo").scrollTop(300);

 

 

6.scrollLeft([varl])(获取匹配元素相对滚动条左侧的偏移)

无参数:获取第一段相对滚动条左侧的偏移

Html代码:

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:

var p = $("p:first");
$("p:last").html("scrollLeft:"+p.scrollLeft())

结果:

<p>Hello</p><p>scrollLeft: 0</p>

 

参数val:设置相对滚动条左侧的偏移

jQuery 代码:

$("div.demo").scrollLeft(300)

 

 

7.height([val|fn])(取得匹配元素当前计算的高度值(px)

无参数:获取第一段的高

jQuery 代码:

$("p").height();

参数val:把所有段落的高设为 20:

jQuery 代码:

$("p").height(20)

 

参数function(index,heghti):以 10 像素的幅度增加 元素的高度

jQuery 代码:

$("button").click(function(){
    $("p").hetght(function(n,c){
        Return c+10;
    });
});

 

 

8.width([val|fn])(取得第一个匹配元素当前计算的宽度值(px)

无参数:获取第一段的高

jQuery 代码:

$("p").width();

参数val:把所有段落的高设为 20:

jQuery 代码:

$("p").width(20)

参数function(index,heghti):以 10 像素的幅度增加 元素的高度

jQuery 代码:

$("button").click(function(){
  $("p").width(function(n,c){
    Return c+10;
  });
});

 

 

9.innerHeight()(获取第一个匹配元素内部区域高度(包括补白、不包括边框))

获取第一段落内部区域高度。

Html代码:

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:

var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );

结果:

<p>Hello</p><p>innerHeight: 16</p>

 

 

10.innerWidht()(获取第一个匹配元素内部区域宽度(包括补白、不包括边框))

获取第一段落内部区域宽度。

Html代码:

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:

var p = $("p:first");
$("p:last").text( "innerWidth:" + p.innerWidth() );

结果:

<p>Hello</p><p>innerWidth: 40</p>

 

 

11.outerHeight([options])(获取第一个匹配元素外部高度(默认包括补白和边框))

(设置为 true 时,计算边距在内。)

获取第一段落外部高度

Html代码:

<p>Hello</p><p>2nd Paragraph</p>

 

jQuery 代码:

var p = $("p:first");
$("p:last").text("outerHeight:"+p.outerHeight+",outerHeight(true)"+outerHeight(true));

结果:

<p>Hello</p><p>outerHeight: 35 , outerHeight(true):55</p>

 

 

12.outerWidth([options])(获取第一个匹配元素外部宽度(默认包括补白和边框))

(设置为 true 时,计算边距在内)

获取第一段落外部高度

Html代码:

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:

var p = $("p:first");
$("p:last").text("outerWidth:"+p.outerWidth+",outerWidth(true)"+outerWidth(true));

结果:

<p>Hello</p><p>outerWidth: 65 , outerWidth(true):85</p>

 

 

jQuery 属性+CSS

标签:

原文地址:http://www.cnblogs.com/lzh739887959/p/5908352.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!