JQuery相关

$(document).ready(function(){
	//当页面加载完成后执行
});

//也可简写为
$(function(){
	//同上
});


//标签选择器 参照css的选择方式,返回一个对象
$('.div01');//选择class为div01的所有元素
$('#id01');//选择id为id01的元素
$('div');//选择所有标签名为div的元素
$('input[name="a"]');选择name属性为a的input元素

//选择集转移
$('.div01').prev();//选择class是div01的元素前面紧挨的同级元素
$('.div01').pervAll();//选择class是div01的元素之前所有同级元素
$('.div01').next();//选择class是div01的元素后面紧挨的同级元素
$('.div01').nextAll();选择class是div01的元素之后的所有同级元素
$('.div01').parent();//选择class是div01的元素的父级元素
$('.div01').children();//选择class是div01的元素的所有子元素
$('.div01').sublings();//选择class是div01的元素的所有同级元素
$('.div01').find('input');//选择选class是div01的元素内所有的input标签元素

//选择集过滤
$('div').has('p');选择包含p标签的div元素
$('div').eq(3);//选择第3个div元素


//操作样式
var $div01 = $('div01');
$div01.css({"background":"red","height":300,"width":300});//直接修改标签的样式
$div.addClass('div01');//为标签添加class间接修改标签样式
$div.removeClass('div01');//移除标签的class属性
$div.toggleClass('div01');//切换标签的class,有这个属性就移除,没有这个属性则添加


//绑定事件
var $div01 = $('div01');
$div01.click(function(){
	//点击事件
});
mouseover() //鼠标移入事件
mouseout() //鼠标移出事件
mouseenter() //鼠标移入事件(移入子元素不触发)
mouseleave() //鼠标移出事件(移出子元素不触发)
focus() //获得焦点事件
blur() //失去焦点事件
hover() //鼠标悬浮事件
ready() //页面加载完成事件
submit() //表单提交事件


//JQuery动画过渡效果
$(function(){
	var $div01 = $('div01');
	$div01.css({"height":300,"width":300,"background":"red"});
	$div01.animate({"height":1000,"width":1000},2000,function(){ //animate(要修改的css样式,动画过渡时间,过渡效果类型,回调函数)
		$div01.css({"height":300,"width":300);
});
});
fadeIn() //淡入效果
fadeOut() //淡出效果
show() //显示元素
hide() //隐藏元素
toggle() //切换元素的显示状态
slideDown() //向下展开
slideUp() //向上卷起
slideToggle() //切换展开/卷起

//jQuery属性操作
html() //获取/修改元素内容
val() //获取/修改元素的value
prop() 获取/修改元素指定的属性

//JQuery正则
re = new RegExp('\d+') //创建一个正则对象
re = \\d+\ //简写效果同上

//jQuery冒泡
event.stopPropagation() //阻止事件冒泡
event.stopPreventDefault() //阻止表单提交
return false //合并写法

//jQuery事件委托
$div01.delegate('a','click',function(){}) //将所有子元素的a标签的点击事件委托给div01处理

//jQuery Dom操作
div01 = $('<div><div>') //创建一个div标签
append() //在元素的里面的后面添加一个元素
appendTo() //添加一个元素到元素的里面的后面
prepend() //在元素的里面的前面添加一个元素
prependTo() //添加一个元素到元素的里面的前面
before() //在元素的外面的前面添加一个元素
insertBefore() //添加一个元素到元素的外面的前面
after() //在元素的外面的后面添加一个元素
insertAfter() //添加一个元素到元素的外面的后面


//ajax相关
$.ajax({
    url:'/get_data', //请求的url地址
    type:'GET',    //请求的方式
    dataType:'text',    //请求的数据类型
    data:{'name':'tom'},    //提交的数据
    success:function(dat){    //请求成功后调用的函数
        alter(dat);
    },
    error:function(){    //请求失败后调用的函数
        alter('服务器超时');
    }
});

//其它写法
$.ajax({
    url:'/get_data',
    type:'GET',
    dataType:'text',
    data:{'name':'tom'}
})
.done(function(dat){
    alert(dat);
})
.fail(function(){
    alert('服务器超时');
});

$.get('/get_data',{'name':'tom'},function(){
    function(dat){
        alert(dat);
    }
})





猜你喜欢

转载自blog.csdn.net/sdzhr/article/details/81268570