jquery高級
- 表單驗證 同意協議和提交
- 冒泡事件 事件委託
- 節點操作 dom操作 一些方法
- js對象（字典）
- 最重要的！！！！！數據交互ajax，明白裏面的參數
1.表單驗證
都是兩步：判斷是否爲空，是否匹配正則
同意協議
驗證時間點，單擊的時候
var $allow = $('#allow')
$allow.click(function(){
if(){
}else{
}
})
提交 加鎖概念
$myform.submit(function(){
fnCheckSubmit()
})
function fnCheckSubmit(){
//避免用戶打開頁面直接註冊，定義開關變量flag，都爲true才能提交
if(){
}
else{
return flase
}
}
2.事件冒泡
是一種現象，bug；
父子級標籤，且綁定相同事件：觸發子級的命令會逐層向父層傳遞，逐層激活父集事件
但是如果不想點擊子標籤不激活父級事件可以在子集寫return flase（也可以阻止表單提交的代碼）
事件捕獲是windows的規範，由外向內
事件委託/事件的代理.delegate
利用冒泡。子元素會激活父元素事件，把子元素的事件綁定到父元素上
委託給這個標籤的父標籤執行命令
delegate(事件真是發生在誰身上，事件屬性，匿名函數寫命令)
$('ul').delegate('li','click',function(){
pass
})
事件委託作用：
- 提高代碼的執行效率 因爲減少綁定次數
- 給未來元素綁定命令，通過程序後加的標籤
補充 on(事件屬性，匿名函數綁定命令)也可以給未來元素綁定命令
3.DOM操作節點操作
DOM document object model 文檔對象模型
dom js內置的一個結構化表現手法 通過這個，把所有的標籤實現了一個倒置的樹狀結構圖，爲了精準查找標籤，一層層的找
標記 == 標籤 == 元素 <節點(標籤，標籤的屬性，標籤內容)
增加節點：
- 聲明變量保存節點標籤數據
- 使用追加函數將節點變量追加到相應的位置
var $li = $('<li>2222222</li>')//聲明
$('ul').append($li)//追加
remove empty刪除 $().remove()
append appendto在元素內部添加，從後面放入
prepend prependto在元素的內部，從前面添加
before insertBefore 在元素的外部，從前面添加
after insertAfter 在元素的外部，從後面添加
4.todolist demo
5.js的對象（字典）的創建使用
就是鍵值對
創建：(相比python用類實例化對象)
第一種Object實例化
//這裏相當於基類是Object
var person1 = new Object()
person1.name = 'laowang'
person1.say = function(){
alert(this.name)//可以用this
}
alert(person1.name)
person1.say()
第二種直接字典的形式定義
var xiaoming = {
name:'xiaoming',
age:10,
say:function(){
alert(this.age)//this指的是這個實例對象
}
}
alert(xiaoming.name)
xiaoming.say()
Ajax 用到對象的使用
Vue 用到對象的創建方法
使用和python一樣上面寫到了
6.Ajax 數據交互
Ajax好處：異步（請求數據的同時可以發送數據到服務器），局部刷新(整個頁面不刷新，只局部刷新，ajax可以自己發送http請求，不通過瀏覽器地址欄)
ajax不支持操作本地文件，不支持連接操作數據庫 但是這兩點都是爲了安全
因爲ajax不支持直接操作數據庫，所以需要中間接口，就是我們用python寫的接口，用json拼接數據，返回到前端；之後會有框架式flask，django開發接口
json 一種數據格式
前端取數據，顯示數據，都是用json格式
本質就是字典 必須是雙引號
json = {
"name":[{"a":[{"b":"bbbbbbb"}]}],
...
}
json.name[0].a[0].b
ajax實現股票系統
常用參數：
1、url 請求地址
2、type 請求方式，默認是’GET’，常用的還有’POST’
3、dataType 設置返回的數據格式，常用的是’json’格式，也可以設置爲’html’
4、data 設置發送給服務器的數據
5、success 設置請求成功後的回調函數
6、error 設置請求失敗後的回調函數
7、async 設置是否異步，默認值是’true’，表示異步
$.ajax({
//ajax的參數
//請求數據的地址：url接口
url:'/index_data',
type:'get',
dataType:'json',
success:function(dat){
// 得到數據，並在頁面顯示數據
//dat是得到的數據
},
error:function(){
alert('請求失敗')
}
})
$.ajax({
url:"/index_data",
type:"get",
dataType:"json",
success:function (data) {
console.log(data);
var str = "<tr><th>序號</th><th>股票代碼</th><th>股票簡稱</th><th>漲跌幅</th><th>換手率</th><th>最新價(元)</th><th>前期高點</th><th>前期高點日期</th><th>添加自選</th></tr> "
for( var i = 0;i<data.length;i++){
str+='<tr><td>'+ data[i].id+'</td><td>'+ data[i].code+'</td><td>'+ data[i].sname+'</td><td>'+ data[i].rate01+'</td><td>'+ data[i].rate02+'</td><td>'+ data[i].sname+'</td><td>'+ data[i].new_prize+'</td><td>'+ data[i].date+'</td><td><input type=\"button\" value=\"添加\" name=\"toAdd\"></td></tr>'
}
$(".table").html(str)
},
error:function (err) {
console.log(err);
}
} )
ajax的別的寫法
success和error一般不寫在$.ajax({})裏
在ajax外面寫.done(function(){xxx}).fail(fail(){})鏈式編程
$.ajax({
url:'/index_data',
type:'get',
dataType:'json',
})
.done(function(){
//success
})
.fail(function(){
//fail
})
另一個寫法：$.ajax的簡寫方式
$.ajax可以簡寫成$.get或者$.post
$.get('/change_data',{'code'}:300268),
function(){
//success
})
ajax實現股票系統關注、刪除
未來元素的事件需要委託給父集
type,value,class自帶的html屬性都有自己的功能，允許自定義屬性，完成功能這裏自定義歌html屬性：獲取股票代碼 遵循key=“value”
mycode=’"+dat[i].code+"’
prop訪問修改自帶html屬性，attr訪問修改自定義html屬性
$.ajax({
url:'/add_data',
type:'get',
dataType:'text',
data:{'code':},
success:function(data){
console.log(data);
},
error:function(err){
console.log(err)
}
})
7.jsonp跨域請求
協議域名端口全部一樣就是同源請求，之前的ajax就是同源請求
不同源請求 就是跨域 jsonp是json格式跨域請求，其實用的比較少了
原理是：通過script標籤的src跨域請求
例如img標籤天生就能src跨域請求別人的圖片
ajax和jsonp同意封裝到$.ajax中
$.ajax({
url:'https://sug.so.360.cn/suggest',
type:'get',
dataType:'jsonp',
data:{'word':'b'},
})
.done(function(){
xxxx
})
跨域請求360數據
鍵盤按下事件 keydown 鍵盤松開事件 keyup
$('input').keyup(function(){
var vals = $(this).val()
$.ajax({
url:'https://sug.so.360.cn/suggest',
type:'get',
dataType:'jsonp',
data:{'word':vals}
})
.done(function(dat){
for(var i=0;i<dat.s.length;i++){
str += '<li>'+dat.s[i]+'</li>'
}
$('ul').html(str)
})
})