web之jquery

标签：res   ESS   UNC   goto   document   网络   ext   环境变量   pat   

jquery 是什么？
write less,do more. (能兼容大部分浏览器)
jquery 是一个javascript库。2006年出现。
插件非常多

jquery库如何在开发中使用？
1）下载js文件，jquery.com
jquery.js
jquery.min.js

2) CDN 服务器 CDN的全称是Content Delivery Network，即内容分发网络

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
aaa

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("

");

$(‘.gotop‘).css({"background-color":"red",bottom:25 }).hide();
$(‘.gotop‘).click(function(){
$(‘html,body‘).animate({scrollTop:‘0px‘},200);
});

$(‘body‘).prepend("

");
$(‘.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);
}
});
});

web之jquery

标签：res   ESS   UNC   goto   document   网络   ext   环境变量   pat   

原文地址：https://www.cnblogs.com/jinjinqiao/p/13368487.html