前端基础

前端基础笔记（自己查询用，更新中）：

<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
    //jQuery写法

    /*方式一
    $(document).ready(function(){

    });*/
    
    /*方式二
     jQuery(function(){
   
    });*/
    
    /*方式二 简写
    $(function(){
        
    });*/
    
</script>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

</head>
<body>

<span>    dfdf</span>
<p>dfdf</p>

<select>
    <option value="1">a</option>
    <option>b</option>
    <option selected="selected">c</option>
</select>

<select size="1">
    <option>上海</option>
    <option>北京</option>
    <option>广州</option>
    <option>山东</option>
</select>

<select multiple="multiple" size="3">
    <option>上海</option>
    <option>北京</option>
    <option>广州</option>
    <option>山东</option>
</select>

<select>
    <optgroup label="河北省">
        <option>石家庄</option>
        <option>邯郸</option>
    </optgroup>
    <optgroup label="浙江省">
        <option>杭州市</option>
        <option>嘉兴市</option>
    </optgroup>
</select><hr/>

<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox" checked="checked" /><hr/>

<input type="radio" />
<input type="radio" />
<input type="radio" /><hr/>
<!--对于input标签来说只要，radio的name值相同，那么他们就会互斥-->
<input type="radio" name="abc" />
<input type="radio" name="abc" />
<input type="radio" name="abc" />

<input type="text"/>
<input type="password"/>
<input type="button" />
<input type="submit" />
<input type="file" />
<hr/>

<textarea style="height: auto; 100px">aa</textarea>

<hr/>

<form>
    <p>用户：<input type="text" /></p>
    <p>密码：<input type="password" /></p>
    <p>部门:<select name="department">
        <option>DBA</option>
        <option>CEO</option>
    </select></p>
    <input type="submit" value="提交"/>
</form>

<hr/>
<div>
    <h1>Label标签</h1>
    姓名:<input type="text"/>
    婚否:<input type="checkbox"/>
</div>
<hr/>
<div>
    <label for="name_1">
        姓名:<input id="name_1" type="text"/>
    </label>

    <label for="name_2">
        婚否:<input id="name_2" type="checkbox"/>
    </label>
</div>
<hr/>
<ul>
    <li>line1</li>
    <li>line2</li>
    <li>line3</li>
</ul>
<hr/>
<ol>
    <li>line1</li>
    <li>line2</li>
    <li>line3</li>
</ol>
<hr/>
<table border="1">
    <!--border这里是加上边框-->
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <!--一个tr是1行，一个td是一列，一行里可能有很多列。-->
    <!--如果想加多个行就加多个tr即可-->
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>

</table>
<hr/>

<table border="2">
    <thead style="border: solid red">
    <!--表头-->
        <tr>
            <th>表1</th>
            <th>表2</th>
            <th>表3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
            <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
            <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </tbody>
</table>
<hr/>
<fieldset style="border: solid red">
    <legend>协议</legend>
请仔细阅读协议内容：
    abc
</fieldset>

<hr/>

<dl>
    <dt>河北省</dt>
    <!--dt是标签，dd是标签里的内容-->
        <dd>石家庄</dd>
        <dd>衡水市</dd>
    <dt>山东省</dt>
    <!--dt是标签，dd是标签里的内容-->
        <dd>济南市</dd>
        <dd>烟台市</dd>
</dl>
<hr/>
<a href="#a2"> 书签 </a>
    <!--在标签里，ID是这个标签的唯一的值，我们在做锚的时候指定他的ID即可-->
    <!--<a href="#a2"> 上面的代码href="#要跳转的标签"-->
    <div id="a1" style="height:400px;">        mark_1    </div>
    <div id="a2" style="height:400px;">        mark_2    </div>
</body>
</html>
View Code
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script type="text/javascript" src="jquery-1.8.2.js"></script>

<hr/>
<div></div>
<p class="myClass">p class="myClass"</p>
<span></span>
<p class="notMyClass">p class="notMyClass"</p>
<script>
    $("div,span,p.myClass")//:你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
</script>







<hr/>
<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

<script>
    $("form input")//:用以匹配元素的选择器，并且它是第一个选择器的后代元素  [ <input name="name" />, <input name="newsletter" /> ]
    $("form > input")//:在给定的父元素下匹配所有的子元素       [ <input name="name" /> ]
    $("label + input")//:匹配所有跟在 label 后面的 input 元素  [ <input name="name" />, <input name="newsletter" /> ]
    $("form ~ input")//:找到所有与表单同辈的 input 元素        [ <input name="none" /> ]
</script>





<hr/><hr/>
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>
<script>
    $('li:first')//;获取匹配的第一个元素   [ <li>list item 1</li> ]
    $('li:last')//:获取匹配的最后个元素    [ <li>list item 5</li> ]
    $('li').first()//[ <li>list item 1</li> ]
    $('li').last()//[ <li>list item 5</li> ]
</script>





<hr/><hr/>
<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>
<script>
    $("tr:even")//:查找表格的1、3、5...行（即索引值0、2、4...）[<tr><td>Header 1</td></tr> <tr><td>Value 2</td></tr>]
    $("tr:odd")//:查找表格的2、4、6行（即索引值1、3、5...）[<tr><td>Value 1</td></tr>]
    $("tr:eq(1)")//匹配一个给定索引值的元素 [ <tr><td>Value 1</td></tr> ]
    $("tr:gt(0)")//查找第二第三行，即索引值是1和2，也就是比0大[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]
    $("tr:lt(2)")//查找第一第二行，即索引值是0和1，也就是比2小[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]
</script>




<hr/><hr/>
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
<script>
    $(":header").css("background", "#EEE");  //给页面内所有标题加上背景色 [ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]
</script>




<hr/><hr/>
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
<script>
    $("input[name='newsletter']").attr("checked", true);
    //查找所有 name 属性是 newsletter 的 input 元素
    //[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" />
</script>







<hr/><hr/>
<p> This is just a test.</p> <p> So is this</p>
<script>
    //index:一个整数，指示元素基于0的位置,这个元素的位置是从0算起。
    //-index:一个整数，指示元素的位置，从集合中的最后一个元素开始倒数。(1算起)
    $("p").eq(1)//获取匹配的第二个元素
    $("p").eq(-2)//
</script>




<hr/><hr/>
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>
<script>
    //可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。
    $("div").children()//[ <span>Hello Again</span> ]
    $("div").children(".selected")//[ <p class="selected">Hello Again</p> ]
    $("p").find("span")// 从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同。
    $("p").next()//[ <p>Hello Again</p>, <div><span>And Again</span></div> ]  找到每个段落的后面紧邻的同辈元素。
    $("p").next(".selected")//[ <p class="selected">Hello Again</p> ]
</script>







<hr/><hr/>
<div></div><div></div><div></div><div></div>
<script>
    $("div:first").nextAll().addClass("after");//[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]
    //给第一个div之后的所有元素加个类
</script>
<hr/><hr/>
<div><p>Hello</p><p>Hello</p></div>
<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>
<script>
    $("p").parent()//查找段落的父元素中每个类名为selected的父元素。
    $("p").parent(".selected")//[ <div class="selected"><p>Hello Again</p></div> ]
</script>








<hr/><hr/>
取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
<script>
    $("p").prev()//[ <div><span>Hello Again</span></div> ]
    $("p").prev(".selected")//[ <p class="selected">Hello Again</p> ]
    $("div:last").prevAll().addClass("before");//给最后一个之前的所有div加上一个类
</script>




<hr/><hr/>

用于筛选同辈元素的表达式
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
<script>
    $("div").siblings()//[ <p>Hello</p>, <p>And Again</p> ]
    $("div").siblings(".selected")//[ <p class="selected">Hello Again</p> ]
    $("img").attr("src");//返回文档中所有图像的src属性值:
    $("img").attr({ src: "test.jpg", alt: "Test Image" });//为所有图像设置src和alt属性。
    $("img").attr("src","test.jpg");//为所有图像设置src属性。
    $("img").attr("title", function() { return this.src });
    //把src属性的值设置为title属性的值。
    $("img").removeAttr("src");//将文档中图像的src属性删除
    //<img src="test.jpg"/>   --->         [ <img /> ]
</script>
</body>
</html>
jquery-1
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div>
    <input type="checkbox" value="1" checked="checked"/>
    <input type="checkbox" value="2" disabled="false"/>
    <input type="checkbox" value="3"/>
    <input type="checkbox" value="4"/>
    <input type="submit" onclick="A();" ondblclick="B();" value="开始"/>
    <input type="button" value="按钮" class="button"/>

    <p>gan,hello,world!</p>

    <span>gan,you too</span>
</div>

<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script>
    //$("span").click(function(){alert('aa')})
    $("span").bind({
        click: function () {
            $("p").css("background-color","red");
        },
        mouseover:function(){
            $("p").css("background-color","green");
        },
        mouseout: function () {
            $("p").css("background-color","yellow");
        }
    })
    $("p").bind("click",function(){
        alert($(this).text())
    })

    function A(){
        $("input[type='checkbox']").prop("disabled", true);
        $("input[type='checkbox']").prop("checked", true);
    }

    function B(){
        $("input[type='checkbox']").removeProp("checked",true)
    }

</script>

</body>
</html>
jquery-2
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>1.css选择器</title>
    <style>

        div{
            font-size: 78px;
        }
        #i1 {
            background-color:red;
        }

        .c1{
            color: green;
        }
        .contanor .abc .p{
            color: yellow;
        }
        .contanor .abc ,.dd{
            color: pink;
        }
    </style>
</head>
<body>
    <!-- div选择器跟id选择器一般不用，只用class类选择器-->
    <!--
    类选择器
    ID选择器
    div等标签选择器
    关联选择器  关键字空格隔开，往下找对应的
    组合选择器  关键字用逗号隔开
    属性选择器
        -->
<div>asdfsdfs</div>
<span class="c1">nihao</span>
<a class="c1">f</a>
<div class="c1" style="font-size:10px">f</div> <!--优先级，可以覆盖-->

<a id="i1">ID选择器</a><!--css中ID选择器…（关键字是#）不要重复，用class（关键字是.）选择器 -->
<a id="i1">ID选择器</a>

<div class="contanor">
    <ul>
        <li class="abc">111
            <span class="p">222</span>
            <input class="dd" type="text">
        </li>
        <li class="dd">111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
    </ul>
</div>
</body>
</html>
css-1
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>1.选择器中属性如何去选择</title>
    <style>
        .con input[type="text"][name="username"]{
            border:3px solid red;
        }
        .con input[type="file"]{
            border:3px solid red;
        }
        .con input[alex="sb"]{
            border:4px solid yellow;
        }
    </style>
</head>
<body>
<!--选择器中属性如何去选择-->
    <div class="con">
        <input type="text" name="username" />
        <input type="text" />
        <input type="button" />
        <input type="checkbox" />
        <input type="password" />
        <input type="file" />
        <input type="reset" />
        <input alex="sb" type="email" />
    </div>
</body>
</html>
css-2
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>3.位移与边距</title>
</head>
<body>
<!--panding/margin 位移与边距-->
<div style="border:1px solid red;background-color: green;height: 100px">

    <!--<div style="background-color: springgreen;height: 20px;margin-top: 10px"></div>-->

    <div style="background-color: red;">123</div>

    <!--
    panding:改变自己内部边距

    margin:改变自己 离其他标签的距离
    -->

</div>
<div style="background-color: red;padding: 20px"></div>

</body>
</html>
css-3
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>2.图片位置</title>
</head>
<body>

<div style="background-color: red">
&nbsp;
</div>


<div style="
 100px;
height: 20px;
background-image:url('5.png');
background-repeat: no-repeat;
background-position: -105px -112px">

</div>

<div>
    <div style="background-image:url('logo.jpg');height: 1140px;background-repeat: no-repeat">
</div>

</body>
</html>
css-4
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>3.4.position-fixed/relative/absolute</title>
</head>
<body>
<!--relative/absolute两者结合使用-->
<!--margin :0 auto 就是水平居中-->
<!--
fix:固定在浏览器的某个位置
absolute：相对于某个屏幕定位
relative与absolute结合使用时，相对于上一级标签中的relative进行定位
-->

    <div style="height: 2000px;background-color: #ddd;">

        <div style="position: relative; background-color: beige; 300px;height: 300px;margin: 0 auto">
            <h1>H1标签</h1>
            <a style="right: 0;bottom: 0px;position: absolute">biaoqian</a>
        </div>

    </div>
    <a style="position: fixed;right: 30px;bottom: 30px">返回顶部</a>

</body>
</html>
css-5
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>float/overflow</title>
    <!--页面无边框-->
    <style>
        body{
            margin: 0 auto;
        }
    </style>
</head>
<body>
<!--
float:脱离底层的标签
overflow：超过范围，让他出现滚动条。
-->

    <div style="background-color: red;">
        <div style="float: left">111</div>
        <div style="float: left">222</div>
        <div style="clear: both"></div><!--等价于父标签加上高度-->
    </div>

    <div style="overflow: auto; background-color: aquamarine; height: 40px; 200px">
        abc<br/>
             abc<br/>
             abc<br/>
             abc<br/>
             abc<br/>
             abc<br/>

    </div>

</body>
</html>
css-6
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>遮罩层</title>
</head>
<body>
<!--
opacity：透明度
z-index：值越大的，在上面。

-->

    hi,ganzl;
        hello,world!
    <div style="height: 1000px;"></div>
    <input type="button" value="提交数据" />
    <div style="z-index:100;position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: black;opacity: 0.5"></div>
    <!--<div style="z-index:200;position: fixed;left: 50%;top: 50%;margin-left: -16px;margin-top: -16px"><img src="loading.gif"></div>-->
    <div style="z-index:20;position: fixed;left: 50%;top: 50%;margin-left: -150px;margin-top: -50px">

        <div style="background-color: white; 300px;height: 100px">
            <input />
            <input />
            <input />
            <input />
        </div>


    </div>

</body>
</html>
css-7

基础（推荐）：

http://www.cnblogs.com/luotianshuai/p/5159449.html

http://www.cnblogs.com/yangyinghua/p/5136614.html

http://www.cnblogs.com/wupeiqi/articles/4457274.html

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/shoug/p/5195319.html