1、bootstrap里面的文件是什么意思：

bootstrap.css
bootstrap.min.css
bootstrap-responsive.css
bootstrap-responsive.min.css
bootstrap.js
bootstrap.min.js

2、页面使用的时候先引入bootstrap的css，再引入jquery再引入bootstrap的js，注意顺序。

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

3、jquery与bootstrap关系。

4、jquery能做的操作

5、特别是能操作dom和ajax（下面是两者相关概念）

　　BOM 浏览器对象模型

提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作，譬如可以弹出新的窗口，改变状态栏中的文本，对Cookie的支持，IE还扩展了BOM，加入了ActiveXObject类，可以通过js脚本实例化ActiveX对象等等）

　　DOM 文档对象模型

DOM是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。DOM本身是与语言无关的API，它并不与Java，JavaScript或其他语言绑定。

　　ajax

意思就是用JavaScript执行异步网络请求，具体看我的博客。https://mp.csdn.net/postedit/79653414

7、utilities：工具函数

　　（1）$.each(object,function(name,value){})，用于遍历对象和数组。

1

<b>$.each( [0,1,2], function(i, n){

2

alert( "Item #" + i + ": " + n );

3

});

4

$.each( { name: "John", lang: "JS" }, function(i, n){

5

alert( "Name: " + i + ", Value: " + n );

6

});</b>

　　（2）$.grep(array, callback, [invert] )，使用过滤函数过滤数组元素。如果 "invert" 为 false 或为设置，则函数返回数组中由过滤函数返回 true 的元素，当"invert" 为 true，则返回过滤函数中返回 false 的元素集。

1

<b>$.grep( [0,1,2], function(n,i){

2

return n > 0;

3

});

4

//return [1,2]

5

$.grep( [0,1,2], function(n,i){

6

return n > 0;

7

}, true);

8

//return [0]</b>

　　（3）$.map(array, callback) 将一个数组中的元素转换到另一个数组中。

1

<b>$.map( [0,1,2], function(n){

2

return n + 4;

3

});

4

//return [4,5,6]</b>

　　（4）$.merge(first, second)合并两个数组

1

<b>$.merge( [0,1,2], [2,3,4] )

2

//return [0,1,2,2,3,4]</b>

　　（5）$.unique(array) 删除数组中重复元素

1

<b>$.unique([0,1,2,2]);

2

//return [2,1,0]</b>

　　（6）$.trim(str) 去掉字符串起始和结尾的空格

　　（7）$.makeArray(obj)将类数组对象转换为数组对象

　　（8）$.inArray(value,array)确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )

8、插件

Eg：校验插件

 

9、使用jquery

（1）<head> <script src="jquery-1.10.2.min.js"></script> </head>

（2）

10、语法：通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

　　

　　　　　　　　　　　　 : 和 [] 这两个符号的理解

　　　　　　　　　　　　：可以理解为种类的意思，如：p:first，p 的种类为第一个。

　　　　　　　　　　　　[] 很自然的可以理解为属性的意思，如：[href] 选取带有 href 属性的元素

 11、补充：选择器都是可以用的

　　

（1 后代选择器(A B) ;2 孩子选择器(A>B) ;3相邻兄弟选择器(A+B); 一般兄弟选择器(A~B).）

1 后代选择器(A B)

后代选择器，用来选择A元素的所有孩子，孙子，及它的所有后代中的B元素。

$(".person1 div").css("border", "2px solid red")

2 孩子选择器 (A>B)

孩子选择器用来选择A元素标签的所有孩子标签中的B标签。

$(".person1 > div").css("border", "2px solid red");

3 相邻兄弟选择器。

相邻兄弟选择器用来选择A的相邻元素标签中的B标签。

$(".person1 + p").css("border", "2px solid red");

4 一般性的兄弟选择器(A ~B)

一般性兄弟选择器用来选择A的兄弟元素标签中的所有B标签。

5、甚至：

nth-child() 的用法

直接匹配元素 如 nth-child(number)

jquery :even选择器

选择每个相隔的（偶数）元素

:even 选择器选取每个带有偶数 index 值的元素（比如 2、4、6）。

index 值从 0 开始，所有第一个元素是偶数 (0)。

最常见的用法：与其他元素/选择器一起使用，来选择指定的组中偶数序号的元素

jquery :odd选择器

选择每个相隔的（奇数）元素

:odd选择器选取每个带有奇数 index 值的元素（比如 1、3、5）。

 12、就绪事件

　　

13、事件

常见 DOM 事件：

鼠标事件

键盘事件

表单事件

文档/窗口事件

click

keypress

submit

load

dblclick

keydown

change

resize

mouseenter

keyup

focus

scroll

mouseleave

blur

unload

Keydown：

　　

一.keypress,keydown,keyup的区别:

  • 1.keydown：在键盘上按下某键时发生,一直按着则会不断触发（opera浏览器除外）, 它返回的是键盘代码;
  • 2.keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
  • 3.keyup：用户松开某一个按键时触发, 与keydown相对, 返回键盘代码.

二.两种常用用法举例

案例1:获取按键代码或字符的ASCII码

$(window).keydown( function(event){

// 通过event.whitch可以拿到按键代码.  如果是keypress事件中,则拿到ASCII码.} );

案例2:传递数据给事件处理函数

语法:

jQueryObject.keydown( [[ data ,]  handler ] );

  • data: 通过event.data传递给事件处理函数的任意数据;
  • handler: 指定的事件处理函数;

举例:

// 只允许按下的字母键生效, 65~90是所有小写字母的键盘代码范围.var validKeys = { start: 65, end: 90  };

$("#keys").keydown( validKeys, function(event){

var keys = event.data;  //拿到validKeys对象.

return event.which >= keys.start && event.which <= keys.end;} );

dbclick：双击；

Mouse：

Change：

Focus：

blur：失去焦点；

Load：

Resize：

Scroll：

Unload：离开页面，跳转链接；

Hover：光标悬停；

14、下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

$("p").click(function(){ // 动作触发后执行的代码!! });

15、隐藏显示：

语法：$(selector).toggle(speed,callback);

Tip：显示：display：none

Callback：回调函数

callback函数在当前动画100%完成之后执行

复制代码代码如下:

$("p").hide(1000);
alert("the paragraph is now hidden");
<!--未使用回调函数,段落未完全隐藏时就弹出信息-->
$("p").hide(1000,function(){alert("the paragraph is now hidden")});
<!--使用回调函数，当段落完全隐藏时，弹出信息-->

关于callback的一些tip：

1.$(selector)选中的元素的个数为n个，则callback函数会执行n次；

2.callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行；

3.callback既可以是函数名，也可以是匿名函数；

16：淡隐淡出

jQuery fadeIn() 用于淡入已隐藏的元素。

语法:

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeIn() 方法：

实例

$("button").click(function(){

$("#div1").fadeIn();

$("#div2").fadeIn("slow");

$("#div3").fadeIn(3000);

});

Opacity：

　　

16、滑动：

17、动画：

语法：$(selector).animate({params},speed,callback)；

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

思考：

可以用 animate() 方法来操作所有 CSS 属性吗？

是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同时，色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画，您需要从 jquery.com 下载 颜色动画 插件。

Queue队列

队列是一种特殊的线性表，只允许在表的前端（队头）进行删除操作（出队），在表的后端（队尾）进行出入操作（入队），队列的特点是先进先出，最先插入的元素最先被删除。

对于 jQuery 的动画的设计我们要分 2 个层面理解：

  1. 每一个动画效果可以看作一个独立的动画对象，每个对象都实现了针对自己这个动画的生命周期的控制
  2. 动画对象与动画对象之间其实是没有直接关系，但是为了做到连续调用就需要引入一套队列机制也就是 Queue 来控制对象之间的转换的控制

动画的源码：

animate: function(prop, speed, easing, callback) {

doAnimation = function() {

var anim = Animation(this, args, optall);

};

this.queue(optall.queue, doAnimation);}

这个代码缩减了，但是我们上面提到的最重要的 2 点这里都涉及到了：通过 queue 调度动画的之间的衔接，Animation 方法执行单个动画的封装。

jQuery 在 queue 的调度上涉及了一个关键的处理：同步与异步代码同时执行，同步收集动画序列，异步调用序列，看看整个调用的流程是这样的：

  1. 通过多个 animate 方法形成动画链，那么这个动画链其实都是会加入到 queue 队列里面
  2. 在每一次 queue 方法中会把动画数据写到队列中，然后取出队列中的第一个序列通过 dequeue 方法执行
  3. 开始执行之前写一个进程锁“inprogress”到 queue 里面，代表这个动画还在执行中，防止同个序列的多个动画重复执行，这个就是异步执行同步收集的处理方案
  4. 此时动画开始了，这里注意动画是在异步执行的同步的代码，继续调用下一个 animate
  5. 执行同样的 animate 方法逻辑但是此时问题来了，动画可能还在执行可是后续的 animate 还在继续调用，所以这个时候后面的动画代码就需要等待了（进程锁）
  6. 队列头是有一把“inprogress”进程锁的，那么这时候动画只需要加入队列，但是可以通过 inprogress 是否存在来判断是否执行
  7. 所有的 animate 方法在加入队列都是按照以上的逻辑依次执行，动画执行完毕了就会有一个结束通知，然后从 queue 取出第一个队列继续执行了，如此循环

以上是整个动画的调度一个流程，其实都是利用队列异步的空闲然后执行同步的代码，这样在处理上是没有浪费资源的，而且精确度也是最高的。

停止动画：

　　

callback

链：

jquery前端第一讲的更多相关文章

  1. jquery实战第一讲---概述及其入门实例

    就在5月28号周四下午五点的时候,接到xxx姐姐的电话,您是xxx吗?准备一下,周五上午八点半去远洋面试,一路风尘仆仆,颠颠簸簸,由于小编晕车,带着晕晕乎乎的脑子,小编就稀里糊涂的去面试了,温馨提醒, ...

  2. Jquery前端分页插件pagination同步加载和异步加载

    上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...

  3. CS193P - 2016年秋 第一讲 课程简介

    Stanford 的 CS193P 课程可能是最好的 ios 入门开发视频了.iOS 更新很快,这个课程的最新内容也通常是一年以内发布的. 最新的课程发布于2016年春季.目前可以通过 iTunes ...

  4. POI教程之第一讲：创建新工作簿， Sheet 页，创建单元格

    第一讲 Poi 简介 Apache POI 是Apache 软件基金会的开放源码函数库,Poi提供API给java程序对Microsoft Office格式档案读和写的功能. 1.创建新工作簿,并给工 ...

  5. 《ArcGIS Engine+C#实例开发教程》第一讲桌面GIS应用程序框架的建立

    原文:<ArcGIS Engine+C#实例开发教程>第一讲桌面GIS应用程序框架的建立 摘要:本讲主要是使用MapControl.PageLayoutControl.ToolbarCon ...

  6. 32位汇编第一讲x86和8086的区别,以及OllyDbg调试器的使用

    32位汇编第一讲x86和8086的区别,以及OllyDbg调试器的使用 一丶32位(x86也称为80386)与8086(16位)汇编的区别 1.寄存器的改变 AX 变为 EAX  可以这样想,16位通 ...

  7. 异常处理第一讲(SEH),筛选器异常,以及__asm的扩展,寄存器注入简介

    异常处理第一讲(SSH),筛选器异常,以及__asm的扩展 博客园IBinary原创  博客连接:http://www.cnblogs.com/iBinary/ 转载请注明出处,谢谢 一丶__Asm的 ...

  8. 常见注入手法第一讲EIP寄存器注入

    常见注入手法第一讲EIP寄存器注入 博客园IBinary原创  博客连接:http://www.cnblogs.com/iBinary/ 转载请注明出处,谢谢 鉴于注入手法太多,所以这里自己整理一下, ...

  9. 逆向实用干货分享,Hook技术第一讲,之Hook Windows API

    逆向实用干货分享,Hook技术第一讲,之Hook Windows API 作者:IBinary出处:http://www.cnblogs.com/iBinary/版权所有,欢迎保留原文链接进行转载:) ...

随机推荐

  1. 在centos环境下编译安装myrocksdb

    rocksdb(https://rocksdb.org.cn/)是脸书(facebook)公司开源的一个key-value存储引擎,基于leveldb开发.rocksdb使用的是LSM存储引擎,纯c+ ...

  2. 记一次Apache Carbondata PR的经历

     前言 前段时间有幸接触到Apache Carbondata,试用过程中发现了一个小小的问题,并且又很快的定位到了问题.然后在社区群里反映了下,负责人问愿不愿意提个JIRA,PR,然后我在没有任何开源 ...

  3. 【转】SQL中的锁、脏读、不可重复的读及虚读

    原文:http://blog.csdn.net/wjeson/article/details/9382067 锁的概述 一. 为什么要引入锁 多个用户同时对数据库的并发操作时会带来以下数据不一致的问题 ...

  4. PyQt5 简易计算器

    剩下计算函数(self.calculator)未实现,有兴趣的朋友可以实现它 [知识点] 1.利用循环添加按钮部件,及给每个按钮设置信号/槽 2.给按钮设置固定大小:button.setFixedSi ...

  5. opencv-Drawing Functions in OpenCV

    1.opencv简单画图形 # coding = utf-8 # 画线.长方形.圆等 import numpy as np import cv2 # 返回一个数组 img = np.zeros((51 ...

  6. Mac下 通过 VMware Fusion 配置 windows 虚拟机的详细步骤

    内容中包含 base64string 图片造成字符过多,拒绝显示

  7. 菜鸟vimer成长记——第4.1章、通用插件

    简介 关于插件的分类,此系列只会简单的区分为通用插件和编程插件.通用插件的意思是,不基于任何编程语言都可以使用的插件.编程插件,是针对于编程习惯,或者说是针对于某种语言的插件. 计划中,是先把基本常用 ...

  8. SQL 上线平台（内含全部完整资料）

    为了让 DBA 从日常繁琐的工作中解放出来,通过 SQL 自助平台,可以让开发自上线,开发提交 SQL 后就会自动执行并返回执行结果,无需 DBA 的再次审核,从而提升上线效率,有利于建立数据库开发规 ...

  9. 浅谈MVC Razor基本语法

    首先说下MVC,mvc已经不用ViewState来保留网页的状态,所以大部分依赖ViewState的功能都将无法使用, 比如gridview的分页与排序,page trace等利用viewstate记 ...

  10. Python学习过程笔记整理（三）

    函数 -函数使用 -函数需要先定义,定义不会执行函数 -使用函数,俗称调用 -定义函数 -格式:def 函数名称(参数=默认值):,函数名称不能用大驼峰,参数可以没有 -调用函数 -格式:函数名(参数 ...