jQHTML（获取内容和属性）

1、jQ动画callback（回调）

使用回调函数：（弹窗会在段落内容消失之后弹出）

html：
<button>隐藏</button>
<p>我们段落内容，点击“隐藏”按钮我就会消失</p>

　　

jq：
$(function(){
  $("button").click(function(){
    $("p").hide("slow",function(){
      alert("段落现在被隐藏了");
    });
  });
});

　不使用回调函数（弹窗会在段落消失之前弹出）

html：
<button>隐藏</button>
<p>这是一个段落</p>

　　

jq;
$(function(){
  $("button").click(function(){
    $("p").hide(1000);
    alert("现在段落被隐藏了");
  });
});

　　2、jquery链

html：
<p id="p1">你好</p>
<button>点我</button>

　　

jq：
$(function(){
  $("button").click(function(){
    $("#p1").css("color","red")
      .slideUp(2000)
      .slideDown(2000);
  });
});

　　

　

 

1、获取内容

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值

html：
        <p id="test">这是段落中的 <b>粗体</b> 文本。</p>
	<button id="btn1">显示文本</button>
	<button id="btn2">显示 HTML</button>
	<p>显示:input <input type="text" id="text" value="你好"></p>
	<button id="btn3">显示值</button>    

　　

jq：
//text()     html()
	$(function(){
		$("#btn1").click(function(){
			alert("Text:"+$("#test").text());
		});
		$("#btn2").click(function(){
			alert("HTML:"+$("#test").html());
		});
	});

	//val()
$(function(){
	$("#btn3").click(function(){
		alert("值为:"+$("#text").val());
	});
});

　　2、获取属性

attr() 方法用于获取属性值

html：
        <p><a href="www.baidu.com" id="lj">获取属性</a></p>
	<button id="btn4">获取href属性值</button>

　　

jq：
//获取属性
	$(function(){
		$("#btn4").click(function(){
			alert("href属性值:"+$("#lj").attr("href"));
		});
	});

　　

转载于:https://www.cnblogs.com/1500418882qqcom/p/10057494.html