本帖最后由 小石姐姐 于 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
|