jQuery Library
JS
ROBIN.FANG
这个作者很懒,什么都没留下…
展开
-
8-4. jQuery特效:创建并管理队列
4)stop方法停止匹配元素当前 正在运行 的 动画方法stop( [queue ] [, clearQueue ] [, jumpToEnd ] )参数:queue:停止动画队列的名称(默认值为标准的该元素上面的fx这个动画队列)clearQueue: 一个布尔值,指示是否取消已列队动画。默认 false jumpToEnd: 一个布尔值指示是否当前动画方法立...原创 2020-05-06 15:56:40 · 165 阅读 · 0 评论 -
8-3. jQuery特效:创建并管理队列
5)创建并管理队列队列:函数队列函数在排队,优点,第一个全部执行完成了,第二个才会开始执行,依次,后面都是一样的,不会混乱!1. queue 方法在匹配的元素上创建函数队列(替换已有队列),或向函数队列中添加函数queue方法用于,在匹配的元素上,创建队列、替换已有队列、向已有队列中继续添加函数!怎么在匹配的元素上创建函数队列:jQuery对象.queue('suns...原创 2020-05-06 14:59:36 · 188 阅读 · 0 评论 -
8-2. jQuery特效:淡入淡出、定制特效
3)淡入淡出特效1. fadeOut 方法通过淡出的方式隐藏匹配元素fadeOut( [duration] [, easing] [, complete] )2. fadeIn 方法通过淡入的方式显示匹配元素fadeIn([duration] [, easing] [, complete] )3. fadeTo 方法调整匹配元素的透明度fadeTo...原创 2020-05-06 10:46:52 · 281 阅读 · 0 评论 -
8-1. jQuery特效:基础、滑动特效
基础特效1)hide方法隐藏匹配的元素,有三个参数可以传,不传参数表示立刻隐藏hide( [duration] [, easing] [, complete] )1. duration:一个字符串或者数字决定动画将允行多久,如果不传第一个参数,但是传了后面的参数字符串 'fast' 和 'slow', 分别代表200和600毫秒<...原创 2020-05-05 22:26:05 · 263 阅读 · 0 评论 -
10-1 项目实战(仿同城旅游网首页)知识准备
站点:www.ly.comIE7 浏览器常见问题:两个div默认情况下后写的那个div的图层在先写的图层的上面,如果有交叉部分则会盖住之前的图层设置被挡住的图层 z-index:2;给同级的div设置z-indexCSS3 box-shadow属性box-shadow:0px 0px 0px 0px grey; //可以是负值/*这段文字插在对...转载 2019-04-29 18:41:47 · 453 阅读 · 0 评论 -
9-1. 浏览器原生Ajax接口(XHR对象)
What is Ajax Technology?It is异步的JavaScript与XML技术Function: Ajax是一种无需刷新页面即可实现客户端与服务器端数据交互的技术!Ajax is not a language, it is only just a technology method.In fact, there existed original Ajax te...原创 2019-07-19 21:30:39 · 473 阅读 · 0 评论 -
前端DIV布局浮动问题解决
网页布局方式:固定布局(将网页主体部分长度设置成固定的值,然后配合浮动技术实现布局)//CSS文件body,div,ul,ol,li,dl,dd,h1,h2,h3,form,input,textarea,p,img{ //很多块级元素都有默认的外边距 margin:0px; padding:0px;}ul{list-style:none;}a{text-de...原创 2019-01-21 11:37:02 · 1921 阅读 · 0 评论 -
处理响应式网站布局的笔记
单位 rem和em的区别:rem是相对于根级html,根元素默认的font-size基本都是16pxem是相对于父级元素计算的,rem很不方便,所有建议用rem计算就行了!用rem是一种进步那默认的文字大小是16px,但我们想设置成12px大小的文字怎么办?12÷16=0.75(rem)为了兼容不支持 rem 的浏览器,我们需要在 rem 前面写上对应的 px 值,这样不...原创 2019-03-01 10:07:08 · 181 阅读 · 0 评论 -
4-3. jQuery选择器(联合选择器、反选择器、jQuery扩充的选择器)
联合选择器和反选择器 通过对选择器的合理安排,我们几乎能达成任何目标。我们还可以利用选择器组合实现联合选择和反选择 <selector>,<selector>,<selector>.. 选取匹配第一个选择器的元素和匹配第二个选择器的元素 :not(selector) 选取不匹配指定选择器的元素...原创 2019-03-22 14:09:34 · 817 阅读 · 1 评论 -
4-2. jQuery选择器(关系选择器、伪元素和伪类选择器)
关系选择器<selector1> <selector2> 在给定的祖先元素下匹配所有的后代元素alert($('div p').length);<selector1> > <selector2> 在给定的父元素下匹配所有的子元素alert($('#div>p').length);<sel...原创 2019-03-22 14:06:18 · 1462 阅读 · 0 评论 -
4-1. jQuery选择器(核心选择器、属性选择器)
使用jQuery步骤:选取元素 对选取的元素执行需要的步骤我们先研究如何使用jQuery选取元素以及对选取的结果进行“各种筛选”jQuery选择器jQuery中选择元素只要把选择器以 字符串 的形式传递给$函数即可,返回的结果是一个jQuery对象CSS中的选择器在jQuery中都可以使用,但jQuery又扩充了自己的选择器,如下:核心选择器(用的最多)*...原创 2019-03-21 21:08:56 · 279 阅读 · 0 评论 -
2-5. JS文档对象模型(DOM)、浏览器对象模型(BOM)
HTML元素层次关系:父子关系、祖先关系、兄弟关系文档对象模型:DOM是针对HTML和XML文档的一个API(应用程序编程接口),DOM描述了一个层次化的节点数,允许开发人员添加、移除和修改页面的某一部分,它是一种让我们能够与HTML交互的机制,DOM不属于某种特定的语言使用DOM:JS是怎么使用DOM这个接口操作页面的元素在JS中我们可以使用全局变量docum...原创 2020-03-09 09:19:11 · 425 阅读 · 0 评论 -
2-4. JS错误处理、计时、jQuery学习导入
try{ /*把可能错误的代码放在这里,如果代码全部执行正确,那么后面的catch子语句会被忽略 *如果这里的代码出错,那么会立即终止执行,然后去执行catch后面的语句块 *这里错误指的是逻辑错(变量错误)误不能是语法错误(格式写错) */ var a="ROBIN"; alert(a1);}catch(e){ alert(e.message); /* 给try提供报...原创 2019-01-24 07:06:43 · 726 阅读 · 0 评论 -
2-3. JS 类型转换、不同类型变量的区别、流程控制语句
数字转化成字符串toString( )var a=100;alert(typeof a); /* number */var b=a.toString(); /* typeof可以查看变量类型 */alert(typeof b); /* string */alert(typeof a); /* a is sill type of number */toFixed( )v...原创 2019-01-24 03:54:21 · 233 阅读 · 0 评论 -
2-2. JS中对象、常见运算符
var s1='Robinabcdefg';//从字符串中取出一段字符alert(s1.substring(0)); //输出 Robinabcdefgalert(s1.substring(2)); //输出 binabcdefgalert(s1.substring(2,7)); //从第二个字符开始取,取到第7个,但不包括第7个字符前++:代表在参与其他运算(操作)的时候,先进行...原创 2019-01-17 18:01:10 · 371 阅读 · 0 评论 -
2-1. JS代码插入、变量、数据类型、对象
JS代码嵌套在HTML文件件里的位置有两种:<!DOCTYPE html><html><head><meta charset="utf-8"/><title>intro to JS</title> <!-- 内嵌JS代码 --><script type="text/javascript"&g...原创 2020-02-09 23:35:25 · 262 阅读 · 0 评论 -
原生APP、WAP 封装的APP、面向API的APP区别与联系
现在是移动互联网时代了,用户使用最多的就是手机app了,移动端的流量太大了。但是,app的开发制作成本却是很多中小站点无法承受的,于是便衍生出了很多做网站打包的公司。找外包公司开发APP或者自己开发APP的劣势:最重要一个问题就是开发周期是个大问题,有的人要1-3个月,有的人要1周,时间长的承受不了,时间短的又觉得是套的模板,不放心。 其实制作一款APP除了前期的开发制作费用只...转载 2019-04-01 00:13:39 · 1383 阅读 · 0 评论 -
WEB前端框架jQuery、VueJS、React.JS、Node.JS、Bootstrap解读
Web前端框架可以分为两类:JS的类库框架JQuery.JSAngular.JS(模型, scope作用域,controller,依赖注入,MVVM):前端MVCVue.JS(MVVM)React.JS(创建自定义标签,根据id注入标签)Node.JS(服务器端)UI框架(Html/Css/JS组合)Bootstrap(简洁、直观、强悍的前端框架,让web开发更迅...转载 2019-01-12 14:51:00 · 4055 阅读 · 0 评论 -
原生JS实现图片轮番功能
首先获取元素ID赋值给变量,然后对变量添加点击事件非数组版:<script> /*图片轮番*/ window.onload=function(){ var pre=document.getElementById("pre"); var next=document.getElementById("next"); var pic=do...原创 2018-11-20 15:05:53 · 507 阅读 · 0 评论 -
1-19. Bootstrap 分页、翻页样式总结
分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页默认的分页<ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a>&...转载 2019-02-12 13:40:46 · 12119 阅读 · 0 评论 -
1-18. Bootstrap 表单(各种输入框、控件汇总)
Bootstrap 支持最常见的表单控件,主要是 input、textarea、checkbox、radio 和 select输入框(input)最常见的表单文本字段是输入框 inputBootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:text、password、datetime、datetime-local、date、month、time、w...原创 2019-01-15 20:02:22 · 7047 阅读 · 0 评论 -
1-17. Bootstrap 表单样式汇总
网站数据交互一般都是通过表单实现Bootstrap中表单布局类型有哪些?垂直表单 内联表单 水平表单向父 <form> 元素添加 role="form"把标签和控件放在一个带有 class .form-group 的 <div> 中。这是获取最佳间距所必需的。向所有的文本元素 <input>、<textarea> 和 &l...原创 2019-01-13 16:21:09 · 2957 阅读 · 1 评论 -
1-16. Bootstrap中表格问题详解
Bootstrap表格表格类<tr>, <th> 和 <td> 类<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link href="Boo...原创 2019-01-13 14:48:17 · 240 阅读 · 0 评论 -
1-15. Bootstrap中代码如何表示问题
Bootstrap代码显示有两种方式:<code> </code> :内联标签(不换行) <pre></pre> :独立的块元素、或者代码有多行(换行)注意:这两个标签的开始和结束都要加上 <和 ><p><code><header></code...原创 2019-01-13 13:40:31 · 174 阅读 · 0 评论 -
1-14. Bootstrap 排版 总结
100%全屏布局方法<divclass="container-fiuled">....</div>特殊标签<h2>我是标题1 h1. <small>我是副标题1 h1</small></h2><strong>(设置文本为更粗的文本)<em>(设置文本为斜体)强调...原创 2019-01-13 12:47:10 · 184 阅读 · 0 评论 -
1-13. Bootstrap中CSS部分解读
Bootstrap 3 的设计目标是移动设备优先,然后才是桌面设备。Bootstrap 确保移动端适当的绘制和触屏缩放,需要在网页的 head 之中添加 viewport meta 标签。<meta name="viewport" content="width=device-width, initial-scale=1.0">width 属性控制设备的宽度。假设您的网...转载 2019-01-13 11:18:37 · 374 阅读 · 0 评论 -
1-12. Bootstrap 网格系统详解
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列优先设计更小的宽度。 基础的 CSS 是移动设备优先,媒体查询是针对于平板电脑、台式电脑。(移动设备优先)<div class="container"> <div class="row"> <div...原创 2019-01-12 21:52:31 · 237 阅读 · 0 评论 -
1-11. Bootstrap网格布局详解
Bootstrap中class类的使用:container:获得适当的对齐和内边距 row:声明行列 col-xs-:声明移动端 col-sm-:平板电脑设备 col-md-:普通pc端设备 col-lg- :大型台式设备例如,col-xs-6:表示一行2列,col-md-4:表示一行三列,bootstrap中一行最多分为12列<!DOCTYPE html>&l...转载 2019-01-12 20:54:59 · 690 阅读 · 0 评论 -
1-10. Bootstrap Glyphicon字体、图标(组件)
获取字体图标(Bootstrap 3.0版):https://v3.bootcss.com/getting-started/下载后fonts文件夹各个文件的格式不一样但内容是一样的,用于兼容各个浏览器定义字体图标:<h3 style="color: palevioletred;" ><span class="glyphicon glyphicon-...转载 2019-01-21 17:13:25 · 5089 阅读 · 2 评论 -
1-9. Bootstrap 按钮总结
前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自己重新定义class类即可,主要样式要随具体情况而定包括位置任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式。<button type="button" class="btn">基本按钮</button>...原创 2019-01-15 21:31:03 · 2864 阅读 · 6 评论 -
1-7. Bootstrap 导航元素分析
表格导航或标签以一个带有 class .nav 的无序列表开始。 添加 class .nav-tabs<p>标签式的导航菜单</p><ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li>&...原创 2019-02-12 12:36:23 · 187 阅读 · 0 评论 -
1-6. Bootstrap 输入框样式汇总
向 .form-control 添加前缀或后缀元素把前缀或后缀元素放在一个带有 class .input-group 的 <div> 中 接着,在相同的 <div> 内,在 class 为 .input-group-addon 的 <span> 内放置额外的内容 把该 <span> 放置在 <input> 元素的前面或者后面...原创 2019-02-11 15:05:41 · 20431 阅读 · 0 评论 -
1-5. 很实用的 Bootstrap 按钮式下拉菜单
按钮式下拉菜单如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单分割的按钮下拉菜单<div class="btn-group"> <button type="button" class="btn ...原创 2019-02-11 14:41:53 · 4430 阅读 · 0 评论 -
1-4. Bootstrap 按钮组总结
常用的class:.btn-group 用于形成基本的按钮组 .btn-toolbar 是按钮工具栏,把几组 <div class="btn-group"> 结合到一个 <div class="btn-toolbar"> 中,一般获得更复杂的组件 .btn-group-lg, .btn-group-sm, .btn-group-xs 可调整个按钮组的大...原创 2019-02-11 14:15:53 · 858 阅读 · 1 评论 -
1-3. Bootstrap 辅助类补充、以及 媒体查询(Media Queries)
插入符表示下拉功能和方向,使用带有 class caret 的 <span> 元素得到该功能。<p>关于我们<span class="caret"></span> </p>快速浮动可以分别使用 class pull-left 或 pull-right 来把元素向左或向右浮动。<div class="pull...原创 2019-01-16 14:16:27 · 249 阅读 · 0 评论 -
1-2. Bootstrap 下拉菜单总结(组件)
<div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> 网络游戏 <span class="caret"></span> </button>...原创 2019-02-11 11:55:43 · 829 阅读 · 0 评论 -
1-1. 引入Bootstrap文件、图片样式处理、图片响应式
Bootstrap 提供三个简单的图片样式:.img-rounded:效果如同添加border-radius:6px 来获得图片圆角。 .img-circle:效果如同添加 border-radius:50% 来让整个图片变成圆形。 .img-thumbnail:效果如同添加一些内边距(padding)和一个灰色的边框<img src="images/bootstrap.png...转载 2019-01-15 22:07:26 · 904 阅读 · 0 评论