jQuery基础教程

代码风格

$(function(){});           //执行一个匿名函数

$("#box");                   //进行执行的ID元素选择

$("#box").css("color","red");

$恒等于jQuery;

多个库之间的冲突解决

$(function(){       // jQuery库在base库之前引用，那么$所有权就是base库的

     alert($('#box').ge(0));

     alert($$('#box').get(0));

})

jQuery.noConflict();   //自行了断，把自己的$所有权剔除

var $$=jQuery;              

$(function(){     // jQuery库在base库之后引用，那么$所有权就是jQuery库的

     alert($('#box').ge(0));

     alert($$('#box').get(0));

})

                                                     常规选择器

ID选择器

$(function(){

      $("#box").css("color","red");

     $("div").css("color","oracle");

     $(".pox").css("color","green");

});

警告：ID是唯一标识符，只能在页面出现一次。

get(0)/eq(0):获取第一个元素

#box>p{     //css子选择器，IE6不支持

 color:red

}

$(#box).css("color","red");  jQuery兼容IE6

//js容错判断

if(document.getElementById("pox")){

document.getElementById("pox").style.color="red";

//很多情况下有动态DOM生成的问题，会导致执行不存在的ID选择器

}

判断

if($("#pox").size()>0){

$("#pox").css("color","red");

}

if($("#pox").get(0)){    

...

}

两个相等

if($("#pox")[0]){

...

}

元素选择器

$('div')     获取所有div元素的DOM对象

ID选择器

$('#box')    获取一个ID为box元素的DOM对象

类(class)选择器

$('.box')    获取所有class为box的所有DOM对象

                                  进阶选择器

群组选择器

${'span,em,box'}   获取多个选择器的DOM对象

后代选择器

$('ul li a')   获取追溯到的多个DOM对象

通配选择器

$('*')          获取所有元素的DOM元素

                                  高级选择器

子选择器

$('div p')   只获取子类节点的多个DOM对象

next选择器

$('div+p') 只获取某节点后一个同级DOM对象

nextAll 选择器  

$('div～p') 获取某节点后面所有同级DOM对象

              

find()方法

$('box').find('p').css("color","red")

next()方法

$('box').next('p').css("color","red")

$('box').next('').css("color","red")  //next()等选择器方法不传参，就相当于传递了*号

//prevAll()

$('box').prevAll('p').css("color","red") 

$('box').nextAll('p').css("color","red") 

//siblings上下同级所有

$('box').siblings('p').css("color","red") 

//nextUntil()方法

$('box').nextUntil('p').css("color","red") 

//prevUntil()方法

$('box').prevUntil('p').css("color","red") 

                                            过滤选择器

$("li:first")          选取第一个元素

$("li:last")          选取最后一个元素

$("li:not(red)")  选取class不是red的li元素

$("li:even")        选择索引（0开始）是偶数的所有元素

$("li:odd")        选择索引（0开始）是奇数的所有元素

$("li:eq(2)")        选择索引（0开始）等于index的元素

$("li:gt(2)")        选择索引（0开始）大于index的元素

$("li:lt(2)")        选择索引（0开始）小于index的元素

$(".header")      选择标题元素，h1~h6

$(".animated")   选择正在执行动画的元素

$(".focus")         选择当前被焦点的元素

                                                 内容过滤器

$(":contains("yckucom")")

$(".empty")         选取不包括子元素或空文本的元素

$(".has(.red)")     选取含有class是red的元素

$(".parent")         选取含有子元素或文本的元素

                           

                                                   子元素过滤器

$("li:first-child")          获取每个父元素的第一个元素

$("li:last-child")          获取每个父元素的最后一个元素

$("li:only-child")          获取只有一个子元素的元素

$("li:nth-child(1)")             获取每个自定义的元素（索引值从1开始）

alert($('.red').is(function(){

 return $(this).attr('title')=='列表3'；

}));

//注意必须用$(this)来表示要判断的元素，否则不管function里面是否返回true或false都和调用的元素无关

$("li").slice(2,-2).css("background","#ccc");     选中顺数第2位至倒数第2位   

                                

                                                  DOM

D表示的是页面文档Document

O 表示对象

M 表示模型  即页面上的元素节点和文本节点

元素内容的操作

html()        获取元素中的html内容   

next()          获取元素中的文本内容，有html会自动清理

val()           获取表单中的文本内容 ,可以传递数组

$(function(){

$('input').val();

})

$('div').attr('title'.'我是域名');   //class不建议用attr来设置

$('div').attr('title'.function(index,value){

return  '原来的title是: '+value+',现在的title是:我是'+(index+1)+'号域名'；

})

}); 

$('div').removeAttr('title');      //删除指定的元素

                                                          基础DOM和CSS样式

var box=$('div').css(["color","height","width"]);

for(var i in box){

alert(i+":" +box[i]);

}

$.each(box,function(attr,value){

alert(attr+":"+value);

});

$('div').each(function(index,element){

    alert(index+':'+element);

});

$('div').css({

   'color':'blue',

   'background-color':'#eee',

  'width':'200px',

  'height':'200px'

});

$('div').css('width',function(index,value){

   //局部操作

 return (parselnt(value)-500)+'px';

});

$('div').addClass('red');  //添加

$('div').removeClass('bg');  //删除

css类的样式切换

$('div').click(function(){

 $(this).toggleClass('red size');

});

var count=0;

$('div').click(function(){

 $(this).toggleClass('red size',count++%2==0);

});

$('div').click(function(){

 $(this).toggleClass('red size');

 if($(this).hasClass('red')){

$(this).removeClass('gress');

}else{

  $(this).addClass('green');

}

});

$('div').click(function(){

 $(this).toggleClass(function(){

     if($(this).hasClass('red')){

    $(this).removeClass('red');

  return'green';

  } else{

 $(this).removeClass('green');

   return 'red';

}

});

});

                                                

width(value)   设置某个元素的长度

width(function(index,width){})    通过匿名函数设置某个元素的长度

height(value)   设置某个元素的高度

innerWidth();   //包含内边距

offset()             //获取某个元素相对于视口的偏移位置

position           //获取某个元素相对于父元素的偏移位置

scrollTop()        //获取垂直滚动条的值

scrollTop(value)  //设置垂直滚动条的值

scrollLeft()          //获取水平滚动条的值

scrollLeft(value)  //设置水平滚动条的值

   

                                                DOM节点操作

append(content)   //向指定的元素内部后面插入节点content

append(function(index,html){})  //使用匿名函数向指定元素内部后面插入节点

appendTo(content)  //将指定元素移入到指定元素content内部后面

prepend(content)   //向指定元素content内部的前面插入节点

prepend(function(index,html){})  //使用匿名函数向指定元素内部的前面插入节点

prependTo(content)    //将指定元素移入到指定元素content内部前面

包裹节点

wrap(html)       //向指定元素包裹一层html代码

wrap(element)   //向指定元素包裹一层DOM对象节点

wrap(function(index){})  //使用匿名函数向指定元素包裹一层自定义内容

unwrap()              //移除一层指定元素包裹的内容

wrapAll(html)     //用html将所有元素包裹到一起

wrapInner(html)   //向指定元素的子内容包裹一层html

wrapInner(element)  //向指定元素的子内容包裹一层DOM对象节点

wrapInner(function(index){})  //用匿名函数向指定元素的子内容包裹一层

表单选择器

$('input').val();    //元素名定位，默认获取第一个

$('input').eq(1).val();   //同上，获取第二个

$('input[type=password]').val();   //选择type为paddword的字段

$('input[name=user]').val();    //选择name为user的字段

表单过滤器

$(':enabled').size();     //获取可用元素

$(':disabled').size();     //获取不可用元素

$(':checked').size();     //获取单选、复选框中被选中的元素

$(':selected').size();     //获取下拉列表中被选中的元素

基础事件

$('input').unbind();   //删除全部事件

$('input').unbind('click');   //只删除click事件

$('input').mousedown(function(){

//鼠标左键按下

})

$('input').mouseup(function(){

//鼠标左键按下弹起

})

表单提交作用于form

$('form').submit(function(){

alert("表单提交！")；

})；

$('div').mouseover(function(){    //移入

       $(this).css("background","red");

}).mouseout(function(){    //移出

       $(this).css("background","red")

});

$('div').mouseenter(function(){    //进入

       $(this).css("background","red");

}).mouseleave(function(){    //离开

       $(this).css("background","red")

});

$('div').mouseover(function(){   //over会触发子节点

   $('strong').html(function(index,value){

   return value+'1';

});

});

$('div').mouseenter(function(){   //enter不会触发子节点

   $('strong').html(function(index,value){

   return value+'1';

});

});

$('input').keyup(function(){   //键盘弹起

 alert('键盘');

});

$('input').keydown(function(){ //按下键盘

 alert('键盘');

});

$('input').focus(function(){ //光标激活

 alert('光标激活');

});

$('input').blur(function(){ //光标丢失

 alert('光标丢失');

});

$('div').hover(function(){ 

$(this).css('background','red');

}.function(){

  $(this).css('background','green');

});

$('div').toggle(function(){

  $(this).css('background','red');

}.function(){

  $(this).css('background','green');

}.function(){

  $(this).css('background','green');

});

//禁止提交表单跳转

$('form').submit(function(e){

   e.preventDefault();

});

$('a').click(function(){

 e.preventDefault();//阻止默认行为

 alert("点击弹窗");

});

$('a').click(function(e){

return false,

});

//禁止表单提交
$('input').click(function(){

 e.preventDefault();//阻止默认行为

 alert("表单提交");

});

//阻止冒泡又禁止了默认行为

$('a').click(function(e){

 e.preventDefault();//阻止默认行为

e.stopPropagation();

 alert("点击弹窗");

});

                                      高级事件

//trigger额外数据，只有一条的时候，可以省略中括号，多条不能省略，第二条之后就无法识别了

$('input').click(function(e,data1,data2){

alert(data1+'|'+data2);

}).trigger('click',['123','abc']);

$(function(){

   //bind委托绑定了三个事件

$('button').bind('click',function(){

alert("事件不委托");

})

   //使用live绑定的是document,而非button

//所以，永远只会绑定一次事件

$('button').live('click',function(){

alert("事件委托");

})

//bind无法动态绑定事件

$('button').bind('click',function(){

$(this).clone().appendTo('#box');

});

//live可以动态绑定事件，因为事件绑定在document上

$('button').live('click',function(){

$(this).clone().appendTo('#box');

});

});

                       高级事件

$(function(){

   //普通绑定.bind

  //普通解绑 .unbind

  //新方法绑定 .on

  //新方法解绑

$('.button').on('click',{user:'Lee'},function(e){

alert('替代bind'+e.data.user);

});

$('.button').on('mouseover mouseout',function(e){

alert('移入移出');

});

$('.button').on({

  mouseover:function(){

   alert('移入')；

}，

 mouseout:function(){

   alert('移出')；

}

});

$('form').on('submit',function(){

   return false;

});

//移除事件

$('.button').off('click');

//替代.live .delegate

$('#box').on('cilck','button',function(){

  $(this).clone().appendTo('#box');

});

//移除事件委托

$('#box').off('cilck');

//类似于.bind()只触发一次

$('button').one('cilck',function(){

alert('仅一次事件触发！')

});

$('#box').one('cilck','button',function(){

  $(this).clone().appendTo('#box');

});

});