jquery方法速查


css操作

方法 作用 示例
css() 设置或返回样式属性 1.9*
点击查看
$(this).css("href"); // 获得属性
$(this).css("href", "http://.."); // 设置属性值
$("p").css({ "color": "#ff0011", "background": "blue" }); // 设置多个属性

// 每次点击div宽高逐渐增加
 $("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      }, 
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });
  });
								
cssHooks() 检查判断,为css属性添加游览器前缀
点击查看
$(function ($) { 
    //首先检查jquery版本是否支持 cssHooks 
    if (!$.cssHooks){
        //如果不支持输出错误提醒
        throw(new Error("该功能需要jQuery版本大于或等于1.4.3"));
    }
    
    // 封装在Dom文档加载完毕的事件里, 要再这个时候写入cssHooks,避免该cssHooks在其他地方被重写
    $(function(){
        $.cssHooks.height = {
            get: function( elem, computed, extra ) {
                // 处理获取该CSS属性
            },set: function( elem, value ) {
                // 处理设置CSS属性
                alert('执行处理');
            }
        };
        $('body').css('height','100%');
    });
})(jQuery)
								
offset() 设置或返回被选元素相对于文档的偏移坐标
返回格式{top:0,left:0}
点击查看
// 返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。

var offset = $("p:last").offset(); // 获取偏移 offset.left , offset.top

$("p:last").offset({ top: 10, left: 30 }); // 设置偏移
								
position() 获取匹配元素相对父元素的偏移
点击查看
// 返回的对象包含两个整型属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

<p>Hello</p><p>2nd Paragraph</p>
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>

								
scrollTop() 获取匹配元素相对滚动条顶部的偏移
设定垂直滚动条值
点击查看
// 此方法对可见和隐藏元素均有效
$("p:first").scrollTop(); // 获取第一个p元素 顶部滚动 , 结果 0

$("div.demo").scrollTop(300); // 设置相对滚动条顶部的偏移
								
scrollLeft() 获取匹配元素相对滚动条左侧的偏移
设定水平滚动条值
点击查看
$("p:first").scrollLeft(); // 0
$("div.demo").scrollLeft(300); // 设置相对滚动条左侧的偏移
								
height() 设置或返回被选元素的高度, 内容
不包含 padding、border 或 margin
点击查看
// 该方法不包含 padding、border 或 margin。
									
$("p").height(); // 获得高度
$("p").height(20);// 设置内容高度


// 以 10 像素的幅度增加 p 元素的高度
$("button").click(function(){
    $("p").height(function(n,c){ // n 返回集合中元素的 index 位置, c 返回被选元素的当前高度
    return c+10;
    });
  });
								
width() 设置或返回被选元素的宽度, 内容
不包含 padding、border 或 margin
点击查看
$("p").width(); // 获取
$("p").width(20); // 设置

// 以 10 像素的幅度增加 p 元素的宽度
 $("button").click(function(){
    $("p").width(function(n,c){ // n 返回集合中元素的 index 位置, c 返回被选元素的当前宽度
    return c+10;
    });
  });
								
innerHeight() 获得元素的内部高度, 内容+填充
包含 padding,但不包含 border 和 margin
点击查看
$("div").innerHeight(); // 只能获得
								
innerWidth() 获得元素的内部宽度, 内容+填充
包含 padding,但不包含 border 和 margin
点击查看
$("div").innerWidth(); // 仅获得
								
outerHeight() 元素的外部高度, 内容+填充+边框 包含 padding 和 border
如需包含 margin,请使用 outerHeight(true)
点击查看
$("div").outerHeight() // 获得元素完整高度
$("div").outerHeight(true); // 包含外边距, 获得元素占用文档流的高度
								
outerWidth() 元素的外部宽度, 内容+填充+边框 包含 padding 和 border
如需包含 margin,请使用 outerWidth(true)
点击查看
$("div").outerWidth(); // 元素完整宽度
$("div").outerWidth(true); // 元素文档流占用宽度
								

属性

方法 作用 示例
attr() 设置或返回被选元素的属性值
点击查看
$("img").attr("src"); // 获取元素属性
$("img").attr("src","test.jpg"); // 设置属性
$("img").attr({ src: "test.jpg", alt: "Test Image" }); // 设置多少个属性

$("img").attr("title", function() { return this.src }); // 把src属性的值设置为title属性的值。
								
removeAttr() 删除一个属性
点击查看
$("img").removeAttr("src");
								
prop() 设置或返回被选元素的[布尔]属性值1.6+
checked(选中), disabled(禁用), selected(下拉列表预先选中)
点击查看
jQuery 1.6及以后版本中,请使用prop()函数来设置或获取checked、selected、disabled等属性。

$("input[type='checkbox']").prop("checked"); // 获得checked属性值, 选中复选框返回true,没选中返回false

// 禁用页面上的所有复选框
$("input[type='checkbox']").prop({
  disabled: true
});

$("input[type='checkbox']").prop("disabled", true); // 设置禁用属性

// 通过函数来设置所有页面上的复选框被选中
$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val;
});
								
removeProp() 用来删除由.prop()方法设置的属性1.6+
点击查看
var $para = $("p");
$para.prop("luggageCode", 1234); // 添加属性
$para.removeProp("luggageCode"); // 移除属性
								
data() 添加或获取标签的`data-*`自定义属性
点击查看
$("div").data("blah");  // undefined
$("div").data("blah", "hello");  // data-blah设置为hello
$("div").data("blah");  // hello

// 存取名/值对数据
$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first  //16;
$("div").data("test").last  //pizza!;

// 在HTML5规范中div中读取预存的data-[key]值
<div data-test="this is test" ></div>
$("div").data("test"); //this is test;
								
removeData() 移除data()设置数据或标签`data-*`
点击查看
$("div").removeData("blah");
								
addClass() 添加一个或多个类, 空格分割
点击查看
$("p").addClass("selected");
$("p").addClass("selected1 selected2");

// 给li加上不同的class
$('ul li:last').addClass(function() {
  return 'item-' + $(this).index();
});
								
removeClass() 删除全部或指定
点击查看
$("p").removeClass("selected"); // 删除指定
$("p").removeClass(); // 删除全部

// 删除最后一个元素上与前面重复的class
$('li:last').removeClass(function() {
    return $(this).prev().attr('class');
});
								
toggleClass() 如果存在(不存在)就删除(添加)一个类
点击查看
$("p").toggleClass("selected"); // 为匹配的元素切换 'selected' 类

// 每点击三下加上一次 'highlight' 类
var count = 0;
  $("p").click(function(){
      $(this).toggleClass("highlight", count++ % 3 == 0);
  });
  
// 根据父元素来设置class属性
$('div.foo').toggleClass(function() {
  if ($(this).parent().is('.bar') {
    return 'happy';
  } else {
    return 'sad';
  }
});								
html() 获取元素的html内容
点击查看
$('p').html(); // 返回p元素的内容
$("p").html("Hello world!"); // 设置所有 p 元素的内容

// 使用函数来设置所有匹配元素的内容
$("p").html(function(n){
    return "这个 p 元素的 index 是:" + n;
    });
								
text() 获得元素的文本内容, 不含html标签
点击查看
$('p').text(); // 返回p元素的文本内容
$("p").text("Hello world!"); // 设置所有 p 元素的文本内容

//使用函数来设置所有匹配元素的文本内容
$("p").text(function(n){
    return "这个 p 元素的 index 是:" + n;
    });
								
val() 获得元素的当前值, 例下拉选中的值
点击查看
// 在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选,将返回一个数组,其包含所选的值。

$("input").val(); // 获取文本框中的值
$("input").val("hello world!"); // 设定文本框的值

设定文本框的值
$('input:text.items').val(function() {
  return this.value + ' ' + this.className;
});

// html 
<select id="single">
  <option>Single</option>
  <option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
  <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
<input type="radio" value="radio2"/> radio2

// 设定一个select和一个多选的select的值
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);