Web阶段总结第二波

Day04

什么是JQuery?

JQ是一个JS的基本框架,也就是承装了JS的基本类库

JQ的入口函数:

$(function(){

})

##JS方式和JQ方式加载事件的区别:

传统的JS方式页面加载时间只能执行一次,但JQ方式相当于页面加载并且可以执行多次,这样的效率比window.onload要高得多,传统的加载方式是等页面加载完成才执行方法,$(function(){})是要等待页面的DOM数绘制完成后就会执行,传统JS方式会覆盖事件

JS和JQ的区别总结

JQ的入口函数比JS入口函数效率高,并且可以多次执行

注意事项:

JS只能使用JS

JQ只能使用JQ

相互转化:

JQ到JS----通过数据角标获取

JS到JQ----通过$()这个将JS括号起来就可以实现

JQ显示和隐藏:

show();

使用1:JQ对象.show();

使用2:JQ对象.show("slow")-----------slow,normal,fast

使用3:JQ对象.show(毫秒值);-----------1000

使用4:JQ对象.show(毫秒值,funtion(){});

方法名:

show(),----------------显示

hide(),-----------------隐藏

slideDown(),---------向下滑动

slideUp(),-------------向上滑动

fadeIn(),--------------淡入

fadeOut(),------------淡出

animate(),------------自动以动画

toggle(),--------------单击切换函数--方法已过时

Jq对象.toggle(fn1,fn2...);单击第一下的时候执行fn1,单击第二下执行fn2...

$("div").html("要输入到div的内容"),我们可以在Div里不添加内容,在JQ里用.html()的方法添加标签中想要添加的内容,当html中传入空参就可以获取body体中的内容,当body体中没有内容,.html传入有参可以设置内容

选择器:

基本选择器

id选择器:$("#id")

类选择器:$(".类名")

元素选择器:$("元素名称")

层级选择器

后代选择器:使用空格 所有后代包含子孙及以下的元素 $("body div")

子元素选择器:使用> 第一层的元素(儿子) $("body > div")

基本过滤选择器

:even 用法:$("div:even")偶数选择器

:odd 用法:$("div:odd")奇数选择器

:eq(数字索引) 用法:$("#three div:eq(1)")

JQ的DOM操作

append();-----------------在某个元素后添加内容

appendTo();--------------在某个元素添加到另一个元素后

remove();------------------将某个元素移除

JQ的遍历

1.$.each(objects,function(i,n){   

});

2.$("").each(function(i,n){

});

JQuery对属性的操作方法

val():传入值表示赋值

不传入值表示获取值

append();在某个元素后面添加内容

如果添加的元素已经存在就变成移动了

html();传入参数表示覆盖某个内容

不传入值表示获取

appendTo();将某个元素添加到某个元素后面

remove();移除某元素

JQ的查找事件

    * find()

        * $("p").find("span")

        * 搜索所有与指定表达式匹配的元素

        * 这个函数是找出正在处理的元素的后代元素的好方法

    * parent()

        * `$("p").parent()`获取父元素

    * children()

        * `$("div").children()`获取子元素

Day05

BootStrap是一个前端框架,和JQuery不同的是他是一个真的框架

1. `jquery-1.11.3.min.js`

    * bootstrap依赖JQuery,**务必**在bootstrap.min.js之前引入

2. `bootstrap.min.css`

    * 新bootstrap核心CSS文件

3. `bootstrap-theme.min.css`

    * 可选的bootstrap主题文件,一般不用引入

4. `js/bootstrap.min.js``

    * 最新的bootstrap核心JavaScript文件

5. `<meta name="viewport" content="width=device-width, initial-scale=1.0" />`

    * 关闭可缩放

BootStrap的全局函数

.container:固定宽度&居中

.container-fluid类:宽度100%,占据全部视口

· 栅格系统

· 响应式

· 移动设备优先

· 系统会自动分为最多12列

· 定义行:.row

· 定义列:

· .col-lg-n : large,大屏幕 大桌面显示器 (≥1200px)

· .col-md-n : middle,中等屏幕 桌面显示器 (≥992px)

· .col-sm-n : small,小屏幕 平板 (≥768px)

· .col-xs-n : extreme small,超小屏幕 手机 (<768px)

· 轮播图,导航,栅格布局的使用

· 看API

Web阶段总结第二波

Day04

什么是JQuery?

JQ是一个JS的基本框架,也就是承装了JS的基本类库

JQ的入口函数:

$(function(){

})

##JS方式和JQ方式加载事件的区别:

传统的JS方式页面加载时间只能执行一次,但JQ方式相当于页面加载并且可以执行多次,这样的效率比window.onload要高得多,传统的加载方式是等页面加载完成才执行方法,$(function(){})是要等待页面的DOM数绘制完成后就会执行,传统JS方式会覆盖事件

JS和JQ的区别总结

JQ的入口函数比JS入口函数效率高,并且可以多次执行

注意事项:

JS只能使用JS

JQ只能使用JQ

相互转化:

JQ到JS----通过数据角标获取

JS到JQ----通过$()这个将JS括号起来就可以实现

JQ显示和隐藏:

show();

使用1:JQ对象.show();

使用2:JQ对象.show("slow")-----------slow,normal,fast

使用3:JQ对象.show(毫秒值);-----------1000

使用4:JQ对象.show(毫秒值,funtion(){});

方法名:

show(),----------------显示

hide(),-----------------隐藏

slideDown(),---------向下滑动

slideUp(),-------------向上滑动

fadeIn(),--------------淡入

fadeOut(),------------淡出

animate(),------------自动以动画

toggle(),--------------单击切换函数--方法已过时

Jq对象.toggle(fn1,fn2...);单击第一下的时候执行fn1,单击第二下执行fn2...

$("div").html("要输入到div的内容"),我们可以在Div里不添加内容,在JQ里用.html()的方法添加标签中想要添加的内容,当html中传入空参就可以获取body体中的内容,当body体中没有内容,.html传入有参可以设置内容

选择器:

基本选择器

id选择器:$("#id")

类选择器:$(".类名")

元素选择器:$("元素名称")

层级选择器

后代选择器:使用空格 所有后代包含子孙及以下的元素 $("body div")

子元素选择器:使用> 第一层的元素(儿子) $("body > div")

基本过滤选择器

:even 用法:$("div:even")偶数选择器

:odd 用法:$("div:odd")奇数选择器

:eq(数字索引) 用法:$("#three div:eq(1)")

JQ的DOM操作

append();-----------------在某个元素后添加内容

appendTo();--------------在某个元素添加到另一个元素后

remove();------------------将某个元素移除

JQ的遍历

1.$.each(objects,function(i,n){   

});

2.$("").each(function(i,n){

});

JQuery对属性的操作方法

val():传入值表示赋值

不传入值表示获取值

append();在某个元素后面添加内容

如果添加的元素已经存在就变成移动了

html();传入参数表示覆盖某个内容

不传入值表示获取

appendTo();将某个元素添加到某个元素后面

remove();移除某元素

JQ的查找事件

    * find()

        * $("p").find("span")

        * 搜索所有与指定表达式匹配的元素

        * 这个函数是找出正在处理的元素的后代元素的好方法

    * parent()

        * `$("p").parent()`获取父元素

    * children()

        * `$("div").children()`获取子元素

Day05

BootStrap是一个前端框架,和JQuery不同的是他是一个真的框架

1. `jquery-1.11.3.min.js`

    * bootstrap依赖JQuery,**务必**在bootstrap.min.js之前引入

2. `bootstrap.min.css`

    * 新bootstrap核心CSS文件

3. `bootstrap-theme.min.css`

    * 可选的bootstrap主题文件,一般不用引入

4. `js/bootstrap.min.js``

    * 最新的bootstrap核心JavaScript文件

5. `<meta name="viewport" content="width=device-width, initial-scale=1.0" />`

    * 关闭可缩放

BootStrap的全局函数

.container:固定宽度&居中

.container-fluid类:宽度100%,占据全部视口

· 栅格系统

· 响应式

· 移动设备优先

· 系统会自动分为最多12列

· 定义行:.row

· 定义列:

· .col-lg-n : large,大屏幕 大桌面显示器 (≥1200px)

· .col-md-n : middle,中等屏幕 桌面显示器 (≥992px)

· .col-sm-n : small,小屏幕 平板 (≥768px)

· .col-xs-n : extreme small,超小屏幕 手机 (<768px)

· 轮播图,导航,栅格布局的使用

· 看API