jquery初级

$(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);

});

});