web之jquery

Posted 2020-12-18 今进

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: ode
(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);
}
});
});