<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文档"表明这是一个针对...
总的来说，"JQ工具包+CSS3工具包"是前端开发者的重要参考资料，它可以帮助开发者更好地理解和运用jQuery库以及CSS3技术，从而在网页开发中实现高效且美观的设计。这两个CHM文件的提供者分享了他们的经验和知识，对...
此外，CSS还支持溢出内容的处理、元素的显示和隐藏、垂直对齐方式，以及边框、背景、文本、字体等属性的设置。 JavaScript是实现网页动态效果和数据交互的脚本语言。它具有轻量级、解释型和基于对象的特点。在HTML...
【标题】"使用jq和CSS3做的带气泡数值提示框的水平滑杆插件"涉及到的核心技术是jQuery（jq）和CSS3，这两种技术在Web前端开发中扮演着重要角色。jQuery是一个高效的JavaScript库，它简化了JavaScript的DOM操作、事件...
2. **jQuery (jq)**: jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和动画效果。在这个场景中，jQuery可以用来检测窗口大小变化，并动态调整元素的位置以保持居中。 3. **CSS**: CSS（层叠样式表）...