jQuery 属性+CSS

一、属性

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>
时间: 2024-10-11 23:16:59

jQuery 属性+CSS的相关文章

Jquery属性&amp;css 大全

1.attr(name|properties|key,value|fn)  设置或返回被选元素的属性值. 示例 返回文档中所有图像的src属性值. jQuery 代码: $("img").attr("src"); 为所有图像设置src和alt属性. jQuery 代码: $("img").attr({ src: "test.jpg", alt: "Test Image" }); 为所有图像设置src属性.

使用jquery获取css的top和left属性

使用jquery获取css的top和left属性 因为left和top也都是普通的css属性所以可以使用如下代码来获取 var left = $('#test').css('left'); var top = $('#test').css('top'); 当然这样获取的是一个字符串,如果们想直接取得对象的left和top的像素值,可以通过position方法来获取 var left = $('#test').position().left; var top = $('#test').positi

jquery知识 属性 css

jquery基础知识 属性 css <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性 css</title> <script type="text/javascript" src="../js/jquery-1.7.1.min.js"></sc

JQuery文档操作方法跟JQuery属性操作方法跟JQuery CSS操作函数

JQuery文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法                            描述 addClass()                    向匹配的元素添加指定的类名. after()                           在匹配的元素之后插入内容. append()                       向匹配的元素内部追加内容. appendTo()                 

js、jquery、css属性及出错集合

*)注意使用jquery设置css的语法 css("propertyname","value");#单个时时逗号 css({"propertyname":"value","propertyname":"value",...});#多个时时大括号,中间是冒号 *)jquery和js的方法是不同的 比如获取和设置textarea的内容 参考链接:https://blog.csdn.net/g

jquery的css详解(二)

jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ style: function( elem, name, value, extra ) { // Don't set styles on text and comment nodes if ( !elem || elem.nodeType === 3 || elem.nodeType === 8 ||

JQuery:JQuery操作CSS类

JQuery:CSS类jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法.我们将学习下面这些: addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性 1.jQuery addClass() 方法实例1:下面的例子

jquery的css详解(一)

通过阅读源码可以发现css是jq的实例方法.而在内部调用jq的工具方法access来实现的,对该方法不了解的朋友请点击 -> jquery工具方法access详解 在access的回调中做了一个判断,value不等于undefined则调用jq的工具方法style,否则调用jq的工具方法css 可以看出,style是设置,css是获取.也就是说要搞懂jq的实例方法css,必须先要搞懂jq的工具方法style和css jQuery.fn.extend({ css: function( name,

JQuery 之CSS操作

JQuery 之CSS操作 设置 <p> 元素的颜色: 将所有段落的颜色设为红色 $(".btn1").click(function(){ $("p").css("color","red"); }); 设置多个 CSS 属性/值对 $(selector).css({property:value, property:value, ...}) 把"名/值对"对象设置为所有匹配元素的样式属性. 这是一