从零开始学 Web 之 jQuery（五）操作元素其他属性，为元素绑定事件
从零开始学 Web 之 jQuery（五）操作元素其他属性，为元素绑定事件
Daotin
发布于 2018-08-31 11:17:10
发布于 2018-08-31 11:17:10
一、操作元素的宽和高
1、方法一
元素.css("width");
元素.css("height");最后得到的是字符串类型的，比如 200px。
如果我们在设置为原来宽高2倍的时候，就要先把获取的宽高转换成数字类型，再乘以2，这样操作比较麻烦，有没有简单的方法呢？
2、方法二
元素.width(属性值或者数字);
元素.height(属性值或者数字);1、jQuery中用以上方式可以获取和设置元素的宽高。 2、当没有参数的时候是获取元素的宽高属性。 3、当设置参数为
200 或者 200px的时候是设置元素的宽高为 200px。 4、以上方法不仅可以获取行内式元素的宽高，也可以获取嵌入式写法元素的宽高。
示例：
<script>
$(function () {
$("#btn").click(function () {
$("#dv").width( $("#dv").width()*2);
$("#dv").height( $("#dv").height()*2);
});
});
</script>二、操纵元素的left和top
1、方法一
元素.css("left");
元素.css("left");2、方法二
// 元素的left和top获取
元素.offset();
// 元素的left和top设置
元素.offset({"left":值, "top",值};1、
元素.offset();返回值是一个对象。（比如：{top: 200, left: 200}） 2、这里的 left 是包括：left 的值和 margin-left 值之和。 3、这里的 top 是包括：top 的值和 margin-top 值之和。 4、在设置的时候，left 和 top 的值是数字，没有 px。
示例：
$(function () {
$("#btn").click(function () { $("#dv").offset({"left":$("#dv").offset().left*2, "top":$("#dv").offset().top*2});
});
});三、操纵元素卷曲出去的值
语法：
// 获取元素向左卷曲出去的距离
元素.scrollLeft();
// 获取元素向上卷曲出去的距离
元素.scrollTop();PS：没有 scrollWidth() 和 scrollHeight()
元素.scroll(function() {}); // 元素卷曲事件，元素在向上或向左卷曲的时候触发的事件。四、为元素绑定事件
1、方式一：（事件名）
语法：
元素.事件名(事件处理函数);示例：
// 绑定鼠标进入，离开，点击事件
$("#btn").mouseenter(function () {
console.log("mouseenter");
});
$("#btn").mouseleave(function () {
console.log("mouseleave");
});
$("#btn").click(function () {
console.log("click");
});
// 链式编程
$("#btn").mouseenter(function () {
console.log("mouseenter");
}).mouseleave(function () {
console.log("mouseleave");
}).click(function () {
console.log("click");
});2、方法二：（bind方法）
语法：
元素.bind("事件名", 事件处理函数);示例：
$("#btn").bind("mouseenter", function () {
console.log("bind:mouseenter");
});
$("#btn").bind("mouseleave", function () {
console.log("bind:mouseleave");
});
$("#btn").bind("click", function () {
console.log("bind:click");
});
// 链式编程
$("#btn").bind("mouseenter", function () {
console.log("bind:mouseenter");
}).bind("mouseleave", function () {
console.log("bind:mouseleave");
}).bind("click", function () {
console.log("bind:click");
});3、方法三：（bind对象）
语法：
元素.bind({"事件名1":事件处理函数1, "事件名2":事件处理函数2,...});示例：
$("#btn").bind({
"mouseenter": function () {
console.log("bind-obj:mouseenter");
}, "mouseleave": function () {
console.log("bind-obj:mouseleave");
}, "click": function () {
console.log("bind-obj:click");
}
});使用 bind 对象的方式，只需要一个bind，可以绑定多个事件。
4、方式四：（delegate方法）
语法：（父元素替子元素绑定事件）
父元素.delegate("子元素"，"事件名"，事件处理函数);示例：
// 为div下p标签绑定点击事件
$("#dv").delegate("p", "click", function () {
//....
});5、方式五：（on方法）
我发现 delegate 方法内部调用的是 on 方法，那么 on 方法也可以绑定事件（注意：on 的参数顺序和 delegate 相反）。
语法：
父元素.on("事件名", "子元素", 事件处理函数);示例：
// 为div下p标签绑定点击事件
$("#dv").on("click", "p", function () {
//....
});PS：on 其实不仅可以给子元素绑定事件，还可以给自己绑定事件，这时候只需要把子元素的参数去掉就好了。 语法：
元素.on("事件名", 事件处理函数);
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-07-10 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录