(17.04.24)jquery、原生和jq的区别、选择器(jq
2017-11-04 本文已影响0人
张不困_
jquery:库,框架
js,别人封装成的js
1.7
jq 1.X 兼容ie6
jq 2.x 兼容ie9+
怎么来选择库:
基于你公司定位!
稳定版本!
准备:
库:
帮助手册:
原生:
window.onload=function(){}
doucment.getElementById('box')
jq:
$(function(){
})
$('#box')
hide()---display:none;
show()---display:block;
$('#box').addClass('active');添个加一个class
$('#box').removeClass('active');删除class
$('#btn').hover(function(){
$('#box').show();---鼠标移入
},function(){
$('#box').hide();---鼠标移出
});
$('#btn').toggle(function(){---点击显示隐藏!
$('#box').show();
},function(){
$('#box').hide();
});
$(function(){-----上滑下滑!
$('#btn').hover(function(){
$('#box').slideDown();
},function(){
$('#box').slideUp();
});
})
$(function(){----淡入淡出!
$('#btn').hover(function(){
$('#box').fadeIn();
},function(){
$('#box').fadeOut();
});
})
结论:
原生js:只用系统函数,自己写!
jq:别人写好的函数!
回调函数:
前一个函数执行完毕以后,再开始执行的这个函数!
jq选择器:
$('#div1') 获取一个元素!
$('.red') 获取一组class!
$('#ul1 .red') 获取#ul1下面的一组class(red)--具有优先级!
$('li') 标签来获取一组
伪类选择器:
$('li:first') 第一个li
$('li:last') 最后一个li
$('li:eq(3)') 第某一个li
$('li:odd') 奇数
$('li:even') 奇数
特殊:
$('div:has(span)') ---根据标签里面包的span标签来获取这个标签div
$('div:contains(智)')---根据标签里面的内容来获取这个div!
属性选择器:
$('ul li input[type=text]')---通过input属性来获取一组input
标签的内容:
原生:
普通:innerHTML
表单:value
jq:
普通:html();
表单:val();