1. jquery对象[index]
【JQ显示和隐藏】
? JQ的效果操作:
* show();
? $(#adDiv).show();
? * 使用一:Jq对象.show();
? * 使用二:Jq对象.show(“slow”); // slow,normal,fast
? * 使用三:Jq对象.show(毫秒值); // 1000
? * 使用四:Jq对象.show(毫秒值,function(){});
* hide();
$(#adDiv).hade();
? * 使用一:Jq对象.hide();
? * 使用二:Jq对象.hide(“slow”); // slow,normal,fast
? * 使用三:Jq对象.hide(毫秒值); // 1000
? * 使用四:Jq对象.hide(毫秒值,function(){});
* slideDown(); --向下滑动
$("#adDiv").slideDown(2000);
? * 使用一:Jq对象.slideDown();
? * 使用二:Jq对象.slideDown(“slow”); // slow,normal,fast
? * 使用三:Jq对象.slideDown(毫秒值); // 1000
? * 使用四:Jq对象.slideDown(毫秒值,function(){});
* slideUp(); --向上滑动
? * 使用一:Jq对象.slideUp();
? * 使用二:Jq对象.slideUp(“slow”); // slow,normal,fast
? * 使用三:Jq对象.slideUp(毫秒值); // 1000
? * 使用四:Jq对象.slideUp(毫秒值,function(){});
* fadeIn(); --淡入
$("#adDiv").fadeIn(3000);
? * 使用一:Jq对象.fadeIn();
? * 使用二:Jq对象.fadeIn(“slow”); // slow,normal,fast
? * 使用三:Jq对象.fadeIn(毫秒值); // 1000
? * 使用四:Jq对象.fadeIn(毫秒值,function(){});
* fadeOut(); --淡出
? * 使用一:Jq对象.fadeOut();
? * 使用二:Jq对象.fadeOut(“slow”); // slow,normal,fast
? * 使用三:Jq对象.fadeOut(毫秒值); // 1000
? * 使用四:Jq对象.fadeOut(毫秒值,function(){});
* animate(); --自定义动画
* toggle(); --单击切换函数
? * Jq对象.toggle(fn1,fn2...);单击第一下的时候执行fn1,单击第二下执行fn2...
基本
#id //id选择器
.class //类选择器
元素 //元素选择器
* //通配符选择器。所有标签
选择器1,选择器2... //组合(并列)选择器,逗号隔开
层级
ancestor descendant //ancestor元素后代所有
parent > child //parent元素的子元素child
prev + next //prev后一个next
prev ~ siblings //prev后所有兄弟元素
后代选择器:$("form input") 使用空格
基本过滤
:first
:last
:even 偶数
:odd 奇数
:eq(index) 等于index
:gt(index) 大于index
:lt(index) 小于index
:not(选择器)
内容
:contains(text) //包含内容的
:empty //为空的
:has(选择器) //包含指定的元素的
:parent //是父亲角色的
可见性
:hidden
:visible
属性
[属性] 含有属性的
[属性="属性值"]
[attribute!=value]
[attribute^=value] 含有attribute属性值以value开头的
[attribute$=value] 含有attribute属性值以value结尾的
[attribute*=value] 含有attribute属性值包含value的
[attrSel1][attrSel2][attrSelN] 并且
子元素
:nth-child(index1开始) 每一个第index子元素的
:first-child 每一个第一个子元素的
:last-child 每一个最后一个子元素的
:only-child 只有一个子元素的
表单
:input 匹配所有表单元素包括select,textarea
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
表单对象属性
:checked 匹配所有选中的单选复选按钮
:selected 匹配所有的列表框下拉菜单选中的
:enabled 可用的
:disabled 不可用的
BootStrap
bootstrap (web前端css框架) 提供了HTML和css规范
BootStrap可以在那些地方使用:
BootStrap设计出响应式页面,由它设计页面可以在手机,PAD,PC都可以直接访问
【BootStrap的全局CSS】布局容器:
.container 类用于固定宽度并支持响应式布局的容器
.container-fluid 类用于100%宽度占据全部视口(viewport)的容器
栅格系统:
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。 使用.row样式定义栅格的行.
定义列:.col-lg-n:大屏幕(>=1200px) .col-md-n:中等屏幕 (>=992px) .col-sm-n:平板 (>=768px) .col-xs-n:手机(<768px)