一、学习内容
**1.jQuery 的原理、语法、使用方法；
2.jQuery效果、jQuery HTML 操作**
二、代码编辑
例1：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="doke1.js"></script>
</head>
<body>
<h1 id="hn">Hello,jQuery!</h1>
<script type="text/javascript">
$("hn").innerHTML = "你好，jQuery";
$("hn").style.color = "red";
</script>
</body>
</html>例2：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function() {
$("#hn").html("你好，jQuery").css("color","red");
$(".url li:eq(1)").css("font-size","20px").css("color","red"); //li:eq(1) 这个指的是第二Li元素 ,所以是从0开始的
$("a[href*='dodoke.com']").css("color","red");
$(".url li:first").click(function() { alert("click me");})
});
</script>
</head>
<body>
<h1 id="hn">Hello,jQuery!</h1>
<hr>
<ul class="url">
<li>第1章</li>
<li>第2章</li>
<li>第3章</li>
<li>第4章</li>
<li>第5章</li>
<li>第6章</li>
<li>第7章</li>
</ul>
<a href="http://www.dodoke.com/xxxx1">dodoke1</a>
<a href="http://www.dodoke.com/xxxx2">dodoke2</a>
<a href="http://www.dodoke.com/xxxx3">dodoke3</a>
<a href="http://www.baidu.com/xxxx4">dodoke4</a>
<a href="http://www.dodoke.com/xxxx5">dodoke5</a>
<a href="http://www.dodoke.com/xxxx6">dodoke6</a>
</body>
</html>例3:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
#dv {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: grey;
}
</style>
<script type="text/javascript">
$(function(){
var showFlag = true;
$(".ahide").click(function(){
// if (showFlag) {
// $("#dv").hide(1000);
// showFlag = false;
// $(".ahide").html("显示");
// } else {
// $("#dv").show(1000);
// showFlag = true;
// $(".ahide").html("隐藏");
// }
$("#dv").toggle(1000, function(){
alert("结束");
});
});
})
</script>
</head>
<body>
<a href="#" class="ahide">隐藏</a>
<div id="dv"></div>
</body>
</html>例4:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
var i = 1;
var addLi = function(type) {
if(type == 1) {
$("#ull").prepend("<li>第"+(i++)+"章 <button onclick='removeLi(this)'>X</button></li>");
}
if(type == 2) {
$("#ull").append("<li>第"+(i++)+"章 <button onclick='removeLi(this)'> X </button></li>");
}
}
var removeLi = function(obj) {
$(obj).parent().remove();
}
var emptyUl = function() {
$("#ull").empty();
}
</script>
</head>
<body>
<button onclick="addLi(1);">追加一行（开头）</button> <button onclick="addLi(2)">追加一行（结尾）</button> <button onclick="emptyUl()">清空</button>
<ul id="ull"></ul>
</body>
</html>三、学习心得
只有很好的掌握了前面的内容才能在学习jQuery时更加的透彻。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
