1.将下载的bootstrap文件和jquery文件引入项目中。
2.在<body></body>内引入
<script src="static/js/jquery-3.6.0.js"></script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>
3.即可展现出bootstrap的动态效果。
-- jquery-3.6.0的文件可直接复制该网址的所有内容。
code.jquery.com/jquery-3.6.0.js
一.初时JavaScript（注意标记的js存放位置）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.menus{
width:200px;
border:1px solid red;
}
.menus.header{
background-color:gold;
padding:20px 10px;
}
</style>
<!-- JavaScript位置1-->
<script type="text/javascript">
</script>
</head>
<body>
<div class="menus">
<div class="header" οnclick="func()">大标题</div>
<div class="item">内容</div>
<!--推荐： JavaScript位置2-->
<script type="text/javascript">
function func(){
alert("你好");
confirm("是否要继续")
}
</script>
</div>
</body>
</html>
二.注释
HTML的注释
<!-- 注释内容-->
CSS的注释（在style代码块）
/*注释内容*/
JavaScript的注释（在script代码块）
//注释内容
/*注释内容*/
三.jquery 选择器种类
1.ID选择器
<h1 id="txt">中国联通</h1>
$("#txt")
2.样式选择器
<h1 class="c1">中国联通</h1>
$("#.c1")
3.标签选择器
<h1 class="c1">中国联通</h1>
$("h1")
4.多选择器
<h1 class="c1">中国tv</h1>
<h1 class="c1">
<div class="c3">
<span></span>
<a></a>
</div>
</h1>
<h1 class="c2">中国来南通</h1>
<ul>
<li>xx</li>
<li>xx</li>
</ul>
$("#c3,#c2,li")
5.属性选择器
<input type='text' name="n1" />
<input type='text' name="n1" />
<input type='text' name="n2" />
$("input[name='n1']")
6.间接寻找
找兄弟标签
利用next（），prev（）方法获取
<div>北京</div>
<div id="c1">上海</div>
<div>深圳</div>
<div>广州</div>
$("#c1").prev()
$("#c1")
$("#c1").next()
$("#c1").next().next()
$("#c1").siblings() //所有的兄弟标签
找父子
利用parent（），children()方法寻找
find()方法找所有子类
案例：菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始</title>
<style>
.menus{
width:200px;
height:800px;
border:1px solid red;
}
.menus .header{
background-color: gold;
padding:10px 5px;
border-bottom:1px dotted #dddddd;
cursor: pointer; //鼠标美观
}
.menus .content a{
display: block;
padding:5px 5px;
border-bottom:1px dotted #dddddd;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="menus">
<div class="item">
<div class="header" οnclick="clickMe(this);">上海</div>
<div class="content hide" >
<a>宝山区</a>
<a>青浦区</a>
</div>
</div>
<div class="item">
<div class="header" οnclick="clickMe(this);">北京</div>
<div class="content hide">
<a>海淀区</a>
<a>西城区</a>
</div>
</div>
</div>
<script src="static/js/jquery-3.6.0.min.js"></script>
<script>
function clickMe(self){
var hasHide=$(self).next().hasClass("hide");
if(hasHide){
$(self).next().removeClass("hide");
}
else{
$(self).next().addClass("hide");}
}
</script>
</body>
</html>
7.从上面案例中可以了解到操作样式
addClass removeClass hasClass
8.值的操作
<div id='c1'>内容</div>
$("#c1").text() //获取文本内容
$("#c1").text("休息") //设置文本内容
<input type='text' id='c2' />
$("#c2").val() //获取用户输入的值
$("#c2").val("哈哈哈") //设置值
9.动态创建数据
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始</title>
<style>
</style>
</head>
<body>
<input type="text" id="txtUser" placeholder="用户名">
<input type="text" id="txtEmail" placeholder="邮箱">
<input type="button" value="提交" οnclick="getInfo()">
<ul id="view">
</ul>
<script src="static/js/jquery-3.6.0.min.js"></script>
<script>
function getInfo(){
var username=$("#txtUser").val();
var email=$("#txtEmail").val();
var dataString=username+"-"+email;
var newLi= $("<li>").text(dataString);
$("#view").append(newLi);
}
</script>
</body>
</html>
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始</title>
<style>
</style>
</head>
<body>
<ul>
<li>百度</li>
<li>谷歌</li>
<li>搜狗</li>
</ul>
<script src="static/js/jquery-3.6.0.min.js"></script>
<script>
$(function(){ //$(function(){}可以在页面框架加载完成后运行
$("li").click(function(){
$(this).remove();
});
});
</script>
</body>
</html>
案例：表格删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始</title>
<style>
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>武济市</td>
<td>
<input type="button" value="删除" class="delete">
</td>
</tr>
<tr>
<td>1</td>
<td>武济市</td>
<td>
<input type="button" value="删除" class="delete">
</td>
</tr>
<tr>
<td>1</td>
<td>武济市</td>
<td>
<input type="button" value="删除" class="delete">
</td>
</tr>
</tbody>
</table>
<script src="static/js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
$(".delete").click(function(){
$(this).parent().parent().remove();
});
});
</script>
</body>
</html>
总结：可以通过jquery手册查询所需知识点。jquery 在线手册 | jQuery API 中文手册 | jQuery 速查表 | jQuery 参考手册 | jQuery CHM | jQuery 在线文档 | jQuery 1.12.1 (hemin.cn)
3553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
