溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
JQ的dom用法：
append：追加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="box"></div>
<script src="01/node_modules/jquery/dist/jquery.js"></script>
<script>
$(function () {
$('.box').append('<p>)
});
</script>
</body>
</html>
效果：
Js對象設置內容：
<body>
<div class="box"></div>
<script src="01/node_modules/jquery/dist/jquery.js"></script>
<script>
$(function () {
var op = document.createElement('p');
op.innerText = 'heihiehie'
$('.box').append('<p>);
$('.box').append(op);
});
</script>
</body>
效果：
<body>
<div class="box"></div>
<script src="01/node_modules/jquery/dist/jquery.js"></script>
<script>
$(function () {
var op = document.createElement('p');
// op.innerText = 'heihiehie'
$(op).text(')
$('.box').append('<p>);
$('.box').append(op);
});
</script>
</body>
效果;
語法：
父元素.append(子元素)
語法：
子元素.appendTo(父元素)
語法：
父元素.prepend(子元素)；
解釋：前置添加， 添加到父元素的第一個位置
$('ul').prepend('<li>我是第一個</li>')
語法：
子元素.prependTo(父元素)；
解釋：后置添加， 添加到子元素的最后一個位置
$('<a href="#">路飛學誠</a>').prependTo('ul')
語法：
$(selector).replaceWith(content);
將所有匹配的元素替換成指定的string、js對象、jquery對象。
//將所有的h6標題替換為a標簽
$('h6').replaceWith('<a href="#">hello world</a>')//將所有h6標題標簽替換成id為app的dom元素
$('h6').replaceWith($('#app'));
語法：
$('<p>哈哈哈</p>')replaceAll('h3');
解釋：替換所有。將所有的h3標簽替換成p標簽。
$('<br/><hr/><button>按鈕</button>').replaceAll('h5')
知識點1：
語法：
$(selector).remove();
解釋：刪除節點后，事件也會刪除（簡言之，刪除了整個標簽）
$('ul').remove();
語法：
$(selector).detach();
解釋：刪除節點后，事件會保留
var $btn = $('button').detach()
//此時按鈕能追加到ul中
$('ul').append($btn)
語法：
$(selector).empty();
解釋：清空選中元素中的所有后代節點
//清空掉ul中的子元素，保留ul$('ul').empty()
總結：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form></form>
<script src="01/node_modules/jquery/dist/jquery.js"></script>
<script>
$(function () {
formDom();
function formDom(argument) {
$('form').append(`<label>用戶名</label><input type="text"><input type="submit">`)
}
})
</script>
</body>
</html>
點擊type的submit的按鈕 會觸發 from表單的submit事件
效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form></form>
<a href="http://www.baidu.com" title="">百度</a>
<script src="01/node_modules/jquery/dist/jquery.js"></script>
<script>
$(function () {
formDom();
function formDom(argument) {
$('form').append(`<label>用戶名</label><input type="text"><input type="submit">`)
}
$('form').submit(function (event) {
event.preventDefault()
console.log(event)
})
$('a').click(function (event) {
console.log(event)
})
})
</script>
</body>
</html>
效果：
事件流描述的是從頁面中接收事件的順序
1、DOM事件流
“DOM2級事件”規定的事件流包括三個階段：
① 事件捕獲階段；
② 處于目標階段；
③ 事件冒泡階段
那么其實呢，js中還有另外一種綁定事件的方式：看下面代碼：
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>事件流</title>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn');
oBtn.addEventListener('click',function(){
console.log('btn處于事件捕獲階段');
}, true);
oBtn.addEventListener('click',function(){
console.log('btn處于事件冒泡階段');
}, false);
document.addEventListener('click',function(){
console.log('document處于事件捕獲階段');
}, true);
document.addEventListener('click',function(){
console.log('document處于事件冒泡階段');
}, false);
document.documentElement.addEventListener('click',function(){
console.log('html處于事件捕獲階段');
}, true);
document.documentElement.addEventListener('click',function(){
console.log('html處于事件冒泡階段');
}, false);
document.body.addEventListener('click',function(){
console.log('body處于事件捕獲階段');
}, true);
document.body.addEventListener('click',function(){
console.log('body處于事件冒泡階段');
}, false);
};
</script></head><body>
<a href="javascript:;" id="btn">按鈕</a></body></html>
效果：
總結：
語法：
bind(type,data,fn)
描述：為每一個匹配元素的特定事件（像click）綁定一個事件處理器函數。
參數解釋：
type (String) : 事件類型
data (Object) : (可選) 作為event.data屬性值傳遞給事件對象的額外數據對象
fn ( Function) : 綁定到每個匹配元素的事件上面的處理函數
示例：
當每個p標簽被點擊的時候，彈出其文本
$("p").bind("click", function(){
alert( $(this).text() );
});
語法：
unbind(type,fn);
描述：
bind()的反向操作，從每一個匹配的元素中刪除綁定的事件。
如果沒有參數，則刪除所有綁定的事件。
如果把在綁定時傳遞的處理函數作為第二個參數，則只有這個特定的事件處理函數會被刪除。
參數解釋：
type (String) : (可選) 事件類型
fn(Function) : (可選) 要從每個匹配元素的事件中反綁定的事件處理函數
示例：
把所有段落的所有事件取消綁定
$("p").unbind()
將段落的click事件取消綁定
$("p").unbind( "click" )
刪除特定函數的綁定，將函數作為第二個參數傳入
var foo = function () {
//綁定事件和解綁事件的事件處理函數};
$("p").bind("click mouseenter", foo); // 給p段落綁定click mouseenter事件
$("p").unbind("click", foo); // 只解綁了p段落標簽的click事件
其實事件的綁定和解綁，都是我為了自定義事件做準備（大家把jQuery的提供的事件熟記在心），以后對jquery熟了以后，可以玩一下自定義事件
語法：
trigger(type,data);
描述：在每一個匹配的元素上觸發某類事件，它觸發的是由bind()注冊的自定義事件。
參數解釋：
type (String) : 要觸發的事件類型
data (Array) : (可選)傳遞給事件處理函數的附加參數
示例：
給一個按鈕添加自定義的事件
$('button').bind('myClick',function(ev,a,b){
//給button按鈕添加的自定義事件myClick事件 })
jQuery的ajax技術：
AJAX = 異步的javascript和XML（Asynchronous Javascript and XML）
簡言之，在不重載整個網頁的情況下，AJAX通過后臺加載數據，并在網頁上進行顯示。
通過 jQuery AJAX 方法，您能夠使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您能夠把這些外部數據直接載入網頁的被選元素中。
數據驅動視圖
jQuery load()方法是簡單但強大的AJAX方法。
load()方法從服務器加載數據，并把返回的數據放入被選元素中。
ps:該方法使用不多，了解即可
語法：
$("selector").load(url,data,callback);
第一種情況
$('#btn').click(function(){
//只傳一個url，表示在id為#new-projects的元素里加載index.html
$('#new-projects').load('./index.html');
})
第二種情況
$('#btn').click(function(){
//只傳一個url，導入的index.html文件含有多個傳遞參數，類似于：index/html?name='張三'
$('#new-projects').load('./index.html',{"name":'張三',"age":12});
})
第三種情況
//加載文件之后，會有個回調函數，表示加載成功的函數
$('#new-projects').load('./index.html',{"name":'張三',"age":12},function(){
});
jQuery的AJAX中使用getJSON()方法異步加載JSON格式數據。獲取服務器中的數據，并對數據進行解析，顯示到頁面中
語法:
$.getJSON(url,[data],[callback])
參數解釋：
url參數：為請求加載json格式文件的服務器地址
可選項data參數：為請求時發送的數據
callback參數：為數據請求成功后執行的函數
$.getJSON("./data/getJSON.json", function (data) {
var str = "";//初始化保存內容變量
$.each(data, function(index,ele) {
$('ul').append("<li>"+ele.name+"</li>")
});
})
$.get() 方法通過 HTTP GET 請求從服務器上請求數據
語法：
$.get(URL,callback);
url參數：規定你請求的路徑，是必需參數
callback參數：為數據請求成功后執行的函數
$.get('./data/getJSON.json',function(data,status){
console.log(status); //success 200狀態碼 ok的意思
})
與get()方法相比，post()方法多用于以POST方式向服務器發送數據，服務器接收到數據之后，進行處理，并將處理結果返回頁面
語法：
$.post(URL,data,callback);
url參數：規定你請求的路徑，是必需參數，可選的data參數是連同請求發送的數據
可選的callback參數：為數據請求成功后執行的函數
$.post('/index',{name:'張三'},function(data,status){
console.log(status);
})
Get方法：
//get()方式 $.ajax({
url:'./data/index.txt',
type:'get',
dataType:'text',
success:function(data){
$('p').html(data);
},
error:function(error){
console.log(error)
}
Post方法：
//post()方式$.ajax({
url:'/index',
type:'post',
data:{name:'張三',age:12},
success:function(data){
$('p').html(data);
},
error:function(error){
console.log(error)
}
和風天氣：
https://free-api.heweather.com/s6/weather/forecast?location=beijing&key=b8ff40d4eb154bf28079dcee3cc00e
<body>
<button type="button">獲取天氣</button>
<script src="01/node_modules/jquery/dist/jquery.js"></script>
<script>
$(function () {
$('button').click(function (event) {
$.ajax({
url: 'https://free-api.heweather.com/s6/weather/forecast?location=beijing&key=b8ff40d4eb154bf28079dcee3cc00ee1'
type: 'get',
success: function (data) {
console.log(date.HeWeather6[0],now);
};
})
})
})
</script>
</body>
總結：ajax
http://www.jq22.com/
jQuery插件庫
眾所周知，電腦、平板、手機的屏幕是差距很大的，假如在電腦上寫好了一個頁面，在電腦上看起來不錯，但是如果放到手機上的話，那可能就會亂的一塌糊涂，這時候怎么解決呢？以前，可以再專門為手機定制一個頁面，當用戶訪問的時候，判斷設備是手機還是電腦，如果是手機就跳轉到相應的手機頁面，例如百度的就是，手機訪問www.baidu.com就會跳轉到m.baidu.com，這樣做簡直就是費力不討好的活，所以聰明的程序員開發了一種自適應寫法，即一次開發，處處顯示！這到底是一個什么樣的神器東西呢，接下來就揭曉它的神秘面紗。
使用 @media 查詢，你可以針對不同的屏幕大小定義不同的樣式。 @media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。 當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面，這對調試來說是一個極大的便利。
@media mediaType and|not|only (media feature) {
/*CSS-Code;*/
}
準備工作1：設置Meta標簽
首先我們在使用 @media 的時候需要先設置下面這段代碼，來兼容移動設備的展示效果：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
代碼示例：
1、如果文檔寬度大于等于 1170px 則應用花括號內的樣式——修改body的背景顏色(background-color):
@media screen and (min-width: 1170px) {
body {
background-color:lightblue;
}
}
2.如果文檔寬度大于等于 992px 則應用花括號內的樣式——修改body的背景顏色(background-color):
@media screen and (min-width: 992px) {
body {
background-color:red;
}
}
3、當文檔寬度大于等于 768px 并且小于等于992px （ width >=768 && width <=992）的時候顯示的樣式
@media screen and (min-width:768px) and (max-width:992px) {
/* CSS 代碼 */
}
需要注意的是：
不要被 min-width 和 max-width 所迷惑，初學者很容易誤以為 min-width 的意思是小于xxx的時候才應用，然而這就陷入誤區了，其實它的意思是：當設置了 min-width 的時候，文檔的寬度如果小于設置的值，就不會應用這個區塊里的CSS樣式，所以 min-width 它才能實現大于等于設置的值得時候，才會應用區塊里的CSS樣式，max-width 也是如此。
效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Title</title>
<style>
@media screen and (min-width: 1170px){
body{
background-color: red;
}
}
@media screen and (min-width: 880px)and (max-width: 1170px){
body{
background-color: green;
}
}
@media screen and (max-width: 880px){
body{
background-color: yellow;
}
}
</style>
</head>
<body>
</body>
</html>
可以去試試。×××、綠色、紅色
Bootstrap：
http://www.bootcss.com/
效果：
將導航放到頁面中
查看一下效果：
代碼如下：
<!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個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是為了讓 IE8 支持 HTML5 元素和媒體查詢（media queries）功能 -->
<!-- 警告：通過 file:// 協議（就是直接將 html 頁面拖拽到瀏覽器中）訪問頁面時 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="#">Brand</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="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</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-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</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>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<h2>你好，世界！</h2>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依賴 jQuery，所以必須放在前邊) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加載 Bootstrap 的所有 JavaScript 插件。你也可以根據需要只加載單個插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
進行分類，但是縮小的時候不會亂，移動式響應
自己可以往里面添加：
在一個模板中自行的添加一些東西
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
