A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小石姐姐 于 2018-1-24 15:05 编辑

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

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马