jQuery中:header选择器用法实例


Posted in Javascript onDecember 29, 2014

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

此选择器能够匹配标题元素,即(h1-h6)。

语法结构:

$(":header")

此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等。例如:
$(".qiantai:header").css("color","blue")

以上代码能够将类名为qiantai的标题元素中的字体颜色设置为蓝色。
如果不和其他选择器配合使用,则默认状态是和*选择器配合使用,例如$(":header")等同于$("*:header")。

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("#btn").click(function(){ 

    $(".qiantai:header").css("color","blue"); 

  })

})

</script> 

</head> 

<body> 

<ul> 

  <h1 class="qiantai">前台专区版块</h1> 

  <li>html专区</li> 

  <li>div+css专区</li> 

  <li>jQuery专区</li> 

  <li>Javascript专区</li> 

</ul> 

<ul> 

  <h1>后台专区版块</h1> 

  <li>ASP专区</li> 

  <li>php专区</li> 

</ul> 

<button id="btn">点击查看效果</button> 

</body> 

</html>

以上代码可以class属性值为qiantai的标题元素中的文本颜色设置为蓝色。

实例二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("#btn").click(function(){ 

    $(":header").css("color","blue"); 

  })

})

</script> 

</head> 

<body> 

<ul> 

  <h1 class="qiantai">前台专区版块</h1> 

  <li>html专区</li> 

  <li>div+css专区</li> 

  <li>jQuery专区</li> 

  <li>Javascript专区</li> 

</ul> 

<ul> 

  <h1>后台专区版块</h1> 

  <li>ASP专区</li> 

  <li>php专区</li> 

</ul> 

<button id="btn">点击查看效果</button> 

</body> 

</html>

由于以上代码并没有指定与:header选择器相配合使用的选择器,所以就默认和*选择器配合使用,于是以上代码可以将当前文档中所有元素中的标题元素的文本颜色设置为蓝色。

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

Javascript 相关文章推荐
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
javascript实现的弹出层背景置灰-模拟(easyui dialog)
Dec 27 Javascript
js中的json对象详细介绍
Oct 29 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
简单的分页代码js实现
May 17 Javascript
JavaScript 函数模式详解及示例
Sep 07 Javascript
Angularjs单选框相关的示例代码
Aug 17 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
浅析Vue 防抖与节流的使用
Nov 14 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 #Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 #Javascript
JavaScript中的数学运算介绍
Dec 29 #Javascript
jQuery中:lt选择器用法实例
Dec 29 #Javascript
JavaScript中的数值范围介绍
Dec 29 #Javascript
JavaScript常用小技巧小结
Dec 29 #Javascript
jQuery中:gt选择器用法实例
Dec 29 #Javascript
You might like
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
php excel类 phpExcel使用方法介绍
2010/08/21 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
javascript中判断一个值是否在数组中并没有直接使用
2012/12/17 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
使用javascipt---实现二分查找法
2013/04/10 Javascript
jquery ajax 调用失败的原因示例介绍
2013/09/27 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
Javacript中自定义的map.js  的方法
2017/11/26 Javascript
layui之select的option叠加问题的解决方法
2018/03/08 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
Angular单元测试之事件触发的实现
2020/01/20 Javascript
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
使用numba对Python运算加速的方法
2018/10/15 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
python 如何快速复制序列
2020/09/07 Python
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
竞选演讲稿范文大全
2014/05/12 职场文书
工地安全质量标语
2014/06/07 职场文书
买房协议书范本
2014/10/23 职场文书
2014年培训工作总结范文
2014/11/27 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL
Python利用zhdate模块实现农历日期处理
2022/03/31 Python