$(this) this是当前引用 $(this)转化为query元素对象
方法函数化：
$(function(){
$(‘#div1‘).click(function(){
alert( $(this).html() );
});
});
attr：
$(‘div‘).attr(‘title‘,‘456‘);
$(‘div‘).attr(‘class‘,‘box’);
//filter : 过滤
//not : filter的反义词
$(‘div‘).filter(‘.box‘).css(‘background‘,‘red‘);
$(‘div‘).not(‘.box‘).css(‘background‘,‘red’);
//has : 包含
$(‘div‘).has(‘span‘).css(‘background‘,‘red‘);
$(‘div‘).has(‘.box‘).css(‘background‘,‘red’); //内部有box的class，他自己不行
$(‘div‘).filter(‘.box‘).css(‘background‘,‘red’); //针对元素自身的
next下一个元素
$(‘div‘).next().css(‘background‘,‘red’);
$(‘div‘).find(‘h2‘).css(‘background‘,‘red’); 找div然后找到下面所有h2
$(‘div‘).find(‘h2‘).eq(1).css(‘background‘,‘red’); 找div然后找到下面第二个h2
alert( $(‘#h‘).index() ); //索引就是当前元素在所有兄弟节点中的位置
Jquery选项卡切换：
$(function(){
$(‘#div1‘).find(‘input‘).click(function(){
$(‘#div1‘).find(‘input‘).attr(‘class‘,‘‘);
$(‘#div1‘).find(‘div‘).css(‘display‘,‘none‘);
$(this).attr(‘class‘,‘active‘);
$(‘#div1‘).find(‘div‘).eq( $(this).index() ).css(‘display‘,‘block‘);
});
});
addClass removeClass
$(‘div‘).addClass(‘box2 box4‘);
$(‘div‘).removeClass(‘box1‘);
获取元素宽度：
alert( $(‘div‘).width() ); //width
alert( $(‘div‘).innerWidth() ); //width + padding
alert( $(‘div‘).outerWidth() ); //width + padding + border
alert( $(‘div‘).outerWidth(true) ); //width + padding + border + margin
操作元素：
//$(‘span‘).insertBefore( $(‘div‘) );
//$(‘div‘).insertAfter( $(‘span‘) );
//$(‘div‘).appendTo( $(‘span‘) );
//$(‘div‘).prependTo( $(‘span‘) );
//区别 ：后续操作变了
//$(‘span‘).insertBefore( $(‘div‘) ).css(‘background‘,‘red‘);
删除元素：
$(‘div‘).remove();
on ／off写法：
/*$(‘div‘).click(function(){
alert(123);
});*/
/*$(‘div‘).on(‘click‘,function(){
alert(123);
});*/
/*$(‘div‘).on(‘click mouseover‘,function(){
alert(123);
});*/
/*$(‘div‘).on({
‘click‘ : function(){
alert(123);
},
‘mouseover‘ : function(){
alert(456);
}
});*/
取消事件：
$(‘div‘).on(‘click mouseover‘,function(){
alert(123);
$(‘div‘).off(‘mouseover‘);
});
滚动距离：
alert( $(window).scrollTop() ); //滚动距离
创建元素添加元素：
var oDiv = $(‘<div>’);
$(‘body’).append(oDiv);
弹出登录并居中
var oLogin = $(‘<div id="login"><p>用户名:<input type="text" /></p><p>密码:<input type="text" /></p><div id="close">X</div></div>‘);
$(‘body‘).append( oLogin );
oLogin.css(‘left‘ , ($(window).width() - oLogin.outerWidth())/2 );
oLogin.css(‘top‘ , ($(window).height() - oLogin.outerHeight())/2 );
随着滚动条一起动：
$(window).on(‘resize scroll‘,function(){
oLogin.css(‘left‘ , ($(window).width() - oLogin.outerWidth())/2 );
oLogin.css(‘top‘ , ($(window).height() - oLogin.outerHeight())/2 + $(window).scrollTop() );
});
事件细节：
/*$(‘div‘).click(function(ev){
//ev : event对象
//ev.pageX(相对于文档的) : clientX(相对于可视区)
//ev.which : keyCode
ev.preventDefault(); //阻止默认事件
ev.stopPropagation(); //阻止冒泡的操作
return false; //阻止默认事件 + 阻止冒泡的操作
});*/
$(‘div‘).one(‘click‘,function(){ //只执行事件一次
alert(123);
});
alert( $(‘#div2‘).offset().left ); //获取到屏幕的左距离
alert( $(‘#div2‘).position().left ); //到有定位的父级的left值,把当前元素转化成类似定位的形式
//parent() : 获取父级
//offsetParent() : 获取有定位的父级
//$(‘#div2‘).parent().css(‘background‘,‘blue‘);
$(‘#div2‘).offsetParent().css(‘background‘,‘blue‘);
//alert( $(‘input‘).val() ); //获取一个元素的value值
//$(‘input‘).val(456); // 设置元素value值
//alert( $(‘li‘).size() ); //4 像length
$(‘li‘).each(function(i,elem){ //一参：下标 二参 : 每个元素
$(elem).html(i);
});
hover第一个是移入，第二个是移出
$(‘#div1‘).hover(function(){
//$(this).css(‘background‘,‘blue‘);
//$(‘#div2‘).hide(3000); // 隐藏时间
//$(‘#div2‘).fadeOut(1000); //默认400
//$(‘#div2‘).slideUp();
$(‘#div2‘).fadeTo(1000,0.5); //半透明
},function(){
//$(this).css(‘background‘,‘red‘);
//$(‘#div2‘).show(3000);
//$(‘#div2‘).fadeIn(1000);
//$(‘#div2‘).slideDown();
$(‘#div2‘).fadeTo(1000,1);
});
});