jquery id 怎么绑定变量 jquery添加id属性

转载

mob64ca140234eb 2024-03-05 21:47:55

文章标签 jquery id 怎么绑定变量 JSON html jQuery 文章分类 jQuery 前端开发

前面讲了jQuery中的选择器,通过选择器我们基本上能获取页面中的任何元素,既然能获得jQuery包装集,哪我们就需要在这些元素上设置相关属性,样式和内容.

一.jQuery中获取设置元素属性

在HTML中我们一般把一个标签元素的id,name,title叫做属性,在jQuery中能不能直接id,name呢?答案是不可以的

var obj= document.getElementById("txtId").value;

但是在jQuery中$("#txtId").value是不能进行取值的.哪如何取指定属性的值和给指定的属性赋值.这里我们用attr方法

这里我给出一个方法列表

方法名	说明	举例
attr(name) //name就是属性名	取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。	$("img").attr("src");//返回文档中第一个图像的src属性值。
attr(key,value)	为所有匹配的元素设置一个属性值。	$("img").attr("src","test.jpg");//为所有图像设置src属性。
attr(key,fn)	为所有匹配的元素设置一个计算的属性值。	$("img").attr("title", function() { return this.src });//把src属性的值设置为title属性的值。 this这里要注意了他是一个DOM元素,所以可以直接点属性
attr(properties)	将一个“名/值”形式的对象设置为所有匹配元素的属性。这是一种在所有匹配元素中批量设置很多属性的最佳方式。注意，如果你要设置对象的class属性，你必须使用'className' 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ).	$("img").attr({ src: "test.jpg", alt: "Test Image" });//为所有图像设置src和alt属性。 [注意]{ src: "test.jpg", alt: "Test Image" } 这是json格式的数据,我会在下面简单的介绍一下json数据格式
removeAttr(name)	从每一个匹配的元素中删除一个属性	$("img").removeAttr("src");// 将文档中图像的src属性删除

*********JSON定义*************

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，易于阅读和编写，同时也易于机器解析和生成。它基于ECMA262语言规范（1999-12第三版）中JavaScript编程语言的一个子集。 JSON采用与编程语言无关的文本格式，但是也使用了类C语言（包括C， C++， C#， Java， JavaScript， Perl， Python等）的习惯，这些特性使JSON成为理想的数据交换格式。

JSON的结构基于下面两点

1. "名称/值"对的集合不同语言中，它被理解为对象(object)，记录(record)，结构(struct)，字典(dictionary)，哈希表(hash table)，键列表(keyed list)等
2. 值的有序列表多数语言中被理解为数组(array)

JSON使用：

JSON以一种特定的字符串形式来表示 JavaScript 对象。如果将具有这样一种形式的字符串赋给任意一个 JavaScript 变量，那么该变量会变成一个对象引用，而这个对象就是字符串所构建出来的，好像有点拗口，我们还是用实例来说明。

这里假设我们需要创建一个User对象，并具有以下属性

用户ID
用户名
用户Email 您可以使用以下JSON形式来表示User对象：

{"UserID":11, "Name":"tht", "Email":"18039010◎qq.com"};

然后如果把这一字符串赋予一个JavaScript变量，那么就可以直接使用对象的任一属性了。

完整代码:

<script>
var User = {"UserID":11, "Name":"tht", "Email":"18039010◎qq.com"};
alert(User.Name);
</script>

实际使用时可能更复杂一点，比如我们为Name定义更详细的结构，使它具有FirstName和LastName：

{"UserID":11, "Name":{"FirstName":"tht","LastName":"Tang"}, "Email":"18039010@qq.com"}

完整代码:

<script>
var User = {"UserID":11, "Name":{"FirstName":"tht","LastName":"Tang"}, "Email":"18039010@qq.com"};
alert(User.Name.FirstName);
</script>

现在我们增加一个新的需求，我们某个页面需要一个用户列表，而不仅仅是一个单一的用户信息，那么这里就需要创建一个用户列表数组。
下面代码演示了使用JSON形式定义这个用户列表：

[
{"UserID":11, "Name":{"FirstName":"tht","LastName":"Tang"}, "Email":"18039010@qq.com"},
{"UserID":12, "Name":{"FirstName":"aa","LastName":"bb"}, "Email":"xxx◎xxx.com"},
{"UserID":13, "Name":{"FirstName":"cc","LastName":"dd"}, "Email":"xxx2◎xxx2.com"}
]

完整代码:

<script>
var UserList = [
{"UserID":11, "Name":{"FirstName":"tht","LastName":"Tang"}, "Email":"18039010@qq.com"},
{"UserID":12, "Name":{"FirstName":"aa","LastName":"bb"}, "Email":"xxx◎xxx.com"},
{"UserID":13, "Name":{"FirstName":"cc","LastName":"dd"}, "Email":"xxx2◎xxx2.com"}
];
alert(UserList[0].Name.FirstName);
</script>

事实上除了使用"."引用属性外，我们还可以使用下面语句：

alert(UserList[0]["Name"]["FirstName"]); 或者 alert(UserList[0].Name["FirstName"]);

现在读者应该对JSON的使用有点认识了，归纳为以下几点：

对象是属性、值对的集合。一个对象的开始于“{”，结束于“}”。每一个属性名和值间用“:”提示，属性间用“,”分隔。
数组是有顺序的值的集合。一个数组开始于"["，结束于"]"，值之间用","分隔。
值可以是引号里的字符串、数字、true、false、null，也可以是对象或数组。这些结构都能嵌套。
字符串和数字的定义和C或C#基本一致。小节：

本文通过一个实例演示，初步了解了JSON 的强大用途。可以归结如下：
JSON 提供了一种优秀的面向对象的方法，以便将元数据缓存到客户机上。
JSON 帮助分离了验证数据和逻辑。
JSON 帮助为 Web 应用程序提供了 Ajax 的本质。
二.获取或设置元素的值
采用val()方法,这里所谓的值,当然是获取属性里的值,比如文本框的值,列表,下拉框,复选框,单选框的值,这里采用下面的一段HTML代码为例子

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script language="javascript" type="text/javascript" src="jquery-1.3.2-vsdoc2.js"></script>
    <script language="javascript" type="text/javascript">
function GetResult() {
//暂时把相关的一些语句注释掉 
//alert($("#single").val()); //获取下拉列表框选中的值
//alert($("#multiple").val()); //获取列表框中选中的多个值,返回结果为选项一,选项三
//alert($(":text").val());//获取input类型为text的文本框的值
//$("#single").val("第二个选型");  //给下拉列表框赋值,选中的值为第二个选项,前提这个值要存在
//$("#multiple").val(["选项二", "选项三"])//给列表框赋值,多个值的话用[]括起来用,
//$("input").val(["check2", "radio1"]);//给复选框和单选框同时赋值
            $("input:text").val("我是一颗大树");//给文本框赋值
        }
    </script>
</head>
<body>
    <select id="single">
      <option>第一个选项</option>
      <option>第二个选型</option>
    </select>
    <select id="multiple" multiple="multiple">
      <option selected="selected">选型一</option>
      <option>选项二</option>
      <option selected="selected">选项三</option>
    </select><br/>
    <input type="checkbox" value="check1"/> 唱歌
    <input type="checkbox" value="check2"/> 跳舞
    <input type="radio" value="radio1"/> 男
    <input type="radio" value="radio2"/> 女
    <input type="text" value="我是一个小树苗"/>
    <input id="btResult" type="button" value="获取结果" onclick="GetResult();" />
</body>
</html>

方法名	说明	举例
val()	获得第一个匹配元素的当前值。	见上面例子
val(val)	给指定的对象赋值	见上面例子

三.获取或设置元素的内容

采用的方法text()

方法名	说明	举例
text()	取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效当然这里取得是<p>取这里面得内容</p>	$("p").text();
text(val)	设置所有匹配元素的文本内容与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 直接输出).	$("p").text("<b>输出点内容</b> new text."); 结果:

四.获取或设置元素的html内容

采用html(),这个方法跟上面的text功能非常类似,一个是获取文本内容,一个是获取html内容

方法名	说明	举例
html()	取得第一个匹配元素的html内容	$("p").html() 结果:
html(val)	设置每一个匹配元素的html内容。	$("div").html("<p>Hello Again</p>");