juuery基础

-----------------选择器
$("#box p").css('color','red');//id为box下的所有p标签改变颜色
$("#box").find('p').css('color','red');//与上面效果相同，jquery特有，结构更清晰，性能更好


$("#box > p").css('color','red');//值改变box下直接字标签p的颜色
$("#box").children('p').css('color','red');//与上面效果相同，jquery特有，结构更清晰


$("#box + p").css('color','red')//改变box下第一个兄弟子元素节点p的颜色
$("#box").next('p').css('color','red');//与上面效果相同，jquery特有，结构更清晰


$('#box').nextAll('p').css('color','red');//改变box下所有兄弟节点p的颜色
$("#box").next().css('color','red');//改变box下面第一个兄弟子元素节点的颜色


$("#box").prev('p').css('color','red');//改变box上面第一个兄弟子元素节点p的颜色


$("#box").prevAll('p').css('color','red');//改变box上面第所有兄弟子元素节点p的颜色
$("#box").nextAll('p').css('color','red');//改变box下面第所有兄弟子元素节点p的颜色


$("#box").siblings('p').css('color','red');//改变box上面和下面所有兄弟子元素节点的颜色


$("#box").nextUntil('p').css('color','red');//改变box上面所有兄弟子元素节点的颜色，遇到第一个p标签停止
$("#box").prevUntil('p').css('color','red');//改变box下面所有兄弟子元素节点的颜色，遇到第一个p标签停止




------------------过滤器
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
</ul>
$('li:first').css('color','red');//第一个li改变颜色
$('li:last').css('color','red');//改变最后一个li颜色
$('ul:first li:last').css('background','red');//改变第一个ul下的最后一个li的颜色
$('li:not(.red)').css('color','red');//改变li中class不是red的节点的颜色
$('li:even').css('background','red');//改变li中所有偶数行的颜色
$('li:odd').css('background','red');//改变li中所有奇数行的颜色
$('li:eq(2)').css('background','red')//改变li中index为2的颜色，eq=equals
$('li:gt(3)').css('background','red')//改变li中index大于3的颜色
$('li:lt(3)').css('background','red')//改变li中index小于3的颜色
$(':header').css('background','red')//改变标题元素，h1-h6


$('input').get(0).focus();
$(':focus').css('backgrounp','red');//聚焦变色，要变色要先得到焦点；
$('input').focus().css('color','red');//好像和上面效果差不多




---------------------------内容过滤器
<div>文本1</div>
<div>文本1</div>
<div><p></p></div>
<ul>
<li class='red'></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
</ul>


$function(){
$(':contains("文本1")').css('background','red');//这样的话整个页面都会变颜色(选取的是文本内容)
$('div:contains("文本1")').css('background','red');//这样只有文本1那条会变色


$(':empty').css('background','red').css('height','20px');//不包含子元素或空文本的元素,此时p会变色
$('div:empty')css('background','red').css('height','20px');//此时都不会变色，div标签下还有一个p标签


$('ul:has(.red)').css('backkground','red');//此时整
个第一个ul会变色，是ul：has，所有变色的是整个ul
$('div:parent').css('background','res');//和empty对应，div中包含文本的标签变色


//提供的方法，与上面对应，更简便
$('ul').has('.red').css('color','red');
$('p').parent().css('backkground','red');
$('p').parents().css('bacckground','red');//与p标签有关系的所有标签，真个页面会变色
$('p').parentsUntil('body').css('bacckground','red');//变色只延续到body标签为止
}




----------------------子元素过滤器
<ul>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
</ul>


$('li:first-child').css('bacckground','red');//两个ul中的第一个li会变色
$('li:last-child').css('bacckground','red');//两个ul中的最后一个li会变色


$('li:only-child').css('bacckground','red');//只有一个子节点的li的div下的li会变色
个行变色
$('li:nth-child("even")')..css('bacckground','red');//改变偶数行的颜色，从1开始
$('li:nth-child("odd")')..css('bacckground','red');//改变奇数行的颜色
$('li:nth-child(2)')..css('bacckground','red');//改变两个ul中第二个li的颜色


----------------------常用方法
<ul>
<li></li>
<li class='red'></li>
</ul>
<ul>
<li></li>
<li></li>
</ul>
alert($('.red')is('li'));//truse判断是否有包含class为red的li标签
alert($('li').eq(2).hasClass('red'));//第二个li是否包含class为red，这里的class前面不用加点


$('li')/slice(1,3).css('bacckground','red');//第一到第二行会变色
$('li')/slice(2).css('bacckground','red');//第二行到最后一行会变色


$('div').contens();//获取元素下所有元素节点，包括文本节点


$('li').filter('.red').css('bacckground','red');//查找li下.red
$('li').filter(function(){
return $(this).class == 'res';
}).css('bacckground','red');//可添加function增加过滤条件，查找更精确


-------------------------
<div></div>
<input type='text' />
<input type='reado' value='man' />男
<input type='reado' value='woman' />女
<input type='checkbox' value='read' />阅读


$('div:first').html('<strong>文本</strong>');//设置html内容，会覆盖原来的
$('div').text('文本');//设置文本内容，不包含html标签
$('div').text();//获取
$('input:first').val();//获取表单中的内容
$('input:first').val('新内容');//设置表单中的内容
$('inout:eq(1)').val('man');//将第二个input的value值改成女性，表单上的值不会改变
function(){                                 //完成表单选中设置
$('input').val(['man','read']);
}


-----------------------jquery操作元素的属性
<div id='red'>


</div>


$(function(){
$('div').attr('id');//获取div的id属性值
$('div').attr('titlt','我的title');新增div的title标签并设置值
$('div').attr({'date':'2016','titlt':'我的title'})//位div设置多个值，


$('div').sttr('title',function(index,value){//index为当前索引值，value为之前设置的值
return '我的fun设置的title'+index+value；
     });
$('div').removeval('title');//删除属性值
})


------------------运用jquery设置元素样式
var box = $('div').css(['width','color','height']);
$each(box,function(attr,value){//遍历输出
alter(attr+':'+value);
});
$each(box,function(index,element){//
alter(index+':'+element);
});


$('div').css('width',function(index,value){
return parseInt(value)+200+'px';//在元来宽度上加上两百
})
$('div').css( //同时设置多个css样式
'color':'red',
'width':'200px'
'background':'green'
);


-------------------------应用jquery操作元素样式
$('div').addClass('red');//添加一个class样式
$('div').addClass('red bg');//添加多个class样式


$('div').removeClass('red');//删除一个class样式
$('div').removeClass('red bg');//删除多个class样式


//点击切换css样式
$(function(){
$('div').click(function(){
//$('div').toggleClass('red');//会在默认样式和red样式切换
//在两个样式间切换
if($('div').hasClass('blue')){
$('div').removeClass('blue').addClass('red');
}else if($('div').hasClass('red')){
$('div').removeClass('red').addClass('blue');
}
})
})


$('div').width(300);//可直接设置
$('div').width(function(index,value){
return vslue+200;//在原来基础上直接加上200px
})


alter('width'+ ':' + $('div').width());
alter('inner'+ ':' + $('div').innerWidth());//加上magin
alter('wouter'+ ':' + $('div').outerWidth(true));//加上pading，想要显示需加上true


alert('offset.left'+':'+$('div').offset().left);//获取div左上角的坐标
alert('offset.top'+':'+$('div').offset().top);
//设置滚动条到顶端的距离
alert($(window).scrollTop());获取滚动条到顶端的距离
$(window).scrollTop(300);//设置滚动条到顶端的距离


--------------------节点操作
$(function(){
$('body').append($('<div>新内容</div>'));//往body里添加新的节点，这样会添加到后面
$('body').append(function(index,html){//往body里添加新的节点，这样会添加到前面
return '<div>新内容</div>'+html;
});


$('div').appendTo('strong');//把已有内容添加到div后面
$('div').prepend('strong');//把已有内容添加到div前面


cefore
$('div').insertAfter('strong');
$('div').insertBefor('strong');


})


---------------包裹节点，节店替换，克隆，删除
$('div').warp('<strong/>');//在div外包裹一层strong节点
$('div').unwarp();//移除包裹
$('div').warpAll('<strong/>');//在所有div外整体包裹一层strong节点
$('div').warpInner('<strong/>');//在所有div内部包裹一层strong节点


克隆 拷贝
$('div').click(function(){//给节点添加事件
alert('123');
})
$('div').clone(true).appendTo('body');//克隆时只有添加true才会添加完整的节点


$('div').remove();//删除所有div节点
$('div').remove('.red')//删除class位red的div节点
$('div').remove().appendTo('body');//删除后添加，这样不会添加之前加载的事件
$('div').detach().appendTo('body');//删除后添加，这样会添加之前加载的事件


$('div').empty();//清除div节点中的文本内容


$('div').replaceWith('<span>内容</span>');//将div替换为span的内容


------------------------表单选择器
:input(input,textarea,select,button)元素
：text单行文本
：password
：radio 单选框
:readio
:checkbox 复选框
:submit 
:reset
:image
:button
:file
:hidden 不可见文字
$(function(){
$('input').eq(1).val();//获取第二个input的值
$('input[type=password]').val();
$('input[name=name]').val();


$(':password[name=pass]').val();


$(':radio').eq(1).val();
$(':radio[name-sex]').last().val();//增加约束可更加精确地定位


$('form :hideen').size();//查看表单下隐藏的标签数目


$('form :enable').size();//查看表单下可用的元素
$('form :diaable').size();//查看表单下不可用的元素


$('form :checked').size();//查看表单下被选中的元素
$('form :select').get(0);//查看被选中的元素
})






------------------基础事件
js中的事件
click,dbclick
mousedown,mouseup,mousemove,mouseout,change,
select,submit,keydown,keypress,keyup,blur,focus,load,
resize,scroll,error


$(function(){
$('input').bind('click',function(){alert('click')})//bind为绑定事件
$('input').bind('mouseover mouseout',function(){alert('click')})//绑定多个事件
$('input').bind({ //绑定多个事件,每个动作都不同
mouseover:function(){
alert('mouseover');
},
mouseout:function(){
alert('mouseout');
}
})


$('input').unbind();//解绑
$('input').unbind('click','fun1');//解绑


$(windows).scroll(function(){//滑动条滑动时触发，
alert('size change');
})


$('from').submit(function(){//sublit不能由input触发，由form触发
ale......;
})


});


-------------------
<div id='box'>
  <div></div>
 </div>
  <strong></strong>
--------与鼠标相关
$(function(){
//mouseover进入大div中的小div也会发生变化
// $('#box').mouseover(function(){
// $('strong').html(function(index,value){
// return value + '1';
// })
// }).mouseout(function(){
// $('strong').html(function(index,value){
// return value + '1';
// })
// });
//mouseenter只有进出整个大div会变化，一般使用这种
$('#box').mouseenter(function(){
$(this).css('background','pink');
$('strong').html(function(index,value){
return value + '1';
})
}).mouseleave(function(){
$(this).css('background','gray');
$('strong').html(function(index,value){
return value + '1';
})
});
});


----------与键盘相关
$('inprut').keydown(function(){
clert('按下')；
})
$('inprut').keydup(function(){
clert('抬起')；
})


$('inprut').keypress(function(event){
clert(event.charCode)；//弹出哈希码
})
$('inprut').keyddown(function(){
clert('抬起')；
})


focus 获得焦点
blur  失去焦点


focusin $()中填父元素也能获得焦点
blurout $()中填父元素也能失去焦点






---------------------事件对象
$(function(){
$('input').bind('click',function(event){
alert(event.type);//弹出绑定元素的类型
})
$('input').bind('click',function(event){
alert(event.target);//弹出触发元素的类型
})


$('input').bind('click',function(event){
alert(event.currenttarget);//只会弹出绑定元素的类型
})
-----------date
$('input').bind('click',123,function(event){
alert(event.date);//弹出123
})


$('input').bind('click',[1,2,3],function(event){
alert(event.date[1]);//弹出1
})
$('input').bind('click',{'name':'xiaoming','age','20'},function(event){
alert(event.date.age);//弹出20
})
$('input').bind('click',{'name':'xiaoming','age','20'},function(event){
alert(event.timeStamp);//弹出时间戳
})


$('document').bind('click',,function(event){
alert(event.pageX+':'+event.pageY);//弹出xy轴坐标点，相对于浏览器，滚动后y会叠加
})
$('document').bind('click',,function(event){
alert(event.screenX+':'+event.screenY);//弹出xy轴坐标点，相对于屏幕远点
})
$('document').bind('click',,function(event){
alert(event.clienX+':'+event.clienY);//弹出xy轴坐标点，相对于浏览器，滚动后y不会叠加
})


})


加入一行
event.stioPropagation();//阻止冒泡行为
event.preventSefault();//阻止默认行为
return false;//阻止冒泡行为和默认行为


-------------动态绑定
$('.box').on('click','.button',function(){//推荐使用
alter('on click');
})
$('.box').off('click','button');//解除绑定
$('.box').one('click','.button',function(){//只能使用一次
alter('on click');