jquery 定义css
具有原始外观的网站从其他网站中脱颖而出。
因此，CSS按钮很重要。
也许使用基本CSS和jQuery事件实现它们甚至微不足道。
但是，创建任何高质量的作品都需要对成分进行彻底检查。
本教程是我的教程电子书的直接摘录。
截至2012年7月26日，这是我目前正在研究的修订版3。本书包含本教程的所有3个部分。
我决定将其分为3部分，并在jQuery4U上免费与所有人共享，以使人们了解我的工作。
在本教程中，我们将创建看起来像这样的自定义CSS按钮 ：
或者像这样的导航栏按钮呢？
此处显示的按钮是原始大小的3倍。
这些集合可以使用简单CSS样式来完成。 但是，外观漂亮的按钮最重要的组成部分是注重细节 。 我们不能不小心将渐变和颜色添加到按钮上。 人眼如何捕捉最小的细节有些微妙。
这些集合可以使用简单CSS样式来完成。 但是，外观漂亮的按钮最重要的组成部分是注重细节 。 我们不能不小心将渐变和颜色添加到按钮上。 人眼如何捕捉最小的细节有些微妙。
但是首先，有一点历史。
过去，在创建按钮时，我们的选择仅限于HTML
和
标记，并通过将其border属性设置为0来删除图像的边框，如border = 0 。
这些技术仍然有效。
但是它们有很多缺陷。
例如，在较旧的Windows（今天可能仍在使用）上，默认按钮将显示为灰色的普通按钮。
在较新的Windows操作系统上，本机按钮看起来更好，但是它可能并不总是适合您正在开发的自定义网站或UI的主题。
对于使用基本字体（例如Arial或Verdana）的文本，这几乎是您可以更改的默认HTML按钮的唯一选择，我们受制于本机按钮设计的局限性。
但是我们已经不在1990年代了。
自那时以来，这些缺点就得到了发展。
现代按钮是使用CSS样式 ， jQuery和Ajax创建的 。
当然，按钮HTML和CSS元素代表其视觉样式。
jQuery用于根据鼠标光标在按钮HTML元素上方还是上方来动态更改按钮的外观。
最后，一旦单击按钮，Ajax将用于在服务器上执行某些功能（例如返回值PHP文件）。
当然，单击按钮时发生的动作可能只是客户端JavaScript函数 。
实际上，这可能就是大多数按钮的用途。
但是，将按钮操作链接到运行某种类型的脚本的Ajax事件并不罕见。
按钮有不同的类型和口味。
通常，在称为回调函数的函数中确定单击按钮时应该发生的情况。
$（“ div #my_button ”）。
单击 （ function（）{ / *做某事* / } ）;
此处的回调函数以浅黄色突出显示。
如您所见，它作为唯一参数传递给jQuery的click方法。
选择基本元素：DIV或A
让我们创建一个规则。
所有作为按钮的元素都将继承CSS类“按钮”。
换句话说，为了使网页将HTML元素视为按钮，我们将使用class属性将名为“ button”的类应用于该元素，如下所示：
< 一个类=“ 按钮 ”>或< div类=“ 按钮 ”>
一定要这样吗？
当然不是。
但是您是开发人员，您需要创建这些规则。
出于本教程的目的，我选择以这种方式进行操作，但是，这当然不是创建CSS按钮所用的铁定的通用规则。
我们将要创建的按钮将具有一个基本元素。
我们可以使用任何阻塞 （通常用于定位在位置：absolute的按钮）或内联元素（用于定位在位置：relative的按钮），例如
或代表我们的按钮。
有时，使按钮脱离标签（会创建超链接）并简单地将其重新设置为按钮样式并使HREF功能静音是有意义的。
您可能会认为这 是一个方便的选择， 因为默认情况下该 标签已经可以单击。
但是，这根本不是选择 标签来创建按钮 的充分理由 。
实际上， 如果我们希望将其用作CSS按钮，则应将 其默认默认可点击性 完全静音。
稍后您将看到我们将使用jQuery的.bind（）方法而不是href或onclick属性覆盖所有按钮事件。
如果实际上您确实遇到了某种与元素标签名称冲突有关CSS样式冲突，则这样做很容易在以后切换到DIV。
让我们比较两个可以用来激发HTML按钮创建根源HTML标签：
<A HREF =“＃”类=“按钮”> 好 一个 >
< div class =“ button”> 好的 div >
通常，我们应该为超链接专门保留该标签，以避免在超链接和按钮之间冲突CSS样式，这些样式以后可能会在我们的项目中添加。
但是，我们可以创建一个特殊的按钮，并通过其类名来引用它。
这样的按钮可以使用A .button创建{...}风格中的<a href =“＃”类=“ 按钮 “>好吧A>）只要我们答应自己，所有按钮将要创建这种方式（ 以保持我们CSS文件井井有条，并且更易于使用 ）。
在一个严肃的Web项目上进行工作，您的职责是尽一切可能确保使用标记创建的按钮在所有浏览器中都相同且外观相同。
虽然我试图在教程中至少维护一些跨浏览器的兼容性，但是您可以说本教程主要限于Chrome，Firefox，Safari和Internet Explorer浏览器的最新版本。
为每种浏览器编写不同的教程可能会干扰此处介绍的基本概念，我认为可以写整本书来谈论仅浏览器之间的差异。
从根本上保持简单
我们刚刚介绍了构建CSS按钮的一些基本原理。
让我们继续探索该主题，重点放在使用A标签作为按钮基本元素上。
整个教程的灵感来自我的电子书中的最新教程，您可以在我的网站上获得这些教程。
昨晚，我们通过选择A或DIV标签作为按钮来结束讨论。 但是A标记在用作CSS按钮之前需要引起更多关注。
DIV标记不必处理HREF属性。
除此之外，这两个标签将产生相同的结果。
但是，要在我们的脚本中做到这一点，您应该了解有关标记的一些信息。
处理A和HREF
标签具有臭名昭著的HREF属性，该属性用于指定超链接的目的地。
但是我们不希望使用 标记 创建的按钮 进入网页。
换句话说，我们希望我们的通用按钮能够响应点击事件。
但是我们也不想使用onclick属性来做到这一点。
毕竟，这是一个jQuery教程，并且jQuery提供了使用事件的便利，这些事件可以在我们JavaScript代码的单个点内访问。
能够从脚本中的单个位置访问重要代码，从长远来看将节省时间在我们的应用程序上工作。
jQuery允许我们将事件绑定到按钮，并且在初始化网页时，此代码将始终存储在同一位置（例如，在$ {document）.ready事件中。）这将防止我们不得不从一个跳转在我们的Web应用程序的整个HTML部分中，将onclick元素添加到另一个元素。
当将来需要处理修改按钮功能时，我们始终可以在代码中引用该单个位置。
并省去自己的头痛。
现在让我们更多地讨论HREF属性。
正如我们刚刚讨论的，我们将使用jQuery事件而不是onclick和HREF属性。
这意味着我们需要找出一种完全禁用HREF的方法。
您可能已经知道，当不提供URL时，我们可以使用数字符号＃后跟自定义锚名称（例如#Paris ）作为HREF值。
这将使垂直滚动条“跳转”到您网站上名为“巴黎”的锚点位置。
换一种说法
单击此链接： 转到巴黎 ，页面将跳至以下代码标记的位置：
我们可以像返回页面顶部一样简单地使用＃符号，这样一来，看看根本没有提供锚名称，网页就会跳回到最开始。
这是默认的超链接功能。
但是我们希望完全禁用此按钮。
我们不希望该按钮进入任何URL或锚点。
而且我们绝对不希望我们的按钮在单击时跳回到页面的顶部。
但是我们确实希望当使用jQuery事件单击按钮时发生某些事情。
我们将暂时讨论。
现在，让我们通过执行以下操作之一完全禁用HREF功能：
1.使用JavaScript：return false;
作为HREF值，如href =“ javascript：return false;”
2.指定return：false作为onclick属性的值，如onclick =“ return false;”
3.完全删除HREF属性。
示例好
所有这三种技术都会禁用A标签的默认HREF功能。
您可能没有期望技术3起作用。
但是在我的测试中，它可以在Chrome，Firefox和Internet Explorer中正常工作。
换句话说，通过完全不指定HREF属性，我们告诉HTML这只是一个锚，而不是超链接。
A标签的行为取决于标签中HREF属性的存在。
有了它，它的行为就像一个超链接。
没有它，它的行为就像锚。
本质上，通过跳过HREF，我们将锚点变成按钮，而不是超链接。
光标指针图标还取决于标签内HREF属性的存在。
当您将鼠标悬停在无HREF标记上时，它将不再变成正确的指针光标。
它将变成一个文本选择光标。
但这不是问题。
我们可以通过在按钮上强制使用CSS样式来再次重新添加正确的鼠标指针光标，如下所示：
A.button { 光标 ： 指针 ;
} / *将鼠标指针放回无HREF的A * /
这样可行。
可是等等。
让我们再照顾一件事。
用于按钮的标签仍可能呈现为超链接。
这意味着它将在按钮名称下显示下划线文本修饰，按钮名称是按钮内部打印的文本。
DIV当然不会发生这种情况。
但是，为了防止在A标签中发生这种情况，我们还通过在类为“ button”的所有按钮上强制使用以下CSS样式来删除文本修饰：
A.button { 文本修饰 ： 无 ；
}
一旦通过将上述CSS样式应用于基于A-tag的按钮来处理HREF标签，我们几乎就等于DIV标签。
在这一点上，剥离的A标签的行为与基于DIV的按钮相同。
从现在起，鉴于我们了解我们刚刚对A标签所做的更改，因此我们可以继续讨论创建自定义按钮的方式，这种方式将以相同的确切方式同样适用于A和DIV标签。
选择DIV标签作为按钮的基本元素可以使我们不必处理“准备” A标签以将其转换为按钮的情况。
您将在Web应用程序中使用哪个标签来创建CSS按钮由您决定。
只需确保坚持使用一个标签，以免日后出现并发症。
无论将使用哪个标签来创建按钮，一件事都很清楚。
我们将只使用jQuery的.click（…）方法，或使用.bind（…）方法将click操作“绑定”到匿名回调函数，该匿名回调函数将在单击按钮时执行代码。
我认为我们具备足够的知识来开始尝试代码。
让我们逐步完成该过程，并创建一些按钮。
首先，我们需要确定HTML和CSS。
我们已经讨论过，将使用A或DIV元素定义按钮。
无论哪种方式，请注意存在class =“ button” 。
或者，您可以使用DIV标签。
请注意，无论哪种情况，onclick属性都不存在。
按钮CSS样式
现在让我们编写CSS。
为了给按钮增加交互性，我们希望mouseover ， mouseout和mousedown事件至少具有3种不同CSS样式。
默认样式
首先，我们需要确定主要CSS样式，该样式将描述按钮的颜色，边框样式和渐变。
这是将应用于所有按钮的默认样式：
为了清楚起见，此处显示的按钮大了好几倍。
它实际上很小，边框只有1px。
但是通过这种方式，我们可以看到哪个CSS代码引用了按钮的哪个部分。
免费学习PHP！
全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
我们刚刚讨论了A标签，并确定了CSS按钮的默认样式。 现在，我们可以在本教程的最后一部分完成讨论，该部分讨论了jQuery鼠标事件的实现。 在本文的最底部，还将为您提供按钮的完整源代码。
我们的目标是使按钮与网站其余部分的主题匹配。
这完全取决于您和您的设计意识。
让我们看一下边界半径如何改变整个按钮的外观或“感觉”。
除了上面的三个示例以外，使用边框半径远大于按钮高度一半的值将导致形成一个完美圆的角度，从而使按钮的两侧都完美地变圆。
这就是为什么在默认样式中，我们首先将border-radius设置为32px的原因。
我们的按钮高度的一半远小于该高度，因为它只是一个A元素。
但是，如果我们提供的值大于HTML元素高度的一半，则按钮的圆度将达到最大值并在此处停止，看起来像一个完美圆的一半。
按钮样式是个人选择。
您可以将border-radius值更改为所需的任何值。
只需尝试不同的值，直到获得看起来不错的东西。
悬停时
当我们将鼠标指针悬停在按钮上时，我们希望按钮改变其外观。
实现此微妙效果的最佳方法之一是通过稍微改变边框的颜色，字体颜色并使用box-shadow属性添加初始阴影：
.buttonOn类不需要定义Default Class的所有值，因为它将仅继承 A.button的所有值 。
我们需要做的是覆盖一些值。
我用红色指示了新的框阴影属性和覆盖的属性。
新颜色#bbbbbb与原始按钮的#cccccc可能相距不远。
但是您必须相信我，这些细微的调整使使用按钮的体验更加优雅。
这个想法是应用细微的变化。
因此，避免将样式属性从一种极端更改为另一种极端习惯是一个好习惯，因为我们已经将鼠标光标悬停在按钮上。
字体颜色也是如此。
我们对悬停进行了微妙的，几乎看不见的更改。
按下
最后，我们需要在按下鼠标按钮时将第三种样式应用于按钮。
我已经尝试过反梯度。
但是，如果我只是简单地将背景设置为纯灰色，则在这种状态下的按钮看起来要优雅得多。
在进行了一些CSS实验之后，我确定与下面所看到的相比，这三种状态的最佳样式应该看起来更接近某种东西。
到目前为止，我们已经得出了以下三种样式：
当然，我们不必在这里停下来。
您可以继续应用进一步的更改，以使按钮与您的网站主题相匹配。
但这是一个很好的基础。
到目前为止，我们已经简要讨论了用于创建三种不同按钮状态CSS代码。
我在第一个示例中甚至提到了线性梯度属性。
但是，即使CSS属性linear-gradient是WC3标准，也无法在Chrome中运行。
我想找到一种方法，可以轻松创建渐变，而不必手动定义适用于所有浏览器的解决方案。
此外，我需要一种在所有浏览器中都能产生相同结果的解决方案。
经过快速的Google搜索，我找到了想要的东西。
使用此功能非常强大的在线CSS渐变工具创建了按钮背景CSS代码渐变。
这样可以确保所有浏览器中的渐变效果相同。
另外，您可以简单地将生成的代码复制并粘贴到CSS文件中。
让我为您提供指向实际的button.css文件的链接，该文件描述了我们在本节中讨论过的样式，而不是将整个CSS的源代码列表弄乱了页面。
下载button.css
现在我们已经定义了A.button ， .Hover和.Pressed，我们可以使用jQuery来编程按钮的逻辑。
我们在本书前面已经讨论了jQuery事件。
但是除了事件，我们还将使用jQuery的.addClass和.removeClass方法动态添加和删除发生鼠标事件（例如mouseover ）时刚刚创建CSS类。
将鼠标事件附加到按钮
让我们看一个非常简单的jQuery事件系统，该系统将根据鼠标是否处于over ， out ， Pressed和released状态来切换按钮CSS类。
$（文档）。
准备好了 （function（）{
//当鼠标悬停在元素上时，所有.button元素会发生什么？
$（“。button”）。
鼠标悬停 （function（）{
//添加.Hover
$（this）。
addClass （“悬停”）；
}）;
//当鼠标位于元素之外时，所有.button元素会发生什么？
$（“。button”）。
mouseout （function（）{
//删除.Hover，如果上一个操作中存在.Pressed，也将其删除。
$（this）。
removeClass （“悬停”）。
removeClass （“按下”）；
}
//按下鼠标按钮时，所有.button元素会发生什么？
$（“。button”）。
mousedown （function（）{
//添加类
$（this）。
addClass （“按下”）；
}
//最后，释放鼠标会发生什么？
$（“。button”）。
mouseup （function（）
{
//删除类
$（this）。
removeClass （“按下”）；
}）;
}）;
// $（document）.ready的结尾
我们只是将mouseover ， mouseout ， mousedown和mouseup事件与以前创建CSS按钮样式相关联，并处理了所有特殊情况。 例如，请注意， mouseout事件也会从按钮中删除类.Pressed 。 这是必要的，因为当鼠标光标从按下状态离开按钮元素时，再次将按钮恢复为其默认样式很重要。 如果我们不这样做，即使鼠标光标不再位于该按钮上，该按钮仍将看起来仍然处于按下状态。
在$（document）.ready（…）中运行此代码很重要，因为我们只需要附加一次这些事件。
我们在每个回调中分别使用.addClass和.removeClass 。
从这一刻起，您可以从物理上更改每个按钮CSS样式，并且功能将保持不变。
如果您需要按钮看起来与本示例中的按钮不同，则应该可以轻松修改它们而不会丢失事件功能。
最后是完整的工作演示。
在我的jquery教程书中找到更多内容
翻译自: https://www.sitepoint.com/custom-css-buttons-jquery-events-tutorial/
jquery 定义css
1583
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
