新闻资讯切换jquery新闻资讯推荐

太平洋在线下载 191 3

一.jquery简化ajax

jQuery简化:DOM、事件、ajax 以及还提供了一些JS没有的东西: 必须引入jquery.js文件

1、第一层:最麻烦的新闻资讯切换jquery,但也是太平洋在线下载最无敌的 $.ajax({ "url":"xx.php",//连接服务器端的地址新闻资讯切换jquery,【必写】 "type":"GET/POST",//请求的类型新闻资讯切换jquery,默认值为get - 可选 "data":"key=value&...",//请求的消息 - 可选 "dataType":"HTML/JSON/XML/JSONP",//解析响应消息 // "jsonp":"callback",//通行令的名字 "success":(data)=>{//ajax请求成功,才会执行,并且返回得到的数据,【必写】 data;//服务器端返回的响应数据 }, "error":()=>{ //只有报错后才会执行 - 直接不写,不需要记忆 } });

2、第二层:第一层的基础上进行了再次简化:3个API - 不能做跨域 1、最垃圾: $("xx").load("xx.php","key=value",data=>{

}) 1、会将数据直接放到页面元素之中,document.write将页面元素给替换掉 2、无法设置请求类型,只能是默认的GET 3、无法帮我xg111net企业邮局们脱衣服2、$.get("xx.php","key=value",data=>{ },"JSON")3、$.post("xx.php","key=value",data=>{ },"JSON")复制代码复制代码

3、第三层:特殊功能 - 跨域(拿别人电脑上的数据) 浏览器具有保护策略 - 同源策略:要求协议、域名、端口号必须相同,只要有一个不同就会触发此保护机制 跨域jQuery使用到了一个叫jsonp技术 跨域语法: 前端: $.getJSON("url?key=?","data",data=>{ //key=? - jQuery自动传入一个值,其实是一个函数,后端需要接住后在调用:通行令函数 })

后端:echo $_GET["key"]."(".JSON_encode($arr).")";联合项目:两个人都要用跨域操作复制代码复制代码

目的:1、简化版ajax 2、如何使用ajax去拿去别人电脑上的数据

4、滚动监听触发ajax 前端: var count=0; (window).scroll(()=>{ var sh=(window).scrollTop()+innerHeight;//获取当前滚动条滚动到底部的位置 var bh=("body").height();//完整的页面的高度 if(sh==bh){ .get("05server.php",count=${count},data=>{ //拿到data你要干啥子 count+=2; },"JSON") } })

后端: $sql="SELECT * FROM 表名 ORDER BY id DESC LIMIT 开始下标,个数;";

学习永远不要学死代码,要学的思想思路: 不断的学习的精神,自己解决问题的能力

二.Bootstrap框架 1、Bootstrap框架:UI组件库:提供了HTML/CSS/JS - 类似于我们学过jQueryUI 不需要任何的记忆,只需要查看文档:v3.bootcss.com/ 简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发【响应式布局】、移动设备优先的 WEB 项目。

2、Bootstrap由5部分组成: 1、入门 - 下载 2、全局css样式 3、组件 4、js插件 5、定制

3、想要使用bootstrap一定要记得引入:

4、全局css样式:分为了2个部分 1、提供了css reset - 如果你引入了bootstrap.css,不需要自己去重置样式 2、提供了大概1000+的class - class带有样式 3、提供了哪些有用的和没用的 1、按钮: *有用的:1、btn btn-default;//白底黑字的按钮 2、btn-block;//块级按钮 没用的:五种颜色(btn-danger/warning/success/info/primary) 和 四种大小(lg/md/sm/xs)

2、图片: *有用的:1、img-rounded; - border-radius: 6px; 2、img-circle; - border-radius: 50%;//这两个class不是只有图片能用 没用的:缩略图:img-thumbnail; 3、文本: *有用的:文本对齐方式:text-right/center/justify 没用的:五种文字颜色(text-颜色),五种背景颜色(bg-颜色) 4、*表格 - 很屌,但是表格用得少 1、table - 长得像个表格 2、table-striped - 隔行变色 3、table-hover - 带有悬停效果 4、table-border - 带有边框 5、table-condensd - 紧缩型表格 6、table-responsive - 响应式表格,必须设置在table的父元素身上 5、*表单 - 直接梭,填空修改 6、栅格式布局 - 今天最重要的东西复制代码复制代码

5、组件: 1、推荐: 1、导航条 2、巨幕 - banner 3、缩略图 - 图片文字上下,图文并茂 - 产品 4、媒体对象 - 左边或者右边放图片,另一边放文字 - 公司简介 5、面包屑导航/路径导航

2、没用: 1、字体图标 2、按钮组 3、分页条 4、标签 5、徽章 6、页头 7、警告框 8、进度条 9、well水井复制代码复制代码

6、插件:梭

7、栅格式布局:使用步骤:10步 1、必须放上一个容器:

2、必须在此容器中放入行:3、必须在此容器中放入列:4、在不同的屏幕设置不同的列宽 col-lg/md/sm/xs-* 5、列宽:bootstrap将一行等分为了12份 col-屏幕-列宽(1-12) 6、更小的屏幕设置列宽可以管住更大屏幕 lg - 只能管lg屏幕 md - 只能管lg/md屏幕 sm - 只能管lg/md/sm屏幕 xs - 管所有 自己有,优先用自己的,自己没有优先用离自己近的 7、设置偏移:设置向左顶出几份 col-屏幕-offset-列宽 lg - 只能管lg屏幕 md - 只能管lg/md屏幕 sm - 只能管lg/md/sm屏幕 xs - 管所有 自己有,优先用自己的,自己没有优先用离自己近的 8、设置在某个屏幕隐藏:只管自己屏幕,不管别人 hidden-屏幕 9、不推荐:列中可以继续嵌套行,一行又会分为12份,如果列太小了,什么都放不下 10、栅格式布局是一个怪异盒模型:设置间距要用border

始终不可少的步骤: 1、梭 2、改 3、数据渲染

*****响应式项目必不可少的东西: 1、meat viewport元标签 - 如果缺少,手机端看不到手机端应有的效果,只能看到离自己最近的那个端的效果 2、媒体查询必不可少 3、千万不要使用绝对单位,要使用相对单位:rem 4、响应式图片:max-width: 100%;

***不是所有的网站都适合做成响应式网页:比如:电商类;

动态样式语言 - css不是人写的 静态样式语言:css,他太平洋xg111作为一门语言并不称职,没有语言必须拥有基础概念:变量、运算、函数、分支、循环...等等语言所必备的基础概念都没有 导致大型项目中进行开发和维护都非常的麻烦 动态样式语言:【在css的基础之上】添加了语言必备的概念 - 会css基本就会了 目的:简化css开发 市场上常用的动态样式语言: 1、sass/scss - 会css基本就会了,学习其中一个另一个也就会了 2、less - 会css基本就会了,学习其中一个另一个也就会了 3、stylus - 不学,和css语法区别较大

1、sass/scss编译:sass/scss=(编译)=>css 为什么:浏览器只认识css,不认识其他的动态样式语言,但是程序员书写动态样式语言又会减轻我们的负担,说白了 程序员写动态样式语言,但是要进行编译,页面上引入时引入的还是css 如何编译: 1、vscode的人员:安装插件easy sass;//自动编译,一旦保存xx.scss就会自动生成一个xx.css 2、HBuilder的人员:安装插件,//手动编译,对文件点击右键->编译 3、网上一大堆动态样式语言编译工具:koloa

2、scss带来的新特性: *特性1:变量: 语法:变量名:值;特殊:1、使用时:变量名: 值; 特殊: 1、使用时:变量名:值;特殊:1、使用时:不能省略 2、可以创建局部变量,选择器{$局部变量名: 值;} 3、不区分中划线和下划线,都可以

***特性2:嵌套:- 很大一部分人学了动态样式语言的目的就是为了学习这一个知识点 .d1{ d1的样式 .d2{d2的样式 &:hover{hover样式} } >.d3{d3的样式} } 编译后: .d1{d1的样式} .d1 .d2{d2的样式} .d1 .d2:hover{hover样式} .d1>.d3{d3的样式} 特殊: 1、层级选择器不写的话,默认使用后代选择器(空格) 2、&:类似于javascript中的this,&包含在那个大括号里面就代表是谁 特性3:导入: @import:css也有,但是绝对不要再css使用,因为引入html后,js无法操作样式 但是scss可用 语法:@import "文件名" 为什么不推荐:因为自己的页面只需要自己的css,不需要别人的,一般只有开发框架的人才会使用此特性 *特性4:注释:提示自己或别人 不要使用单行注释 要使用多行注释才可以/****/复制代码复制代码

*****特性5:混合器:类似于javascript中的函数: 1、创建混合器 @mixin 混合器名(形参:默认值,...){ width:形参; }

2、调用混合器 @include 混合器名(); 特殊:1、没有传入实参,使用默认值 2、如果传入实参,则使用实参 何时:先写代码,碰到重复多了时,则封装为一个函数 *特殊6:运算:尤其是颜色值可以进行运算 //#000000 - #ffffff //黑(暗) 白(亮) //0最小 - f最大 //乘以个1.x,一定会让此数字变大不断的靠近白色 //乘以个0.x,一定会让此数字变小不断的靠近黑色特性7:分支和循环,不要用都是垃圾复制代码复制代码

2、Less:和Scss有两点不同: 1、变量:@变量名:值; 需要区分中划线和下划线... 2、混合器: 创建: .混合器名(@形参:默认值,...){ width: @形参; ... }

使用: div{ .混合器名(); }其余全部一样复制代码复制代码

3、Bootstrap定制: *1、直接写自己的覆盖它的 - 删除掉你覆盖的部分,不然会有一些无用的代码 2、在源代码6800行css中进行修改 - 找起来麻烦 3、作者们对推荐你:操作源代码 - 我不推荐,因为源代码找起来也恼火

4、git/svn工具:代码托管平台 - 大家一起合作开发 git(9+):分布式版本管理控制工具 优点:人人都是客户端,人人都是服务器端(云端); 缺点:黑客大佬,可能会破解你的项目

svn(1-):集中式版本管理控制工具 优点:所有的代码都保存在项目经理处(服务器端) 缺点:服务器端一旦电脑坏了,卵大爷 一般都是一些老公司或者要是项目保密强的公司1、git:如何使用: 1、安装: 先安装:Git-2.18.0-64-bit.exe - 命令行方式 在安装:TortoiseGit-2.6.0.0-64bit - 小乌龟(提示功能) 重启电脑 2、分职位做操作: 1、项目经理: 1、打开gitee网站:注册/登录 2、创建项目仓库:选择开源/私有(仓库成员才能访问) 3、将仓库地址私发给对应的开发人员 4、监督项目流程、进度 2、开发人员: 1、对着电脑任意位置右键:git bash here 2、将项目仓库拉到本地:git clone 仓库地址; - 仅用于第一次使用(拉到所有的文件),记得关闭命令行 3、做你该做的项目开发 4、今天下班之前:传到云端:在项目中再次右键重新打开git bash here 1、git add . - 将新增的或者修改的文件添加到本地git(蓝色+号) 2、git commit -m"必须写日志" - 将新增的或者修改的文件提交到本地git服务器 3、推送到云端:git push origin master; 5、第二早上一来:先更新仓库:- 第二天来了可以更新看看后端有没有做好什么接口,我今天可以使用 git pull origin master; 6、特殊用法:分支:分工合作 1、查看分支:git branch - master主分支 2、创建分支:git branch 分支名; 3、切换分支:git checkout 分支名;//普通分支不能推送到云端,只能主分支推送 4、合并分支:git merge 分支名; 5、删除分支:git branch -d 分支名;复制代码复制代码

三.node.js 1、Node.js概述:不是js,但是语法和javascript非常相似,他的竞争对手是PHP/JAVA/C++/PYTHON... - 历史上第一次一门语言可以通吃前后端 做的功能绝对不是特效,做的事和服务器端语言一致(和数据库进行交互) 目的: 1、使用代码搭建一个服务器(文件可以放在任何位置) 2、node.js如何操作数据库 3、全站一条龙

新闻资讯切换jquery新闻资讯推荐-第1张图片-太平洋在线

2、Node.js安装:node-v12.1.0-x64.msi 一步到位 版本:16年初(0.12) 16年中(4.xx) 16年底(6.xx) - 更新速度非常快(但是其实并没有加什么新东西) 检查:打开cmd 输入:node -v; - 查看版本,如果有版本号说明安装成功 其实我们安装的这个node.js只是一个运行环境而已

3、Node.js如何运行: 1、交互模式 - 临时测试打开cmd输入:node,就可以开始敲你的"js"代码了

2、脚本/文件模式 - 正式开发中: 1、先创建xx.js,里面书写你自己的代码 2、打开cmd输入:node 文件绝对路径3、编辑器有插件: 1、vscode:code runner 2、HBuilder:nodeclipse 插件想要成功,至少前两个方式要成功才可以 复制代码复制代码

4、Node.js知识点: 1、js 和 node 的区别: 相同点:都可以使用一切ecmascript的操作,包括一切API都可以使用,放心大胆的使用es6的语法(服务器端不存在浏览器,不会有老IE) 不同点:1、javascript:BOM DOM; 2、Node.js:虽然不能使用BOM DOM,但是他却又10万个以上的模块

2、模块:每一个.js文件,都可以称之为叫做一个模块 1、模块化开发:如果以一个网页来说,我们可以按照功能分为很多个模块:商家模块、产品模块、促销模块、用户模块... 分工合作:将每个模块就给对应的人完成,最后再由主模块进行引入 每一个模块都有一个操作,可以用于公开/暴露自己的成员 1、exports.属性名=值 2、module.exports={ 属性名:值, ... } 每一个模块都有一个操作,可以用于引入其他模块: var obj=require("./文件名");//必须加上./ 小练习: 1、代老湿是主模块:- 这个人是最轻松 2、蒲靖帮我公开两个方法,一个计算圆的周长,一个计算圆的面积 3、何长江帮我公开两个方法,一个计算矩形的周长,一个计算矩形的面积 4、张黎帮我公开两个方法,一个计算数组求和,一个计算数组的平均值 鄙视题:exports和module.exports有什么区别 都是用于暴露公开自己的成员的 但是:exports={} 这写法是错误的 node.js底层有一句话:exports=module.exports 其实真正做的公开功能的是module.exports 如果你使用了 exports={},替换了module.exports,不在具有公开的功能 2、模块的分类: 1、官方模块 - 今日重点,大概几十个,重要的只有几个 2、第三方模块 - 多到数不清,提供了很多很多官方没有的东西,有一个网址npm 3、自定义模块 node.js最大的特点: 1、快、非常快 - 以前最快的是php,node.js速度是php的十六倍 2、为什么快:1、因为官方提供的东西很少,甚至连数据库操作都没有 2、使用google浏览器v8引擎 3、官方模块:不需要下载,在你安装node.js环境时已经带上了,但是某得模块可能需要引入,引入时不要加./ 1、Global模块 不需要引入,直接可以使用: 提供: 1、三种定时器(Interval、Timeout、Immediate) Immediate 底层:Timeout延时为0,立刻执行,但是毕竟异步操作,不会卡主后续代码 2、console对象 2、querystring模块:查询字符串 需要引入:var qs = require('querystring'); 提供了解析url查询字符串部分的功能 var obj=qs.parse("查询字符串"); 想要获取前端传来的每一部分:obj.键名; 垃圾:如果前端传来的是一个完整的网址,他就解析不了了 3、url模块: - 小重点 需要引入:var url = require('url'); 提供了解析完整的url的功能 var objurl=url.parse("完整的网址",true); //加上true,自动调用querystring模块的parse方法,进行查询字符串部分变为一个对象 真正重要的有两个点: 1、查询字符串:objurl.query.键名 - 拿到前端传来的数据 2、路由/请求地址:objurl.pathname - 下午会搭配上fs模块(文件系统)和http模块(服务器)实现代码搭建服务器和文件系统 4、Buffer模块:缓冲区,可以将数据(字符串、数字、图片、HTML...)变为一个16进制的数字 - node中的一个新的数据类型 不需要引入,直接可以使用: 我们绝对不会主动的使用buffer的任何操作,但是后面我们的一些API可能会导致我们得到的结果就是一个buffer,我们不认识,node.js的大部分API都是支持buffer操作 5、fs模块 - 大重点:文件系统:对文件增删改查 需要引入:var fs = require('fs'); *异步读取文件:fs.readFile("文件路径",(err,buf)=>{ buf->读取到的内容 }) 异步写入文件:fs.writeFile("文件路径","新内容",(err)=>{ - 会替换原有的内容 console.log("写入完毕后续操作") }) 异步追加文件:fs.appendFile("文件路径","新内容",(err)=>{ - 会替换原有的内容 console.log("写入完毕后续操作") }) 异步能够最大的发挥node.js的特点(快) 注意:vscode的同学你们写文件相对路径有可能会失败:绝对路径node.js提供了一个全局变量: __dirname+"/你的文件的相对路径" 小练习:通过使用fs模块将public/css/style.css复制一份名为style.backup.css的文件 6、http模块 - 超级重点:搭建服务器 固定步骤 需要引入:var http = require('http'); var app=http.createServer();//创建服务器应用 app.listen(80);//设置了此服务器应用的端口号为80 app.on("request",(req,res)=>{ req.url 此属性记得使用url模块的parse方法分别解析出路由和查询字符串 res.end();//响应方式,此方法一个请求只能有一个响应 }) ***注意:node.js搭建服务器和文件系统,所有的连接(href和src)其实都是一个请求路由复制代码

原文链接:https://juejin.cn/post/7051402910705385480

如果你觉的本文对你有帮助,麻烦转发关注支持一下

新闻资讯切换jquery新闻资讯推荐-第2张图片-太平洋在线

标签: 新闻资讯切换jquery

抱歉,评论功能暂时关闭!