[Web 前端] 027 jQuery 相关尺寸与事件绑定
1. 相关尺寸
1.1 获取元素相对于文档的偏移量
var pos = $('#small').offset();
console.log(pos.left, pos.top);
1.2 获取当前元素相对于父级元素的偏移量
var l = $('#small').position().left;
var t = $('#small').position().top;
console.log(l, t);
1.3 获取文档滚动距离
var st = $(document).scrollTop();
var sl = $(document).scrollLeft();
1.4 获取元素的宽度和高度
var w = $('#big').width();
var h = $('#big').height();
1.5 设置元素的宽度和高度
$('#big').width(400);
$('#big').height(400);
console.log(w,h);
1.6 获取可视区域的宽度和高度
var cw = $(window).width();
var ch = $(window).height();
1.7 获取文档的宽度和高度
var cw = $(document).width();
var ch = $(document).height();
console.log(cw,ch);
2. 关于事件
2.1事件绑定
2.1.1 基本绑定
$(element).click(function(){})
$(element).dblclick(function(){})
// 加载完毕事件
$(document).ready(function(){})
$(function(){})
2.1.2 方法绑定
$(element).bind('click', function(){}) // 绑定事件的方法一
$(element).unbind(); // 解除事件绑定
// 绑定事件的方法二
$(".item4").on("click", function(){alert("单击事件(on)又被触发了!");});
此为听“北京图灵学院”的“Web 公开课”所作笔记
[Web 前端] 027 jQuery 相关尺寸与事件绑定的更多相关文章
- Python web前端 09 jQuery
Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...
- 前端09 /jQuery标签操作、事件、补充
前端09 /jQuery标签操作.事件.补充 目录 前端09 /jQuery标签操作.事件.补充 1.标签内文本操作 1.1 html标签元素中的所有内容 1.2 text 标签元素的文本内容 2.文 ...
- Web 前端性能优化相关内容解析
Web 前端性能优化相关内容,来源于<Google官方网页载入速度检测工具PageSpeed Insights 使用教程>一文中PageSpeed Insights 的相关说明.大家可以对 ...
- Web 前端性能优化相关内容解析[转]
Web 前端性能优化相关内容,来源于<Google官方网页载入速度检测工具PageSpeed Insights 使用教程>一文中PageSpeed Insights 的相关说明.大家可以对 ...
- 前端08 /jQuery标签操作、事件
前端08 /jQuery标签操作.事件 目录 前端08 /jQuery标签操作.事件 1.标签内文本操作 1.1 html标签元素中的所有内容 1.2 text 标签元素的文本内容 2.文档标签操作 ...
- [Web 前端] 028 jQuery 事件
目录 jQuery 的事件 1. 事件绑定 1.1 事件的获取 1.2 基本绑定 1.3 动态绑定 2. 事件触发 2.1 触发的写法 2.2 常用的鼠标事件 3. 事件冒泡和默认行为 3.1 事件冒 ...
- [Web 前端] 026 jQuery 初探
目录 1. jQuery 简介 2. jQuery 的简单操作 2.1 jQuery 选择器 2.1.1 简介 2.1.2 基础选择器 2.2 过滤获取 2.3 父子关系获取 3. jQuery 元素 ...
- Python之Web前端Dom, jQuery
Python之Web前端: Dom jQuery ###Dom 一. 什么是Dom? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它 ...
- web前端一览&jQuery
web前端一览 html:裸体 css:好看的衣服 //通常基于bootstrap魔改 JavaScript:动起来 //通常基于JQuery魔改 jQuer ...
随机推荐
- 对Git仓库里的.idea进行研究------引用
1.什么是.idea文件夹 因为IntelliJ IDEA是JetBrains最早推出的IDE(JetBrains一开始叫IntelliJ),因此使用IDEA作为配置文件夹的名称.按照这个SO问题里最 ...
- Java面试题系列(七)锁的原理
redis实现分布式锁 synchronized 和 reentrantlock的区别,偏向锁/轻量级锁/重量级锁的原理,能否从偏向锁直接升级成重量级锁
- 【BZOJ2521】 [Shoi2010]最小生成树
Description Secsa最近对最小生成树问题特别感兴趣.他已经知道如果要去求出一个n个点.m条边的无向图的最小生成树有一个Krustal算法和另一个Prim的算法.另外,他还知道,某一个图可 ...
- AIDL在android系统中的作用
AIDL,Android Interface definition language的缩写,它是一种android内部进程通信接口的描述语言,通过它我们可以定义进程间的通信接口.最近看了下AIDL在A ...
- selenium+键盘鼠标
一.简单操作 1.点击(鼠标左键)页面按钮:click() 2.请空输入框:clear() 3.输入字符串:send_keys() 二.模拟键盘 模拟键盘的操作需要先导入键盘模块:from selen ...
- [LeetCode]-DataBase-Department Top Three Salaries
The Employee table holds all employees. Every employee has an Id, and there is also a column for the ...
- Spring Data JPA学习笔记
下面先来介绍一下JPA中一些常用的查询操作: //And --- 等价于 SQL 中的 and 关键字,比如 findByHeightAndSex(int height,char sex): publ ...
- nested exception is java.lang.OutOfMemoryError: PermGen space
原因: 持久带内存溢出. 方法:在启动的catalina.sh 里加上这个配置,增加持久带的大小. JAVA_OPTS="XX:PermSize=64M-XX:MaxPermSize=128 ...
- 多层全连接神经网络实现minist手写数字分类
import torch import numpy as np import torch.nn as nn from torch.autograd import Variable import tor ...
- App测试工具选择
一.功能测试自动化 a) 轻量接口自动化测试: jmeter, b) APP UI层面的自动化 android:UI Automator Viewer,Android Junit,Instrument ...