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
