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
})
事件委托作用:
1.提高代码的执行效率 因为减少绑定次数
2.给未来元素绑定命令,通过程序后加的标签
补充 on(事件属性,匿名函数绑定命令)也可以给未来元素绑定命令
3.DOM操作节点操作
DOM document object model 文档对象模型
dom js内置的一个结构化表现手法 通过这个,把所有的标签实现了一个倒置的树状结构图,为了精准查找标签,一层层的找
标记 == 标签 == 元素 <节点(标签,标签的属性,标签内容)
增加节点:
1.声明变量保存节点标签数据
2.使用追加函数将节点变量追加到相应的位置
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)
})
})