<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> .test { font-weight: bold; color : red; } .add { font-style: italic; } </style> <script src="js/jquery-1.10.1.min.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ //获取<p>元素的color $("input:eq(0)").click(function(){ alert( $("p").css("color") ); }); //设置<p>元素的color $("input:eq(1)").click(function(){ $("p").css("color","red") }); //设置<p>元素的fontSize和backgroundColor $("input:eq(2)").click(function(){ $("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"}) }); //获取<p>元素的高度 $("input:eq(3)").click(function(){ alert( $("p").height() ); }); //获取<p>元素的宽度 $("input:eq(4)").click(function(){ alert( $("p").width() ); }); //获取<p>元素的高度 $("input:eq(5)").click(function(){ $("p").height("100px"); }); //获取<p>元素的宽度 $("input:eq(6)").click(function(){ $("p").width("400px"); }); //获取<p>元素的的左边距和上边距 $("input:eq(7)").click(function(){ var offset = $("p").offset(); var left = offset.left; var top = offset.top; alert("left:"+left+";top:"+top); }); }); //]]> </script> </head> <body> <input type="button" value="获取<p>元素的color"/> <input type="button" value="设置<p>元素的color"/> <input type="button" value="设置<p>元素的fontSize和backgroundColor"/> <input type="button" value="获取<p>元素的高度"/> <input type="button" value="获取<p>元素的宽度"/> <input type="button" value="设置<p>元素的高度"/> <input type="button" value="设置<p>元素的宽度"/> <input type="button" value="获取<p>元素的的左边距和上边距"/> <p title="选择你最喜欢的水果."><strong>你最喜欢的水果是?</strong></p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html>
效果图:
相关推荐
在JavaScript领域,jQuery(jq)是一个广泛使用的库,它简化了DOM操作、事件处理和动画制作等任务。在这个特效中,jQuery用于监听用户交互,例如鼠标事件,然后触发CSS3动画。jQuery的语法简洁易懂,使得开发者可以...
本压缩包“jq css3悬停效果.zip”显然是一个包含多个实例的资源集合,专注于利用jQuery库和CSS3属性来实现图片缩略图的悬停效果。这些特效为网站的用户体验增添了趣味性和动态感,使用户在鼠标悬停在缩略图上时能...
"jQ CSS3图片展示动画特效.zip" 是一个专门针对图片展示的解决方案,它结合了jQuery和CSS3的技术优势,利用GSAP(GreenSock Animation Platform)和ScrollMagic库来创建出令人印象深刻的滚动动画效果。 jQuery是一...
"JQ CSS3过滤动画效果代码rar"是一个压缩包,包含了使用jQuery和CSS3实现的过滤动画效果的代码示例。这种效果常见于网站的筛选或搜索功能,用户可以根据指定条件(如类别、价格、评分等)动态显示或隐藏元素,同时...
"jQ CSS3创意动画添加删除效果.zip" 提供了一种利用jQuery和CSS3技术来增强用户交互体验的方法,尤其适用于动态列表或者任务管理应用。下面将详细阐述这个知识点。 首先,jQuery是一个广泛使用的JavaScript库,它...
在IT行业中,前端开发是至关重要的一环,而jQuery(简称JQ)和CSS则是前端开发中的两大基础工具。本文将详细解析"JQ+CSS超酷时间翻板代码"的相关知识点,帮助你理解和运用这个独特的时钟效果。 首先,jQuery是一个...
总的来说,"jQ跟CSS3鼠标点击按钮加载特效"结合了jQuery的易用性和CSS3的动态性,为网页的交互设计提供了新的可能性。这种技术可以应用于各种需要反馈的场景,比如表单提交、数据请求等,提高了用户体验,也展示了...
"jQ CSS3彩色流动边框登录框"就是一个很好的示例,它巧妙地结合了jQuery、CSS3和HTML5的技术,为用户呈现了一个动态且引人注目的登录界面。本文将深入解析这个登录框的设计原理与实现方法。 首先,我们要理解jQuery...
"jQ+CSS3列表项添加删除效果"是一个典型的例子,它结合了jQuery JavaScript库和CSS3的新特性来实现列表中元素的添加与删除操作,同时赋予这些操作视觉上的吸引力。下面我们将详细探讨这个主题。 首先,jQuery是一个...
标题中的"jq+css+html做的小游戏"表明这是一个利用JavaScript库jQuery、CSS样式表和HTML结构语言构建的小型在线游戏,具体来说是“中国象棋”。这个项目展示了一个结合前端技术实现互动游戏的实例。 首先,jQuery是...
【JQ+CSS图片滑动门】是一种常见的网页动态效果,用于展示一组图片,通过CSS样式和JavaScript(JQuery库)实现平滑的过渡动画,让用户体验更佳。这种技术结合了HTML的基础结构,CSS的艺术设计,以及jQuery的高效处理...
这个模板是基于JavaScript、CSS、jQuery和Bootstrap框架构建的,这四个组件是现代Web开发的基础工具。 JavaScript,简称为js,是一种轻量级的解释型编程语言,主要用于网页和网络应用的动态化。在本模板中,...
本文将深入探讨如何使用jQuery(简称为JQ)和CSS来创建一个既美观又实用的折叠树形目录菜单。 首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互等任务。在创建折叠树形菜单时,...
总的来说,“easyUI的jq、css”涵盖了EasyUI框架中jQuery的使用和CSS在构建用户界面时的关键角色。通过理解这两个技术,开发者能够有效地利用EasyUI创建功能丰富且美观的Web应用界面。在实际操作中,要根据项目需求...
【标题】"js css jq api文档.zip"是一个包含JavaScript、CSS和jQuery API文档的压缩包。这个资源集合了这三个重要领域的技术手册,旨在为开发者提供详细的参考材料。 【描述】"js css jq api文档"表明这是一个针对...
核心库之一是jQuery,这是一个广泛使用的JavaScript库,简化了DOM操作和事件处理。在这个案例中,我们使用的是jQuery 1.4.4的最小化版本(jquery-1.4.4.min.js),虽然较旧,但在许多项目中仍然适用。它提供了便利的...
总的来说,"JQ工具包+CSS3工具包"是前端开发者的重要参考资料,它可以帮助开发者更好地理解和运用jQuery库以及CSS3技术,从而在网页开发中实现高效且美观的设计。这两个CHM文件的提供者分享了他们的经验和知识,对...
此外,CSS还支持溢出内容的处理、元素的显示和隐藏、垂直对齐方式,以及边框、背景、文本、字体等属性的设置。 JavaScript是实现网页动态效果和数据交互的脚本语言。它具有轻量级、解释型和基于对象的特点。在HTML...
【标题】"使用jq和CSS3做的带气泡数值提示框的水平滑杆插件"涉及到的核心技术是jQuery(jq)和CSS3,这两种技术在Web前端开发中扮演着重要角色。jQuery是一个高效的JavaScript库,它简化了JavaScript的DOM操作、事件...