JQuery 如何给DIV增加ID

JQuery 如何给DIV增加ID,第1张

使用attr()或prop()方法为id属性赋值即可,关键代码

$(obj_div).attr('id',id_name)

$(obj_div).prop('id',id_name)

实例演示如下:点击按钮设置div标签的id为test,为了便于观察效果,css中设置了id为test的样式为红色

1、HTML结构

<style>

#test{color:red !important font-weight:bold}

</style>

<div>我是示例DIV</div>

<input type="button" value="设置上一个div的id为test">

2、jquery代码

$(function(){

$("input:button").click(function() {

$(this).prev("div").attr("id","test")

})

})

3、效果演示

使用Jquery获取某个div时需要这样:前台使用EL进行迭代LIST生成div,为其添加动态的id,生成之后变成下面样式

<div id="tz-1"></div>

<div id="tz-2"></div>

<div id="tz-3"></div>

<div id="tz-4"></div>

<div id="tz-5"></div>

<div id="tz-6"></div>

注意:我们在使用Jquery获取某个div时需要这样写

$("#" + 所定义的id变量名)

而不能写成这样

$("#所定义的id变量名")

扩展资料:

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档 *** 作、事件处理、动画设计和Ajax交互。

ID选择器:选择具有给定id属性的单个元素。

对于id选择器,jQuery使用JavaScript函数document.getElementById(),这是非常有效的。当另一个选择器连接到id选择器时,如H2#页滴,jQuery在将元素标识为匹配之前执行额外的检查。

呼叫jQuery()(或$()),以id选择器作为其参数,将返回一个jQuery对象,该对象包含一个包含0或一个DOM元素的集合。

各ID值只能在文档中使用一次。如果已为多个元素分配了相同的ID,则使用该ID的查询只会选择DOM中的第一个匹配元素。但是,不应依赖此行为;使用相同ID的多个元素的文档无效。

如果id包含像句点或冒号这样的字符,则必须用反斜杠转义那些字符.

参考资料:

百度百科 jQuery

Jquery官方API -ID Selector

var anElement = $("#someElement")anElement.attr("anyAttribute","anyValue")// 这段代码可以给ID为someElement的元素增加属性anyAttribute 属性值为anyValue// 属性名字随便写都可以 想写什么都行 如果属性名字存在会修改里面的值 否则就新加属性

jquery *** 作html标签的方法非常多,小编在这里总结一下。

首先,引入jquery,jquery下载地址在文章末尾的相关链接给出,这是运用jquery的第一步,也是必不可少的一步!

代码如下:

<head>

<script src="jquery.js"></script>

</head>

当然,你也可以不下载,直接引用。

代码如下:

<head>

<script src="/jquery/1.8.0/jquery.min.js"></script>

</head>

注意jquery的版本,及时更新。

接下来介绍jquery的第一种 *** 作html标签的方法。

1. *** 作已经存在的html标签的属性!

这就需要用到一个非常强大的函数attr()

函数写法:

var ss=$("HTML标签的ID").attr("想要获得的属性")

这样准确ID的HTML标签的指定属性的值就会赋给变量ss。

例如:var ss=$("#id").attr("value")

当然还可以给准确ID的HTML标签的指定属性赋值。

函数写法:

$("HTML标签的ID").attr("想要改变的属性","改变的值")

例如:$("#id").attr("class","aaa")

这样可以将ID为"id"的HTML标签的class改为aaa.

利用这个函数更改HTML标签的类或ID,配合样式表可以做出非常炫的动态效果!

贴上样例图:

2.jquery向指定位置添加不存在的HTML标签!

这次需要的函数是append()或appendto()

有很多人搞不起这两个函数的区别,稍后会讲明。

函数写法:

$("HTML标签的ID").append("完整的HTML标签")

例如:$("#id").append("<input type='text' value=' ' id='aa' />")

HTML标签的ID是为了定位添加的HTML标签,添加的HTML标签将会出现于指定ID标签的后面!注意控制排版!

贴上样例图:

接下来介绍appendto()的用法以及它和append()的区别!

函数写法:

$("完整的HTML标签").appendto("HTML标签的ID")

例如:$("<input type='text' value=' ' id='aa' />").append("#id")

这样也可以达到与append()的相同效果,至于区别,也许你已经发现了,区别就是前后两个括号的内容反过来了,先填写HTML标签,再写指定元素ID。

但是即使这样写,添加的HTML标签仍会出现于指定ID标签的后面!

这个就不贴样例图了。

*** 作HTML的函数还有很多,比如图中提到的CSS()。

这是 *** 作指定属性的。用attr()也可以做到,所以就不再介绍。

这里贴上一张jquery *** 作HTML的方法汇总图。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11744981.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存