JQuery学习29篇(特效只是DOM操作+想像力)

原创于 2020-01-06 19:50:06 发布 · 161 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文深入探讨了使用JQuery进行DOM操作的方法，包括元素的添加、修改和样式调整等核心技能，通过实例展示了如何利用JQuery简化网页交互设计。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery学习29篇(特效只是DOM操作+想像力)</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
<style type="text/css">
li{
/*     float: left; */
    float: none;
    width: 100px;
    height: 100px;
	text-align: center;
    line-height: 30px;
    background: red;
    color: white;
    border-radius: 100%;
    list-style:none;
}
</style>
</head>
<body style="background-color: #CCE8CF;">
	<h3 style="color: #cd1636;">JQuery学习29篇(特效只是DOM操作+想像力)</h3>
	<div style="border-color: Navy;">
		<p>ok</p>
		江西省赣州市于都县
	</div>
	<ul><li>yes</li></ul>
	<input type="button" value="把红色圆圈加入到div层中" onclick="fun1();">
	<br/><br/>
	<input type="button" value="向div层中追加内容" onclick="fun2();">
	<br/><br/>
	<input type="button" value="标题改为海军蓝并且字体变大" onclick="test();">
	<br/><br/>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//
function fun1(){
	$('ul').appendTo('div');
}

//
function fun2(){
	$('div').append('<font color="red">特产有：赣南脐橙</font>柿子饼，番薯干');
	$('div').append('酸枣糕，珠子粉');
	$('div').append('<font color="blue">酸萝卜</font>');
	console.log($('<p>hello，china</p>').appendTo('div')[0].innerHTML);
	console.log($('<p>I Love China</p>').appendTo('div').html());
	console.log($('<p>中国</p>')[0].innerHTML);
	console.log($('<p>中华</p>').html());
	console.log($('aaa'));
}

//
function test(){
	var a = window.document.getElementsByTagName('h3')[0].innerHTML;
	console.log(a);
	//window可以省略
	var b = document.getElementsByTagName('h3')[0].innerHTML;
	console.log(b);
	var b = document.getElementsByTagName('h3')[0].style.color = 'Navy';
	document.getElementsByTagName('h3')[0].style.fontSize = '32px';
}
</script>
</html>

标签