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 相关文章推荐
jQuery参数列表集合
Apr 06 Javascript
jquery如何把参数列严格转换成数组实现思路
Apr 01 Javascript
js Date概念详细介绍
Nov 22 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
完美解决linux下node.js全局模块找不到的情况
May 16 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
小程序和web画三角形实现解析
Sep 02 Javascript
JavaScript的console命令使用实例
Dec 03 Javascript
如何使用webpack打包一个库library的方法步骤
Dec 18 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
PHP抓取、分析国内视频网站的视频信息工具类
2014/04/02 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
js href的用法
2010/05/13 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
python实现多线程采集的2个代码例子
2014/07/07 Python
Python ftp上传文件
2016/02/13 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
什么是GWT的Module
2013/01/20 面试题
项目副经理岗位职责
2013/12/30 职场文书
人力资源部培训专员岗位职责
2014/01/02 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
写给老婆的保证书
2015/02/27 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python