jQuery(三)
jquery链式调用
jquery对象的方法会在执行完后返回这个jquery对象,所有jquery对象的方法可以连起来写:
$('#div1') // id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent() //跳到ul的父元素,也就是id为div1的元素
.siblings() //跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast'); //高度实际高度变换到零来隐藏ul元素
jquery动画
通过animate方法可以设置元素某属性值上的动画,可以设置一个或多个属性值,动画执行完成后会执行一个函数。
$('#div1').animate({
width:300,
height:300
},1000,swing,function(){
alert('done!');
});
参数可以写成数字表达式:
$('#div1').animate({
width:'+=100',
height:300
},1000,swing,function(){
alert('done!');
});
尺寸相关、滚动事件
1、获取和设置元素的尺寸
width()、height() 获取元素width和height
innerWidth()、innerHeight() 包括padding的width和height
outerWidth()、outerHeight() 包括padding和border的width和height
outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height
2、获取元素相对页面的绝对位置
offse()
3、获取可视区高度
$(window).height();
4、获取页面高度
$(document).height();
5、获取页面滚动距离
$(document).scrollTop();
$(document).scrollLeft();
6、页面滚动事件
$(window).scroll(function(){
......
})
jquery事件
事件函数列表:
blur() 元素失去焦点
focus() 元素获得焦点
change() 表单元素的值发生变化
click() 鼠标单击
dblclick() 鼠标双击
mouseover() 鼠标进入(进入子元素也触发)
mouseout() 鼠标离开(离开子元素也触发)
mouseenter() 鼠标进入(进入子元素不触发)
mouseleave() 鼠标离开(离开子元素不触发)
hover() 同时为mouseenter和mouseleave事件指定处理函数
mouseup() 松开鼠标
mousedown() 按下鼠标
mousemove() 鼠标在元素内部移动
keydown() 按下键盘
keypress() 按下键盘
keyup() 松开键盘
load() 元素加载完毕
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
select() 用户选中文本框中的内容
submit() 用户递交表单
toggle() 根据鼠标点击的次数,依次运行多个函数
unload() 用户离开页面
绑定事件的其他方式
$(function(){
$('#div1').bind('mouseover click', function(event) {
alert($(this).html());
});
});
取消绑定事件
$(function(){
$('#div1').bind('mouseover click', function(event) {
alert($(this).html()); // $(this).unbind();
$(this).unbind('mouseover'); });
});
jQuery(三)的更多相关文章
- 从零开始学习jQuery (三) 管理jQuery包装集
本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...
- 一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选
还记得之前我使用JavaScript来实现复选框的全选和全不选效果吗?如果读者初次翻阅本文,可记得看看教你一天玩转JavaScript(七)——使用JavaScript完成复选框的全选和全不选的效果! ...
- jquery 三种开始写法
在 jquery 代码中使用 $(document).ready()时,位于其中的所有代码都会在 DOM 加载后立即执行 第一种(推荐)$(document).ready(function(){ ...
- JQuery(三)——操作HTML和CSS内容
前边我们学习过JS通过DOM来操作HTML(详看DOM(一)——HTML DOM ),这篇博客我们来看一下JQuery是如何方便的对HTML以及CSS进行各种操作呢?顺便两者之间相互比较一下,看其差别 ...
- jQuery(三) javascript跨域问题(JSONP解决)
加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...
- jQuery三——筛选方法、事件
一.jquery常用筛选方法 以下为jquery的常用筛选方法: 代码示例如下: <!DOCTYPE html> <html lang="en"> < ...
- 你不需要jQuery(三):新AJAX方法fetch()
XMLHttpRequest来完成ajax有些老而过时了. fetch()能让我们完成类似 XMLHttpRequest (XHR) 提供的ajax功能.它们之间的主要区别是,Fetch API 使用 ...
- jQuery三种事件绑定方式.bind(),.live(),.delegate()
.bind(), .live(), 和 .delegate()之间的区别并不明显.但是理解它们的不同之处有助于写出更简洁的代码,并防止我们的交互程序中出现没有预料到的bug. 基础 DOM树 首先,图 ...
- 小谷的战斗Jquery(三)--水平和垂直菜单
日薪的例子似乎有点低,今天做多.行,这种实现是一个简单的菜单,Web项目中,有两个共同的菜单:纵向和横向.说到从垂直,看原代码. html代码实现最主要的菜单与子菜单 <span style=& ...
- jQuery(三)、属性、CSS
jQuery设置了很多为标签进行属性的操作,比如添加.删除. 一 .属性 1 attr(name | properties | [key, value | fn]) 设置或返回被选择的属性值. 参数: ...
随机推荐
- Python核心编程笔记 第二章
2.1 程序输出:print语句 可以使用print语句显示变量的字符串表示,或者仅用变量名查看该变量的原始值. 2.2 程序输出和raw_input()内建函数 ...
- junit测试
/**ssm框架测试service**/ import com.alibaba.fastjson.JSON; import com.raycloud.waimai.customer.center.po ...
- rsync + sersync 实现实时数据同步
一.环境: 主机1:youzhuan-bak centos 7.2 主机2:youzhuan-online centos 7.2 二.部署过程: youzhuan-bak : [root@ ...
- MySQL保留字不能作为字段名使用
在设计MySQL字段的时候,无意中使用InOut这个名称作为字段名称,结果前端提交后就是没有写入数据库!但后端没有任何提示,跟踪mySQL日志,也没有留下痕迹,反复查,不得其解. 后来实在没有办法情况 ...
- java平台学习笔记
java程序从编写源码开始到程序执行一共有三个阶段,编写期,编译期,运行期. 通常,人们都希望自己的程序更快(不仅仅是执行更快,也有编写更快),因此java在不断更新. java源码先通过javac编 ...
- easyui 菜单树搜索
//树形菜单搜索方法 function searchTree(treeObj,parentNode,searchCon){ var children; for(var ...
- Python规范
1.命名 Django文件命名 小写+下划线 类:驼峰 2.edit 执行环境 work direction 到当前项目目录 3.类要加注释 4.去数据库找数据时需要try捕获异常,防止数据库连接断掉 ...
- scrapy发送邮件
scrapy发送邮件 应用场景:在爬虫关闭或者爬虫空闲时可以通过发送邮件的提醒. 通过twisted的非阻塞IO实现,可以直接写在spider中,也可以写在中间件或者扩展中,看你具体的需求. 在网上找 ...
- 详解MariaDB数据库的事务
1.什么是事务 数据库事务:(database transaction): 事务是由一组SQL语句组成的逻辑处理单元,一组事务中的SQL语句要不全部执行成功功:如果其中某一条执行失败,则这组SQL语句 ...
- Kali Linux的vi编辑器/vim编辑器使用方法
转载声明:本文为转载文章 原文地址:https://www.52host.cn/blog/kali-linux-vi-editor/ Kali Linux系统的vi编辑器/vim编辑器的使用和Cent ...