jquery 是什么？
write less,do more. (能兼容大部分浏览器)
jquery 是一个javascript库。2006年出现。
插件非常多
jquery库如何在开发中使用？
1）下载js文件，jquery.com
jquery.js
jquery.min.js
<script src="js/jquery/jquery.js"></script>
2) CDN 服务器 CDN的全称是Content Delivery Network，即内容分发网络
<script src="http://cdn.baidu.com/js/jquery/jquery.js"></script>
cdn.jsdelivr.net
https://www.jsdelivr.com/
3) npm cnpm 包管理器下载(专业开发)配
(1)下载node.js
(2) 配置环境变量 path 添加 f:\node
(3) 查看仓库
npm config get registry
https://registry.npmjs.org/
npm config set registry https://registry.npm.taobao.org
cnpm
全局安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm
express cnpm install express -g
http-server cnpm install http-server -g
在某个目录如果要使用服务器，直接输入hs命令就可以启
(4) npm install jquery 下载jquery最依赖包
cnpm install jquery
jquery 编写代码
$ 和 jQuery是恒等的。
$(function(){
//js code
//jquery code
});
jQuery(function(){
$(‘.ad).hide();
});
jquery 选择器
jquery 属性 操作
属性操作
attr()
removeAttr()
prop()
removeProp()
控制样式类 .xx样式
addClass() class="ad"
removeClass() class=""
toggleClass()
html() js .innerHTML
text() js .innerText
表单
val() js .value
jquery 样式操作css
.css()
.position()
.scrollTop()
.scrollLeft()
height()
width()
innerHeight()
outerHeight()
jquery 文档处理
删除标签 .remove()
添加标签 .append()
.prepend()
.after()
.before()
标签设置空
.empty();
jquery 选择器结果 再筛选
.first()
.last()
.next()
.parent()
.prev()
.not()
.find()
$("input[type=‘checkbox‘]").parent().is("form") true
form
input type=checkbox
jquery 事件处理
onclick
jquer对象 和 js对象的相互转换
$().get(0).style.color = ‘red‘;
$(jo).css(‘color‘,‘red‘);
js
<a onclick = "ok()">aaa</a>
<script>
function ok(){
}
a1.onclick = ok;
</script>
jquery
on()
off()
one()
on(‘click dbclick‘,function(){});
click(function(){});
keyup(function(){});
on(‘keyup‘,function(){});
事件案例，页面返回顶部 底部
$(function(){
let bottom = $(document).innerHeight() - $(window).height();
let top = 0;
let pos = 300;
//$(‘html,body‘).scrollTop(pos);
$(‘body‘).append("<div class=\"gotop\"></div>");
$(‘.gotop‘).css({"background-color":"red",bottom:25 }).hide();
$(‘.gotop‘).click(function(){
$(‘html,body‘).animate({scrollTop:‘0px‘},200);
});
$(‘body‘).prepend("<div class=\"gobottom\"></div>");
$(‘.gobottom‘).css({ "background-color":"orange", top:25 });
$(‘.gotop,.gobottom‘).css({"cursor":"pointer", width:40, height:40, "position":"fixed", right:10});
$(‘.gobottom‘).click(function(){
$(‘html,body‘).animate({scrollTop:bottom+"px"},200);
});
$(window).scroll(function(){
//document.title = $(‘html,body‘).scrollTop(); 返回当前向处滚动的像素值是个数
pos = $(‘html,body‘).scrollTop();
if(pos>400){
$(‘.gotop‘).fadeIn(‘fast‘);
$(‘.gobottom‘).fadeOut(600);
}else{
$(‘.gotop‘).fadeOut(‘fast‘);
$(‘.gobottom‘).fadeIn(600);
}
});
});