JQuery基本事件函数
2015-07-29 22:58
489 查看
1,click单击事件
2,blur失去光标事件,focus获得光标事件
3,JQuery.on()函数:为html元素绑定事件,如下代码:
点击div中的p元素,将调用function中的方法,即给当前的p段落添加类“colorRed”。该代码对不包含在div中的p元素或者任意其他非p元素无效。
4,animate()方法执行CSS属性集的自定义动画。该方法通过css样式将元素从一个状态改变为另一个状态,如下代码,将#box动画切换成高度为300px。
5,JQuery.html()方法:返回或设置被选元素的内容。注意获取或设置元素内容时,不包含自身的html标签,如下代码:
获取button的内容,弹出的内容为“改变 p 元素的内容”,而不是<button>...<button>,同理在设置元素内容时,也不改变内容原有的类或者属性,只是改变其中的内容。
(在项目中,因为疏忽了这一点,导致少嵌套了一层元素,比如说以上代码,加入说本意是想获得<button>标签的,但是没有得到,导致显示效果与设计给的切图不一致,浪费了很多时间,应该是获得button的parent的html,才能够得到<button>标签。
2,blur失去光标事件,focus获得光标事件
3,JQuery.on()函数:为html元素绑定事件,如下代码:
$("div").on("click","p",function(){$(this).addClass("colorRed")});
点击div中的p元素,将调用function中的方法,即给当前的p段落添加类“colorRed”。该代码对不包含在div中的p元素或者任意其他非p元素无效。
4,animate()方法执行CSS属性集的自定义动画。该方法通过css样式将元素从一个状态改变为另一个状态,如下代码,将#box动画切换成高度为300px。
$("#box").animate({height:"300px"});
5,JQuery.html()方法:返回或设置被选元素的内容。注意获取或设置元素内容时,不包含自身的html标签,如下代码:
<button id="u" class="btn1">改变 p 元素的内容</button> alert($("#u").html()); $("p").html("Hello <b>world!</b>");
获取button的内容,弹出的内容为“改变 p 元素的内容”,而不是<button>...<button>,同理在设置元素内容时,也不改变内容原有的类或者属性,只是改变其中的内容。
(在项目中,因为疏忽了这一点,导致少嵌套了一层元素,比如说以上代码,加入说本意是想获得<button>标签的,但是没有得到,导致显示效果与设计给的切图不一致,浪费了很多时间,应该是获得button的parent的html,才能够得到<button>标签。
相关文章推荐
- JQuery给元素动态增删类或特性
- javascript/jquery判断是否为undefined或是null!
- jQueryDOM操作
- jquery常用技巧及常用方法列表集合
- jQuery 2种扩展
- jQuery 学习笔记
- jquery插件编写(以折叠面板为例)
- 【Angular JS】正确调用JQuery与Angular JS脚本 - 修复Warning: Tired to load angular more than once
- 如何使用jQuery技术开发ios风格的页面导航菜单
- jquery中的each
- jquery插件大全
- jquery中attr和prop的区别
- JQuery.on()事件绑定
- 会用到的 多文件 flash上传 Web前端 推荐一个Jquery 插件 Uploadify
- 使用DOM的方法获取所有li元素,然后使用jQuery()构造函数把它封装为jQuery对象
- jquery轮播图
- jquery中attr和prop的区别
- jQuery学习之元素包装集
- 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息
- 利用jQuery扩展接口为jQuery框架定义了两个自定义函数,然后调用这两个函数