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 相关文章推荐
onpropertypchange
Jul 01 Javascript
jquery 弹出登录窗口实现代码
Dec 24 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
jQuery动态添加
Apr 07 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 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实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
thinkphp3.x中session方法的用法分析
2016/05/20 PHP
PHP实现基于面向对象的mysqli扩展库增删改查操作工具类
2017/07/18 PHP
cloudgamer出品ImageZoom 图片放大效果
2010/04/01 Javascript
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
2019/11/01 Javascript
jquery ajax 请求小技巧实例分析
2019/11/11 jQuery
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python使用scrapy采集时伪装成HTTP/1.1的方法
2015/04/08 Python
举例讲解Python的Tornado框架实现数据可视化的教程
2015/05/02 Python
python实现简单ftp客户端的方法
2015/06/28 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
利用Python求阴影部分的面积实例代码
2018/12/05 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
通用求职信范文模板分享
2013/12/27 职场文书
建筑安全生产责任书
2014/07/22 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
学前班教学反思
2016/02/24 职场文书
python如何在word中存储本地图片
2021/04/07 Python