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

jQuery 前端之家
前端之家收集整理的这篇文章主要介绍了jQuery使用之标记元素属性用法实例，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

标记元素的属性

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

代码如下:

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

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

1.each()遍历元素

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

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

代码如下:

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

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

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

代码如下:
获取第一个p元素的title属性值 $("#display").text(sTitle); });

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

代码如下:
获取第2个p元素的title属性值 $("#display").text(sTitle); });

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

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

代码如下:
例如：下面代码将使页面的超链接都在新窗口打开。
代码如下:
例子：
代码如下:

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

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

代码如下:
标记 $(this).find("span").html("(id='" + this.id + "')"); }); });
第0项
第1项
第2项

返回内容：

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

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

代码如下:

执行结果：

代码如下:

4.删除属性

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

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

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

原文链接：https://www.f2er.com/jquery/56237.html
jQuery元素元素元素属性属性属性标记标记标记用法用法

猜你在找的jQuery相关文章

《锋利的jQuery》笔记：插件的使用和写法
jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来，用于对通过选择器获取的...
jQuery插件开发入门
扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。 入门 编写一个jQuery...
jquery.roundabout.js实现3D图片层叠旋转木马切换
最近项目中需要实现3D图片层叠旋转木马切换的效果，于是用到了jquery.roundabout.js。 兼容...
jQuery效果之jQuery实现图片的依次加载图片
css代码： js代码：
jQuery之deferred对象详解
一、什么是deferred对象？ 开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。...
jQuery插件开发进阶
jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的，有了模式，我们就能...
jQuery 实现邮箱输入自动提示功能：（一）
记得去年做某个项目的时候，用到了邮箱输入自动提示功能，于是网上搜了一下，发现了这个写...
jQuery插件之上传文件ajaxfileupload.js源码与使用
在网页应用中，一般会用到上传文件或者图片什么的到服务器，那么可以用ajaxfileupload.js，...
jQuery效果之封装一个文章图片弹出放大效果
首先先搭写一个基本的格式： 然后用自调用匿名函数包裹你的代码，将系统变量以变量形式传递...
《从零开始学习jQuery》：用jQuery操作元素的属性与样式
元素属性和Dom属性简介 对于下面这样一个标签元素: 我们通常将id,src,alt,class称为属性,也...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作