jq 杂
1.获取属性的方法
attr();
$("img").attr("src");//获得img标签的src的属性值 $("img").attr("src","test.jpg");//给img标签的src属性赋值。 $("img").attr({ src: "test.jpg", alt: "Test Image" });//给img标签的多个属性赋值 $("img").attr("title", function() { return this.src });//可以写函数
removeAttr();
$("img").removeAttr("src"); //移除img的src属性
2.对css的class的操作方法
addClass();
$("p").addClass("selected");//给p标签添加selected添加class值
$("p").addClass("selected1 selected2");//给p标签添加多个class值得方法
removeClass():
$("p").removeClass("selected");//删除selected的class值 $("p").removeClass();//删除所有的class值 $('li:last').removeClass(function() {//删除这个元素跟上一个元素的class共有的值 return $(this).prev().attr('class'); });
toggleClass();如果有这个class就去删除,如果没有就去添加
$("p").toggleClass("selected");//为匹配的元素切换 'selected' 类 $('div.foo').toggleClass(function() {//根据父元素来设置class属性 if ($(this).parent().is('.bar') { return 'happy'; } else { return 'sad'; } });
3.跟文本和HTML节点有关的
html();
$('p').html();//获取p标签下的所有内容,包括文本和元素节点 $("p").html("Hello <b>world</b>!");//设置所有 p 元素的内容 $("p").html(function(n){ return "这个 p 元素的 index 是:" + n; });
text();
$('p').text();//返回p元素的文本内容。 $("p").text("Hello world!");//设置所有 p 元素的文本内容
val();
$("input").val();//获取文本框中的值 $("input").val("hello world!");//设定文本框的值
4.css
css();
$("p").css("color");//获取p标签的color属性值 $("p").css("color","red");//将所有段落字体设为红色 $("p").css({ color: "#ff0011", background: "blue" });//将所有段落的字体颜色设为红色并且背景为蓝色。
5.位置
offset():获取匹配元素在页面最左端的相对偏移。返回的对象包含两个整型属性:top 和 left。此方法只对可见元素有效。
console.log($("#test").offset());//{left:100,top:100}
position(): 获取元素相对父元素(相对定位的元素)的偏移;此方法只对可见元素有效。
console.log($("#posi").position());//获取跟最近的父级(定位为relative)的偏移量
scrollTop();获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。
var p = $("p:first"); $("p:last").text( "scrollTop:" + p.scrollTop() );//获取第一段相对滚动条顶部的偏移 $("div.demo").scrollTop(300);//设置相对滚动条顶部的偏移
scrollLeft();
var p = $("p:first"); $("p:last").text( "scrollLeft:" + p.scrollLeft() );//获取第一段相对滚动条左侧的偏移 $("div.demo").scrollLeft(300);//设置相对滚动条左侧的偏移
6.尺寸
height();
$("p").height();//获取p元素的高 $("p").height(20);//把所有段落的高设为 20:
width();
$("p").width();//p元素的宽 $("p").width(20);//设置p元素的宽
innerHeight();获取第一个匹配元素内部区域高度(包括padding、不包括border,margin)。此方法对可见和隐藏元素均有效。
var p = $("p:first"); $("p:last").text( "innerHeight:" + p.innerHeight() );//获取第一个p元素的内部区域高度。
innerWidth():获取第一个匹配元素内部区域宽度(包括padding、不包括border,margin)。此方法对可见和隐藏元素均有效。
var p = $("p:first"); $("p:last").text( "innerWidth:" + p.innerWidth() );//获取第一个p元素的宽度
outerHeight(): 获取匹配元素的外部高度(包括padding,border 但是不包括margin)此方法对可见和隐藏元素均有效。如果 里面参数是 true的话,最终值是包括margin的
var p = $("p:first"); $("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );//第一个就是没有margin的值,第二个表示有margin的值
outerWidth(): 获取匹配元素的外部高度(包括padding,border 但是不包括margin)此方法对可见和隐藏元素均有效。如果 里面参数是 true的话,最终值是包括margin的
var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth() + " , outerWidth(true):" + p.outerWidth(true) );//第一个就是没有margin的值,第二个表示有margin的值