一, 操作元素的宽和高
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("事件名", 事件处理函数);
来源: https://www.cnblogs.com/lvonve/p/9289334.html