jQuery心得5--jQuery深入了解串讲1

1.CSS-DOM 操作

获取和设置元素的样式属性: css()。

获取和设置元素透明度: opacity 属性(css 的一个属性)。

获取和设置元素高度, 宽度: height(), width(). 在设置值时, 若只传递数字, 则默认单位是 px. 如需要使用其他单位则需传递一个字符串, 例如 $(“p:first”).height(“2em”)。

获取元素在当前视窗中的相对位移: offset(). 其返回对象包含了两个属性: top, left. 该方法只对可见元素有效。

2. jQuery 中的事件

加载 DOM

在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法.

合成事件

hover(): 模拟光标悬停事件. 当光标移动到元素上时, 会触发指定的第一个函数, 当光标移出这个元素时, 会触发指定的第二个函数.

toggle(): 用于模拟鼠标连续单击事件. 第一次单击元素, 触发指定的第一个函数, 当再一次单击同一个元素时, 则触发指定的第二个函数, 如果有更多个函数, 则依次触发, 直到最后一个.

toggle() 的另一个作用: 切换元素的可见状态.

事件冒泡

事件会按照 DOM 层次结构像水泡一样不断向上只止顶端。

解决: 在事件处理函数中返回 false, 会对事件停止冒泡. 还可以停止元素的默认行为.

事件对象的属性

事件对象: 当触发事件时, 事件对象就被创建了. 在程序中使用事件只需要为函数添加一个参数. 该事件对象只有事件处理函数才能访问到. 事件处理函数执行完毕后, 事件对象就被销毁了.

event.pageX, event.pageY: 获取到光标相对于页面的 x, y 坐标.

移除事件

移除某按钮上的所有

click 事件: $(“btn”).unbind(“click”)

移除某按钮上的所有事件: $(“btn”).unbind();

one(): 该方法可以为元素绑定处理函数. 当处理函数触发一次后, 立即被删除. 即在每个对象上, 事件处理函数只会被执行一次.

3. jQuery 中的动画:

隐藏和显示

hide(): 在 HTML 文档中, 为一个元素调用 hide() 方法会将该元素的 display 样式改为 none. 代码功能同 css(“display”, “none”);

show(): 将元素的 display 样式改为先前的显示状态.

以上两个方法在不带任何参数的情况下, 作用是立即隐藏或显示匹配的元素, 不会有任何动画. 可以通过制定速度参数使元素动起来.以上两个方法会同时减少(增大)内容的高度, 宽度和不透明度.

fadeIn(), fadeOut(): 只改变元素的透明度. fadeOut() 会在指定的一段时间内降低元素的不透明度, 直到元素完全消失. fadeIn() 则相反.

slideDown(), slideUp(): 只会改变元素的高度. 如果一个元素的 display 属性为 none, 当调用 slideDown() 方法时, 这个元素将由上至下延伸显示. slideUp() 方法正好相反, 元素由下至上缩短隐藏.

toggle(): 切换元素的可见状态: 如果元素时可见的, 则切换为隐藏; 如果元素时隐藏的, 则切换为可见的.

slideToggle(): 通过高度变化来切换匹配元素的可见性.

fadeTo(): 把不透明度以渐近的方式调整到指定的值(0 – 1 之间).

转载于:https://www.cnblogs.com/yangkai-cn/archive/2013/03/19/4016917.html

jQuery心得5--jQuery深入了解串讲1相关推荐

《JQuery 能干点啥~》第7讲层级选择器_2
在开讲之前,我要说下我这套教程的讲课思路~ 以免大家茫然~ 在第一节的时候,我就说过我的这套教程会讲的比较慢,如果大家急于求成的话不建议看这套教程之所以慢的原因为,我的讲课顺序和一般的相关书籍 ...
【狂神说】前端进阶串讲笔记总结
[狂神说]视频学习--前端串讲这个系列使得我能在 Html + css + js 的基础上,实现对高级框架和工具的知识过渡,特此积累总结. 参考笔记:https://www.kuangstudy.c ...
jQuery源码-jQuery.fn.each jQuery.each
先上例子,下面代码的作用是:对每个选中的div元素,都给它们添加一个red类 $('div').each(function(index, elem){$(this).addClass('red'); ...
第四十四课：jQuery UI和jQuery easy UI
jQuery UI是jQuery官方提供的功能效果和UI样式.作为官方出的东西,它一直没有被人们看重,一是它没有datagrid,tree等UI库必备的东西,二是它修改太过频繁,体积庞大.其实它所有以 ...
jQuery学习之jQuery Ajax用法详解
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...
从零开始学习jQuery (三) 管理jQuery包装集
本系列文章导航从零开始学习jQuery (一) 开天辟地入门篇从零开始学习jQuery (二) 万能的选择器从零开始学习jQuery (三) 管理jQuery包装集从零开始学习jQuery ( ...
跟我学jQuery(二) 初识jQuery
跟我学jQuery教程目录: 跟我学jQuery(一) 前言跟我学jQuery(二) 初识jQuery 跟我学jQuery(三) 无所不能的选择器1 跟我学jQuery(四) ...
从零开始学习jQuery (三) 管理jQuery包装集【转】
一.摘要在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着学习如何管理jQuery包装集, 比如添加,删除,切片等. 二.前言本系 ...
jQuery动画（jQuery预制动画，jQuery自定义动画，jQuery停止动画和延迟动画）
目录 jQuery预制动画显示隐藏动画上拉下拉动画(高度动画) 淡入淡出动画(透明度动画) jQuery自定义动画 jQuery停止动画和延迟动画等 jQuery预制动画 jquery的预制动画 ...
1.jQuery基础语法 2.jQuery选择器、操作页面文档元素 3.jqueryDOM操作 4.jqueryCSS操作 5.Jquery事件 6.Jquery动画...
这周的学习让我初步了解到JQuery作为js库的封装的伟大性.Write less Do more 才是我们真正应该做到的! 1.jQuery基础语法 · 链式编程 $("#div1&quo ...

jQuery心得5--jQuery深入了解串讲1

jQuery心得5--jQuery深入了解串讲1相关推荐

最新文章

热门文章