jqury属性操作，特殊效果

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一. 常用属性操作

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

// 取出html内容var $htm = $('#div1').html();// 设置html内容$('#div1').html('<span>添加文字</span>');

2、text() 取出或设置text内容

// 取出文本内容var $htm = $('#div1').text();// 设置文本内容$('#div1').text('<span>添加文字</span>');

3、attr() 取出或设置某个属性的值

// 取出图片的地址var $src = $('#img1').attr('src');// 设置图片的地址和alt属性$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

4. prop()取出其他值

<input type="checkbox" name="" id="check" checked>多选默认选上
//读
alert($('#check').prop(checked)); 如果选中会弹出true，否则是false
//写
$('check').prop({checked:true});

5. val() 设置或返回匹配元素的值

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(":text").val("Hello jack");
});
});
</script>
</head>
<body>
<p>Name: <input type="text" name="user" value="Hello World" /></p>
<button>改变文本域的值</button>
</body>
</html>

打开网页后文本框默认显示Hello World，如果点击改变文本域的值后，就会显示Hello jack

二. 特殊效果

fadeOut() 淡出 fadeToggle() 切换淡入淡出 hide() 隐藏元素 show() 显示元素 toggle() 依次展示或隐藏某个元素 slideDown() 向下展开 slideUp() 向上卷起 slideToggle() 依次展开或卷起某个元素例子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">.box{
width:200px;
height:200px;
background-color: gold;
}</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">$(function(){$('#btn').click(function() {//淡入淡出//$('.box').fadeToggle();// 显示和隐藏
//$('.box').toggle();$('.box').slideToggle();});})</script>
</head>
<body>
<input type="button" name="" value="效果" id="btn">
<div class="box"></div>
</body>
</html>