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 相关文章推荐
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
Dec 02 Javascript
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
JS三级可折叠菜单实现方法
Feb 29 Javascript
JS控制层作圆周运动的方法
Jun 20 Javascript
BootStrap Typeahead自动补全插件实例代码
Aug 10 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
详解如何为你的angular app构建一个第三方库
Dec 07 Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
express异步函数异常捕获示例详解
Nov 30 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
PHP中英混合字符串截取函数代码
2011/07/17 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
php获得刚插入数据的id 的几种方法总结
2018/05/31 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
JS调用某段SQL语句的方法
2016/10/20 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
js数组去重的hash方法
2016/12/22 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
Python判断两个对象相等的原理
2017/12/12 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
使用tensorboard可视化loss和acc的实例
2020/01/21 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
年度考核自我评价
2014/01/25 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
给老师的感谢信
2015/01/20 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS