jquery 属性操作,循环,事件

最新推荐文章于 2023-07-15 15:35:40 发布

小赵呢

最新推荐文章于 2023-07-15 15:35:40 发布

阅读量442

点赞数

文章标签： js css html vue javascript

本文链接：https://blog.csdn.net/weixin_53227758/article/details/119487198

版权

jquery属性操作

1、html() 取出或设置html内容

// 取出html内容

var $htm = $('#div1').html();

// 设置html内容

$('#div1').html('<span>添加文字</span>');

2、prop() 取出或设置某个属性的值

// 取出图片的地址

var $src = $('#img1').prop('src');

// 设置图片的地址和alt属性

$('#img1').prop({src: "test.jpg", alt: "Test Image" });

属性操作实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var $a = $('.link');
				var $img = $('#img01');
				var $div = $('#div1');
				
				// 读取class属性值
				console.log( $a.prop('class') );
				
				// 没有设置的属性读取为空
				console.log( $a.prop('title') );
				
				// 获取是图片的绝对地址
				console.log($img.prop('src'));
				
				// 设置属性
				$a.prop({'href':'http://www.baidu.com','title':'百度网链接'});
				
				// 不能读取console.log($a.pro('href'));
				//读取标签内包含的内容
				console.log( $a.html() );
				$div.html('<span>div里面的span元素</span>');
				console.log( $div.html() );
			})
		</script>
		<title></title>
	</head>
	<body>
		<a href="#" class="link">这是一个链接</a>
		<img src="images/002.jpg" id="img01" alt="水果">
		<div id="div1"></div>
	</body>
</html>

在这里插入图片描述

jquery循环

对jquery选择的对象集合分别进行操作，需要用到jquery循环操作，此时可以用对象上的each方法：

$(function(){
    $('.list li').each(function(i){
        $(this).html(i);
    })
})
......
<ul class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

手风琴实例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<style>
*{margin:0;padding:0;}
body{font-size:12px;}
#accordion{width:727px; height:833px; margin:100px auto 0 auto; position:relative; overflow:hidden; border:1px solid #CCC;}
#accordion ul{list-style:none;}
#accordion ul li{width:643px;height:833px; position:absolute; background:#FFF;}
#accordion ul li span{display:block;width:20px; height:833px; float:left; text-align:center; color:#FFF; padding-top:5px; cursor:pointer;}
#accordion ul li img{display:block; float:right;}
.bar01{left:0px;}
.bar02{left:643px;}
.bar03{left:664px;}
.bar04{left:685px;}
.bar05{left:706px;}
.bar01 span{background:#09E0B5;}
.bar02 span{background:#3D7FBB;}
.bar03 span{background:#5CA716;}
.bar04 span{background:#F28B24;}
.bar05 span{background:#7C0070;}
</style>
<script type="text/javascript">
	$(function(){
		var $li = $('#accordion li');
		$li.click(function(){
			$(this).animate({'left':21*$(this).index()});
			
			$(this).prevAll().each(function(){
				$(this).animate({'left':21*$(this).index()})
			})
			// 5 727-21*1
			$(this).nextAll().each(function(){
				$(this).animate({'left':727-21*(5-$(this).index())})
			})
		})
	})
</script>





<title>手风琴效果</title>
</head>

<body>
<div id="accordion">
	<ul>
	<li class="bar01"><span>宝宝01</span><img src="images/1.png" /></li>
    <li class="bar02"><span>宝宝02</span><img src="images/2.png" /></li>
    <li class="bar03"><span>宝宝03</span><img src="images/3.png" /></li>
    <li class="bar04"><span>宝宝04</span><img src="images/4.png" /></li>
    <li class="bar05"><span>宝宝05</span><img src="images/5.png" /></li>
	<>
</div>
</body>
</html>

在这里插入图片描述

jquery事件

事件函数列表：

blur() 元素失去焦点
focus() 元素获得焦点
click() 鼠标单击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
submit() 用户递交表单

绑定事件其他样式:

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());
    });
});

取消绑定样式:

$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());

        // $(this).unbind();
        $(this).unbind('mouseover');

    });
});

实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
		<script type="text/javascript">
			$(function(){
				// 在获得焦点的时候做什么事情
				// $('#input01').focus(function(){
				// 	alert('活动焦点')
				// })
				// 相当于先点他再点他
				$('#input01').focus();
				$('#input01').blur(function(){
					var sVal = $(this).val();
					
					alert(sVal);
				})
				$("#form1").submit(function(){
					//alert('提交');
					// 组织默认行为
					return false;
				})
			})
		</script>
		<title></title>
	</head>
	<body>
		<form id="form1" action="http://baidu.com">
		<input type="text" id="input01" name="dat01"/>
		<input type="text" id="input01" name="dat02"/>
		<input type="submit" name="" id="sub" value="提交" />
		</form>
	</body>
</html>

在这里插入图片描述

小赵呢

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 属性操作,循环,事件

jquery属性操作1、html() 取出或设置html内容// 取出html内容var $htm = $('#div1').html();// 设置html内容$('#div1').html('<span>添加文字</span>');2、prop() 取出或设置某个属性的值// 取出图片的地址var $src = $('#img1').prop('src');// 设置图片的地址和alt属性$('#img1').prop({src: "test.j
复制链接

扫一扫