<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>插入數據</title>
<scriptsrc="/jquery_2_1.min.js"></script>
</head>
<body>
<form id="form-add">
用戶名:<input type="text" name="userName"><br>
密碼:<input type="text" name="passWord"><br/>
<input id="btn-add" type="button" value="添加數據" />
</form>
<script type="text/javascript">
$("#btn-add").click(function() {
$.ajax({
url: "/usersave2",
type: "post",
data: $("#form-add").serialize(),
dataType: "json",
success: function(res) {
if (res.success) {
alert(res.msg);
location.href="/userlist";
} else {
alert("注冊失敗!" + res.message);
}
},
error:function(xhr){
alert("發生錯誤"+xhr.status);
}
});
});
</script>
</body>
</html>
學習目標
jQuery是對JavaScript的封裝,它是免費、開源的JavaScript函數庫,jQuery 極大地簡化了 JavaScript 編程。
jQuery和JavaScript它們的作用一樣,都是負責網頁行為操作,增加網頁和用戶的交互效果的,只不過jQuery簡化了JavaScript編程,jQuery實現交互效果更簡單。
學習目標
<script src="js/jquery-1.12.4.min.js"></script>
我們知道使用js獲取標簽元素,需要頁面加載完成以后再獲取,我們通過給onload事件屬性設置了一個函數來獲取標簽元素,而jquery提供了ready函數來解決這個問題,保證獲取標簽元素沒有問題,它的速度比原生的 window.onload 更快。
入口函數示例代碼:
<script src="js/jquery-1.12.4.min.js"></script>
<script>
window.onload=function(){
var oDiv=document.getElementById('div01');
alert('原生就是獲取的div:' + oDiv);
};
$(document).ready(function(){
var $div=$('#div01');
alert('jquery獲取的div:' + $div);
});
</script>
<div id="div01">這是一個div</div>
入口函數的簡寫示例代碼:
<script src="js/jquery-1.12.4.min.js"></script>
<script>
window.onload=function(){
var oDiv=document.getElementById('div01');
alert('原生就是獲取的div:' + oDiv);
};
/*
$(document).ready(function(){
var $div=$('#div01');
alert('jquery獲取的div:' + $div);
});
*/
// 上面ready的寫法可以簡寫成下面的形式:
$(function(){
var $div=$('#div01');
alert('jquery獲取的div:' + $div);
});
</script>
<div id="div01">這是一個div</div>
學習目標
jquery選擇器就是快速選擇標簽元素,獲取標簽的,選擇規則和css樣式一樣。
示例代碼:
$('#myId') //選擇id為myId的標簽
$('.myClass') // 選擇class為myClass的標簽
$('li') //選擇所有的li標簽
$('#ul1 li span') //選擇id為ul1標簽下的所有li標簽下的span標簽
$('input[name=first]') // 選擇name屬性等于first的input標簽
說明:
可以使用length屬性來判斷標簽是否選擇成功, 如果length大于0表示選擇成功,否則選擇失敗。
$(function(){
result=$("div").length;
alert(result);
});
學習目標
選擇集過濾就是在選擇標簽的集合里面過濾自己需要的標簽
has方法的示例代碼:
<script>
$(function(){
// has方法的使用
var $div=$("div").has("#mytext");
// 設置樣式
$div.css({"background":"red"});
});
</script>
<div>
這是第一個div
<input type="text" id="mytext">
</div>
<div>
這是第二個div
<input type="text">
<input type="button">
</div>
eq方法的示例代碼:
<script>
$(function(){
// has方法的使用
var $div=$("div").has("#mytext");
// 設置樣式
$div.css({"background":"red"});
// eq方法的使用
var $div=$("div").eq(1);
// 設置樣式
$div.css({"background":"yellow"});
});
</script>
<div>
這是第一個div
<input type="text" id="mytext">
</div>
<div>
這是第二個div
<input type="text">
<input type="button">
</div>
學習目標
選擇集轉移就是以選擇的標簽為參照,然后獲取轉移后的標簽
選擇集轉移的示例代碼:
<script>
$(function(){
var $div=$('#div01');
$div.prev().css({'color':'red'});
$div.prevAll().css({'text-indent':50});
$div.next().css({'color':'blue'});
$div.nextAll().css({'text-indent':80});
$div.siblings().css({'text-decoration':'underline'})
$div.parent().css({'background':'gray'});
$div.children().css({'color':'red'});
$div.find('.sp02').css({'font-size':30});
});
</script>
<div>
<h2>這是第一個h2標簽</h2>
<p>這是第一個段落</p>
<div id="div01">這是一個<span>div</span><span class="sp02">第二個span</span></div>
<h2>這是第二個h2標簽</h2>
<p>這是第二個段落</p>
</div>
學習目標
jquery中的html方法可以獲取和設置標簽的html內容
示例代碼:
<script>
$(function(){
var $div=$("#div1");
// 獲取標簽的html內容
var result=$div.html();
alert(result);
// 設置標簽的html內容,之前的內容會清除
$div.html("<span style='color:red'>你好</span>");
// 追加html內容
$div.append("<span style='color:red'>你好</span>");
});
</script>
<div id="div1">
<p>hello</p>
</div>
說明:
給指定標簽追加html內容使用append方法
學習目標
之前使用css方法可以給標簽設置樣式屬性,那么設置標簽的其它屬性可以使用prop方法了。
示例代碼:
<style>
.a01{
color:red;
}
</style>
<script>
$(function(){
var $a=$("#link01");
var $input=$('#input01')
// 獲取元素屬性
var sId=$a.prop("id");
alert(sId);
// 設置元素屬性
$a.prop({"href":"http://www.baidu.com","title":'這是去到百度的鏈接',"class":"a01"});
// 獲取value屬性
// var sValue=$input.prop("value");
// alert(sValue);
// 獲取value屬性使用val()方法的簡寫方式
var sValue=$input.val();
alert(sValue);
// 設置value值
$input.val("222222");
})
</script>
<a id="link01">這是一個鏈接</a>
<input type="text" id="input01" value="111111">
說明: 獲取value屬性和設置value屬性還可以通過val方法來完成。
學習目標
示例代碼:
<script>
$(function(){
var $li=$('.list li');
var $button=$('#button1')
var $text=$("#text1");
var $div=$("#div1")
// 鼠標點擊
$li.click(function(){
// this指的是當前發生事件的對象,但是它是一個原生js對象
// this.style.background='red';
// $(this) 指的是當前發生事件的jquery對象
$(this).css({'background':'gold'});
// 獲取jquery對象的索引值,通過index() 方法
alert($(this).index());
});
// 一般和按鈕配合使用
$button.click(function(){
alert($text.val());
});
// 獲取焦點
$text.focus(function(){
$(this).css({'background':'red'});
});
// 失去焦點
$text.blur(function(){
$(this).css({'background':'white'});
});
// 鼠標進入
$div.mouseover(function(){
$(this).css({'background':'gold'});
});
// 鼠標離開
$div.mouseout(function() {
$(this).css({'background':'white'});
});
});
</script>
<div id="div1">
<ul class="list">
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
</ul>
<input type="text" id="text1">
<input type="button" id="button1" value="點擊">
</div>
說明:
jQuery常用事件:
學習目標
事件代理就是利用事件冒泡的原理(事件冒泡就是事件會向它的父級一級一級傳遞),把事件加到父級上,通過判斷事件來源,執行相應的子元素的操作,事件代理首先可以極大減少事件綁定次數,提高性能;其次可以讓新加入的子元素也可以擁有相同的操作。
事件冒泡代碼:
<script>
$(function(){
var $div1=$('#div1');
var $div2=$('#div2');
$div1.click(function(){
alert($(this).html());
});
$div2.click(function(){
alert($(this).html());
});
});
</script>
<div id="div1" style="width:200px; height:200px; background: red;">
<div id="div2" style="width:100px; height:100px;background: yellow;">
哈哈
</div>
</div>
說明:
當點擊子元素div,它的點擊事件會向它父元素傳遞,也會觸發了父元素的點擊事件,這就是事件冒泡。
一般綁定事件的寫法:
$(function(){
$ali=$('#list li');
$ali.click(function() {
$(this).css({background:'red'});
});
})
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
事件代理的寫法
$(function(){
$list=$('#list');
// 父元素ul 來代理 子元素li的點擊事件
$list.delegate('li', 'click', function() {
// $(this)表示當前點擊的子元素對象
$(this).css({background:'red'});
});
})
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
delegate方法參數說明:
delegate(childSelector,event,function)
學習目標
JavaScript 中的所有事物都是對象:字符串、數值、數組、函數等都可以認為是對象,此外,JavaScript 允許自定義對象,對象可以擁有屬性和方法。
創建自定義javascript對象有兩種方式:
Object類創建對象的示例代碼:
<script>
var person=new Object();
// 添加屬性:
person.name='tom';
person.age='25';
// 添加方法:
person.sayName=function(){
alert(this.name);
}
// 調用屬性和方法:
alert(person.age);
person.sayName();
</script>
對象字面量創建對象的示例代碼:
<script>
var person2={
name:'Rose',
age: 18,
sayName:function(){
alert('My name is' + this.name);
}
}
// 調用屬性和方法:
alert(person2.age);
person2.sayName();
</script>
說明:
調用屬性和方法的操作都是通過點語法的方式來完成,對象的創建推薦使用字面量方式,因為更加簡單。
創建自定義javascript對象有兩種方式:
學習目標
json是 JavaScript Object Notation 的首字母縮寫,翻譯過來就是javascript對象表示法,這里說的json就是類似于javascript對象的字符串,它同時是一種數據格式,目前這種數據格式比較流行,逐漸替換掉了傳統的xml數據格式。
json有兩種格式:
對象格式:
對象格式的json數據,使用一對大括號({}),大括號里面放入key:value形式的鍵值對,多個鍵值對使用逗號分隔。
對象格式的json數據:
{
"name":"tom",
"age":18
}
格式說明:
json中的(key)屬性名稱和字符串值需要用雙引號引起來,用單引號或者不用引號會導致讀取數據錯誤。
數組格式:
數組格式的json數據,使用一對中括號([]),中括號里面的數據使用逗號分隔。
數組格式的json數據:
["tom",18,"programmer"]
實際開發的json格式比較復雜,例如:
{
"name":"jack",
"age":29,
"hobby":["reading","travel","photography"]
"school":{
"name":"Merrimack College",
"location":"North Andover, MA"
}
}
json本質上是字符串,如果在js中操作json數據,可以將json字符串轉化為JavaScript對象。
示例代碼:
var sJson='{"name":"tom","age":18}';
var oPerson=JSON.parse(sJson);
// 操作屬性
alert(oPerson.name);
alert(oPerson.age);
學習目標
ajax 是 Asynchronous JavaScript and XML的簡寫,ajax一個前后臺配合的技術,它可以讓 javascript 發送異步的 http 請求,與后臺通信進行數據的獲取,ajax 最大的優點是實現局部刷新,ajax可以發送http請求,當獲取到后臺數據的時候更新頁面顯示數據實現局部刷新,在這里大家只需要記住,當前端頁面想和后臺服務器進行數據交互就可以使用ajax了。
這里提示一下大家, 在html頁面使用ajax需要在web服務器環境下運行, 一般向自己的web服務器發送ajax請求。
jquery將它封裝成了一個方法$.ajax(),我們可以直接用這個方法來執行ajax請求。
示例代碼:
<script>
$.ajax({
// 1.url 請求地址
url:'http://t.weather.sojson.com/api/weather/city/101010100',
// 2.type 請求方式,默認是'GET',常用的還有'POST'
type:'GET',
// 3.dataType 設置返回的數據格式,常用的是'json'格式
dataType:'JSON',
// 4.data 設置發送給服務器的數據, 沒有參數不需要設置
// 5.success 設置請求成功后的回調函數
success:function (response) {
console.log(response);
},
// 6.error 設置請求失敗后的回調函數
error:function () {
alert("請求失敗,請稍后再試!");
},
// 7.async 設置是否異步,默認值是'true',表示異步,一般不用寫
async:true
});
</script>
ajax方法的參數說明:
ajax的簡寫方式:
$.ajax按照請求方式可以簡寫成$.get或者$.post方式
ajax簡寫方式的示例代碼:
<script>
$(function(){
/*
1. url 請求地址
2. data 設置發送給服務器的數據, 沒有參數不需要設置
3. success 設置請求成功后的回調函數
4. dataType 設置返回的數據格式,常用的是'json'格式, 默認智能判斷數據格式
*/
$.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){
console.log(dat);
console.log(status);
alert(dat);
}).error(function(){
alert("網絡異常");
});
/*
1. url 請求地址
2. data 設置發送給服務器的數據, 沒有參數不需要設置
3. success 設置請求成功后的回調函數
4. dataType 設置返回的數據格式,常用的是'json'格式, 默認智能判斷數據格式
*/
$.post("test.php", {"func": "getNameAndTime"}, function(data){
alert(data.name);
console.log(data.time);
}, "json").error(function(){
alert("網絡異常");
});
});
</script>
$.get和$.post方法的參數說明:
$.get(url,data,success(data, status, xhr),dataType).error(func)
$.post(url,data,success(data, status, xhr),dataType).error(func)
過 jQuery,可以很容易地添加新元素/內容。
添加新的 HTML 內容
我們將學習用于添加新內容的四個 jQuery 方法:
append() - 在被選元素的結尾插入內容
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素之后插入內容
before() - 在被選元素之前插入內容
jQuery append() 方法
jQuery append() 方法在被選元素的結尾插入內容。
實例
$("p").append("追加文本");
嘗試一下 ?
jQuery prepend() 方法
jQuery prepend() 方法在被選元素的開頭插入內容。
實例
$("p").prepend("在開頭追加文本");
通過 append() 和 prepend() 方法添加若干新元素
在上面的例子中,我們只在被選元素的開頭/結尾插入文本/HTML。
不過,append() 和 prepend() 方法能夠通過參數接收無限數量的新元素。可以通過 jQuery 來生成文本/HTML(就像上面的例子那樣),或者通過 JavaScript 代碼和 DOM 元素。
在下面的例子中,我們創建若干個新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建。然后我們通過 append() 方法把這些新元素追加到文本中(對 prepend() 同樣有效):
實例
functionappendText(){vartxt1="<p>文本。</p>"; // 使用 HTML 標簽創建文本vartxt2=$("<p></p>").text("文本。"); // 使用 jQuery 創建文本vartxt3=document.createElement("p"); txt3.innerHTML="文本。"; // 使用 DOM 創建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素}
嘗試一下 ?
jQuery after() 和 before() 方法
jQuery after() 方法在被選元素之后插入內容。
jQuery before() 方法在被選元素之前插入內容。
實例
$("img").after("在后面添加文本"); $("img").before("在前面添加文本");
嘗試一下 ?
通過 after() 和 before() 方法添加若干新元素
after() 和 before() 方法能夠通過參數接收無限數量的新元素。可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建新元素。
在下面的例子中,我們創建若干新元素。這些元素可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創建。然后我們通過 after() 方法把這些新元素插到文本中(對 before() 同樣有效):
實例
functionafterText(){vartxt1="<b>I </b>"; // 使用 HTML 創建元素vartxt2=$("<i></i>").text("love "); // 使用 jQuery 創建元素vartxt3=document.createElement("big"); // 使用 DOM 創建元素txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在圖片后添加文本}
*請認真填寫需求信息,我們會在24小時內與您取得聯系。