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中hash和ico的关联分析
Feb 05 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
js实现京东轮播图效果
Jun 30 Javascript
protractor的安装与基本使用教程
Jul 07 Javascript
JS实现简单表格排序操作示例
Oct 07 Javascript
分享ES6的7个实用技巧
Jan 18 Javascript
详解angular应用容器化部署
Aug 14 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 Javascript
JS实现骰子3D旋转效果
Oct 24 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跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
简单谈谈favicon
2015/06/10 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
react-native封装插件swiper的使用方法
2018/03/20 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
Python抓取框架 Scrapy的架构
2016/08/12 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
Flask框架通过Flask_login实现用户登录功能示例
2018/07/17 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
python解释器spython使用及原理解析
2019/08/24 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
python如何爬取动态网站
2020/09/09 Python
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
优秀员工年终发言演讲稿
2014/01/01 职场文书
先进集体获奖感言
2014/02/13 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
家庭贫困证明
2015/06/16 职场文书
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript