码迷,mamicode.com
首页 > Web开发 > 详细

jQuery Html

时间:2015-08-25 21:58:30      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:

jQuery 获取

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


jQuery 设置

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


text()、html() 以及 val() 的回调函数



添加新的 HTML 内容


append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容


删除元素/内容
remove() - 删除被选元素(及其子元素) empty() - 从被选元素中删除子元素


jQuery 操作 CSS




addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性


jQuery css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。

jQuery 尺寸 方法

  • width()

  • height()

  • innerWidth()

  • innerHeight()

  • outerWidth()

  • outerHeight()

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>jQuery Html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<script src="jquery-2.1.4.min.js"></script>
	<script src="html.js"></script>
	<link rel=stylesheet href="html.css" type="text/css">
  </head>
  
  <body>
  <hr>
  <p>jQuery 获取</p>
    <p id="test1">test1这是段落中的<b>粗体</b>文字。</p>
    <input id="input1" type="text" value="input1  hello world"/><br><br>
    <input id="input2" value="input2 attr获取属性值"/><br><br>
    
    <button id="button1" type="button">button1  显示test1中的text</button> 
    <button id="button2" type="button">button2  显示test1中的html</button>
    <button id="button3" type="button">button3  显示input1中的val</button>
    <button id="button4" type="button">button4  attr获取input2中的value属性值</button><br><br>
    
    <hr>
    <p>jQuery 设置</p>
    <p id="test2">test2 input3 设置属性值</p><br><br>
    <input id="input3" type="text" value="input3  点击button7设置value值"/><br><br>
    <button id="button5" type="button">button5  设置test2的text</button>
    <button id="button6" type="button">button6  设置test2的html</button>
    <button id="button7" type="button">button7  设置test2的val</button>
    <br><br>
    
    <hr>
    <p>jQuery 回调</p>
    <p id="test3">text()、html() 以及 val() 的回调函数</p><br><br>
    <p id="test4">text()、<b>html()</b> 以及 val() 的回调函数</p><br><br>
    <input id="input4" type="text" value="input4  点击button10设置value值"/><br><br>
    <button id="button8" type="button">button8  test3中的text()</button>
    <button id="button9" type="button">button9  test4中的html()</button>
    <button id="button10" type="button" width=‘500px‘>button10  test3中的val()</button>
    
    <hr>
    <p><a href="www.baidu.com" class="a1">www.baidu.com</a></p>
    <button class="button11">button11 点击该按钮后,上面的链接会链接到新浪网的链接</button><br><br>
    <button class="button12">button12 点击该按钮后,上面的链接会链接到新浪网的链接,这是用的attr回调函数方法</button>
    
    <hr>
    <p>jQuery 添加</p>
    <p class="p5">jQuery 添加  append</p>
    <p class="p5">This is a paragraph.</p>
    <p class="p5">This is another paragraph.</p>
    <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
    </ol>
    <button class="button13">button 13 点击,在后面增加文本</button>
    <button class="button14">button 14 点击,在后面追加列表项</button><br><br><br>
    <p class="p1">p1 jQuery 添加  prepend</p>
    <button class="button15">button 15 点击,在前面增加文本</button>
    <p class="p6">p6 通过append(),prepend()添加若干元素</p>
    <button class="button16">button 16 点我,可以添加很多元素哦</button>
    
    
    <hr>
    <img alt="W3School" src="2.jpg"><br><br>
    <button id="button17">button 17 点击,在图片前面添加文本</button>
    <button id="button18">button 18 点击,在图片后面添加文本</button>
    <button id="button19">button 19 点击,在图片后面添加多个文字文本</button>
    
    <hr>
    <p>jQuery 删除元素</p>
    <div id="div1" style="background-color:blue;">
    I will be deleted!
    </div>
    <button id="button20">button 20 点击,删除div1</button><br>
	
    <div id="div2" style="background-color:yellow;">
    div2 I will be deleted!
    <p class="p7">p7 @ I will be deleted!</p>
    </div>
    <button id="button21">button 21 点击,删除div2的子元素</button><br><br>
    
    <p class="italic"><i>This is italic !</i></p>
    <p class="italic"><i>This is italic !</i></p>
    <button id="button22">button 22 点击,删除italic的子元素</button>
    
    <hr>
    <p>jQuery css类</p>
    <h1>标题  1</h1>
    <h2>标题  2</h2>
    <p class="p8">这是一个段落</p>
    <p class="p8">这是另一个段落</p>
    <div>这是非常重要的文本!</div>
    <button id="button23">button 23 点击,向元素添加类</button>
    <button id="button24">button 24 点击,向元素添加多个类</button>
    <button id="button25">button 25 点击,向元素删除类</button>
    <button id="button26">button 26 点击,切换</button>
    
    <hr>
    <p>jQuery css()</p>
    <p id="test5" style="background-color:red">test5  This is a paragraph!</p>
    <p id="test6" style="background-color:blue">test6 This is a paragraph!</p>
    <p id="test7" style="background-color:yellow">test7 This is a paragraph!</p>
    <button id="button27">button 27 点击,可以显示test5背景颜色</button>
    <button id="button28">button 28 点击,可以为test6设置背景颜色</button>
    <button id="button29">button 29 点击,可以为test7设置多个属性</button>
    
    <hr>
    <p>jQuery 尺寸</p>
    <div id="div3" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;">
	div3
    </div>
    <button id="button30">button 30 点击,显示 div3 的尺寸</button>
  </body>
</html>

$(document).ready(function(){
	$("#button1").click(function(){
		alert("Text: "+$("#test1").text());
	});
	$("#button2").click(function(){
		alert("Html: "+$("#test1").html());
	});
	$("#button3").click(function(){
		alert("var: "+$("#input1").val());
	});
	$("#button4").click(function(){
		alert("attr: "+$("#input2").attr("value"));
	});
	$("#button5").click(function(){
		$("#test2").text("text2 after set");
	});
	$("#button6").click(function(){
		$("#test2").html("<b>test2 html after set </b>");
	});
	$("#button7").click(function(){
		$("#input3").val("input3 val after set");
	});
	$("#button8").click(function(){
		$("#test3").text(function(i,origText){
			return "test3: "+origText+" New text:Hello world!"
		});
	});
	$("#button9").click(function(){
		$("#test4").html(function(i,origText){
			return "test4: "+origText+" New html:Hello world!"
		});
	});
	$("#button10").click(function(){
		$("#input4").html(function(i,origText){
			return "input4: "+origText+" New val:Hello world!"
		});
	});
	$(".button11").click(function(){
		$(".a1").attr("href","http://www.sina.com");
	});
	$(".button12").click(function(){
		$(".a1").attr("href",function(){
			return "http://www.sina.com";
		});
	});
	$(".button13").click(function(){
		$(".p5").append("<b>Appended text</b>.");
	});
	$(".button14").click(function(){
		$("ol").append("<li>Appended item</li>")
	});
	$(".button15").click(function(){
		$(".p1").prepend("added before p1  ")
	});
	$(".button16").click(function(){
		var txt1="<p>base html create new elements</p>";
		var txt2=$("<p></p>").text("base jQuery create new elements");
		var txt3=document.createElement("p");
		txt3.innerHTML="Text.";
		$(".p6").append(txt1,txt2,txt3);
	});
	$("#button17").click(function(){
		$("img").before("<b>Before</b>");
	});
	$("#button18").click(function(){
		$("img").after("<b>After</b>");
	});
	$("#button19").click(function(){
		var txt1="<b>I </b>";
		var txt2=$("<i></i>").text("love ");
		var txt3=document.createElement("big");
		txt3.innerHTML="jQuery!";
		$("img").after(txt1,txt2,txt3);
	});
	$("#button20").click(function(){
		$("#div1").remove();
	});
	$("#button21").click(function(){
		$("#div2").empty();
	});
	$("#button22").click(function(){
		$("p").remove(".italic");
	});
	$("#button23").click(function(){
		$("h1,h2,.p8").addClass("blue");
		$("div").addClass("important");
	});
	$("#button24").click(function(){
		$("h1,h2,.p8").addClass("important blue");
	});
	$("#button25").click(function(){
		$("h1,h2,.p8").removeClass("blue");
	});
	$("#button26").click(function(){
		$("h1,h2,.p8").toggleClass("blue");
	});
	$("#button27").click(function(){
		alert("Background color= "+$("#test5").css("background-color"));
	});
	$("#button28").click(function(){
		$("#test6").css("background-color","red");
	});
	$("#button29").click(function(){
		$("#test7").css({"background-color":"red","font-size":"200%"});
	});
	$("#button30").click(function(){
		var txt="";
		txt+="width of div:"+$("#div3").width()+"</br>";
		txt+="Height of div:"+$("#div3").height();
		$("#div3").html(txt);
	});
});

.important
{
	font-weight:bold;
	font-size:xx-large;
}
.blue
{
	color:blue;
}


jQuery Html

标签:

原文地址:http://my.oschina.net/u/2356966/blog/497026

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!