jQuery中:focus选择器用法实例

 更新时间:2014年12月30日 10:38:33   投稿:shichen2014  
这篇文章主要介绍了jQuery中:focus选择器用法,以实例形式分析了:focus选择器的功能、定义及匹配获取焦点元素的使用技巧,具有一定的参考借鉴价值,需要的朋友可以参考下

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

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

语法结构:

复制代码 代码如下:
$(":focus")

:focus选择器一般需要和其他选择器配合使用,例如和类选择器,元素选择器等等。例如:
复制代码 代码如下:
$("li:focus")

以上代码会匹配获得焦点的li元素。
当然此选择器前面不加任何其他选择器,不过不加指定的选择器,那么默认就是添加了通用选择器(*)。例如:
复制代码 代码如下:
$(":focus")

以上代码和下面代码等效:
复制代码 代码如下:
$("*:focus")

实例代码:

复制代码 代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://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程序设计有所帮助。

相关文章

  • js/jquery判断浏览器类型的方法小结

    js/jquery判断浏览器类型的方法小结

    有些时候需要根据浏览器来写样式,所以要判断一下浏览器类型,百度了一下,才知道JQuery有个方法直接判断,并附上原生的js的判断方法,分享给大家,有需要的小伙伴可以参考下。
    2015-05-05
  • jquery三个关闭弹出层的小示例

    jquery三个关闭弹出层的小示例

    三个关闭弹出层的实例方法
    2013-11-11
  • jquery <li>标签 隔若干行加空白或者加虚线的方法

    jquery <li>标签 隔若干行加空白或者加虚线的方法

    下面小编就为大家带来一篇jquery <li>标签 隔若干行加空白或者加虚线的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12
  • jquery slibings选取同级其他元素的实现代码

    jquery slibings选取同级其他元素的实现代码

    jquery选取同级其他元素可以使用slibings方法,end方法可以清除之前的链式操作,相当于重新开始
    2013-11-11
  • jQuery 跨域访问解决原理案例详解

    jQuery 跨域访问解决原理案例详解

    这篇文章主要介绍了jQuery 跨域访问解决原理案例详解的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • JQuery 给元素绑定click事件多次执行的解决方法

    JQuery 给元素绑定click事件多次执行的解决方法

    这篇文章主要介绍了JQuery 给元素绑定click事件多次执行的解决方法,比较实用,需要的朋友可以参考下
    2014-09-09
  • jQuery ajax cache缓存问题

    jQuery ajax cache缓存问题

    在jquery里面, 大部分的时候, 属性要用''引起来。否则容易变成变量名。比如red, 引不引都差不多。但是引起来也可以认。 所以习惯就全部引起来好了。
    2010-07-07
  • jQuery数组处理详解(含实例演示)

    jQuery数组处理详解(含实例演示)

    jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档 中对数组的介绍,顺便对jQuery数组做个总结.温故,知新.
    2010-11-11
  • jQuery实现日期联动效果实例

    jQuery实现日期联动效果实例

    这篇文章主要介绍了jQuery实现日期联动效果的方法,结合实例形式分析了jQuery针对日期及页面元素动态操作的相关技巧,需要的朋友可以参考下
    2016-07-07
  • 一个简单的jquery的多选下拉框(自写)

    一个简单的jquery的多选下拉框(自写)

    想在网上找一个插件用用,可是,网上的插件看起来都比较杂乱,我参考了网上的一些插件,自己用jquery写了一个多选下拉框
    2014-05-05

最新评论