day-16 jquery的DOM文档操作及bootstrap
1. jquery的DOM文檔操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box">
<p>黃金愛家</p>
</div>
<button>按鈕</button>
<!--<p>alex</p>-->
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
var imgSrc = './timg.jpg';
var alt = '美女';
var aHref = 'http://www.baidu.com'
// 父.append(子) 子元素 可以是 string js對象 jquery對象
// $('.box').append('<h2>太白結(jié)婚了</h2>');
// $('.box').append(` <ul>
// <li>
// <a href=${aHref}>
// <img src=${imgSrc} alt=${alt}>
// </a>
// </li>
// </ul>`);
// var oH3 = document.createElement('h3');
// oH3.innerText = 'taibai';
// console.log( $('.box'));
// $('.box').append(oH3);
//相當(dāng)于一個(gè)移動(dòng)操作
// $('.box').append($('p'));
// 追加到
// $(子).appendTo(父)
// $('p').click()
?
// var oDiv = document.getElementsByClassName('box')[0];
// // $('<h3>哈哈哈哈</h3>').appendTo($('.box'));
// // $('<h3>哈哈哈哈</h3>').appendTo('.box');
// $('<h3>哈哈哈哈</h3>').appendTo(oDiv).click(function () {
// alert(1);
// });
// 追加到父元素中的第一個(gè)元素
// $('.box').prepend('哈哈哈')
// $('.box').prepend('<h5>哈哈哈2</h5>')
// 兄弟之間插入
$('p').after('<h3>alex</h3>');
$('<h3>女神</h3>').insertAfter('p');
$('p').replaceWith('結(jié)婚了');
$('<h5>哈哈哈</h5>').replaceAll('h3');
$('button').click(function () {
alert(1);
// 刪除節(jié)點(diǎn) 事件也刪除
// var aBtn = $('button').remove();
// 刪除節(jié)點(diǎn) 事件保留
// var aBtn = $('button').detach();
// console.log(aBtn);
//
// $('.box').prepend(aBtn);
$('.box').empty();
?
// 1. 初始化的時(shí)候，有初始化 渲染開銷 對于 文檔 DOM 如果是頻繁性的切換 建議使用 display：block|none addClass
//2. 少量的切換 建議使用 創(chuàng)建元素 刪除元素 性能消耗 創(chuàng)建==》銷毀
});
});
</script>
</body>
</html>
2.事件對象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<a href="http://www.baidu.com">按鈕</a>
</div>
<form action="http://www.baidu.com/s">
<input type="text" name = 'wd' id="wd">
<input type="submit" id="submit">
</form>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
$('a').click(function (event) {
//a form event.preventDefault();阻止默認(rèn)事件
event.preventDefault();
//阻止冒泡
event.stopPropagation()
console.log('a點(diǎn)擊了');
// 阻止冒泡
// event.stopPropagation()
// window.location.href
});
$('#submit,#wd').click(function () {
event.stopPropagation();
//同時(shí)阻止了默認(rèn)事件和冒泡
// return false;
});
$('form').submit(function (event) {
event.preventDefault();
event.stopPropagation()
console.log(1111);
// ajax請求
$.ajax({
url:'http://www.baidu.com/s',
type:'get',
success:function (data) {
console.log(data);
}
});
});
?
$('.box').click(function () {
console.log('盒子被點(diǎn)擊了')
})
$('body').click(function () {
console.log('body被點(diǎn)擊了')
})
$('html').click(function () {
console.log('html被點(diǎn)擊了')
})
?
});
</script>
</body>
</html>
3.jquery的位置信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
background-color: red;
padding: 10px;
border: 1px solid yellow;
/*margin-top: 100px;*/
/*margin-left: 100px;*/
position: relative;
top: 50px;
}
</style>
</head>
<body style="height: 2000px">
<div class="box">alex</div>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
$('.box').width(200).height(300);
// innerWidth innerHeight 內(nèi)部寬和高 不包含border
// console.log($('.box').innerWidth());
// $('.box').innerWidth(400)
// outerHeight outerWidth 外部寬和高 包含border
// console.log( $('.box').outerWidth());
// console.log( $('.box').offset().top);
$(document).scroll(function () {
// console.log(22222);
console.log( $(document).scrollTop())
})
})
</script>
</body>
</html>
4.?滾動(dòng)固定導(dǎo)航欄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.header{
width: 100%;
height: 40px;
background-color: rgba(0,0,0,.3);
}
.header_box{
position: fixed;
width: 100%;
height: 200px;
background-color: #555;
left: 0;
top: 0;
z-index: 888;
}
.fix_header{
position: fixed;
width: 100%;
height: 80px;
background-color: red;
top: 0;
left: 0;
display: none;
}
.content{
width: 500px;
height: 300px;
background-color: yellow;
position: absolute;
left: 50%;
margin-left: -250px;
top: 300px;
}
</style>
</head>
<body style="height: 2000px">
<div class="header">
<a href="javascript:void(0)" id="changeFu">換膚</a>
<div class="header_box" style="display: none;">
<a href="javascript:void(0)" class="hotmen">熱門</a>
<a href="javascript:void(0)" class="slideUp">收起</a>
</div>
</div>
<div class="content">
</div>
<div class="fix_header">
固定導(dǎo)航欄
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$(function () {
$('#changeFu').click(function (e) {
e.stopPropagation();
$('.header_box').stop().slideDown(1000);
});
$('.hotmen').click(function (e) {
e.stopPropagation()
console.log('點(diǎn)了hotmen');
});
$('.slideUp').click(function (e) {
e.stopPropagation();
$('.header_box').stop().slideUp(1000);
})
$('.header_box,.header').click(function () {
return false;
})
$('body').click(function () {
alert(1);
$('.header_box').stop().slideUp(1000);
});
$(document).scroll(function () {
//獲取黃色的盒子到頂部的距離
var top = $('.content').offset().top;
var docScrollTop = $(document).scrollTop()
if (docScrollTop > top){
$('.fix_header').show();
}else {
$('.fix_header').hide();
}
});
})
</script>
</body>
</html>
5.使用Bootstrap
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap 全局的css-->
<link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
<!-- 警告：通過 file:// 協(xié)議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時(shí) Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">路飛學(xué)誠</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首頁 <span class="sr-only">(current)</span></a></li>
<li><a href="#">學(xué)位</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">注冊</button>
<button type="submit" class="btn btn-success">登錄</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4 col-sm-6">
Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。它包含了易于使用的預(yù)定義類，還有強(qiáng)大的mixin 用于生成更具語義的布局。
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。它包含了易于使用的預(yù)定義類，還有強(qiáng)大的mixin 用于生成更具語義的布局。
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。它包含了易于使用的預(yù)定義類，還有強(qiáng)大的mixin 用于生成更具語義的布局。
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。它包含了易于使用的預(yù)定義類，還有強(qiáng)大的mixin 用于生成更具語義的布局。
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
6.?全局的css樣式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap 全局的css-->
<link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
<!-- 警告：通過 file:// 協(xié)議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時(shí) Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">路飛學(xué)誠</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首頁 <span class="sr-only">(current)</span></a></li>
<li><a href="#">學(xué)位</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">注冊</button>
<button type="submit" class="btn btn-success">登錄</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">表格</h3>
</div>
<div class="panel-body">
<table class="table table-striped table-bordered table-hover table-condensed">
<tr>
<td>id</td>
<td>name</td>
<td>age</td>
</tr>
<tr>
<td>1</td>
<td class="active">alex</td>
<td class="info">198</td>
</tr>
<tr>
<td class="success">2</td>
<td class="danger">tailaing</td>
<td class="warning">200</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">表單</h3>
</div>
<div class="panel-body">
<form>
<div class="form-group">
<label for="user">用戶名</label>
<input type="text" class="form-control" id="user" placeholder="請輸入用戶名">
</div>
<div class="form-group">
<label for="password">密碼</label>
<input type="password" class="form-control" id="password"
placeholder="請輸入密碼">
</div>
<button type="submit" class="btn btn-default">登錄</button>
<button type="submit" class="btn btn-success">登錄</button>
<button type="submit" class="btn btn-danger">登錄</button>
<button type="submit" class="btn btn-info">登錄</button>
<button type="submit" class="btn btn-warning">登錄</button>
<a type="submit" class="btn btn-primary btn-lg">登錄</a>
</form>
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-subscript"></span>
</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="show">111111111</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據(jù)需要只加載單個(gè)插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
?
轉(zhuǎn)載于:https://www.cnblogs.com/junyingwang/p/9602787.html
總結(jié)
以上是生活随笔為你收集整理的day-16 jquery的DOM文档操作及bootstrap的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【资源】C++学习资料 - 逆天整理 -
- 下一篇： HP LoadRunner 12.02