一、属性
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>