jQuery中:focus选择器用法实例

本文实例讲述了jQuery中:focus选择器用法。分享给大家供大家参考。具体分析如下：

此选择器能够匹配当前获取焦点的元素。

语法结构:


代码如下:

$(":focus")

:focus选择器一般需要和其他选择器配合使用，例如和类选择器，元素选择器等等。例如:

代码如下:

$("li:focus")

以上代码会匹配获得焦点的li元素。
当然此选择器前面不加任何其他选择器，不过不加指定的选择器，那么默认就是添加了通用选择器（*）。例如:

代码如下:

$(":focus")

以上代码和下面代码等效:

代码如下:

$("*:focus")

实例代码:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>我们</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("li:focus").css("color","red");
})
</script>
</head>
<body>
<ul>
  <li>div+css专区</li>
  <li>HTML专区</li>
</ul>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jquery选择器需要注意的问题

    jquery选择器需要注意的问题

    我们先来看段代码,很简单,如下 复制代码 代码如下: <div id="div1">     <span>111</span>     <span>222</span>     <span>333</span>     <button id="button1">clear</button> </div> 复制代码 代码如下: $(function(

  • jQuery中:contains选择器用法实例

    本文实例讲述了jQuery中contains选择器用法.分享给大家供大家参考.具体分析如下: 此选择器匹配包含给定文本的元素. 语法: 复制代码 代码如下: $(":contains(text)") 此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等.例如: 复制代码 代码如下: $("li:contains('html')").css("color","blue") 以上代码将文本中包含"html&

  • jQuery中:has选择器用法实例

    本文实例讲述了jQuery中has选择器用法.分享给大家供大家参考.具体分析如下: 此选择器匹配含有选择器所匹配的元素的元素. 语法结构: 复制代码 代码如下: $(":has(selector)") 关于此选择器的定义可能有点拗口,通俗的讲就是如果一个元素含有selector(选择器)所匹配的元素,那么此元素将被匹配.例如: 复制代码 代码如下: $("div:has(p)") 以上选择器将匹配含有p元素的div元素. 此选择器一般也要和其他选择器配合使用,比如类

  • jQuery中:hidden选择器用法实例

    本文实例讲述了jQuery中:hidden选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配所有不可见元素,或者type为hidden的元素. 语法结构: 复制代码 代码如下: $(":hidden") 此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等.例如: 复制代码 代码如下: $("div:hidden").css({display:"block",color:"blue"}) 以上代码

  • jQuery中:visible选择器用法实例

    本文实例讲述了jQuery中:visible选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配所有当前可见的元素. 语法结构: 复制代码 代码如下: $(":visible") 此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等.例如: 复制代码 代码如下: $("div:visible").css({color:"blue"}) 以上代码能够将可见的div元素中的字体颜色设置为蓝色. 如果不和其他选择器配合使用,

  • 常见的jQuery选择器汇总

    基本元素选择器 复制代码 代码如下: $("p") $("p.ii")选取所有class=ii的 p元素 $("p#demo")选取id=demo的第一个p元素 分层选择器 复制代码 代码如下: $("div input")div 下的所有input $("div>input") 基本条件选择器 复制代码 代码如下: $("p:first") $("p:last"

  • jQuery中[attribute]选择器用法实例

    本文实例讲述了jQuery中[attribute]选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配带有给定属性的元素. 语法结构: 复制代码 代码如下: $("[attribute]") 参数列表: 参数 描述 attribute 要查找的属性名称. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <m

  • jQuery中:empty选择器用法实例

    本文实例讲述了jQuery中empty选择器用法.分享给大家供大家参考.具体分析如下: 此选择器匹配所有不包含子元素或者文本的空元素. 注意:空格也属于选择器包含的元素. 语法结构: 复制代码 代码如下: $(":empty") 此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等.例如: 复制代码 代码如下: $("li:empty").animate({width:"200px"}) 以上代码能够将li元素集合中的空li元素的宽

  • jQuery中:focus选择器用法实例

    本文实例讲述了jQuery中:focus选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配当前获取焦点的元素. 语法结构: 复制代码 代码如下: $(":focus") :focus选择器一般需要和其他选择器配合使用,例如和类选择器,元素选择器等等.例如: 复制代码 代码如下: $("li:focus") 以上代码会匹配获得焦点的li元素. 当然此选择器前面不加任何其他选择器,不过不加指定的选择器,那么默认就是添加了通用选择器(*).例如: 复制代码

  • jQuery中:enabled选择器用法实例

    本文实例讲述了jQuery中:enabled选择器用法.分享给大家供大家参考.具体分析如下: 此选择器可以选取所有可用的元素. 语法结构: 复制代码 代码如下: $(":enabled") 此选择器一般也要和其他选择器配合使用,比如类选择器.元素选择器等等.例如: 复制代码 代码如下: $("input:enabled").css("background-color","red") 以上代码能够将可用的input元素的背景颜色

  • jQuery中:radio选择器用法实例

    本文实例讲述了jQuery中:radio选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够选取所有单选按钮. 语法结构: 复制代码 代码如下: $(":radio") 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="htt

  • Jquery中基本选择器用法实例详解

    本文实例讲述了Jquery中基本选择器用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • jQuery中:text选择器用法实例

    本文实例讲述了jQuery中:text选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够选取所有的单行文本框. 语法结构: 复制代码 代码如下: $(":text") 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="htt

  • jQuery中:first选择器用法实例

    本文实例讲述了jQuery中first选择器用法.分享给大家供大家参考.具体分析如下: 此选择器匹配指定元素集合中的第一个元素. 语法结构: 复制代码 代码如下: $(":first") 在使用中一般要和其他选择器配合使用,比如类选择器和元素选择器等等.例如: 复制代码 代码如下: $("li:first").css("color","green") 以上代码能够将li元素集合中的第一个li元素中的字体颜色设置为绿色. 如果不

  • jQuery中:lt选择器用法实例

    本文实例讲述了jQuery中:lt选择器用法.分享给大家供大家参考.具体分析如下: 此选择器匹配所有小于给定索引值的元素. 索引值最小是从0开始的. 语法结构: 复制代码 代码如下: $(":lt(index)") 此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等. 例如: 复制代码 代码如下: $("li:lt(3)").css("color","blue") 以上代码能够将索引小于3的li元素中的字体颜色

  • jQuery中:only-child选择器用法实例

    本文实例讲述了jQuery中:only-child选择器用法.分享给大家供大家参考.具体分析如下: 此选择器将匹配父元素的唯一子元素.如果其父元素中含有其他元素,那将不会被匹配. 语法结构: 复制代码 代码如下: $(":only-child") 此选择器一般也要和其他选择器配合使用,比如类选择器.元素选择器等等.例如: 复制代码 代码如下: $("li:only-child").css("color","blue") 以上代

  • jQuery中:password选择器用法实例

    本文实例讲述了jQuery中:password选择器用法,分享给大家供大家参考.具体分析如下: 此选择器能够选取所有密码框. 语法结构: 复制代码 代码如下: $(":password") 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&quo

  • jQuery中:header选择器用法实例

    本文实例讲述了jQuery中header选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配标题元素,即(h1-h6). 语法结构: 复制代码 代码如下: $(":header") 此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等.例如: 复制代码 代码如下: $(".qiantai:header").css("color","blue") 以上代码能够将类名为qiantai的标题元素中的字体颜

随机推荐