1 jQuery基础语法

1.1 jquery语法结构

$('选择器').事件名(function(){})

$(document).ready(function(){
    $('.list li').click(function(){
        $(this).css({
            'background':'#fff',
            'color':'red'
        })
    })
})

1.2 设置css属性

• (单个属性设置) $(selector).css('属性','属性值');

$('p').css({
    'color':'#fff',
    'font-size':'18px',
    'background':'blue'
})

• (多个属性设置)
  $(selector).css({'属性':'属性值','属性':'属性值'})

$('p').css({
    "color":"#fff",
    "font-size":"18px",
    "background":"blue"
});

• (读取CSS属性) $(selector).css("属性")；

$("p").css("color");

1.3 基本选择器

• a（标签选择器）——

$("p").css({"font-size":"18px","color":"#fff"});

• b（类选择器） ——

$(".param").css({"font-size":"20px","background":"red"});

• c（ID选择器） ——

$("#only").css({"color":"#fff","background":"#000"});

• d（并集选择器）——

$("div,p").css({"font-size":"14px"});

1.4 层级选择器

• a（后代选择器）——

$(".contain p").css({"font-size":"20px","background":"red"});

• b（子选择器）——

$(".contain > p").css({"color":"#fff","background":"#000"});

1.5 属性选择器

• 仅属性[attribute]

$('p[name]').css({
    'font-size':'16px',
    'text-align':'center'
})

• 带属性值[attribute=value]

1.6 过滤选择器

• :first 选取第一个元素 $('li:first')
• :last 选取最后一个元素 $('li:last')
• :even 选取索引是偶数的所有元素 $('li:even')
• :odd 选取索引是奇数的所有元素 $('li:odd')
• :eq(index) 选取索引等于index的元素 $('li:eq(1)')
• :gt(index) 选取索引大于index的元素 $('li:gt(1)')
• :lt(index) 选取索引小于index的元素 $('li:lt(1)')
• :header 选取所有标题元素，如h1~h6 $(':header')

---

2 jQuery事件

2.1 window事件

2.1.1 jQuery与js加载函数的区别

• js在网页所有元素加载完毕后才执行,jq只需dom准备就绪
• js加载函数只执行一次,jq可执行多次
• js可简写,jq可简写成 $(function(){ })

2.2 鼠标事件

• click() 触发或将函数绑定到指定元素的click事件

$('#btn').click(function(){
    $('.more').css('display','none');
})

• mouseover() 触发或将函数绑定到指定元素的mouseover事件

$('#btn2').mouseover(function(){
    $('#box2').show();
});

• mouseout() 触发或将函数绑定到指定元素的mouseout事件

$('#btn2').mouseout(function(){
    $('#box2').hide();
});

2.3 键盘事件

• keydown() 触发或将函数绑定到指定元素的keydown事件

$(document).keydown(function(event){   //键盘按下事件
    console.log(event.keyCode);
});

• keyup() 触发或将函数绑定到指定元素的keyup事件

$(document).keyup(function(event){  //键盘释放事件
    console.log(event.keyCode);
});

2.4 表单事件

• focus() 触发或将函数绑定到指定元素的focus事件

$('input:eq(0)').focus(function() {
    $(this).val('请输入昵称').removeClass('jingshi');
});

• blur() 触发或将函数绑定到指定元素的blur事件

$('input:eq(0)').blur(function() {
    $(this).val('改昵称已被注册').addClass('jingshi');
});

2.5 绑定事件

bind(type,[data],fn)

• 绑定单个事件

$('.top-m .on').bind('mouseover',function(){
    $('.topDown').css('display','block');
})

• 绑定多个事件

$('.top-m .on').bind({
    mouseover:function(){
        $('.topDown').show();
    },
    mouseout:function(){
        $('topDown').hide();
    }
})

2.6 移除事件

unbind([type].fn)

$('li:eq(1)').bind({
    mouseover:function(){
        console.log('你的鼠标在第二个元素上面');
    },
    mouseout:function(){
        console.log('你的鼠标离开了第二个元素');
    }
});
$('li:eq(2)').bind('click',function(){
    $('li:eq(1)').unbind();
});

2.7 hover()方法

模拟鼠标悬停和离开事件
hover(enter,leave)

$('#box3').hover(function(){
    $(this).text('显示文字');
},function(){
    $(this).text('');
});

2.8 toggle()方法

• 用于模拟鼠标连续click事件(该方法在1.8中被废弃,1.9被移除)

$('#box3').toggle(
    function(){
        $(this).css('background','red');},
    function(){
        $(this).css('background','yellow');},
    function(){
        $(this).css('background','green');}
);

• 切换元素的可见状态

$('#box3').click(function(){
    $('ul').toggle(1000);
})

2.9 isNaN()

用于检查其参数是否是非数字

    console.log(isNaN(123))  //false
    console.log(isNaN('123'))  //false
    console.log(isNaN(5-2))  //false
    console.log(isNaN(2017/12/12))  //false
    console.log(isNaN('hello'))  //true