jQuery 属性+CSS

Posted 2020-08-10

一、属性

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 像素的幅度增加 p 元素的高度

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 像素的幅度增加 p 元素的高度

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>