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 相关文章推荐
js传值 判断
Oct 26 Javascript
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
Jun 09 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
axios基本入门用法教程
Mar 25 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
JS 数组随机洗牌的实例代码
Sep 12 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
PHP 文本文章分页代码 按标记或长度(不涉及数据库)
2012/06/07 PHP
php对称加密算法示例
2014/05/07 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
某页码显示的helper 少量调整,另附js版
2010/09/12 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
2013/11/28 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
vue和iview实现Scroll 数据无限滚动功能
2019/10/31 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
JavaScript 常见的继承方式汇总
2020/09/17 Javascript
深入解析Python中的上下文管理器
2016/06/28 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
python str字符串转uuid实例
2020/03/03 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
校领导推荐信
2013/11/01 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
竞聘副主任科员演讲稿
2014/01/11 职场文书
工会主席岗位责任制
2014/02/11 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
会计学专业求职信
2014/07/17 职场文书
乡镇计划生育工作汇报
2014/10/28 职场文书
2015年工程师工作总结
2015/04/30 职场文书
投标单位介绍信
2015/05/05 职场文书
交通安全主题班会
2015/08/12 职场文书
2016年寒假见闻
2015/10/10 职场文书
九年级英语教学反思
2016/02/15 职场文书
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
速龙x4-860k处理器相当于i几
2022/04/20 数码科技