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>&nbsp;
<button>第二个Button</button>&nbsp;
<button>第三个Button</button>&nbsp;
</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使用之(一)标记元素属性的更多相关文章

  1. 使用jquery获取iframe内的元素属性

    当需要获取iframe里的内容时需要有几个前提,否则你是获取不到的: 1:当前页面与iframe的src的页面需要在同一个域名下: 2:必须要等iframe里边的页面加载完成才能获取,否则你要获取的标 ...

  2. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  3. jquery选择伪元素属性的方法

    CSS伪元素不是DOM元素,因此你无法直接选择到它们 一个方法是为该元素添加新类,并通过设置新类的属性来达到改变伪元素属性的效果: .checkboxWrapper.selected::before{ ...

  4. JQuery处理DOM元素-属性操作

    JQuery处理DOM元素-属性操作 //操作元素的属性: $('*').each(function(n){ this.id = this.tagName + n; }) //获取属性值: $('') ...

  5. selenium用jquery改变元素属性

    一.jQuery 语法 jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作. 1.基础语法: $(selector).action() 选择符(selector)即," ...

  6. 使用jQuery操作元素属性

    在jQuery中,提供了attr函数来操作元素属性,具体如下: 函数名 说明 例子 attr(name) 取得第一个匹配元素的属性值. $("input").attr(" ...

  7. 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  8. jQuery操作DOM基础 - 元素属性的查看与设置

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. jQuery学习笔记(4)-设置元素的属性和样式

    一.前言 本篇主要讲解如何使用jQuery获取和操作元素的属性和css样式 二."DOM属性"与元素属性 1.运行一下代码 <img src="/images/lo ...

随机推荐

  1. Swift 语法笔记01

    Swift 好多新奇的地方啊...妈的 var display: int { get() set() } Tuple: let x: (d:Double, e:String, f:Int) = (3. ...

  2. 备忘:文本编辑器(z.B. Sublime Text 2)策略,git策略

    1.以Sublime Text 2 为例: 新建一个test.py文件,敲完例程 代码 之后,再另存为比如 if.py, list_tuple.py云云 而test.py可以一直用来编辑 2.git ...

  3. dba诊断之lock

    --产生锁的详细信息 select a.session_id, c.SERIAL#,d.spid, os_user_name, b.object_name,locked_mode,    c.sql_ ...

  4. [转]Oracle分页之二:自定义web分页控件的封装

    本文转自:http://www.cnblogs.com/scy251147/archive/2011/04/16/2018326.html 上节中,讲述的就是Oracle存储过程分页的使用方式,但是如 ...

  5. NYOJ--1237最大岛屿

    最大岛屿 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描述 神秘的海洋,惊险的探险之路,打捞海底宝藏,激烈的海战,海盗劫富等等.加勒比海盗,你知道吧?杰克船长驾驶着自己的的 ...

  6. testng环境设置

    1.在eclipse中安装testng插件,地址:http://beust.com/eclipse 2.设置testng环境变量 testng_home D:\Program Files\eclips ...

  7. 深搜+回溯 POJ 2676 Sudoku

    POJ 2676 Sudoku Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 17627   Accepted: 8538 ...

  8. codeforces 709A A. Juicer(水题)

    题目链接: A. Juicer 题意: 给出n个橘子,汁漫出来了就倒出来,反正就是要求要倒几次; 思路: AC代码: #include <iostream> #include <cs ...

  9. 常用的adb命令

    在平时的工作中,会经常用到adb命令,在这里稍微整理了一下. 一.概要 1.什么是adb? adb全称为Android Debug Bridge,就是起到调试桥的作用.顾名思义,adb就是一个debu ...

  10. 转载 ---> UITableViewCell的分割线

    在iOS7中,表格中经常看到的一个情况是如下所示, 解决方法: 1,手写代码控制   1 self.tableView.separatorInset = UIEdgeInsetsMake(0, 0, ...