`
xiuying
  • 浏览: 541725 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

JQuery in action 学习笔记

    博客分类:
  • JS
阅读更多
Jquery 方法

1、初始化加载 方法
$(document).ready(function(){
      //执行代码
  });
==
$().ready(function(){
      //执行代码
  });

==
$(function(){
      //执行代码
  });

2、根据id获取对象
$('#IdName');

3、根据标签名称获取对象 注意:没有引号 没有#号
$(objName);

4、给某对象添加样式类
$('#objName').addClass('className');

5、删除某对象样式类
$('#objName').removeClass('className');

6、绑定事件 bind()
$('#objName').bind('事件名称(如:click)', function(){执行操作});

7、简写事件
$('#objName').click(function(){执行操作});

8、toggle()两个方法之间转换调用, 同名效果(effect)
$('#objName').toggle(function(){执行方法一},function(){执行方法二});
例如:隐藏、显示
$('#objName').toggle(function(){$('#obj').hide();},function(){$('#obj').show();});

9、鼠标指针进入元素和离开元素时的操作 .hover();
$('#objName').toggle(function(){alert('鼠标进入');},function(){alert('鼠标离开');});

10、修改内联css
.css('property','value');
.css({property1:'value1', property2:'value2'});
获得对象样式里的某一项
$('#objName').css('fontSize');

11、基本的现实和隐藏  .show();   .hide();
$(objName).show();
$(objName).hide();
这两个方法都有三个参数 slow(0.6秒) normal(0.4秒) fast(0.2秒)
$(objName).show('slow');
还可以直接写数值,以毫秒为计算单位。注意:直接写数值不需要加引号
$(objName).show(1000);

12、淡入、淡出 fadeIn(); 也具有show(); 的三个参数值
$(objName).fadeIn();

13、多重效果
fadeIn(); 和 fadeOut(); 不透明度
fadeTo(); 不透明度
slideDown(); 和 slideUp();  高度

14、自定义动画效果 animate();
参数:1、样式属性及值的映射   及.css();
      2、可选速度参数
      3、可选缓动(easing)参数
      4、可选回调函数
例如:$(objName).animate({parame1:'value1', parame2:'value2'},speed, function(){alert();});

15、.attr()替换某一对象的属性
$(objName).attr({'id':'idValue', 'title':'titleValue'});

16、.each()方法类似for循环
例如遍历div下的某一类的所有连接
$('div.className a').each(function(index){index+1;执行操作});

17、 .insertAfter()  .after  .insertBefore()  .before() 顾名思义向什么地方插入对象
$(document).ready(function(){
$('expression').insertAfter(objName);
})
如:向div对象后插入返回top的连接
$(document).ready(function(){
$('<a href="#top">back to top</a>').insertAfter('div.className objName');
$('<a id="top" name="top"></a>').prependTo('body'); //向body加入这个锚点
})
注:如果用alert() 则表达式 和对象名调换位置。

18、克隆对象.clone();包括内容,如果.clone(false);值复制标签
$(objName).clone();

19、在对象外部插入新元素用.warp();
$(objName).warp("content");

20、向某一对象里载入其他页面内容 .load();
$('#objId').load(x.html);

21、清空对象 .empty();
$(objName).empty();
分享到:
评论

相关推荐

    《JQuery in Action》学习笔记

    **jQuery 简介** jQuery 是一款高效、简洁的 JavaScript 库,它的出现极大地简化了网页的DOM操作、事件处理、动画设计以及Ajax交互。...通过深入学习和实践,开发者能够利用jQuery创造出更加互动和富媒体的网页体验。

    JQuery自学学习笔记

    ### JQuery自学学习笔记 #### 一、JQuery简介与基本语法 JQuery 是一款轻量级的 JavaScript 库,极大地简化了 HTML 元素的选择、操作以及事件处理等任务。它提供了一种更加简单的方式来进行网页开发,使得开发者...

    JQuery学习笔记(技术文档)

    ### JQuery学习笔记(技术文档) #### 一、JQuery能做什么? JQuery 是一款轻量级的 JavaScript 库,它的设计宗旨是“write less, do more”,即“写得更少,做得更多”。通过JQuery,可以实现以下功能: 1. **...

    jquery学习笔记及常用函数封装.zip

    《jQuery学习笔记及常用函数封装》 在编程领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本资料包“jquery学习笔记及常用函数封装.zip”包含了从JQuery基础...

    jQuery学习笔记

    ### jQuery学习笔记 #### 第一章:jQuery入门 1. **什么是jQuery?** - **定义**:jQuery是一个跨平台的开源JavaScript库,其主要目标是简化HTML文档遍历、事件处理、动画以及Ajax交互等任务。jQuery的核心理念...

    jquery完全笔记 带目录 高清 经典前端js笔记 前端必看

    ### jQuery完全笔记知识点概述 #### 1. jQuery概述 jQuery是一个快速、小型且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互。通过使用jQuery,可以更方便地在网页中操作文档对象、选择...

    struts2学习笔记黑马程序员

    ### Struts2学习笔记之文件上传与Ajax开发 #### Struts2文件上传 **文件上传简介** 文件上传是Web应用中常见的功能之一,Struts2框架内置了对文件上传的支持,使得开发者能够轻松地实现这一功能。为了确保文件...

    张龙圣思园struts2学习笔记word

    张龙圣思园的Struts2学习笔记,无疑为Java开发者提供了一份宝贵的参考资料,它可能涵盖了Struts2的基础概念、核心组件、配置方式以及实战技巧。 首先,让我们深入了解Struts2的核心特性。Struts2是MVC(Model-View-...

    CRM系统学习笔记.rar

    这个压缩包“CRM系统学习笔记.rar”包含了作者在学习CRM系统过程中积累的知识点,特别提到了Servlet和jQuery的使用。下面将对这两个关键知识点进行详细的解释。 Servlet是Java Web开发中的一个核心组件,主要用于...

    界面框架extjs学习笔记

    EXTJS in Action 是一本专为学习EXTJS编写的书籍,但这里我们主要关注学习笔记中的关键知识点。 首先,EXTJS的目录结构非常重要,因为它包含了所有必要的资源和源码: 1. `adapter`:这部分包含了适配器,用于将...

    js+ajax+jquery笔记

    - **优势**:jQuery的API易于学习和使用,能有效减少跨浏览器的兼容性问题,提供强大的选择器来选取DOM元素,以及流畅的动画效果。 4. **JavaScript函数**: - **定义函数**:有三种主要方式定义JavaScript函数,...

    jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路

    jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路的知识点: 1. jQuery库与异步通信:jQuery是一个流行的JavaScript库,它简化了JavaScript编程,使得开发者可以用更少的代码来完成复杂的效果。在异步...

    struts2.1.8学习笔记

    10. **Ajax支持**:Struts2.1.8集成了jQuery库,提供了一套简单的API来实现Ajax交互,使得部分页面刷新成为可能。 11. **文件上传与下载**:Struts2内置了文件上传和下载的支持,可以方便地处理用户提交的文件。 ...

    JAVA学习笔记

    【JAVA学习笔记】是一份全面记录JAVA学习过程的资料,涵盖了从基础知识到高级应用的广泛内容。这份笔记的目的是帮助读者逐步掌握JAVA编程语言,并在实际项目开发中应用所学知识。 首先,我们从`java_se.doc`开始,...

    达内学习笔记

    【达内学习笔记】是一份综合性的学习资料,包含了丰富的IT知识,主要针对Java编程语言的学习路径。这份笔记集合了达内教育机构的教学精华,旨在帮助学员系统地掌握Java技术,提升开发技能。以下是各部分笔记的主要...

    jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架

    在本文中,我们将深入探讨如何使用jQuery来创建自定义模态提示框,以及项目构建的相关知识。模态提示框是网页交互中常见的一种元素,它可以在用户执行特定操作时弹出,提供信息、警告或确认请求。在没有找到满足需求...

    个人spring&struts学习笔记

    6. **插件支持**:Struts2 具有丰富的插件库,如 Struts2 jQuery Plugin 和 Struts2 Dojo Plugin,可快速构建用户界面。 在个人学习过程中,你可以从以下几个方面入手: 1. 学习 Spring 的基本概念和核心组件,理解...

    jQuery学习基础知识小结

    jQuery学习笔记: jQuery学习 1、基本语法: $(selector).action() $:定义jQuery selector:选择符,查询和查找HTML元素 action():对元素执行的操作 实例: $(this).hide()——隐藏当前元素 $(“p”),hide()——-隐藏...

    jQuery在线考试答题代码.zip

    通过学习和理解这个项目,开发者不仅可以提升jQuery的使用技巧,还能了解到Web应用的基本架构和交互设计。对于初学者,这是一个很好的学习起点;对于有经验的开发者,它则提供了二次开发和创新的可能。

Global site tag (gtag.js) - Google Analytics