响应式网页单页设计大杂烩

一、清除浏览器样式

/*Reset CSS*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

二、box-sizing 规定多个并排的带边框的框

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}
/*
a、content-box 默认的盒子尺寸计算方式。
b、border-box 置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内
c、inherit   规定应从父元素继承 box-sizing 属性的值。
*/

三、CSS 浏览器兼容

-moz-      /*  Firefox */
-webkit-   /* Safari */

四、响应式布局

1、head部分viewport元标签

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

2、使用CSS3媒体查询@media 查询

@media 类型 and (条件1) and (条件二)
{
 css样式
}
例：
@media screen and (max-width:980px ) {
 body{
 background-color: red;
 }
}

3、其他的一些注意点

3.1.不使用绝对宽度，不能指定像素宽度：width:xxx px;只能指定百分比宽度：width: xx%;或者width:auto;
3.2.使用相对大小的字体rem而不是px，父级元素未指定字体尺寸，则em相对的是浏览器默认的字体尺寸（16px）。
3.3.使用流式布局（fluid grid）

.main {float: right;width: 70%;}
.leftBar {float: left;width: 25%;}

3.4.清除浮动的四种方法

1.父级添加overflow: hidden；
    子元素浮动了，会造成父元素的高度坍塌。只要给父元素添加overflow: hidden;属性，就可以解决浮动带来的影响。
2.通过属性clear:both;达到清除浮动的目的；
3.通过给父级元素添加伪类after，达到清除浮动的目的(使得页面结构更简洁)；
4.使用双伪类；(和3原理一样，代码更简洁)。
    .cc:after,
    .cc:before {
        content: "";
        display: block;
        clear: both;
    }

3.5.图片的自适应（fluid image）

img { max-width: 100%;}

五、弹性盒模型布局 display:flex

Flex实例：https://www.ruanyifeng.com/blog/2015/07/flex-examples.html

六、CSS选择器（备忘）

选择器	例子	例子描述
*	*	选择所有元素。
element,element	div, pdiv, p	选择所有 元素和所有 元素。选择所有 元素和所有 元素。
element>element	div > p	选择父元素是 的所有 元素。
element+element	div + p	选择紧跟 元素的首个 元素。
element1~element2	p ~ ul	选择前面有 元素的每个 元素。
[attribute]	[target]	选择带有 target 属性的所有元素。
[attribute=value]	[target=_blank]	选择带有 target="_blank" 属性的所有元素。
:active	a:active	选择活动链接。
:checked	input:checked	选择每个被选中的 元素。
:disabled	input:disabled	选择每个被禁用的 元素。
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 元素。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 元素。
::first-line	p::first-line	选择每个 元素的首行。
:focus	input:focus	选择获得焦点的 input 元素。
:not(selector)	:not(p)	选择非 元素的每个元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 元素。
:nth-last-child(n)	p:nth-last-child(2)	同上，从最后一个子元素开始计数。
:only-child	p:only-child	选择属于其父元素的唯一子元素的每个 元素。
::placeholder	input::placeholder	选择已规定 "placeholder" 属性的 input 元素。
::selection	::selection	选择用户已选取的元素部分。
:target	#news:target	选择当前活动的 #news 元素。

七、CSS函数（备忘）

1. calc() ：计算元素的宽度/高度 width: calc(100% - 100px);

2. cubic-bezier() ：定义三次贝塞尔曲线（Cubic Bezier curve）。

   /*从开始到结束变速的过渡效果：*/
   div {
   width: 100px;
   height: 100px;
   background: red;
   transition: width 2s;
   transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
   }

3. linear-gradient() ：将线性渐变设置为背景图像。定义至少两种颜色（从上到下）。

   #grad {
    background-image: linear-gradient(red, yellow, blue);
   }

4. radial-gradient() ：将径向渐变设置为背景图像。定义至少两种颜色（从中心到边缘）。

5. rgba()：定义不同的带不透明度 RGB 颜色（RGBA）

八、CSS使用自定义字体

@font-face{
  font-family: test;
  src:url('./方正胖头鱼简体.ttf');
}
p{
  font-family: test;
}

九、实现html 页面内锚点定位及平滑滚动

1、使用animate属性，当点击锚点后，页面滚动到相应的DIV

$(document).ready(function() {
    $("#div1Link").click(function() {
        $("html, body").animate({
            scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
            return false;
    });
    $("#div2Link").click(function() {
        $("html, body").animate({
        scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
        return false;
    });
    $("#div3Link").click(function() {
        $("html, body").animate({
        scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
        return false;
    });
});

注意：

• 运行上面的脚本的之前，先将为锚点增加相应的id，同时去掉href属性。

• $("html, body")可以替换为响应的div，如果不起作用，试着给该div增加overflow：scroll属性。

• 另外，脚本可以进一步优化。

• 这样做的好处是：URL地址不会变，同时点击锚点时会自动响应scroll事件，不需要重新绑定。

• 缺点是：如果页面复杂的话，偏移值可能会发生变化需要算法辅助。

2、使用js的srollIntoView方法（推荐的）

document.getElementById("divId").scrollIntoView();
比如：
//点击id是#roll1的元素可以滚动到id是#roll1_top的地方
document.querySelector("#roll1").onclick = function(){
        //scrollIntoView(ture)元素上边框与视窗顶部齐平
      document.querySelector("#roll1_top").scrollIntoView(true);
} 
// querySelectorAll 方法接收的参数是一个 CSS 选择符。
//注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果需要返回所有的元素，请使用 querySelectorAll() 方法替代。

3、可以使用以下JQuery代码来获得平滑的滚动效果

function enterSite(){
    $('html, body').stop().animate({
        scrollTop: $('#content').offset().top
    }, 1500);
});

或：

$("html, body").animate({ scrollTop: $([ELEMENT]).position().top }, 1000);

十、CSS雪碧图（精灵图、CSS Sprites）

.twoimage{
    width:84px;
    height: 47px;
    background-image: url(images/cssjlt.png);
    background-position: -425px -250px;
    /* background: url(./images/map-icon.png) no-repeat -60px 0; 合并写法 */
}

十一、CSS动画

1、@keyframes 规则

/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* 动画代码2 */
@keyframes example2 {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

2、所有 CSS 动画属性：

下表列出了 @keyframes 规则和所有 CSS 动画属性：

属性	描述
@keyframes	规定动画模式。
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。
animation-direction	定动画是向前播放、向后播放还是交替播放。
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count	规定动画应播放的次数。
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。

使用简写属性，将动画与 div 元素绑定：

div
{
animation:mymove 5s infinite; /* infinite   规定动画应该无限次播放。n */
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
语法
animation: name duration timing-function delay iteration-count direction;
值   描述
animation-name  规定需要绑定到选择器的 keyframe 名称。
animation-duration  规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function   规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count   规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。

十二、CSS翻转、旋转transform

{
transform:rotate(7deg);
-ms-transform:rotate(7deg);     /* IE 9 */
-moz-transform:rotate(7deg);    /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg);  /* Opera */
}

none    定义不进行转换。
translate(x,y)  定义 2D 转换。
translate3d(x,y,z)  定义 3D 转换。   
translateX(x)   定义转换，只是用 X 轴的值。
translateY(y)   定义转换，只是用 Y 轴的值。
translateZ(z)   定义 3D 转换，只是用 Z 轴的值。 
scale(x,y)  定义 2D 缩放转换。
scale3d(x,y,z)  定义 3D 缩放转换。 
scaleX(x)   通过设置 X 轴的值来定义缩放转换。
scaleY(y)   通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)   通过设置 Z 轴的值来定义 3D 缩放转换。  
rotate(angle)   定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)   定义 3D 旋转。   
rotateX(angle)  定义沿着 X 轴的 3D 旋转。
rotateY(angle)  定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)  定义沿着 Z 轴的 3D 旋转。

十三、CSS其他方法

1、文字选中变颜色

p::selection {
    background:#ccc;
    color:#ff645d;
}
p::-moz-selection {
    background:#ccc;
    color:#ff645d;
}
p::-webkit-selection {
    background:#ccc;
    color:#ff645d;
}

2、搜索框focus效果

 input:focus {
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}

3、box-shadow

box-shadow:2px 2px 3px #aaaaaa inset;
/* box-shadow: offset-x offset-y blur spread color inset; */

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];

4、为元素添加Hover旋转效果

.turn{
  width:100px;
  height: 100px;
  background: aqua;
  margin: 100px auto;
}
.turn:hover{
  animation:turn 1s linear infinite;    
}
/* 
  turn : 定义的动画名称
  1s : 动画时间
  linear : 动画以何种运行轨迹完成一个周期
  infinite :规定动画应该无限次播放
 */
@keyframes turn{
  0%{-webkit-transform:rotate(0deg);}
  25%{-webkit-transform:rotate(90deg);}
  50%{-webkit-transform:rotate(180deg);}
  75%{-webkit-transform:rotate(270deg);}
  100%{-webkit-transform:rotate(360deg);}
}

5、导航栏Hover效果

.nav_box li:hover a:after{
    width: 100%;
}
.nav_box a:after{
    display: inline-block;
    height: 4px;
    width: 0;
    transition: all .3s;
    background: #4fa10b;
    position: absolute;
    bottom:0;
    left: 0;
    z-index: 1;
}

6、需要解读（看不懂）

7、封面Hover翻转过渡效果

1、https://www.jq22.com/jquery-info2044

2、https://blog.csdn.net/echokkk/article/details/78820393

可以通过判断是否存在某种ID值，然后添加id实现。

十三、jQuery回到顶部功能

<script type="text/javascript">
  $(document).ready(function() {
    //首先将#btn隐藏
    $("#btn").hide();
    //当滚动条的位置处于距顶部50像素以下时，跳转链接出现，否则消失
    $(function() {
      $(window).scroll(function() {
        if ($(window).scrollTop() > 50) {
          $("#btn").fadeIn(200);
        } else {
          $("#btn").fadeOut(200);
        }
      });
      //当点击跳转链接后，回到页面顶部位置
      $("#btn").click(function() {
        $('body,html').animate({
          scrollTop: 0
        },
        500);
        return false;
      });
    });
  });
</script>

参考：https://www.cnblogs.com/Emily-m/p/11099181.html

十四、jQuery动画

附零、CSS 基础篇、绝对有你想要

链接：https://www.cnblogs.com/suoning/p/5625582.html

附一、jQuery常用方法备忘

链接：https://www.cnblogs.com/YangJavaer/p/5849079.html

一、选择器

基本筛选器

$('li:first')    //第一个元素
$('li:last')     //最后一个元素

$("tr:even")     //索引为偶数的元素，从 0 开始
$("tr:odd")      //索引为奇数的元素，从 0 开始

$("tr:eq(1)")    //给定索引值的元素
$("tr:gt(0)")    //大于给定索引值的元素
$("tr:lt(2)")    //小于给定索引值的元素

$(":focus")      //当前获取焦点的元素
$(":animated")   //正在执行动画效果的元素

内容选择器

$("div:contains('nick')")    //包含nick文本的元素
$("td:empty")    //不包含子元素或者文本的空元素
$("div:has(p)")  //含有选择器所匹配的元素
$("td:parent")   //含有子元素或者文本的元素

表单选择器

$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域

$("input:checked")    //所有选中的元素
$("select option:selected")    //select中所有选中的option元素

二、筛选器

过滤

$("p").eq(0)       //当前操作中第N个jQuery对象,类似索引
$('li').first()    //第一个元素
$('li').last()     //最后一个元素
$(this).hasClass("test")    //元素是否含有某个特定的类,返回布尔值
$('li').has('ul')  //包含特定后代的元素

查找

$("div").children()      //div中的每个子元素,第一层
$("div").find("span")    //div中的包含的所有span元素,子子孙孙

$("p").next()       　　　//紧邻p元素后的一个同辈元素
$("p").nextAll()         //p元素之后所有的同辈元素
$("#test").nextUntil("#test2")    //id为"#test"元素之后到id为'#test2'之间所有的同辈元素,掐头去尾

$("p").prev()            //紧邻p元素前的一个同辈元素
$("p").prevAll()         //p元素之前所有的同辈元素
$("#test").prevUntil("#test2")    //id为"#test"元素之前到id为'#test2'之间所有的同辈元素,掐头去尾

$("p").parent()          //每个p元素的父元素
$("p").parents()         //每个p元素的所有祖先元素,body,html
$("#test").parentsUntil("#test2")    //id为"#test"元素到id为'#test2'之间所有的父级元素,掐头去尾

$("div").siblings()      //所有的同辈元素,不包括自己

三、属性操作

基本属性操作

$("img").attr("src");    　　　　　　 //返回文档中所有图像的src属性值
$("img").attr("src","test.jpg");    //设置所有图像的src属性
$("img").removeAttr("src");    　　　//将文档中图像的src属性删除

$("input[type='checkbox']").prop("checked", true);    //选中复选框
$("input[type='checkbox']").prop("checked", false);
$("img").removeProp("src");    　　 //删除img的src属性

CSS类

$("p").addClass("selected");    　　//为p元素加上 'selected' 类
$("p").removeClass("selected");    //从p元素中删除 'selected' 类
$("p").toggleClass("selected");    //如果存在就删除,否则就添加

HTML代码/文本/值

$('p').html();    　　　　　　　　　　 //返回p元素的html内容
$("p").html("Hello <b>nick</b>!");  //设置p元素的html内容
$('p').text();    　　　　　　　　　　 //返回p元素的文本内容
$("p").text("nick");    　　　　　　　//设置p元素的文本内容
$("input").val();    　　　　　　　　 //获取文本框中的值
$("input").val("nick");     　　　　 //设置文本框中的内容

四、CSS操作

样式

$("p").css("color");          //访问查看p元素的color属性
$("p").css("color","red");    //设置p元素的color属性为red
$("p").css({ "color": "red", "background": "yellow" });    //设置p元素的color为red，background属性为yellow（设置多个属性要用{}字典形式）

位置

$('p').offset()     //元素在当前视口的相对偏移,Object {top: 122, left: 260}
$('p').offset().top
$('p').offset().left
$("p").position()   //元素相对父元素的偏移,对可见元素有效，Object {top: 117, left: 250}

$(window).scrollTop()    //获取滚轮滑的高度
$(window).scrollLeft()   //获取滚轮滑的宽度
$(window).scrollTop('100')    //设置滚轮滑的高度为100

尺寸

$("p").height();    //获取p元素的高度
$("p").width();     //获取p元素的宽度

$("p:first").innerHeight()    //获取第一个匹配元素内部区域高度(包括补白、不包括边框)
$("p:first").innerWidth()     //获取第一个匹配元素内部区域宽度(包括补白、不包括边框)

$("p:first").outerHeight()    //匹配元素外部高度(默认包括补白和边框)
$("p:first").outerWidth()     //匹配元素外部宽度(默认包括补白和边框)
$("p:first").outerHeight(true)    //为true时包括边距

五、文档处理

内部插入

$("p").append("<b>nick</b>");    //每个p元素内后面追加内容
$("p").appendTo("div");    　　　 //p元素追加到div内后
$("p").prepend("<b>Hello</b>");  //每个p元素内前面追加内容
$("p").prependTo("div");    　   //p元素追加到div内前

外部插入

$("p").after("<b>nick</b>");     //每个p元素同级之后插入内容
$("p").before("<b>nick</b>");    //在每个p元素同级之前插入内容
$("p").insertAfter("#test");     //所有p元素插入到id为test元素的后面
$("p").insertBefore("#test");    //所有p元素插入到id为test元素的前面

替换

$("p").replaceWith("<b>Paragraph. </b>");    //将所有匹配的元素替换成指定的HTML或DOM元素
$("<b>Paragraph. </b>").replaceAll("p");     //用匹配的元素替换掉所有 selector匹配到的元素

删除

$("p").empty();     //删除匹配的元素集合中所有的子节点，不包括本身
$("p").remove();    //删除所有匹配的元素,包括本身
$("p").detach();    //删除所有匹配的元素(和remove()不同的是:所有绑定的事件、附加的数据会保留下来)

复制

$("p").clone()    　　//克隆元素并选中克隆的副本
$("p").clone(true)   //布尔值指事件处理函数是否会被复制

六、事件

页面载入

当页面载入成功后再运行的函数事件

$(document).ready(function(){
  do something...
});

//简写
$(function($) {
  do something...
});

页面处理

//bind 为每个匹配元素绑定事件处理函数，绑定多个用{}。
$("p").bind("click", function(){
  alert( $(this).text() );
});
$(menuF).bind({
    "mouseover":function () {
     $(menuS).parent().removeClass("hide");
     },"mouseout":function () {
     $(menuS).parent().addClass("hide");
}
});         

$("p").one( "click", fun...)    //one 绑定一个一次性的事件处理函数
$("p").unbind( "click" )        //解绑一个事件

页面委派

// 与bind 不同的是当时间发生时才去临时绑定。
$("p").delegate("click",function(){
  do something...
});

$("p").undelegate();    　　　//p元素删除由 delegate() 方法添加的所有事件
$("p").undelegate("click")   //从p元素删除由 delegate() 方法添加的所有click事件

事件

$("p").click();    　　//单击事件
$("p").dblclick();    //双击事件
$("input[type=text]").focus()  //元素获得焦点时,触发 focus 事件
$("input[type=text]").blur()   //元素失去焦点时,触发 blur事件
$("button").mousedown()//当按下鼠标时触发事件
$("button").mouseup()  //元素上放松鼠标按钮时触发事件
$("p").mousemove()     //当鼠标指针在指定的元素中移动时触发事件
$("p").mouseover()     //当鼠标指针位于元素上方时触发事件
$("p").mouseout()    　//当鼠标指针从元素上移开时触发事件
$(window).keydown()    //当键盘或按钮被按下时触发事件
$(window).keypress()   //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
$("input").keyup()     //当按钮被松开时触发事件
$(window).scroll()     //当用户滚动时触发事件
$(window).resize()     //当调整浏览器窗口的大小时触发事件
$("input[type='text']").change()    //当元素的值发生改变时触发事件
$("input").select()    //当input 元素中的文本被选择时触发事件
$("form").submit()     //当提交表单时触发事件
$(window).unload()     //用户离开页面时

(event object) 对象

所有的事件函数都可以传入event参数方便处理事件

$("p").click(function(event){  
 alert(event.type); //"click"  
}); 

(evnet object)属性方法：
event.pageX 　 //事件发生时，鼠标距离网页左上角的水平距离
event.pageY 　 //事件发生时，鼠标距离网页左上角的垂直距离
event.type 　　//事件的类型
event.which 　 //按下了哪一个键
event.data 　　//在事件对象上绑定数据，然后传入事件处理函数
event.target 　//事件针对的网页元素
event.preventDefault() 　//阻止事件的默认行为(比如点击链接，会自动打开新页面)
event.stopPropagation()  //停止事件向上层元素冒泡

七、效果

基本

$("p").show()    　　　　//显示隐藏的匹配元素
$("p").show("slow");    //参数表示速度,("slow","normal","fast"),也可为900毫秒
$("p").hide()    　　　　//隐藏显示的元素
$("p").toggle();   　　 //切换 显示/隐藏

滑动

$("p").slideDown("900");    //用900毫秒时间将段落滑下
$("p").slideUp("900");    　//用900毫秒时间将段落滑上
$("p").slideToggle("900");  //用900毫秒时间将段落滑上，滑下

淡入淡出

$("p").fadeIn("900");    　　  //用900毫秒时间将段落淡入
$("p").fadeOut("900");    　　 //用900毫秒时间将段落淡出
$("p").fadeToggle("900");    　//用900毫秒时间将段落淡入,淡出
$("p").fadeTo("slow", 0.6);    //用900毫秒时间将段落的透明度调整到0.6

八、对象访问

$.trim() 　　//去除字符串两端的空格
$.each() 　　//遍历一个数组或对象，for循环
$.inArray() //返回一个值在数组中的索引位置，不存在返回-1  
$.grep() 　 //返回数组中符合某种标准的元素
$.extend()  //将多个对象，合并到第一个对象
$.makeArray() //将对象转化为数组
$.type()    //判断对象的类别（函数对象、日期对象、数组对象、正则对象等等
$.isArray() //判断某个参数是否为数组
$.isEmptyObject() //判断某个对象是否为空(不含有任何属性)
$.isFunction()    //判断某个参数是否为函数
$.isPlainObject() //判断某个参数是否为用"{}"或"new Object"建立的对象
$.support()       //判断浏览器是否支持某个特性 

九、插件拓展机制

//方式一
jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});

$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();

//方式二
jQuery.extend({
  min: function(a, b) { return a < b ? a : b; },    //三元运算
  max: function(a, b) { return a > b ? a : b; }
});

jQuery.min(2,3);     //2
jQuery.max(4,5);    //5

附二、JavaScript常用方法备忘

JS:    注意：
        这些都是我自己总结的，只是部分常用的函数属性！！古斌12-21   
    -js常用函数。 
        ** alert(); 普通弹出框
        ** document.write(); 向页面(body标签) 写入内容
        ** console.log();    向控制台输出
        ** typeof();查看当前数据类型
        ** length 返回字符串的长度
        ** bold(); 字体加粗
        ** fontcolor(red); 设置字体的颜色
        ** fontsize(1-7); 设置字体大小
        ** link();  将字符串设置成超链接 (字符串.link(链接地址);
        ** sub()  sup()  将文 0-字设置成上标或下标 比如设置度数
        ** prototype  向对象函数中添加方法 
            例：function Person(){    创建对象函数
                }
                Person.prototype.getal(){ 添加方法
                    alert(123);
                }
                new Person().getal(); 调用函数  结果弹出123

    - 与java相似的函数：
        ** concat()  连接字符串  将 "123" 与 "456" 连接在一起(个人感觉没什么用)
        ** charAt(索引)  返回指定位置的字符串,如果索引有误 返回空字符串
        ** indexOf(字符串); 返回指定位置的字符串索引  如果不存在返回-1
        ** split(以什么切  分); 返回字符串数组
        ** replace(); 传递两个参数,第一个是原始字符  第二个是要替换成的字符
        ** substr() 同样也是2个参数, 从第几个开始,向后截取几个
        ** subString() 两个参数从第几位开始，到底几位结束 不包含做后一个
    - js与数组相关的函数：
        ** length 返回数组长度  这个是属性 不是方法 所以不要加“（）”
        ** concat()  将数组链接，返回一个新的数组
        ** join() 根据指定数组以指定符号分割
        ** push() 向数组末尾添加元素，返回新的数组长度，如果添加的是一个数组，就存取的是整个字符串
        ** pop() 删除数组最后一位元素，并返回这个元素！
        ** reverse() 颠倒数组元素的顺序  随机顺序排列
    -js中Dete对象的函数： 注意严谨区分大小写
        **  new Date(); 获取当前时间  国外定义
        **  new Date().toLocaleString(z);  获取本地时间  正常的格式
        **  new Date().getFullYear();得到当前年
        **  new Date().getMonth() 得到当前月份  ,因为国外是从 0-11 所以得到月份 需要+1
        **  new Date().getDay()   得到当前的当前的星期 周一到周六都正常  如果周日会显示0
        **  new Date().getDate()  得到当前的天(对于这个月来说)  1-31
        **  new Date().getHours() 得到当前的小时
        **  new Date().getMinutes() 得到当前的分钟
        **  new Date().getSeconds()  得到当前的秒
        **  new Date().getTime()  得到当前的毫秒  返回的是1970-1-1    的毫秒数
    -js中Math对象 *以下写的方法都不用 new  直接使用 Math. 调用 类似静态
        ** ceil(); 向上舍入  
        ** floor(); 向下舍入
        ** round();四舍五入
        ** Math.random();  随机数
    -js中的全局函数：
        ** eval(); 执行字符串中的js代码，如果不是js代码将不执行并且报错
        ** encodeURI(); 对字符进行编码  
        ** decodeURI(); 对字符进行解码
        ** isNaN() :判断当前字符是否是数字，如果是返回 false 如果不是返回 true
        ** parseInt(); 将类型转换成数字，如果不能转换返回NAN
    - js中的bom对象：
        ** navigate  获取客户端的信息
            -navigate.appName; 返回该浏览器的名字
        ** screen    获取屏幕信息
            - screen.while; 返回屏幕的宽度
            - screen.height;返回屏幕高度
        **history :请求url的历史记录
            -history.back(); 访问上一次记录
            -history.go(-1); 访问上一次记录
            -history.forward(); 访问下一个页面
            -history.go(1);  访问下一个页面
        **location 请求url地址
            -location.href; 得到当前url地址
            -location.href = "url"; 设置访问url地址
                例：
                    function a(){
                        location.href = "www.baidu.com";
                    }
                <input type="button" value="访问百度" onclick="a()"/>
        **-window-**对象-所有bom对象的顶层对象  
            -window.alert();  普通弹出框；
            -window.confirm(); 确认框
            -window.prompt(); 输入弹出框
            -window.open();打开一个新的窗口  三个参数 ("URL",("name"),"with,height")
            -window.close();关闭窗口(兼容性差,极大部分浏览器不支持)
            -函数 window.opener; 返回父页面
    -js中的定时器函数(bom对象)hi
            -setInterval("js代码",毫秒数);  表示每过多少秒，执行以下函数
            -setTime("js代码",毫秒数); 表示多少秒之后执行  注意只执行一次
            -clearInterval(); 清除第一种定时器函数
            -clearTimeout(); 清除第一种定时器函数
    -js中的DOM对象：
            -document.getElementById() ; 通过设置的ID获取  返回一个对象
            -document.getElementsByName(); 通过设置的name获取  返回一个集合
            -document.getElementsByTagName();通过标签获取 返回一个集合
            - var check = document.getElementsByTagName('input')[0];
                console.log(check.checked);//false  
                判断复选框是否被选中
    -js中Note节点对象：
            - 1 .向节点中添加元素  
                    例：向ul中添加一个li
                        获取ul标签
                        var ul1 = document.getElementById("ul1");
                        创建li标签
                        var li1 = document.createElement("li");
                        创建文本
                        var test1 = document.createTextNode("5555");
                        向li标签加入文本
                        li1.appendChild(test1);
                        向ul中添加li
                        ul1.appendChild(li1);                
    -js 中的 element 对象： 这个对象的方法必须使用document对象调用
            - setAttribute(“id”,123);
            - getAttribute(“属性”)
            - removeAttribute(“id”)  注意 value不可删除
            - ul1.getElementsByTagName("li"); // 获取ul标签下面所有的子标签
                *- 列：
                    <input type="button" id = "aL" value="ac"/>
                    var a = document.getElementById("aL");
                    原来
                    alert(a.id);
                    a.setAttribute("id",123);
                    现在
                    alert(a.getAttribute("id"));

    **一些小知识点-只需了解就行了**
        - js中有重载吗？  
                答：1.js中没有重载！
                    2.但是可以通过 argumengts 数组来模拟“重载”
                function ovv(){
                    if(arguments.length == 2){
                        return arguments[0]+arguments[1];
                    }else if(arguments.length == 3){
                        return arguments[0]+arguments[1]+arguments[2];    
                    }
                }    
                    document.write(ovv(1,2));
                    document.write(ovv(1,3,6));
        - js的递归函数：输出n次helloword
                答：
                    function print(n){
                        if(n == 0){
                            return;
                        }
                        document.write("Hello Word </br>");
                        return print(n-1);
                    }
                    print(100);

    -js中Note节点对象：
            - 1 .向节点中添加元素  
                    例：向ul中添加一个li
                        获取ul标签
                        var ul1 = document.getElementById("ul1");
                        创建li标签
                        var li1 = document.createElement("li");
                        创建文本
                        var test1 = document.createTextNode("5555");
                        向li标签加入文本
                        li1.appendChild(test1);
                        向ul中添加li
                        ul1.appendChild(li1);

附三、W3C 代码标准规范

记不住啊：https://www.w3cschool.cn/xuexiw3c/xuexiw3c-standards.html

抛弃声明：以后我们将抛弃font标签，新的页面中不应该再出现如，已经存在的老的页面也应该在修改时尽量替代，替代方法：<span
class=”red_tex”>。

一个标准XHTML头信息格式如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> 
<head> 
    <meta charset="utf-8" /> 
    <title>W3Cschool - 学技术查资料，从w3cschool开始!</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="keywords" content="w3cschool,w3cschool在线教程,技术文档,编程入门教程,W3Cschool,W3C,HTML,HTML5,CSS,Javascript,jQuery,Bootstrap,PHP,Java,Sql" />
    <meta name="description" content="w3cschool是一个专业的编程入门学习及技术文档查询网站，提供包括HTML,CSS,Javascript,jQuery,C,PHP,Java,Python,Sql,Mysql等编程语言和开源技术的在线教程及使用手册，是类国外W3Cschool的W3C学习社区及菜鸟编程平台。" />
</head>

1、什么是DOCTYPE
DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。其中的DTD(例如xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。
XHTML 1.0 提供了三种DTD声明可供选择：
i) 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。
完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ii) 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如
。
完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

iii) 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。
完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

注：DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。

2、名字空间 namespace

通常我们HTML4.0的代码只是，这里的"xmlns"是什么呢？
这个“xmlns”是XHTML namespace的缩写，叫做“名字空间”声明。XHTML是HTML向XML过渡的标识语言，它需要符合XML文档规则，因此也需要定义名字空间。又因为XHTML1.0不能自定义标识，所以它的名字空间都相同，就是"http://www.w3.org/1999/xhtml"。目前阶段我们只要照抄代码就可以了。

**3、定义语言编码**

为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言，我们一般使用gb2312(简体中文)，制作多国语言页面也有可能用Unicode、ISO-8859-1等，根据你的需要定义。
注：如果忘记了定义语言编码,可能就会出现,你在DW(dreamweaver)做完一个页面，第二次打开时所有的中文变成了乱码。

**4、Javascript定义**
Js必须要用