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>&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标记中不删除该属性。并不是取消了该标记的这个特点。上述代码运行后,所有按钮依然具有设置为禁用的能力、

时间: 2024-10-23 08:25:28

jQuery使用之(一)标记元素属性的相关文章

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

当需要获取iframe里的内容时需要有几个前提,否则你是获取不到的: 1:当前页面与iframe的src的页面需要在同一个域名下: 2:必须要等iframe里边的页面加载完成才能获取,否则你要获取的标签就是不存在: 当这两个条件都满足的时候你就可以获取了(以下例子是本精灵通过jquery修改iframe(" iframe的ID名被取为了iframeName'")里页面的所有a标签的target属性值): function a_load(){ var isOnLoad = true; $

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

一.前言 本篇主要讲解如何使用jQuery获取和操作元素的属性和css样式 二."DOM属性"与元素属性 1.运行一下代码 <img src="/images/logo_small.gif" class="img_logo" /> 2.分析代码 元素属性src:/images/logo_small.gif 元素属性class:img_logo DOM属性currentSrc:http://localhost/images/logo_s

js+jquery动态设置/添加/删除/获取元素属性的两种方法集锦对照(动态onclick属性设置+动态title设置)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>

jquery源码解析:jQuery对元素属性的操作1

我们先来看一下jQuery中有多少个方法是用来操作元素属性的. 首先,看一下实例方法: 然后,看下静态方法(工具方法): 静态方法是内部使用的,我们外面使用的很少,实例方法才是对外的. 接下来,我们来看下一些方法是如何使用的? $("#div1").attr("title","hello") ,设置属性,两个参数时. $("#div1").attr("title") , 获取属性值,一个参数时. $(&qu

[ jquery 表单UI选择器和表单元素属性选择器 ] 表单UI选择器和表单元素属性选择器

表单UI选择器和表单元素属性选择器: 实例: <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' content='keyword1,keyword2,keywo

jquery源码解析:jQuery对元素属性的操作2

这一课,我们将继续讲解jQuery对元素属性操作的方法. 首先,我们先看一下这几个方法是如何使用的: $("#div1").addClass("box1 box2");     //给元素div的class属性添加box1和box2 $("#div1").removeClass("box1");     //删除元素div的class属性值box1 $("#div1").toggleClass("

js+jquery动态设置/增加/删除/获取元素属性的两种方法集锦对比(动态onclick属性设置+动态title设置)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html140/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>

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

jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的元素中移除指定的属性. attr()方法 读操作 attr()读操作. 读取的是匹配元素中第一个元素的指定属性值. 格式: .attr(attributeName),返回值类型:String.读取不存在的属性会返回undefined. 注意选择器的选择结果可能是一个集合,这里仅仅获取的是集合中第一个

Day 55(08/15)jquery 操作元素(属性,css,文档处理)

四 操作元素(属性,css,文档处理) 4.1 事件 页面载入 1 2 ready(fn)  // 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. $(document).ready(function(){}) -----------> $(function(){}) 事件绑定 //语法: 标签对象.事件(函数) eg: $("p").click(function(){}) 事件委派: $("").on(eve,[selector],[data],fn