版权声明:Copyright © https://cloud.tencent.com/developer/article/1477057
$(doctument).ready(function(){
})
$(function(){
})
animate参数:
参数一:要改变的样式属性值,写成字典的形式
参数二:动画持续的时间,单位为毫秒,一般不写单位
参数三:动画曲线,默认为‘swing’,缓冲运动,还可以设置为‘linear’,匀速运动
参数四:动画回调函数,动画完成后执行的匿名函数
``` JavaScript
$('#div1').animate({
width:300,
height:300
},1000,'swing',function(){
alert('done!');
});
.html()
.prop()
.attr() 获取自定义标签的值,用法和prop一样
$(function(){
$('li').each(function(event){
// each里面形参表示的是each选中的标签的索引值
// alert(event)
$(this).html(event)
})
})
事件 | 描述 |
---|---|
click() | 点击事件 |
blur() | 失去焦点 |
focus() | 获取焦点 |
mouseover() | 鼠标进入(进入子元素也触发) |
mouseout() | 鼠标离开(离开子元素也触发) |
mouseenter() | 鼠标进入(进入子元素不触发) |
mouseleave() | 鼠标离开(离开子元素不触发) |
hover() | 同时为mouseenter和mouseleave事件指定处理函数 |
submit() | 提交表单 |
规则:
var re = new RegExp(‘规则’,’可选参数’)
var re =/规则/参数;
作用: 事件冒泡允许多个被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元素上),它还可以让你在对象层的不同级别捕获事件。
$(function(){
var $box1 = $('.father');
var $box2 = $('.son');
var $box3 = $('.grandson');
$box1.click(function() {
alert('father');
});
$box2.click(function() {
alert('son');
});
$box3.click(function(event) {
alert('grandson');
event.stopPropagation();
});
$(document).click(function(event) {
alert('grandfather');
});
})
......
<div class="father">
<div class="son">
<div class="grandson"></div>
</div>
</div>
return falses
用法: $(‘ul’).delegete(事件发生在哪,事件属性,匿名函数)
作用:
DOM: 网页文档的根/根标签
追加节点:同级追加和自己追加(前面 后面)
步骤:
子级追加:
父级追加:
删除节点:remove()或empty()
$(function(){
// 追加节点:同级追加 和 子级追加 (前面 后面)
// 步骤:1、声明变量保存节点数据;2、使用追加函数追加节点
var $li = $('<li>2222</li>')
// ul子级追加
// $li.appendTo($('ul')) //结尾追加
// $('ul').append($li)
// $li.prependTo($('ul')) // 开头追加
// $('ul').prepend($li)
var $div = $('<div>divdiv</div>')
// $div.insertAfter($('ul'))
// $('ul').after($div)
// $div.insertBefore($('ul'))
// $('ul').before($div)
// 删除节点
// $('ul').remove()
// $('ul').empty()
})
ajax技术的目的是让javascript发送http请求,与后台通信,获取数据和信息。
ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行,从而实现异步。
同步:一件事情做完再去做另一件事情
异步:同时做多件事情
常用参数:
1、url 请求地址
2、type 请求方式,默认是’GET’,常用的还有’POST’
3、dataType 设置返回的数据格式,常用的是’json’格式,也可以设置为’html’
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步,默认值是’true’,表示异步
以前的写法:
$.ajax({
url: '/change_data',
type: 'GET',
dataType: 'json',
data:{'code':300268}
success:function(dat){
alert(dat.name);
},
error:function(){
alert('服务器超时,请重试!');
}
});
新的写法(推荐):
$.ajax({
url: '/change_data',
type: 'GET',
dataType: 'json',
data:{'code':300268}
})
.done(function(dat) {
alert(dat.name);
})
.fail(function() {
alert('服务器超时,请重试!');
});
$.ajax的简写方式
$.ajax按照请求方式可以简写成$.get或者$.post方式
$.get("/change_data", {'code':300268},
function(dat){
alert(dat.name);
});
$.post("/change_data", {'code':300268},
function(dat){
alert(dat.name);
});