jQuery使用之标记元素属性用法实例


Posted in Javascript onJanuary 19, 2015

本文实例讲述了jQuery使用之标记元素属性用法。分享给大家供大家参考。具体分析如下:

这里介绍jQuery的使用主要包括jQuery如何控制页面,包含元素的属性、css样式风格、DOM模型、表单元素和事件处理等。

标记元素的属性

html中每一个标记都具有一些属性,他们这个标记在页面中呈现各种状态,例如下面的<a>标记

<a herf="http://www.baidu.com" title="isaac" target="_blank" id="linkisaac">

该标记<a>表示标记的名称,为一个超链接,另外还有href titile target id等属性表示这个超链接在页面中的各种状态。

本文从jQuery角度出发,进一步讲解页面属性控制方法。

1.each()遍历元素

each(callback)方法主要用于对选择器中的元素进行遍历,它接受一个函数作为参数,这个函数接受一个参数,指代元素的序号。对于标记的属性而言,可以利用each()方法配合this关键字来获取或者设置选择器中的每个元素对应的属性值。

使用each()方法遍历所有元素。

<script type="text/javascript">

    $(function() {

$("p").each(function(index){

    this.title = "这是第"+ (index+1) + "个P,id是:"+ this.id;

});

    });

</script>

<div>

    <p id="001">第一段</p>

    <p id="002">第二段</p>

    <p id="003">第二段</p>

    <p id="004">第二段</p>

    <p id="005">第二段</p>

    <p id="006">第二段</p>

    <p id="007">第二段</p>

</div>

以上代码中有7个P元素,首先利用$("p")获取页面中所有p元素集合,然后使用each()方法遍历所有的图片。通过this关键字对图片进行访问,获取图片的id,并设置图片的id属性。其中each()方法的函数index为元素所处的序号。

2.获取属性的值。attr(name)方法

除了在遍历整个选择器中的元素。很多时候需要得到某个对象的特点的值,在jQuery中可以通过attr(name)方法很轻松的实现这一点。该方法获取元素集中第一个的属性值。如果没有匹配则返回unfefined.

script type="text/javascript">

    $(function() {

 var sTitle = $("p").attr("title");//获取第一个p元素的title属性值

 $("#display").text(sTitle);

    });

</script>

<div>

    <p id="001" title="isaac,hobby">第一段</p>

    <p id="002" title="isaac,hobby">第二段</p>

    <p id="003">第二段</p>

    <p id="004">第二段</p>

    <p id="005">第二段</p>

    <p id="006">第二段</p>

    <p id="007">第二段</p>

    <span id="display"></span>

</div>

如果,想获取第二个p的title属性值,则可以通过位置选择器来完成。

$(function() {

 var sTitle = $("p:eq(1)").attr("title");//获取第2个p元素的title属性值

 $("#display").text(sTitle);

});

3.设置属性的值。attr(name,value)

attr()方法除了可以获取元素的值外,还可以设置属性的值,通用 的表达式为

attr(name,value)

例如:下面代码将使页面的超链接都在新窗口打开。
<script type="text/javascript">

    $(function() {

    $("a[href*=http]").attr("target","_blank");

    });

</script>

例子:
<script type="text/javascript">

    function DisableBack() {

 $("button:gt(0)").attr("disabled", "disabled");

    }

</script>

<div>

    <button onclick="DisableBack()">第一个Button</button> 

    <button>第二个Button</button> 

    <button>第三个Button</button> 

</div>

通过位置选择器,当单击第一个按钮时,后面两个按钮同时被禁用。

很多时候,我们希望属性的值能根据不同的元素有规律的变化。这个时候我们可以使用attr(name,fn),第二个参数为一个函数。该函数接受一个参数,为元素的序号,返回值为字符串。

<script type="text/javascript">

    $(function() {

 $("div").attr("id", function(index) {

     //将id设置为序号相关的参数

     return "div-id" + index;

 }).each(function() {

     //找到每一项的span标记

     $(this).find("span").html("(id='" + this.id + "')");

 });

    });

</script>

<div>第0项 <span></span>

</div>

<div>第1项 <span></span>

</div>

<div>第2项 <span></span>

</div>

返回内容:

第0项 (id='div-id0')

第1项 (id='div-id1')

第2项 (id='div-id2')

以上代码通过attr(name,fn)将页面中所有的<div>块的id属性值设置为序号相关的参数。并通过each()方法遍历div块,将id值显示在各自的<span>标记中。这可以看到jQuery链的强大。

有的时候对于某些元素,希望同时设置它不同的属性,如果采用上面的方法则需要一个个属性设置。jQuery很人性化, attr()还提供一个列表设置attr(properties)方法。可以设置多个属性。

<script type="text/javascript">

    $(function() {

 $("img").attr({

     src: "06.jpg",

     title: "名字1",

     alt: "名字2"

 });

    });

</script>

<img>

<img>

<img>

<img>

<img>

执行结果:

<img src="06.jpg" title="名字1" alt="名字2">

<img src="06.jpg" title="名字1" alt="名字2">

<img src="06.jpg" title="名字1" alt="名字2">

<img src="06.jpg" title="名字1" alt="名字2">

<img src="06.jpg" title="名字1" alt="名字2">

4.删除属性

当设置某个元素属性的值时,可以通过removeAttr(name)方法将属性值删除。这时元素将恢复默认的设置。例如下面的代码使得所有按钮均不被禁用。

$(function() {

 $("button").removeAttr("disabled")

});

removeAttr(name)删除属性相当于html标记中不删除该属性。并不是取消了该标记的这个特点。上述代码运行后,所有按钮依然具有设置为禁用的能力。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
动态创建的表格单元格中的事件实现代码
Dec 30 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
Feb 16 Javascript
js控制table合并具体实现
Feb 20 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
javascript获取元素离文档各边距离的方法
Feb 13 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
Aug 22 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 Javascript
jQuery应用之jQuery链用法实例
Jan 19 #Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 #Javascript
jQuery中ready事件用法实例
Jan 19 #Javascript
jQuery中offsetParent()方法用法实例
Jan 19 #Javascript
jQuery中outerWidth()方法用法实例
Jan 19 #Javascript
javascript数据类型示例分享
Jan 19 #Javascript
jQuery中outerHeight()方法用法实例
Jan 19 #Javascript
You might like
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
php实现搜索类封装示例
2016/03/31 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
详解php 使用Callable Closure强制指定回调类型
2017/10/26 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
laravel-admin自动生成模块,及相关基础配置方法
2019/10/08 PHP
jQuery 表格工具集
2010/04/25 Javascript
JQuery选择器特辑 详细小结
2012/05/14 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
2013/04/01 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
javascript使用appendChild追加节点实例
2015/01/12 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
2015/02/04 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
2015/08/31 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
JavaScript 实现下雪特效的示例代码
2020/09/09 Javascript
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
python numpy 按行归一化的实例
2019/01/21 Python
详解python播放音频的三种方法
2019/09/23 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
高三自我鉴定怎么写
2013/10/19 职场文书
临床医师个人自我评价
2014/04/06 职场文书
三八妇女节标语
2014/10/09 职场文书
邀请函格式范文
2015/02/02 职场文书
科技活动总结范文
2015/05/11 职场文书
个人原因辞职信模板
2015/05/13 职场文书
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
如何使用python包中的sched事件调度器
2022/04/30 Python