`
lgsun592
  • 浏览: 54785 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jQuery入门函数总结

阅读更多

 

1.选择器实例

$(this) 当前 HTML 元素

$("p") 所有 <p> 元素

$("p.intro") 所有 class="intro" 的 <p> 元素

$(".intro") 所有 class="intro" 的元素

$("#intro") id="intro" 的第一个元素

$("ul li:first") 每个 <ul> 的第一个 <li> 元素

$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性

$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

2.事件

$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)

$(selector).click(function) 触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件

$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

3.效果

3.1.切换函数

$(selector).hide(speed,callback) 隐藏被选元素

$(selector).show(speed,callback) 显示被选元素

$(selector).toggle(speed,callback) 切换(在隐藏与显示之间)被选元素

3.2.滑动函数

$(selector).slideDown(speed,callback) 向下滑动(显示)被选元素

$(selector).slideUp(speed,callback) 向上滑动(隐藏)被选元素

$(selector).slideToggle(speed,callback) 对被选元素切换向上滑动和向下滑动

3.3.透明度控制函数 

$(selector).fadeIn(speed,callback) 淡入被选元素

$(selector).fadeOut(speed,callback) 淡出被选元素

$(selector).fadeTo(speed,opacity,callback) 把被选元素淡出为给定的不透明度

3.4.自定义动画

$(selector).animate({params},[duration],[easing],[callback]) 对被选元素执行自定义动画

4.HTML 操作

$(selector).html(content) 改变被选元素的(内部)HTML

$(selector).append(content) 向被选元素的(内部)HTML 追加内容

$(selector).prepend(content) 向被选元素的(内部)HTML “预置”(Prepend)内容

$(selector).after(content) 在被选元素之后添加 HTML

$(selector).before(content) 在被选元素之前添加 HTML

5.CSS 函数 

$(selector).css(name,value) 为匹配元素设置样式属性的值

$(selector).css({properties}) 为匹配元素设置多个样式属性

$(selector).css(name) 获得第一个匹配元素的样式属性值

$(selector).height(value) 设置匹配元素的高度

$(selector).width(value) 设置匹配元素的宽度

参考:http://www.w3school.com.cn/jquery/

分享到:
评论

相关推荐

    jquery入门(一)

    本篇将作为jQuery入门的起点,带领初学者逐步理解并掌握这个强大的工具。 ### 1. jQuery 的安装与引入 在开始学习jQuery之前,首先需要在项目中引入jQuery库。最常见的方式是通过CDN(内容分发网络)链接,这样...

    JQuery入门,JQuery总结

    **jQuery入门与总结** jQuery是一个深受开发者喜爱的JavaScript库,它的出现极大地方便了JavaScript的编程,使得HTML元素的选择、操作和隐藏等任务变得更加简单。jQuery的核心理念是"write less, do more",即用更...

    jQuery 入门到精通

    一、jQuery入门 1. 引入jQuery库:在HTML文件中,可以通过在`&lt;head&gt;`标签内添加`&lt;script&gt;`标签来引入jQuery库,通常从CDN(内容分发网络)获取,如`https://code.jquery.com/jquery-latest.min.js`。 2. jQuery...

    jquery 入门帮助.pdf

    ### jQuery入门精要 #### 一、jQuery概览与崛起 **标题与描述解析:** "jquery 入门帮助.pdf"这一标题明确指向了对jQuery初学者的指导资料,而描述“对于了解ajax并初识jq的人很有帮助”则暗示了内容会涵盖jQuery...

    jQuery 入门经典教程

    **jQuery 入门经典教程** jQuery 是一个广泛应用于前端开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。这个经典教程将带你深入理解jQuery的核心概念,帮助你快速上手并...

    Jquery从入门到精通

    **jQuery入门** jQuery是一款高效、简洁的JavaScript库,它的出现极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。"jQuery从入门到精通"这个主题将带你全面了解和掌握这一强大的工具。 首先,...

    jQuery使用手册 jquery入门教程

    jquery入门教程 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery 包装集 从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始...

    jQuery入门手册1.3.2

    **jQuery入门手册1.3.2** jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。这个“jQuery入门手册1.3.2”是针对初学者的指导性资料,旨在帮助读者快速...

    jquery 入门到精通 学习总结 资源

    《jQuery入门到精通学习资源概览》 jQuery是一款强大的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。本资源集合是针对jQuery从入门到精通的学习资料,旨在帮助初学者快速...

    jquery 入门demo

    《jQuery入门Demo详解》 jQuery,作为一款广泛应用于前端开发的JavaScript库,以其简洁的API、强大的功能和广泛的浏览器兼容性赢得了开发者们的喜爱。对于初学者来说,掌握jQuery的基础知识和常见操作是步入Web开发...

    jquery入门文档ppt

    在jQuery入门文档中,首先会介绍jQuery的基本概念。jQuery是一个JavaScript库,它对CSS3兼容,同时兼容多种浏览器,使得开发者能够更加便捷地处理HTML文档、处理事件、实现动画效果,以及在无需刷新页面的情况下与...

    jquery 入门文档 从零开始学校jquery

    本系列从零开始的jQuery入门文档旨在系统性地介绍这个强大的库,帮助初学者快速掌握其核心概念和常见用法。 首先,从"开天辟地入门篇"开始,我们将了解到jQuery的基本使用,包括如何引入jQuery库,以及如何使用...

    jquery快速入门实例

    【jQuery 快速入门实例】 jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理和动画效果。本教程将引导你快速入门jQuery,通过基础实例帮助你掌握其核心概念。 ### 1. jQuery 构造函数与 $...

    jquery入门培训及案例

    **jQuery入门培训及案例** jQuery是一款广泛应用于前端开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。通过学习jQuery,开发者可以更高效地编写代码,提升网页的交互性和用户体验...

    jquery入门基础知识

    ### jQuery入门基础知识详解 #### 一、jQuery简介与特点 **jQuery** 是一款非常流行的 JavaScript 库,它的设计目标是让 Web 开发变得更加简洁高效。根据文档中的介绍,我们可以了解到以下几点关键信息: 1. **...

    Jquery入门小示例

    **jQuery入门小示例** jQuery 是一款非常流行的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画设计和Ajax交互等任务。对于初学者来说,掌握jQuery的基础知识可以大大提高开发效率,减少代码量。本文将...

    jquery入门教程.pdf

    ### jQuery入门教程精要 #### 一、简介与重要性 **jQuery**,作为一款流行的JavaScript库,自2006年诞生以来,迅速成为Web开发者们的首选工具。它简化了HTML文档遍历、事件处理、动画以及与服务器交互的过程。...

    jQuery 入门提高速成实例打包

    这个“jQuery 入门提高速成实例打包”集合包含了一系列实用的实例,旨在帮助初学者快速掌握jQuery的基本用法和高级技巧。下面我们将深入探讨jQuery中的关键知识点。 1. **选择器**: jQuery 的核心在于强大的选择器...

    jquery入门视频教程

    本"jQuery入门视频教程"旨在为初学者提供一个快速掌握jQuery基础知识的平台,通过五个精心设计的视频,您将能够轻松入门并熟练运用jQuery进行网页交互的开发。 在第一个视频中,我们将介绍jQuery的基本概念和安装...

Global site tag (gtag.js) - Google Analytics