JQuery三、

来源：互联网发布：网络新媒体是干什么的编辑：程序博客网时间：2024/06/05 15:35

六、修改元素属性，内容，css样式

（1）

DOM操作

例题：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<!--引入js-->

<script src="../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

$(function(){

//获取div标签内部的元素

// alert($("#d").html())

//修改div标签里的内容

// $("#d").html('<span>skfksd</span><h1>sfdfgsdds</h1>gfddd');

//获取div标签内部的文本

// alert($("#d").text())

//修改div标签里的文本

// $("#d").text('<p>dfsdfsd</p>123434343')

//

//获取输入框的value值

alert($("#t").val())

//修改value属性值

$("#t").val('12345657')

})

</script>

</head>

<body>

<div id="d">

<p>12323423423</p>

<a>!@^%@&@&@</a>

<!--把标签当作普通文本进行解析-->

<xmp><p>dsafsdfsfdsdfs</p></xmp>

fsdfdsfsdfsfsd

<input type="text" id="t" value="fsfsdfsdfsdfsddf" />

</div>

</body>

</html>

（2）attr方法

DOM操作

例题：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

<script type="text/javascript"charset="utf-8"src="js/jquery-3.1.1.min.js"></script>

<script type="text/javascript">

$(function(){

//获取name属性值

// alert($("input").attr('name'))

//修改name属性值

// $("input").attr('name','321')

// $("input").attr('type','password')

// $("input").attr('id','test')

//修改元素的所有属性值

//多个属性值一起修改

//调用attr方法，把所有要修改的属性放在{}里

//属性之间用逗号分隔

//属性名与属性值之间用冒号隔开

$("input").attr({'name':'321','type':'password','id':'te'})

})

</script>

</head>

<body>

<input type="text"name="123"value="">

</body>

</html>

（3）通过jquery修改css样式

DOM操作

例题：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>通过jquery修改css样式</title>

<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

$(function(){

$("div").css('background-color','blue');

$("div").css({'background-color':'red','height':'200px','width':'100px'})

})

</script>

</head>

<body>

<div>

nnnnnnnnnn

</div>

</body>

</html>

阅读全文

0 0