Jquery操作元素属性

最新推荐文章于 2023-06-26 10:07:38 发布

sdbi_hu

最新推荐文章于 2023-06-26 10:07:38 发布

阅读量724

点赞数 1

分类专栏： web开发

本文链接：https://blog.csdn.net/qq_39231530/article/details/94967884

版权

web开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Jquery操作DOM

1.获取元素的属性：

$('.btn').attr('property') //property可以使元素的样式属性，如style或value等

2.0设置元素的属性：

$('.btn').attr('属性名称',''属性值); // $('.btn').attr('type','text')

2.1.设置元素的多个属性：

$('.btn').attr('属性名称',''属性值); // $('.btn').attr({'type':'text','value':'我是输入框'});

3.获取和设置表单的值：

$('input').val();//获取表单元素的值

$('input').val('value');设置表单元素的值

4.实现简单的留言板
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
    <title>实现简单的留言板</title>
    <script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
	$(function(){
		var num=1
		$('#btn').click(function(){
			var html='<p><span>用户'+num+'说：</span>'+$('#text').val()+'</p>'+$('#box').html();
			$('#box').html(html);
			$('#text').val('');
			++num;
		})
		
	});
</script>
</head>
<body>
	<h3>留言内容</h3>
	<div id="box"></div>
	<textarea id="text"></textarea><br>
	<input type="button"  id="btn" value="留言"/>
</body>
</html>

5.操作DOM节点：

5.1-创建节点：

$()函数方法 // var obj=$('HTML代码');

html()方法 //$(div).html('HTML代码'); 例如，$(div).html('<p>这是一个P段落</p>');

5.2-插入节点：

append() ， // $('ul').append('<p>我是要插入的p节点</p>');

appendTo() // $('<p>我是要插入的p节点</p>').appendTo('ul');

插入在内部元素的最后处如

<div>

<ul>

<li>栏目一</li>

<li>栏目二</li>

<li>栏目三</li>
<p>我是要插入的p节点</p>

</ul>

<div>

prepend() // $('ul').prepend('<p>我是要插入的p节点</p>');

prependTo() // $('<p>我是要插入的p节点</p>').prependTo('ul');

插入在内部元素的最前面，如

<div>

<ul>

<p>我是要插入的p节点</p>

<li>栏目一</li>

<li>栏目二</li>

<li>栏目三</li>

</ul>

<div>

before() // $('ul').before('<p>我是要插入的p节点</p>');

insertBefore() // $('ul').insertBefore('<p>我是要插入的p节点</p>');

//插入在元素外部的最前面

<div>
<p>我是要插入的p节点</p>

<ul>

<li>栏目一</li>

<li>栏目二</li>

<li>栏目三</li>

</ul>

<div>

after() // $('ul').after('<p>我是要插入的p节点</p>');

insertAfter() // $('ul').insertAfter('<p>我是要插入的p节点</p>');

//插入在元素外部的最后面

<div>

<ul>

<li>栏目一</li>

<li>栏目二</li>

<li>栏目三</li>

</ul>
<p>我是要插入的p节点</p>

<div>

5.3-删除节点

remove()方法 //直接删除节点，不可恢复 $('p').remove()

empty() 方法 //清空节点中的内容，节点还存在 $('p').empty()

detach() 方法 //删除节点后可以恢复

例如：

<button id="btn1">删除段落</button>
<button id="btn2">恢复段落</button>
<p>今天天气不错</p>
<script>
var $p;//定义一个变量P
$('#btn1').click(function(){
$p=$('p').detach();//把删除的P放在变量中
});
$('#btn2').click(function(){

$($p).appendTo('body');//将变量中的P插入到body
});
</script>

5.4-复制节点

$(''div').clone() //复制div节点，方法：定义一个新变量，将复制的节点赋值给新变量，将新变量用appndTo插入到元素节点中

//后面若无参数，值复制内容，不复制行为。

//后面若有参数，为true时，不但复制内容，还复制事件行为

5.5-替换节点

$('div').replaceWith('<p>春暖花开</p>'); //方法一

$('<p>春暖花开</p>').replaceAll('div'); //方法二

5.6-包裹节点

.wrap()方法 //包裹节点，为每个匹配到的元素添加父元素，将其“包裹”起来。

$(''li).wrap('<strong></strong>') //执行代码后，将每个li都包裹起来如下图所示


<ul>
<strong><li>北京</li></strong>        //strong将li“包裹”起来
<strong><li>广州</li></strong>
<strong><li>上海</li></strong>
<strong><li>深圳</li></strong>
</ul>

.wrapAll()方法

$('li').wrapAll('<strong></strong>'); //执行代码后，将全部的li使用一对strong包裹起来如下图所示


<ul>
<strong>

<li>北京</li>      //strong将全部的li整体“包裹”起来
<li>广州</li>
<li>上海</li>
<li>深圳</li>

</strong>
</ul>

.wrapInner()方法 //为匹配元素添加子元素，该子元素用来包裹匹配元素中的所有内容

$('li').wrapInner('<strong></strong>'),执行代码如下图所示


<ul>


<li><strong>北京</strong></li>      //strong把所有li元素里的内容“包裹”起来
<li><strong>广州/<strong></li>
<li><strong>上海</strong></li>
<li><strong>深圳</strong></li>

</ul>

5.6-遍历节点

$('li').each(function(index),element); //index为遍历元素的索引，从0开始

//element为当前元素，一般用this代表当前元素

例如，有以下代码

<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>

如果要获取列表中第2个元素中的文本内容，可以使用each()方法处理

$('li').each(function(index){
    if(index==1){
        console.log($(this).text());//获取当前元素的内容
    }
})

遍历节点案例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
    <title>实现简单的留言板</title>
    <style type="text/css">
    	ul li{width: 60px; height: 100px; background: green;list-style-type: none;float: left;margin-left: 10px;
    }</style>
    <script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
	$(function(){
		$('ul li').each(function(index,element){
			$(element).css('opacity',(index + 1) / 10);
		});
		
	});
</script>
</head>
<body>
	<ul id="uu">
		<li>1</li>
		<li>2</li>
		<li>3<li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
	</ul>
</body>
</html>

5.6-链式编程

$('img').css('background','red').attr('alt','这是一张图片'); //设置img的背景为红色且alt属性为:这是一张照片

sdbi_hu

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery操作元素属性

Jquery操作DOM1.获取元素的属性：$('.btn').attr('property') //property可以使元素的样式属性，如style或value等2.0设置元素的属性：$('.btn').attr('属性名称',''属性值); // $('.btn').attr('type','text')2.1.设置元素的多个属性：$('.btn'...
复制链接

扫一扫