首页 » JavaScript » jQuery

jQuery

效果 - 操作CSS - 操作DOM - 操作DOM - .prop()与.attr()溯源 -

jQuery基础

选中多个类:

$(".class1, .class2").each(function(){});

效果

方法说明
.toggle()显示或隐藏元素。如果元素隐藏则显示它,如果元素显示则隐藏它。
.hide()隐藏元素。
.show()显示元素。

操作CSS

方法说明
.css()获取或修改css的值。如.css("color", "red");
.addClass()/.removeClass()为元素添加或删除css类
.toggleClass()打开或关闭元素的css类
.hasClass()判断元素是否包含css类
.height()/.width()获取元素的高度和宽度。另有.innerX()/.outerX()获取内/外高宽。
.scrollLeft()/.scrollTop()距离滚动条的左边距或上边距。可用来实现“回到顶部”。
.offset()/.position()

操作DOM

方法说明
遍历DOM
.find()向下搜索子节点
.parent()/.parents()向上查找父节点
.next()/.prev()前一或后一兄弟节点。
元素内部insert
.append()/.appendTo()
.prepend()/.prependTo()
.html()/.text()
元素外部insert
.after()/.insertAfter()
.before()/.insertBefore()
复制元素
.clone()复制所有子元素(deep copy)
删除元素
.remove()
.empty()
.detach()
.unwrap()

.parent()/.parents()

.parent([selector])
.parents([selector])

以下代码,我们希望随用户输入的bookid来动态生成下载链接:

<table>
    <tr><th><a href="#">Download Url</a></th><th><input type="text" name="bookid" class="bookid" /></th></tr>
</table>
Download Url

下面是两种实现方式。如果是向上回溯的层次很多,.parents()要方便很多。

$(this).parents("tr").find("a").attr("href", "?bookid=" + $(this).val());
$(this).parent().parent().find("a").attr("href", "?bookid=" + $(this).val());

事件

事件有几个大分类:浏览器事件、键盘事件、鼠标事件、表单事件等。

浏览器事件。.error(), .resize(), .scroll()等。

文档加载事件。.load(), .ready(), .unload()等。

鼠标事件。.click()(单击)、dblclick()(双击)、.hover()(悬浮)等。

绑定事件。.bind(), .on()等。

.on()绑定事件

.on()在jQuery 1.7加入,是一次绑定多个事件的推荐方法。

.on(events [, selector] [, data], handler(eventObject));
.on(events-map [, selector] [, data]);

.on()加入后,.bind()/.delegate()/.live()方法都应该会过渡到.on()。可以用.off()解绑定,只运行一次的事件可以用.one()。events可以是标准浏览器事件或自定义事件(可由.trigger()触发)。

操作元素

.prop()/.attr()

.prop()和.attr()的区别一言难尽。我们先通过一个简单的例子理解attributes和properties的区别。

checkbox是否被选中。HTML的属性(attributes)设置:

<input type="checkbox" checked="checked" />

JavaScript的属性设置(properties):

elem.checked = true | false;

自定义的properties只出现在JavaScript中,而不影响HTML,例如:

document.body.website = "berlinix";
console.log(document.body.website);     // berlinix

document.body.myname = function() { console.log(this.nodeName); }
document.body.myname();                 // BODY

查看自定义的properties。可以通过控制台看出多了website, myname属性。

var keylist = [];
for(var key in document.body) { keylist.push(key); }
console.log(keylist.join("\t"));

DOM提供一系列的方法访问HTML的attributes,包括:.hasAttribute(), .getAttribute(), .setAttribute(), .removeAttribute()。

  • DOM的properties与HTML的attributes一致,例如元素id。
  • DOM的properties与HTML的attributes不一致,例如a标签的href。
  • DOM的properties与HTML的attributes等同,但不完全一样,例如checkbox的checked。

a标签的href。HTML的a标签attributes是#,但DOM的properties是一个完整的URL。

<a id="tothispage" href="#"></a>

console.log(document.getElementById("tothispage").getAttribute("href"));    // #
console.log(document.getElementById("tothispage").href);    // full URL

checkbox的checked。HTML的checked attributes是一个字符串checked,DOM的properties是一个布尔值。

</a><input type="checkbox" id="tothischeckbox" checked="checked" />

console.log(document.getElementById("tothischeckbox").getAttribute("checked")); // string: checked
console.log(document.getElementById("tothischeckbox").checked);     // boolean: true

DOM的properties会同步HTML的attributes,但相反的事却不会发生:

<input id="tothisinput" type="text" value="attr" />

var input = document.getElementById("tothisinput");

input.setAttribute("value", "new value");
console.log(input.value);                   // show: new value

input.value = "new val-2";
console.log(input.getAttribute("value"));   // show: new value, not change to new val-2

参考:javascript.info

回头说.prop()/.attr()。在jQuery 1.6之前,.attr()承担获取attributes/properties的职责,因此潜在一些问题,因为一些properties是没有对应的attributes,或两者不一致。jQuery 1.6后引入了.prop()。jQuery手册提到,IE9之前,通过.prop()设置非简单类型的值(数字、字符串、布尔值)会引起内存泄漏。可用.data()代替.prop()。

判断checked的方式(前3种是推荐做法):

if(elem.checked) {}
if($(elem).prop("checked")) {}
if($(elem).is(":checked")) {}

if($(elem).attr("checked") == "checked") {}

分享

0