常用实例方法
attr
// 获取指定节点的值(传递一个参数)、设置指定节点的值(传递两个参数) // 在获取属性节点的值时, 无论找到多少个DOM元素, 都只会返回第一个找到的DOM元素 // 设置属性节点的时候会设置所有找到的DOM元素 console.log($('div').attr('name')); $('div').attr('attrName', 'attrValue'); // 删除指定的属性节点 // 会删除所有找到的 $('div').removeAttr('attrName');
prop
// prop使用方法与attr基本相同,但是使用attr会导致行为不一致的情况,所以当属性值是true/false,或是selected/checked/disabled时一个使用prop,否则使用attr console.log($('div').prop('name')); $('div').prop('attrName', 'attrValue'); $('div').removeProp('attrName');
class
// 添加类 $('div').addClass('class1, class2, ...'); // 删除类 $('div').remove('class1, class2, ...'); // 切换类 $('div').toggleClass('class1, class2, ...');
文本内容相关操作
// html // 获取内容、设置内容,获取和设置的内容以html标签的形式呈现 console.log($('div').html()); $('div').html('<span>Hello World!</span>'); // text // 获取内容、设置内容,获取和设置的内容以纯字符串的形式呈现 console.log($('div').text()); $('div').text('<span>Hello World!</span>'); // val // 获取和设置input组件以及textarea的内容 console.log($('input').val()); $('textarea').val('Hello World!');
css
// 设置元素的css样式 // 逐个设置 $("div").css("width", "100px"); $("div").css("height", "100px"); $("div").css("background", "yellow"); // 链式设置 $("div").css("width", "100px").css("height", "100px").css("background", "blue"); // 批量设置 $("div").css({ width: "100px", height: "100px", background: "orangered" });
width / height
// 获取、设置元素内容的宽高 $('div').width() $('div').width(200); $('div').height() $('div').height(200);
offset
// 获取、设置元素相对于body的距离 $('div').offset().left $('div').offset().top; $('div').offset({ left: 200, top: 200 });
position
// 获取元素相对于定位流的距离,不能设置 $('div').position().left $('div').position().top
scrollTop / scrolleft
// 获取设置元素的偏移量 $('div').scrollTop() $('div').scrollTop(1000);
show / hide
// 显示动画 、 隐藏动画 // 方法可以接受两个参数,第一个参数是动画执行时长,第二个参数是执行完毕后的回调函