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 相关文章推荐
Javascript 判断是否存在函数的方法
Jan 03 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
JS实现来回出现文字的状态栏特效代码
Oct 31 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
详解Angular.js的$q.defer()服务异步处理
Nov 06 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
vue实现底部菜单功能
Jul 24 Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 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
基于mysql的论坛(4)
2006/10/09 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
thinkPHP框架中执行事务的方法示例
2018/05/31 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
给Function做的OOP扩展
2009/05/07 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
Vue基于NUXT的SSR详解
2017/10/24 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
Json实现传值到后台代码实例
2020/06/30 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
[39:02]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs VGJ.T
2018/04/01 DOTA
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
Python中的tuple元组详细介绍
2015/02/02 Python
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
利用python实现数据分析
2017/01/11 Python
简单实现python画圆功能
2018/01/25 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
使用Python pip怎么升级pip
2020/08/11 Python
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
Java基础知识面试要点
2016/07/29 面试题
高一英语教学反思
2014/01/22 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
房屋维修协议书范本
2014/09/25 职场文书
党组织领导班子整改方案
2014/10/25 职场文书
详解Laravel制作API接口
2021/05/31 PHP