Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

2022-12-01 08:43:34

一、HTML

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。

浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！(例：djangomoan模版引擎)

翻译成人话：一套规则，浏览器认识的规则。

标准模板：

 <!DOCTYPE html>              #标准规范

 <html lang="en">

 <head>                       #html头

     <meta charset="UTF-8">   #字符编码

     <title>Title</title>     #页面头部显示内容

 </head>

 <body>

         <p>主体内容</p>      #页面内容主体

 </body>

 </html>

Doctype标准
Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档
有和无的区别
BackCompat：标准兼容模式未开启（默认）（浏览器按照自己的方式解析渲染页面）
CSS1Compat：标准兼容模式已开启（自己打开）（浏览器按照W3C的标准解析渲染页面）

（一）<head>页面头部

 1 ①页面编码

 2 <meta charset="UTF-8" />

 3

 4 ②刷新和跳转

 5 <meta http-equiv="Refresh" Content="3;Url=http://www.baidu.com">

 6

 7 ③关键词

 8 <meta name="keywords" content="汽车,汽车之家,汽车网,汽车报价,汽车图片,新闻,评测,社区,俱乐部"/>

 9

10 ④描述

11 <meta name="description" content="汽车之家为您提供最新汽车报价，汽车图片，汽车价格大全，最精彩的汽车新闻、行情、评测、导购内容，是提供信息最快最全的中国汽车网站。"/>

12

13 ⑤X-UA-Compatible

14 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

15

16 #title 标签

17 网页头部信息

18

19 #link 标签

20 <!--css-->

21 < link rel="stylesheet" type="text/css" href="css/common.css" >

22

23 <!--icon-->

24 < link rel="shortcut icon" href="image/favicon.ico">

25

26 #style 标签

27 在页面中写样式

28 < style type="text/css" >

29 .bb{

30       background-color: red;

31    }

32 < /style>

33

34 #script 标签

35 <!--引进文件-->

36 < script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >

37

38 <!--写js代码-->

39 < script type="text/javascript" > ... </script >

（二）<body>页面主体

标签一般分为两种：
块级标签：a、span、select 等
行内标签：div、h1、p 等

更多特殊符号-》http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

h 标签
标题h1、h2、h3、h4、h5、h6、h7表示不同的大小

span 标签
行内标签-白板

div 标签
块级标签-白板，可以加属性然后可以变身

form 标签
form相当于一个表单，配合input标签submit可以把表单的内容提交到指定位置，提交内容以字典的形式提交{‘user’：xx,'email':xx,'pwd':xx},key值为name属性值

<form action="http://localhost:8888/index" method="post" > #action表示提交动作，把数据提交到指定的路径，methon指定提交类型，默认为get

</form>

post与get的区别：

method默认为get类型，数据会包含在html的头部进行提交，表现形式是点击提交后会在外部url路径上查看提交到的数据表单内容；method如果指定为post类型的话，数据会包含在html的body内进行提交，从外部看不出来里面的信息；两者没有谁安全之说，因为抓包都能抓到

input 系列标签

text、password 用户输入框

<body>

    <form action="http://localhost:8888/index" method="post" >

        <span>用户：</span><input type="text" name="user"><br />

        <span>邮箱：</span><input type="text" name="email"><br />

        <span>密码：</span><input type="password" name="pwd"><br />

        <input type="button" value="不能提交">

        <input type="submit" value="提交">

    </form>

</body>

radio 单选

checkbox 多选

file 上传文件

textarea 多行输入

select 下拉框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form enctype="multipart/form-data">

        <div>

            <textarea name="meno" >xiaoerbi</textarea>

            <select name="city" size="" multiple="multiple">

                <option value="">北京</option>

                <option value="">上海</option>

                <option value="" selected="selected">南京</option>

                <option value="">成都</option>

            </select>

            <input type="text" name="user" />

            <p>请选择性别：</p>

            男：<input type="radio" name="gender" value=""  />

            女：<input type="radio" name="gender" value="" checked="checked"/>

            Alex：<input type="radio" name="gender" value=""/>

            <p>爱好</p>

            篮球：<input type="checkbox" name="favor"  value="" />

            足球：<input type="checkbox" name="favor"  value="" checked="checked" />

            皮球：<input type="checkbox" name="favor"  value="" />

            台球：<input type="checkbox" name="favor"  value="" checked="checked"/>

            网球：<input type="checkbox" name="favor"  value="" />

            <p>技能</p>

            撩妹：<input type="checkbox" name="skill" checked="checked" />

            写代码：<input type="checkbox" name="skill"/>

            <p>上传文件</p>

            <input type="file" name="fname"/>

        </div>

        <input type="submit" value="提交" />

        <input type="reset" value="重置" />

    </form>

</body>

</html>

综合小例子

img 图片标签

<a href="https://www.baidu.com">

        <img src="i.png" title="yimibadagaoge" style="height: 300px;width: 220px;" alt="索隆">

</a>

和a标签结合点击图片直接跳转，title指定鼠标放到图片后显示的内容，style定义宽高，alt指定图片不存在时的显示信息

ul、ol、dl 列表标签

<ul>

        <li>qwe</li>

        <li>qwe</li>

        <li>qwe</li>

    </ul>

    <ol>

        <li>qwe</li>

        <li>qwe</li>

        <li>qwe</li>

    </ol>

    <dl>

        <dt>qwe</dt>

        <dd>qwe</dd>

        <dd>qwe</dd>

        <dt>qwe</dt>

    </dl>

table 列表

（1）简单单元格

<table border="">

    <thead>

    <tr>

        <td>主机名</td>

        <td>IP</td>

        <td>详情</td>

    </tr>

    </thead>

    <tbody>

    <tr>

        <td>localhost</td>

        <td>127.0.0.1</td>

        <td>

            <a href="test3.html">点击</a>

        </td>

    </tr>

    <tr>

        <td>localhost</td>

        <td>127.0.0.1</td>

        <td>点击</td>

    </tr>

    </tbody>

（2）合并单元格

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<table border="">

    <thead>

    <tr>

        <td>表头1</td>

        <td>表头2</td>

        <td>表头3</td>

        <td>表头4</td>

    </tr>

    </thead>

    <tbody>

    <tr>

        <td colspan="">1</td>

        <!--<td>2</td>-->

        <td>3</td>

        <td>4</td>

    </tr>

       <tr>

        <td>1</td>

        <td>2</td>

        <td rowspan="">3</td>

        <td>4</td>

    </tr>

        <tr>

        <!--<td>1</td>-->

        <td>2</td>

        <td>3</td>

        <td>4</td>

    </tr>

        <tr>

        <td>1</td>

        <td>2</td>

        <td>3</td>

        <td>4</td>

    </tr>

    </tbody>

</table>

</body>

</html>

label 标签

<label for="username">用户名</label>

<input id="username" type="text" name="user" />

点击文字使其关联的标签获取光标

（二）CSS

（1）css样式选择器

标签上设置style属性：直接在div里写相对应的样式

1 <body>

2     <div style="background-color: #2459a2;height: 48px;">第一层</div>

3     <div style="background-color: #2459a2;height: 48px;">第二层</div>

4     <div style="background-color: #2459a2;height: 48px;">第三层</div>

5 </body>

id选择器:把样式写到head里面，以#开头命名，调用对应样式在div里用id属性指定相应的id名

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         #i1{

             background-color: #2459a2;

             height: 48px;

         }

     </style>

 </head>

 <body>

     <div id="i1">第一层</div>

 </body>

class选择器（最常用）:把样式写到head里面，以.开头命名，调用对应样式在div里用class属性指定相应的类名，可以多个div调用

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .c1{

             background-color: #2459a2;

             height: 48px;

         }

     </style>

 </head>

 <body>

      <div class="c1">第一层</div>

      <div class="c1">第二层</div>

      <div class="c1">第三层</div>

 </body>

标签选择器:设置div样式，则body里所有的div标签内的内容都会应用此内容

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         div{

             background-color: #2459a2;

             height: 48px;

         }

     </style>

 </head>

 <body>

      <div >第一层</div>

      <div >第二层</div>

      <div >第三层</div>

 </body>

关联选择器（层级选择器）:只让span里面的div标签应用样式，可多层嵌

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         span div{

             background-color: #2459a2;

             height: 48px;

         }

     </style>

 </head>

 <body>

      <div >第一层</div>

      <span>

         <div >span里的div</div>

      </span>

      <div >第三层</div>

 </body>

组合选择器:加,号，相同样式多命名

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         #i1,#i2,#i3{

             background-color: #2459a2;

             height: 48px;

         }

     </style>

 </head>

 <body>

      <div id="i1">第一层</div>

      <div id="i2">第一层</div>

      <div id="i3">第一层</div>

 </body>

属性选择器:根据属性进行筛选匹配，只有第一个input标签匹配上对应的样式

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         input[name="James"]{width: 20px;height: 20px;}

     </style>

 </head>

 <body>

     <input type="text" name="James">

     <input type="text">

     <input type="password">

 </body>

（2）css样式引用

css样式优先级:如果样式不冲突，则样式都应用，如果样式有冲突，style样式优先级最大，其次其他的安装编写的顺序，越靠近越优先

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .c1{

             background-color: red;

             color: white;

         }

         .c2{

             background-color:black;

         }

     </style>

 </head>

 <body>

     <div class="c2 c1" style="color:palegreen" >第一层</div>

 </body>

文件方式引用样式

 #定义样式并保存到commons.css文件

 .c1{

 background-color: red;

 color: white;

 }

 .c2{

 background-color:black;

 }

 #引用commons.css文件

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <link rel="stylesheet" href="commons.css">

 </head>

 <body>

     <div class="c2 c1" style="color:palegreen" >第一层</div>

 </body>

 </html>

(3)css样式边框

 #基本边框

 <body>

     <div style="border: 1px dotted red;">

         第一层边框

     </div>

 <!--border：边框宽度  solid：边框样式实线（dotted虚线）颜色：red-->

 </body>

 #边框其他样式

 <body>

     <div style="height: 48px;

     width: 80%;

     border: 1px solid brown;

     font-size: 16px;

     text-align: center;

     line-height: 48px;

     ">第二层边框</div>

     <!--height: 48px 边框高度-->

     <!--width: 80% 宽度页面的80%-->

     <!--border: 1px solid brown 边框宽度、样式、颜色-->

     <!--font-size: 16px;  字体大小-->

     <!--text-align: center; 水平居中-->

     <!--line-height: 48px; 垂直居中-->

 </body>

(4)CSS样式浮动

 #float

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .pg-header{

             height: 38px;

             background-color: #dddddd;

             line-height: 38px;

         }

     </style>

 </head>

 <body style="margin: 0 auto;">

     <div class="pg-header">

         <div style="float: left;">*收藏本站</div>

         <div style="float: right;">

             <a>登录</a>

             <a>注册</a>

         </div>

     </div>

     <div style="width: 300px;border: 1px solid red;">

         <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>

         <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>

         <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>

         <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>

         <div style="width: 96px;height: 30px;border: 1px solid green;float: left"></div>

         <div style="clear: both"></div>

     </div>

 </body>

 注：<body style="margin: 0 auto;">消除与浏览器顶部之间的缝隙；<div style="clear: both"></div>子边框浮动后，显示父边框的边框线

（5）display

 <body>

     <div style="background-color: red;display: inline">块级</div>

     <span style="background-color: #2459a2;display: block">行内</span>

 </body>

 注：display:inline 转换为行内标签；display：block转换为块级标签；另还有display：none不显示

 行内标签：无法设置高度，宽度，padding margin

 块级标签：设置高度，宽度，padding margin

 <body>

     <span style="background-color: #2459a2;display: inline-block;height: 50px;width: 70px">行内</span>

     <div style="background-color: red;display: inline">块级</div>

 </body>

 注：display:inline-block 既有inline的属性（默认自己有多少占多少）又有block的属性（可以设置高度、宽度、padding、margin）

（6）边距

 #外边距margin

 <body>

     <div style="border: 2px solid red;height: 70px;">

         <div style="background-color: green;height: 50px;

         margin-top: 25px;"></div>

     </div>

 </body>

 注：margin-top：25px表示外边距，子边框与父边框top之间的距离为25px

 #内边距padding

 <body>

     <div style="border: 2px solid red;height: 70px;">

         <div style="background-color: green;height: 50px;

         padding-top: 25px;"></div>

     </div>

 </body>

 注：padding-top：25px表示内边距，子边框内自己与top之间的距离为25px

（7）position

 fixed固定到浏览器某个位置（相当于float）

 返回顶部按钮

 有个需求，好多页面都有返回顶部的按钮，随着你页面的下拉，按钮永远在页面的右下角，下面就来实现：

 <body>

     <div style="width: 50px;height: 50px;background-color: black;color: white;

     position: fixed;

     bottom: 20px;

     right: 20px;

     ">返回顶部</div>

     <div style="height: 5000px;background-color: #dddddd";>

     </div>

 </body>

 实现动态效果，点击返回

 <body style="margin: 0 auto">

     <div onclick="GoTop();"  style="width: 50px;height: 50px;background-color: black;color: white;

     position: fixed;

     bottom: 20px;

     right: 20px;

     ">返回顶部</div>

     <div style="height: 5000px;background-color: #dddddd;margin: 0;">ddddddddddddd

     </div>

     <script>

         function GoTop() {

             document.body.scrollTop=0;

         }

     </script>

 </body>

 固定菜单栏：

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .pg-header{

             height: 48px;

             background-color: black;

             color: #dddddd;

             position: fixed;

             top:0;

             right: 0;

             left: 0;

         }

         .pg-body{

             background-color: #dddddd;

             height: 5000px;

             margin-top: 50px;

         }

     </style>

 </head>

 <body style="margin: 0">

     <div class="pg-header">头部</div>

     <div class="pg-body">内容</div>

 </body>

 relative+absolute（相对与relative固定路径）

 <body>

     <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">

         <div style="position: absolute;left: 0;bottom: 0;width: 50px;height: 50px;background-color: black;"></div>

     </div>

 </body>

 多层模态

 用了position样式实现三层页面；当页面整个浮动在上面的时候，如果想让页面整体覆盖底层页面，要用到top,right,left,bottom属性，而非margin-top、margin-left....

 <body

     <div style="z-index:10;position: fixed;top: 50%;left: 50%;margin-left:-250px;margin-top:-250px;

     background-color: white;height: 500px;width: 500px"></div>

     <div style="z-index:9;position: fixed;background-color: black;

     top: 0;

     right: 0;

     left: 0;

     bottom: 0;

     opacity: 0.5"></div>

     <div style="height: 5000px;background-color: green"></div>

 </body>

 当页面出现多层时，用z-index：10数值来确定浮动层的上下关系；opacity：0.5设置页面透明度（1表示完全遮住）；fixed;top: 50%;left: 50%;margin-left:-250px;margin-top:-250 px最顶层的div进行居中处理；

（8）overflow

 外层定义div高度和宽度后，最后显示的效果还是以图片的大小为准的，图片把外层div给撑开了，这时候可以用到下面俩个属性

 overflow：auto 图片出现滚动条

 <body>

     <div style="height: 200px;width:140px;overflow: auto">

         <img src="i.png" />

     </div>

 </body>

 overflow：auto 图片只显示div设置的大小，其他部分隐藏

 <body>

     <div style="height: 200px;width:140px;overflow: hidden">

         <img src="i.png" />

     </div>

 </body>

（9）hover

 ##抽屉网的顶部条栏，当鼠标移动到选项栏时，背景颜色会出现变化；

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .pg-header{

             position: fixed;

             right: 0;

             left: 0;

             top: 0;

             height: 48px;

             background-color: #2459a2;

             line-height: 48px;

             color: white;

         }

         .pg-body{

             margin-top: 50px;

         }

         .w{

             width: 980px;

             margin: 0 auto;

         }

         .pg-header .menu{

             display:inline-block;

             padding: 0 10px 0 10px;

         }

         .pg-header .menu:hover{

             background-color: #BF1919;

         }

     </style>

 </head>

 <body>

     <div class="pg-header">

         <div class="w">

             <a >LOGO</a>

             <a class="menu">全部</a>

             <a class="menu">42区</a>

             <a class="menu">段子</a>

             <a class="menu">1024</a>

             <a class="menu">爆文</a>

         </div>

     </div>

     <div class="pg-body">

     </div>

 </body>

 </html>

 其中.pg-header .menu:hover{background-color: #BF1919}指定当鼠标滑过引用.menu字段时，字段样式变成新定义的样式

（10）background

 之前一直在用backgroud样式基本上都是设置背景颜色什么，其实background还可以设置背景为图片

 background-image

 <body>

     <div style="background-image: url('i.png');height: 700px;width: 700px">

     </div>

 </body>

 默认div框架有多大，图片重复放置占的位置就有多大

 background-repeat

 <body>

     <div style="background-image: url('i.png');height: 700px;width: 700px;background-repeat: no-repeat">

     </div>

 </body>

 background-repeat有四个属性repeat（默认，重复占满）、no-repeat（不重复）、repeat-x（只横着重复放）、repeat-y（只竖着重复放）

 background-position-x、background-position-y

 显示图片中特定的位置图标

 <body>

     <div style="background-image: url('icon.png');height: 20px;width: 20px;

     border: 1px solid red;background-position-x:20px;background-position-y: 40px"></div>

 </body>

 background-position-x表示看背景图片的窗口水平方向想右移动，background-position-y表示看背景图片的窗口垂直向下移动；两者可以简写成：

 <body>

     <div style="background-image: url('icon.png');height: 20px;width: 20px;

     border: 1px solid red;background-position:20px 40px"></div>

 </body>

 针对background整体还有更加简单的写法：

 element.style {

     background: #f8f8f8 url(image/5.png) -105px -212px no-repeat;

     background-image: url(file:///D:/BaiduYunDownload/s14day14/day14%E8%AF%BE%E4%B8%8A%E6%89%80%E6%9C%89/html/html/image/5.png);

     background-position-x: -105px;

     background-position-y: -212px;

     background-size: initial;

     background-repeat-x: no-repeat;

     background-repeat-y: no-repeat;

     background-attachment: initial;

     background-origin: initial;

     background-clip: initial;

     background-color: rgb(248, 248, 248);

 background: #f8f8f8 url(image/5.png) -105px -212px no-repeat; 同时设定了颜色，图片，位置，是否repeat

（三）JavaScript

（一）简介

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
　　在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
　　为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript

两种引用方式：

<head>

<meta charset="UTF-8">

<title>Title</title>

<!--第一种方式引用js文件-->

<script src="commons.js"></script>

<!--第二种方式直接写在html中-->

<script>

alert('James')

</script>

</head>

#字符串记得要加引号

（二）常用数据类型

①变量

JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量

<script type="text/javascript">

    // 全局变量

    name = 'solo';

    function func(){

        // 局部变量

        var age = 18;

        // 全局变量

        gender = "男"

    }

</script>

②数字

JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。
转换：
parseInt(..) 将某值转换成数字，不成功则NaN
parseFloat(..) 将某值转换成浮点数，不成功则NaN
特殊值：
NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断

<script>

   //字符串转换为数字

    age="18";

    i = parseInt(age);

</script>

常量

Math.E

常量e，自然对数的底数。

Math.LN10

10的自然对数。

Math.LN2

2的自然对数。

Math.LOG10E

以10为底的e的对数。

Math.LOG2E

以2为底的e的对数。

Math.PI

常量figs/U03C0.gif。

Math.SQRT1_2

2的平方根除以1。

Math.SQRT2

2的平方根。

静态函数

Math.abs( )

计算绝对值。

Math.acos( )

计算反余弦值。

Math.asin( )

计算反正弦值。

Math.atan( )

计算反正切值。

Math.atan2( )

计算从X轴到一个点的角度。

Math.ceil( )

对一个数上舍入。

Math.cos( )

计算余弦值。

Math.exp( )

计算e的指数。

Math.floor( )

对一个数下舍人。

Math.log( )

计算自然对数。

Math.max( )

返回两个数中较大的一个。

Math.min( )

返回两个数中较小的一个。

Math.pow( )

计算xy。

Math.random( )

计算一个随机数。

Math.round( )

舍入为最接近的整数。

Math.sin( )

计算正弦值。

Math.sqrt( )

计算平方根。

Math.tan( )

计算正切值。

Math

Math

更多数值计算

③字符串

字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法

① charAt （输入索引位置获取字符）

>a = 'James'

<"James"

>a.charAt(1)

<"a"

>a.charAt(2)

<"m"

>a.charAt(3)

<"e"

② substring （输入起始位置，结束位置获取字符）

>a = 'James'

<"James"

>a.substring(0,2)

<"Ja"

>a.substring(2,5)

<"mes"

③ lenght （获取当前字符串长度）

>a = 'James'

<"James"

>a.length

<5

④ concat （字符串拼接）

>a = 'James';

<"James"

>a.concat('eric');

<"Jameseric"

⑤ indexOf（子序列位置）

>a = 'James';

<"James"

>a.indexOf('me');

<2

>a.indexOf('es');

<3

⑥ split （分割字符）

>a = 'JamesaJames';

<"JamesaJames"

>a.split('a');

<["J", "mes", "J", "mes"]

>a.split('a',1);

<["J"]

>a.split('a',3);

<["J", "mes", "J"]

obj.length                           长度

obj.trim()                           移除空白

obj.trimLeft()

obj.trimRight)

obj.charAt(n)                        返回字符串中的第n个字符

obj.concat(value, ...)               拼接

obj.indexOf(substring,start)         子序列位置

obj.lastIndexOf(substring,start)     子序列位置

obj.substring(from, to)              根据索引获取子序列

obj.slice(start, end)                切片

obj.toLowerCase()                    大写

obj.toUpperCase()                    小写

obj.split(delimiter, limit)          分割

obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个位置(g无效)

obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。

obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，

                                     $数字：匹配的第n个组内容；

                                     $&：当前匹配的内容；

                                     $`：位于匹配子串左侧的文本；

                                     $'：位于匹配子串右侧的文本

                                     $$：直接量$符号

④布尔值

布尔类型仅包含真假，与Python不同的是其首字母小写。

== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且
⑤数组

① 创建数组

li = [11,22,33,44]

[11, 22, 33, 44]

② split插入、删除或替换数组的元素

>li = [11,22,33,44]

<[11, 22, 33, 44]

>li.splice(1,0,99);

<[]

>li

<[11, 99, 22, 33, 44]

>li.splice(1,1,888);

<[99]

>li

<[11, 888, 22, 33, 44]

>li.splice(1,1)

<[888]

>li

<[11, 22, 33, 44]

③ slice 切片

>li = [11,22,33,44]

<[11, 22, 33, 44]

>li.slice(1,3)

<[22, 33]

其他常用功能：

obj.length          数组的大小

obj.push(ele)       尾部追加元素

obj.pop()           尾部获取一个元素

obj.unshift(ele)    头部插入元素

obj.shift()         头部移除元素

obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素

                    obj.splice(n,0,val) 指定位置插入元素

                    obj.splice(n,1,val) 指定位置替换元素

                    obj.splice(n,1)     指定位置删除元素

obj.slice( )        切片

obj.reverse( )      反转

obj.join(sep)       将数组元素连接起来以构建一个字符串

obj.concat(val,..)  连接数组

obj.sort( )         对数组元素进行排序

（三）语句和异常

1、循环

 JavaScript中支持两个中循环语句，分别是：for 和 while

 ① 第一种方式： for循环，循环时，循环的元素是索引

 循环数组

 >   a = [11,22,33,44]

     for(var item in a){

         console.log(a[item])

     }

 循环字典

 >   a = {'k1':'v1','k2':'v2'}

     for(var item in a){

         console.log(a[item])

     }

 ② 第二种循环： for循环，循环条件判断

 for (var i=0;i<10;i++){

     //循环十次

 }

 结合数组循环

 a = [11,22,33,44]

     for(var i=0;i<a.length;i=i+1){

         console.log(a[i])

     }

 ③ 第三种循环： while循环，循环条件判断

 while(条件){

     // break;

     // continue;

 }

2、条件语句

 JavaScript中支持两个中条件语句，分别是：if 和 switch

 ① if条件语句

 if(条件){

     }else if(条件){

     }else if(条件){

     }else{

     }

 ② switch条件语句

 switch(name){

         case '':

             age = 123;

             break;

         case '':

             age = 456;

             break;

         default :

             age = 777;

     }

 ③ ==、===、!=、!== 四者的关系

 1 == "";

 true

 1 === "";

 false

 1 != "";

 false

 1 !== "";

 true

 ==只匹配数值、===不止匹配数值还匹配类型

 ④ &&and 与 ||或

 and

 if (1==1 || 2==2)

 或

 if (1==1 && 2==2)

（四）函数

 1、基本函数

 JavaScript中函数基本上可以分为一下三类：

 // 普通函数

     function func(arg){

         return true;

     }

 // 匿名函数

     var func = function(arg){

         return "tony";

     }

 // 自执行函数

     (function(arg){

         console.log(arg);

     })('')

（五）正则表达式

 1、定义正则表达式　　

 /.../  用于定义正则表达式

 /.../g 表示全局匹配

 /.../i 表示不区分大小写

 /.../m 表示多行匹配

 2、test（判断字符串是否符合规定的正则）

 rep = /\d+/;

 rep.test("dfsfsfdsf423dsddd");

 # true

 rep = /^\d+$/;

 rep.test("dfsfsfdsf423dsddd");

 # false

 3、exec（获取匹配的数据）

 默认只取第一个

 rep = /\d+/;

 str = "wangshen_67_houyanfa_20"

 rep.exec(str)

 # ["67"]

 rep.exec(str)

 # ["67"]

 分组匹配、对匹配到的字符串进行二次匹配

 var text = "JavaScript is more fun than Java or JavaBeans!";

 var pattern = /Java\w*/;

 pattern.exec(text);

 # ["JavaScript"]

 var pattern = /Java(\w*)/;

 pattern.exec(text);

 # ["JavaScript", "Script"]

 全局匹配、对字符串一个一个的进行匹配直到全部匹配完成返回none，然后再次匹配时重新开始

 var text = "JavaScript is more fun than Java or JavaBeans!";

 var pattern = /Java(\w*)/g;

 pattern.exec(text);

 # ["JavaScript", "Script"]

 pattern.exec(text);

 # ["Java", ""]

 pattern.exec(text);

 # ["JavaBeans", "Beans"]

 pattern.exec(text);

 # null

 pattern.exec(text);

 # ["JavaScript", "Script"]

 4、多行匹配

 默认情况下就是多行匹配

 text = "JavaScript is more fun than \n Java or JavaBeans!";

 # "JavaScript is more fun than

      Java or JavaBeans!"

 pattern = /Java\w*/g;

 pattern.exec(text);

 # ["JavaScript"]

 pattern.exec(text);

 # ["Java"]

 pattern.exec(text);

 # ["JavaBeans"]

 当出现^ $符匹配时只能匹配一行

 text = "JavaScript is more fun than \nJava or JavaBeans!";

 # "JavaScript is more fun than

    Java or JavaBeans!"

 pattern = /^Java\w*/g;

 pattern.exec(text);

 # ["JavaScript"]

 pattern.exec(text);

 # null

 当出现^ $符匹配时还想匹配多行

 text = "JavaScript is more fun than \nJava or JavaBeans!";

 # "JavaScript is more fun than

    Java or JavaBeans!"

 pattern.exec(text);

 # ["JavaScript", "Script"]

 pattern.exec(text);

 # ["Java", ""]

 pattern.exec(text);

 # null

（六）小例

1、在input框里输入用户名后，点击点我后浏览器窗口弹出刚刚输入的用户名

 <body>

         <input type="text" id="user" />

         <input type="button" onclick="GETDATA();" value="点我"/>

         <script>

             function GETDATA() {

                 var i = document.getElementById('user');

                 alert(i.value);

             }

         </script>

 </body>

2、定时器

 <script>

     //定义函数

     function func() {

         console.log(1);       //console端打印数据

     }

     //创建一个定时器

     setInterval("f1();",5000);      //5000表示5秒 单位毫秒

 </script>

 #setInterval（“执行函数”，“时间”）表示创建一个定时器；console.log（“数据”）在console打印输入的数据

3、跑马灯（滚动字符）

 <body>

 <div id="i1">欢迎习大大莅临指导</div>

 <script>

     function func() {

         //根据ID获取指定标签的内容，定于局部变量

         var tag = document.getElementById('i1');

         //获取标签内部的内容

         var content = tag.innerText;

         var f = content.charAt(0);

         var l = content.substring(1,content.length);

         var new_content = l + f;

         tag.innerText = new_content;

     }

     setInterval('func()',500);

 </script>

 </body>

 #最终效果“欢迎习大大莅临指导”字符滚动显示，结合了字符串处理和定时器

（四）DOM

DOM（文档对象模型(Document Object Model)）：是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有VBScript、ActiveX、以及微软自家的DHTML格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作

1、查找元素
① 直接查找

 document.getElementById             根据ID获取一个标签

 document.getElementsByName          根据name属性获取标签集合

 document.getElementsByClassName     根据class属性获取标签集合

 document.getElementsByTagName       根据标签名获取标签集合

② 间接查找

 parentNode          // 父节点

 childNodes          // 所有子节点

 firstChild          // 第一个子节点

 lastChild           // 最后一个子节点

 nextSibling         // 下一个兄弟节点

 previousSibling     // 上一个兄弟节点

 parentElement           // 父节点标签元素

 children                // 所有子标签

 firstElementChild       // 第一个子标签元素

 lastElementChild        // 最后一个子标签元素

 nextElementtSibling     // 下一个兄弟标签元素

 previousElementSibling  // 上一个兄弟标签元素

③ 扩展练习

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <div id = "i1">我是i1</div>

     <a>aaaaa</a>

     <a>bbbbb</a>

     <a>ccccc</a>

 </body>

 </html>

1、直接查找练习.html

 　　　　　　//获取ID

 >document.getElementById('i1');

 < <div id="i1">我是i1</div>

 　　　　　　//获取内容

 >document.getElementById('i1').innerText

 <"我是i1"

 　　　　　　//重新赋值

 >document.getElementById('i1').innerText = '新内容'

 <"新内容"

 　　　　　　//获取tagname集合

 >document.getElementsByTagName('a');

 <[<a>aaaaa</a>, <a>bbbbb</a>, <a>ccccc</a>]

 　　　　　　//获取集合指定索引元素

 >document.getElementsByTagName('a')[1]

 < <a>bbbbb</a>

 　　　　　　//对单个元素重新赋值

 >document.getElementsByTagName('a')[1].innerText = 66666;

 <66666

 　　　　　　//对集合中所有文件赋值

 >tags = document.getElementsByTagName('a');

 <[<a>aaaaa</a>, <a>66666</a>, <a>ccccc</a>]

 >for(var i=0;i<tags.length;i++){tags[i].innerText=99999;}

 <99999

 >tags

 <[<a>99999</a>, <a>99999</a>, <a>99999</a>]

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <div>

         <div>c1Sibling</div>

         <div>c1</div>

     </div>

     <div>

         <div>c2Sibling</div>

         <div id="i1">c2</div>

     </div>

     <div>

         <div>c3Sibling</div>

         <div>c3</div>

     </div>

 </body>

 </html>

2、间接查找练习.html

     //获取ID

 >tag = document.getElementById('i1');

 < <div id="i1">c2</div>

     //获取ID的父项

 >tag.parentElement

 <   <div>

         <div>c2Sibling</div>

         <div id="i1">c2</div>

     </div>

     //获取父项的子节点

 >tag.parentElement.children

 < [<div>c2Sibling</div>,<div id="i1">c2</div>]

     //获取父项的大兄弟

 >tag.parentElement.previousElementSibling

 >   <div>

     <div>c1Sibling</div>

     <div>c1</div>

     </div>

2、内容操作

①内容

 innerText   文本

 outerText

 innerHTML   HTML内容

 innerHTML

 value       值

②属性

 attributes                // 获取所有标签属性

 setAttribute(key,value)   // 设置标签属性

 getAttribute(key)         // 获取指定标签属性

 /*

 var atr = document.createAttribute("class");

 atr.nodeValue="democlass";

 document.getElementById('n1').setAttributeNode(atr);

 */

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

     <input type="button" value="全选"  onclick="CheckAll();"/>

     <input type="button" value="取消" onclick="CancelAll();"/>

     <input type="button" value="反选" onclick="ReverseCheck();"/>

     <table border="" >

         <thead>

         </thead>

         <tbody id="tb">

             <tr>

                 <td><input type="checkbox" /></td>

                 <td>111</td>

                 <td>222</td>

             </tr>

             <tr>

                 <td><input type="checkbox" /></td>

                 <td>111</td>

                 <td>222</td>

             </tr>

             <tr>

                 <td><input type="checkbox" /></td>

                 <td>111</td>

                 <td>222</td>

             </tr>

             <tr>

                 <td><input type="checkbox" /></td>

                 <td>111</td>

                 <td>222</td>

             </tr>

         </tbody>

     </table>

     <script>

         function CheckAll(ths){

             var tb = document.getElementById('tb');

             var trs = tb.childNodes;

             for(var i =0; i<trs.length; i++){

                 var current_tr = trs[i];

                 if(current_tr.nodeType==1){

                     var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];

                     inp.checked = true;

                 }

             }

         }

         function CancelAll(ths){

             var tb = document.getElementById('tb');

             var trs = tb.childNodes;

             for(var i =0; i<trs.length; i++){

                 var current_tr = trs[i];

                 if(current_tr.nodeType==1){

                     var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];

                     inp.checked = false;

                 }

             }

         }

         function ReverseCheck(ths){

             var tb = document.getElementById('tb');

             var trs = tb.childNodes;

             for(var i =0; i<trs.length; i++){

                 var current_tr = trs[i];

                 if(current_tr.nodeType==1){

                     var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];

                     if(inp.checked){

                         inp.checked = false;

                     }else{

                         inp.checked = true;

                     }

                 }

             }

         }

     </script>

 </body>

 </html>

3、Class操作

className                // 获取所有类名

classList.remove(cls)    // 删除指定类

classList.add(cls)       // 添加

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <div>

         <div>c1Sibling</div>

         <div>c1</div>

     </div>

     <div>

         <div>c2Sibling</div>

         <div id="i1">c2</div>

     </div>

     <div>

         <div>c3Sibling</div>

         <div>c3</div>

     </div>

 </body>

 </html>

 class简单操作.html

class简单操作.html

         //获取ID

 >document.getElementById('i1');

 < <div id="i1">c2</div>

         //赋值变量

 >tag = document.getElementById('i1');

 < <div id="i1">c2</div>

         //设置class样式

 >tag.className = 'c1';

 > "c1"

         //设置成功

 >tag

 < <div id="i1" class="c1">c2</div>

         //修改class样式

 >tag.className = 'c2';

 < "c2"

 >tag

 < <div id="i1" class="c2">c2</div>

         //获取样式列表

 >tag.classList

 < ["c2"]

         //样式列表集合中添加样式

 >tag.classList.add('c3')

 < undefined

 >tag

 < <div id="i1" class="c2 c3">c2</div>

         //样式列表集合中删除样式

 >tag.classList.remove('c2');

 < undefined

 >tag

 < <div id="i1" class="c3">c2</div>

知识点：

 <div onclick="func();">点我</div>

 <script>

      function func() {

       }

 </script>

 #当鼠标点击到div后，执行func()函数

<1>模态对话框：点击打开后，出现弹出，点击取消，弹出关掉

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .c1 {

             position: fixed;

             background-color: #423A3A;

             right: 0;

             left: 0;

             top:0;

             bottom: 0;

             opacity: 0.6;

             z-index: 9;

         }

         .c2 {

             position: fixed;

             background-color: white;

             height: 400px;

             width: 500px;

             top:50%;

             left: 50%;

             z-index: 10;

             margin-top: -200px;

             margin-left: -250px;

         }

         .hide {

             display: none;

         }

     </style>

 </head>

 <body>

     <div>

         <input type="button" value="打开" onclick="ShowModel();"/>

     </div>

     <div id="i1" class="c1 hide"></div>

     <div id="i2" class="c2 hide">

         <input type="button" value="取消" onclick="HideModel();"/>

     </div>

     <script>

         function ShowModel() {

             document.getElementById('i1').classList.remove('hide');

             document.getElementById('i2').classList.remove('hide');

         }

         function HideModel() {

             document.getElementById('i1').classList.add('hide');

             document.getElementById('i2').classList.add('hide');

         }

     </script>

 </body>

 </html>

<2>选项框（全选、反选、取消）：点击全选所有选项框选上；点击取消后恢复；点击反选，只选择未选上的选项框

 <body>

     <div>

         <table>

             <thead>

                 <tr>

                     <td>选择</td>

                     <td>IP地址</td>

                 </tr>

             </thead>

             <tbody id="tb">

                 <tr>

                     <td><input type="checkbox"/></td>

                     <td>192.168.2.201</td>

                 </tr>

                 <tr>

                     <td><input type="checkbox"/></td>

                     <td>192.168.2.202</td>

                 </tr>

                 <tr>

                     <td><input type="checkbox"/></td>

                     <td>192.168.2.203</td>

                 </tr>

             </tbody>

         </table>

         <input type="button" value="全选" onclick="ChooseAll();"/>

         <input type="button" value="取消" onclick="CancleAll();"/>

         <input type="button" value="反选" onclick="ReverseAll();"/>

     </div>

     <script>

         function ChooseAll() {

             var tbody = document.getElementById('tb');

             var tr_list = tbody.children;

             for(var i=0;i<tr_list.length;i++){

                 var current_tr = tr_list[i];

                 var checkbox = current_tr.children[0].children[0];

                 checkbox.checked = true

             }

         }

         function CancleAll() {

             var tbody = document.getElementById('tb');

             var tr_list = tbody.children;

             for(var i=0;i<tr_list.length;i++){

                 var current_tr = tr_list[i];

                 var checkbox = current_tr.children[0].children[0];

                 checkbox.checked = false

             }

         }

          function ReverseAll() {

             var tbody = document.getElementById('tb');

             var tr_list = tbody.children;

             for(var i=0;i<tr_list.length;i++){

                 var current_tr = tr_list[i];

                 var checkbox = current_tr.children[0].children[0];

                 if(checkbox.checked ){

                     checkbox.checked=false

                 }else {

                      checkbox.checked=true

                 }

             }

         }

     </script>

 </body>

<3>后台管理左侧菜单：点击菜单一、菜单一展开，其他菜单关闭；点击其他菜单亦可

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .hide{

             display: none;

         }

         .item .header{

             height: 35px;

             background-color: #2459a2;

             color: white;

             line-height: 35px;

         }

     </style>

 </head>

 <body>

     <div style="width: 300px">

         <div class="item">

             <div id='i1' class="header" onclick="ChangeMenu('i1');">菜单一</div>

             <div class="content hide">

                 <div>内容1</div>

                 <div>内容1</div>

                 <div>内容1</div>

             </div>

         </div>

         <div class="item">

             <div id='i2' class="header" onclick="ChangeMenu('i2');">菜单二</div>

             <div class="content hide">

                 <div>内容2</div>

                 <div>内容2</div>

                 <div>内容2</div>

             </div>

         </div>

         <div class="item">

             <div id='i3' class="header" onclick="ChangeMenu('i3');">菜单三</div>

             <div class="content hide">

                 <div>内容3</div>

                 <div>内容3</div>

                 <div>内容3</div>

             </div>

         </div>

     </div>

     <script>

         function ChangeMenu(nid) {

             var current_header = document.getElementById(nid)

             var item_list = current_header.parentElement.parentElement.children

             for(var i=0;i<item_list.length;i++){

                 var current_item = item_list[i];

                 current_item.children[1].classList.add('hide');

             }

             current_header.nextElementSibling.classList.remove('hide');

         }

     </script>

 </body>

（五）jQuery

1、简介

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
　　jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

 > $('#i1')

 < [<div id="i1">James</div>]

 > document.getElementById('i1')

 < <div id="i1">James</div>

 >$('#i1')[0]

 < <div id="i1">James</div>

jQuery转换为Dom

 > $('#i1')

 < [<div id="i1">James</div>]

 > d1 = document.getElementById('i1')

 < <div id="i1">James</div>

 > $(d1)

 < [<div id="i1">James</div>]

Dom转换为jQuery

2、选择器
<1>基本选择器
① id选择器

 <div id="id">solo</div>

 $('#id')

② clss选择器

 <div class="c1">solo</div>

 $('.c1')

③ 标签选择器

 查找所有的a标签：

 <div id="id">James</div>

 <div class="c1">

     <a>f</a>

 </div>

 <div class="c1">

     <a>f</a>

     <a>f</a>

 </div>

 $('a')

④ *表示所有

 $('*')

⑤ 多查询（selector1,selector2,selectorN）

 <div id="id">James</div>

 <div class="c1">

     <a>f</a>

 </div>

 <div class="c1">

     <a>f</a>

     <a>f</a>

 </div>

 $('#id,.c1,a')

<2>层级选择器
① ancestor descendant(查找包含的所有-子子孙孙)

 <div id="i1" class="c1">

     <div>

         <a>a</a>

     </div>

     <a>b</a>

     <a>c</a>

 </div>

 > $('#i1 a')

 < [<a>a</a>, <a>b</a>, <a>c</a>]

② parent > child(只查找下一级所有-儿子)

 <div id="i1" class="c1">

     <div>

         <a>a</a>

     </div>

     <a>b</a>

     <a>c</a>

 </div>

 > $('#i1 > a')

 < [<a>b</a>, <a>c</a>]

 下一级包含

③ prev + next(查找同级相邻的一个)

 <div id="i1" class="c1">

     <div>

         <input name="name"/>

         <a>a</a>

     </div>

     <a>b</a>

     <input name="name"/>

     <a>c</a>

     <a>d</a>

 </div>

 > $('input + a')

 < [<a>a</a>, <a>c</a>]

 同级向下匹配一个

④ prev ~ siblings(查找同级下面所有)

 <div id="i1" class="c1">

     <div>

         <input name="name"/>

         <a>a</a>

     </div>

     <a>b</a>

     <input name="name"/>

     <a>c</a>

     <a>d</a>

 </div>

 > $('input ~ a')

 < [<a>a</a>, <a>c</a>, <a>d</a>]

 同级向下匹配所有

<3>基本筛选器

 <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>

 ul.html

#操作html文件

① :first（获取匹配的第一个元素）

 > $('ul li:first')

 < [<li>list item 1</li>]

② :last（获取匹配的最后一个元素）

 > $('ul li:last')

 < [<li>list item 5</li>]

③ :eq（匹配一个给定索引值的元素）

 > $('ul li:eq(1)')

 < [<li>list item 2</li>]

④ :gt（匹配所有大于给定索引值的元素）

 > $('ul li:gt(2)')

 < [<li>list item 4</li>, <li>list item 5</li>]

⑤ :lt （匹配所有小于给定索引值的元素）

 > $('ul li:lt(2)')

 < [<li>list item 1</li>, <li>list item 2</li>]

⑥ 其他

 :not(selector)    去除所有与给定选择器匹配的元素

 :even                 匹配所有索引值为偶数的元素，从 0 开始计

 :odd                   匹配所有索引值为奇数的元素，从 0 开始计数

 :lang(language)  选择指定语言的所有元素

 :header              匹配如 h1, h2, h3之类的标题元素

 :animated           匹配所有正在执行动画效果的元素

 :focus                  匹配当前获取焦点的元素

 :root                    选择该文档的根元素

 :targe                  选择由文档URI的格式化识别码表示的目标元素

<4>属性选择器
① [ ]（匹配包含给定属性的元素）

 <div class="c1">

     <div James="">123</div>

     <div James="">456</div>

 </div>

 > $('div[James]')

 < [<div james="">123</div>, <div james="">456</div>]

② [a="b"]（匹配给定的属性是某个特定值的元素）

 <div class="c1">

     <div James="">123</div>

     <div James="">456</div>

 </div>

 > $('div[James="456"]')

 < [<div james="">456</div>]

③ 其他

 [attribute!=value]    匹配所有不含有指定的属性，或者属性不等于特定值的元素

 [attribute^=value]    匹配给定的属性是以某些值开始的元素

 [attribute$=value]    匹配给定的属性是以某些值结尾的元素

 [attribute*=value]    匹配给定的属性是以包含某些值的元素

 [selector1][selector2][selectorN]    复合属性选择器，需要同时满足多个条件时使用

<5>表单选择器

 <form>

   <input type="text" />

   <input type="checkbox" />

   <input type="radio" />

   <input type="image" />

   <input type="file" />

   <input type="submit" />

   <input type="reset" />

   <input type="password" />

   <input type="button" />

   <select><option/></select>

   <textarea></textarea>

   <button></button>

 </form>

操作html文件

① :input（匹配所有 input, textarea, select 和 button 元素）

 > $(':input')

 < [<input type="text">, <input type="checkbox">, <input type="radio">, <input type="image">, <input type="file">, <input type=

 "submit">, <input type="reset">, <input type="password">, <input type="button">, <select>…</select>, <textarea></textarea>,

 <button></button>]

② :text（匹配所有的单行文本框）

 > $(':text')

 < [<input type="text">]

③ :password（匹配所有密码框）

 > $(':password')

 < [<input type="password">]

④ :radio（匹配所有单选按钮）

 > $(':radio')

 < [<input type="radio">]

⑤ :checkbox（匹配所有复选框）

 > $(':checkbox')

 < [<input type="checkbox">]

⑥ :submit（匹配所有提交按钮）

 > (':submit')

 < [<input type="submit">, <button></button>]

⑦ :image（匹配所有图像域）

 > $(':image')

 < [<input type="image">]

⑧ :reset（匹配所有重置按钮）

 > $(':reset')

 < [<input type="reset">]

⑨ :button（匹配所有按钮）

 (':button')

 [<input type="button">, <button></button>]

⑩ :file（匹配所有文件域）

 > $(':file')

 < [<input type="file">]

<6>表单对象属性
① :enabled（匹配所有可编辑元素）

 <form>

   <input name="email" disabled="disabled" />

   <input name="id" />

 </form>

 > $("input:enabled")

 < [<input name="id" />]

② :disabled（匹配所有不可编辑元素）

 <form>

   <input name="email" disabled="disabled" />

   <input name="id" />

 </form>

 > $("input:disabled")

 < [<input name="email" disabled="disabled" />]

③ :checked（匹配所有选中的被选中元素）

 <form>

   <input type="checkbox" name="newsletter" checked="checked" value="Daily" />

   <input type="checkbox" name="newsletter" value="Weekly" />

   <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />

 </form>

 > $("input:checked")

 < [<input type="checkbox" name="newsletter" checked="checked" value="Daily" />,

 <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />]

④ :selected（匹配所有选中的option元素）

 <select>

   <option value="">Flowers</option>

   <option value="" selected="selected">Gardens</option>

   <option value="">Trees</option>

 </select>

 > $("select option:selected")

 < [<option value="" selected="selected">Gardens</option>]

3、筛选器
<1>查找
① next（紧邻的同级下一个元素）

 <p>Hello</p>

 <span>Hello Again</span>

 <div>

     <span>And Again</span>

 </div>

 > $("p").next()

 < [<span>Hello Again</span>]

② prev（紧邻的同级上一个元素）

 <p>Hello</p>

 <span>Hello Again</span>

 <div>

     <span>And Again</span>

 </div>

 > $("div").prev()

 < [<span>Hello Again</span>]

③ parent（匹配元素的唯一父元素）

 <div>

     <p>Hello</p>

     <p>Hello</p>

 </div>

 > $("p").parent()

 < [<div><p>Hello</p><p>Hello</p></div>]

④ children（匹配元素所有子元素的元素集合）

 <div>

     <p>Hello</p>

     <span>

          <p>Hello</p>

     </span>

 </div>

 > $("div").children()

 < [<p>Hello</p>, <span><p>Hello</p></span>]

⑤ siblings（匹配元素所有同级元素的元素集合）

 <div>

     <p>Hello</p>

     <span>Hello Again</span>

     <p>Hello</p>

 </div>

 > $("span").siblings()

 < [<p>Hello</p>, <p>Hello</p>]

⑥ find（搜索所有与指定表达式匹配的元素）

 <div>

     <p>Hello</p>

     <span>Hello Again</span>

     <p>Hello</p>

 </div>

 > ("div").find('span')

 < [<span>Hello Again</span>]

⑦ 其他

 closest    从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素

 nextAll    查找当前元素之后所有的同辈元素

 nextUntil    查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止

 offsetParent    返回第一个匹配元素用于定位的父节点

 parents    取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选

 parentsUntil    查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止

 prevAll    查找当前元素之前所有的同辈元素

 prevUntil    查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止

 siblings    取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选

<2>过滤
① hasClass（检查当前的元素是否含有某个特定的类，如果有，则返回true）

 # 给包含有某个类的元素进行一个动画

 <div class="protected"></div><div></div>

 $("div").click(function(){

   if ( $(this).hasClass("protected") )

     $(this)

       .animate({ left: -10 })

       .animate({ left: 10 })

       .animate({ left: -10 })

       .animate({ left: 10 })

       .animate({ left: 0 });

 })

② 其他

 eq        获取当前链式操作中第N个jQuery对象，返回jQuery对象

 first        获取第一个元素

 last        获取最后个元素

 filter        筛选出与指定表达式匹配的元素集合

 is        根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true

 map        将一组元素转换成其他数组（不论是否是元素数组）

 has        保留包含特定后代的元素，去掉那些不含有指定后代的元素

 not        从匹配元素的集合中删除与指定表达式匹配的元素

 slice        选取一个匹配的子集

4、属性
一、HTML代码/文本/值
① html（获取和设置匹配元素的内容）

 <div>

     <p>Hello</p>

     <span>Hello Again</span>

     <p>Hello</p>

 </div>

 # 获取数据

 > $('span').html()

 < "Hello Again"

 # 更改数据

 > $('span').html('<p>James</p>')

 < [<span><p>James</p></span>]

② text（获取和设置匹配元素的内容）

 <div>

     <p>Hello</p>

     <span>Hello Again</span>

     <p>Hello</p>

 </div>

 # 获取数据

 > $('span').text()

 < "Hello Again"

 # 更改数据

 > $('span').text('<p>James</p>')

 < [<span><p>James</p></span>]

 > $('span').text()

 < "<p>James</p>"

 #此时的p是个字符而不是标签

③ val（获取和设置input、select框中的内容）

 <input name="James" type="text" value="默认值"/>

 # 获取input框中的内容

 > $('input').val()

 < "默认值"

 # 重设input框中的内容

 > $('input').val('新输入的值')

 < [<input name="James" type="text" value="默认值">]

 > $('input').val()

 < "新输入的值"

二、CSS
① addClass（为每个匹配的元素添加指定的类名）

 <div>

     <span>And Again</span>

 </div>

 > $('span').addClass('James')

 < [<span class="James">And Again</span>]

② removeClass（从所有匹配的元素中删除全部或者指定的类）

 <div>

     <span class="James">And Again</span>

 </div>

 > $('span').removeClass('James')

 < [<span class>And Again</span>]

③ toggleClass（如果存在就删除、不存在就添加）

 <div>

     <span class="James">And Again</span>

 </div>

 > ('span').toggleClass('James')

 < [<span class>And Again</span>]

 > $('span').toggleClass('James')

 > [<span class="James">And Again</span>]

三、属性
① attr（设置或返回自定义属性值）

 <input id="i1" type="button" value="开关" />

 # 获取值

 > $('#i1').attr('type')

 < "button"

 > $('#i1').attr('value')

 < "开关"

 > $('#i1').attr('id')

 < "i1"

 # 设置值

 > $('#i1').attr('name','James')

 < [<input id="i1" type="button" value="开关" name="James">]

② removeAttr（删除自定义属性）

 <input id="i1" type="button" value="开关" name=“James”/>

 > $('#i1')

 < [<input id="i1" type="button" value="开关" name="James">]

 > $('#i1').removeAttr('name')

 < [<input id="i1" type="button" value="开关">]

③ prop（专门用于checkbox，radio）

 <input id="i1" type="checkbox" checked="checked" />

 # 判断

 > ('input:checkbox').prop('checked')

 < true

 # 设置

 > $('input:checkbox').prop('checked',false)

 < [<input id="i1" type="checkbox" checked="checked">]

 > $('input:checkbox').prop('checked')

 < false

 # 禁用

 > $('input:checkbox').prop('disabled')

 < false

 > $('input:checkbox').prop('disabled',true)

 < [<input id="i1" type="checkbox" checked="checked" disabled>]

④ removeProp（用来删除由.prop()方法设置的属性集）

 <input id="i1" type="checkbox" checked="checked" />

 > $('input:checkbox').prop('disabled',true)

 < [<input id="i1" type="checkbox" checked="checked" disabled>]

 > $('input:checkbox').removeProp('disabled')

 < [<input id="i1" type="checkbox" checked="checked">]

4、文档处理

<1>内部添加
① append（向每个匹配的元素内部追加内容）

 <div class="d1">

     <p>第一行</p>

 </div>

 > $("div").append("<p>第零行</p>");

 < [<div class="d1"><p>第零行</p><p>第一行</p></div>]

② prepend（向每个匹配的元素内部前置内容）

 <div class="d1">

     <p>第一行</p>

 </div>

 > $("div").prepend("<p>第零行</p>");

 < [<div class="d1"><p>第零行</p><p>第一行</p></div>]

<2>外部添加
① after（在每个匹配的元素之后插入内容）

 <div class="d1">

     <p>第一行</p>

 </div>

 > $("div").after("<div>下面另起一行</div>");

 < [<div class="d1"><p>第一行</p></div>]

 > $("div")

 < [<div class="d1"><p>第一行</p></div>, <div>下面另起一行</div>]

② before（在每个匹配的元素之前插入内容）

 <div class="d1">

     <p>第一行</p>

 </div>

 > $("div").before("<div>上面另起一行</div>");

 < [<div class="d1"><p>第一行</p></div>]

 > $("div")

 < [<div>上面另起一行</div>, <div class="d1"><p>第一行</p></div>]

<3>删除
① empty（删除匹配的元素集合中内容不删除标签）

 <div class="d1">

     <p>第一行</p>

 </div>

 > $("p").empty();

 < [<p></p>]

 > $("div")

 < [<div class="d1"><p></p></div>]

② remove（删除匹配的元素集合包括标签）

 <div class="d1">

     <p>第一行</p>

 </div>

 > $("p").remove();

 < [<p>第一行</p>]

 > $("div")

 < [<div class="d1"></div>]

<4>复制
① clone（克隆匹配的DOM元素并且选中这些克隆的副本）

 <div class="d1">

     <b>第零行</b>

     <p>第一行</p>

 </div>

 > $("b").clone().insertBefore("p");

 < [<b>第零行</b>]

 > $("div")

 < [<div class="d1"><b>第零行</b><b>第零行</b><p>第一行</p></div>]

5、CSS
<1>css
① css（获取和设置匹配元素的样式属性）

 <div>

     <span>And Again</span>

 </div>

 # 获取样式值

 > $('span').css('color')

 < "rgb(0, 0, 0)"

 # 设置样式值

 > $('span').css('color','red')

 < [<span style="color: red;">And Again</span>]

 > $('span').css({'color':'#dddddd','background':'blue'})

 < [<span style="color: red;">And Again</span>]

 > $('span')

 < [<span style="color: rgb(221, 221, 221); background: blue;">And Again</span>]

<2>位置
① offset（获取和设置匹配元素在整个html的相对坐标）

 <div id="i1"></div>

     <div style="height: 100px;width:100px;overflow: auto">

         <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

         <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

         <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

     </div>

 <div id="i2"></div>

 <div style="height: 1000px;"></div>

 # 获取偏移量

 > $('#i2').offset()

 < Object {top: 108, left: 8}

 > $('#i2').offset().top

 < 108

 > $('#i2').offset().left

 < 8

 > $('#i2').offset({top:100,left:300})

 < [<div id="i2" style="position: relative; top: -8px; left: 292px;> "></div>]

 < $('#i2').offset()

 > Object {top: 100, left: 300}

② position（获取匹配元素相对父元素的坐标)

 <div style="height: 200px">000</div>

 <div style="position: relative">

     <div style="height: 100px">123</div>

     <div id="i1" style="position: absolute">456</div>

 </div>

 > $('#i1').position()

 < Object {top: 100, left: 0}

 > $('#i1').position().top

 < 100

③ scrollTop（获取和设置滚动条到顶部的坐标）

 <div style="height: 100px;width:100px;overflow: auto">

     <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

     <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

     <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

 </div>

 <div style="height: 1000px;"></div>

 # 获取滚动条坐标

 > $(window).scrollTop()

 < 0

 > $('div').scrollTop()

 < 424

 # 设置滚动条坐标

 > $(window).scrollTop(200)

 < [Window]

 > $(window).scrollTop()

 < 200

④ scrollLeft（获取和设置滚动条到左侧的坐标）

 <div style="height: 100px;width:100px;overflow: auto">

     <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

     <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

     <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

 </div>

 <div style="height: 1000px;width: 2000px"></div>

 # 获取

 > $(window).scrollLeft()

 < 0

 # 设置

 > $(window).scrollLeft(300)

 < [Window]

 > $(window).scrollLeft()

 < 300

<3>尺寸

 height        取得匹配元素当前计算的高度值（px）

 innerHeight        获取第一个匹配元素内部区域高度（包括补白、不包括边框）

 outerHeight        获取第一个匹配元素外部高度（默认包括补白和边框）

 width        取得第一个匹配元素当前计算的宽度值（px）

 innerWidth        获取第一个匹配元素内部区域宽度（包括补白、不包括边框）

 outerWidth        获取第一个匹配元素外部宽度（默认包括补白和边框）

6、事件

<1>事件处理
① on（在选择元素上绑定一个或多个事件的事件处理函数）

 # 点击p标签打印标签内容

 $("p").on("click", function(){

 alert( $(this).text() );

 });

② off（off方法移除用on绑定的事件处理程序）

 # 移出on绑定的事件

 $("p").off()

③ bind（为每个匹配元素的特定事件绑定事件处理函数）

 # 点击p标签打印标签内容

 $("p").bind("click", function(){

   alert( $(this).text() );

 });

<2>事件委派
① delegate（指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数）

 #使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）--关键

 # 当点击div的button标签时，隐藏或显示 p 元素

 div style="background-color:red">

 <p>这是一个段落。</p>

 <button>请点击这里</button>

 </div>

 $("div").delegate("button","click",function(){

   $("p").slideToggle();

 });

② undelegat（删除由 delegate() 方法添加的一个或多个事件处理程序）

 # 从p元素删除由 delegate() 方法添加的所有事件处理器

 $("p").undelegate();

<3>事件
① click（给元素绑定事件，点击触发函数调用执行）

 # 所有的p标签点击后隐藏

 $("p").click( function () { $(this).hide(); });

jQuery经典案例

1、选择框全选、取消以及反选（反选用到了三种方法）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <table border="">

         <input type="button" value="全选" onclick="checkAll();"/>

         <input type="button" value="取消" onclick="cancleAll();"/>

         <input type="button" value="反选" onclick="reversAll();"/>

         <thead>

             <tr>

                 <td>选项</td>

                 <td>IP</td>

                 <td>端口</td>

             </tr>

         </thead>

         <tbody id="tb">

             <tr>

                 <td><input  type="checkbox" /></td>

                 <td>1.1.1.1</td>

                 <td>80</td>

             </tr>

             <tr>

                 <td><input  type="checkbox" /></td>

                 <td>1.1.1.1</td>

                 <td>80</td>

             </tr>

             <tr>

                 <td><input type="checkbox" /></td>

                 <td>1.1.1.1</td>

                 <td>80</td>

             </tr>

             <tr>

                 <td><input type="checkbox" /></td>

                 <td>1.1.1.1</td>

                 <td>80</td>

             </tr>

             <tr>

                 <td><input type="checkbox" /></td>

                 <td>1.1.1.1</td>

                 <td>80</td>

             </tr>

         </tbody>

     </table>

     <script src="jquery-1.12.4.js"></script>

     <script>

         /*全选 把选择框设置成true*/

         function checkAll() {

             $('#tb :checkbox').prop('checked',true);

         }

         /*取消 把选择框设置成false*/

         function cancleAll() {

             $('#tb :checkbox').prop('checked',false);

         }

         /*反选 利用DOM的this.checked进行判断和赋值*/

         function reversAll() {

             $('#tb :checkbox').each(function (k) {

                 //k当索引

                 if(this.checked){

                     this.checked=false;

                 }else {

                     this.checked=true;

                 }

             })

         }

         /*反选 利用jQuery当$(this).prop('checked')时表示判断，括号里添加false和true时表示设置*/

         function reversAll() {

             $('#tb :checkbox').each(function (k) {

                 //k当索引

                 if($(this).prop('checked')){

                     $(this).prop('checked',false)

                 }else {

                     $(this).prop('checked',true)

                 }

             })

         }

          /*反选 三元运算 var v=条件？真值：假值*/

         function reversAll() {

             $('#tb :checkbox').each(function (k) {

                 //k当索引

                 var v = $(this).prop('checked') ? false : true;

                 $(this).prop('checked',v)

             })

         }

     </script>

 </body>

 </html>

 选择框.html

2、两行代码搞定菜单栏（点击展开、其他关闭）

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .header{

             background-color: black;

             color: wheat;

         }

         .content{

             min-height: 50px;

         }

         .hide{

             display: none;

         }

     </style>

 </head>

 <body>

     <div style="height:400px;width: 200px;border: 1px solid #dddddd">

         <div class="item">

             <div class="header">标题一</div>

             <div id="i1" class="content hide">内容</div>

         </div>

         <div class="item">

             <div class="header">标题二</div>

             <div class="content hide">内容</div>

         </div>

         <div class="item">

             <div class="header">标题三</div>

             <div class="content hide">内容</div>

         </div>

     </div>

     <script src="jquery-1.12.4.js"></script>

     <script>

         $('.item .header').click(function () {

             $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')

         })

     </script>

 </body>

 </html>

 菜单栏.html

3、模态对话框以及资产管理页面雏形

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .hide{

             display: none;

         }

         .modal{

             position: fixed;

             top: 50%;

             left: 50%;

             width: 500px;

             height: 400px;

             margin-left: -250px;

             margin-top: -250px;

             background-color: #eeeeee;

             z-index: 10;

         }

         .shadow{

             position: fixed;

             top: 0;

             left: 0;

             right: 0;

             bottom: 0;

             opacity: 0.6;

             background-color: black;

             z-index: 9;

         }

     </style>

 </head>

 <body>

     <input type="button" value="添加" onclick="addElement();"/>

     <table border="">

         <tr>

             <td target="hostname">1.1.1.11</td>

             <td target="port">80</td>

             <td>

                 <a class="edit">编辑</a> | <a>删除</a>

             </td>

         </tr>

         <tr>

             <td target="hostname">1.1.1.12</td>

             <td target="port">80</td>

             <td>

                 <a class="edit">编辑</a> | <a>删除</a>

             </td>

         </tr>

         <tr>

             <td target="hostname">1.1.1.13</td>

             <td target="port">80</td>

             <td>

                 <a class="edit">编辑</a> | <a>删除</a>

             </td>

         </tr>

         <tr>

             <td target="hostname">1.1.1.14</td>

             <td target="port">80</td>

             <td>

                 <a class="edit">编辑</a> | <a>删除</a>

             </td>

         </tr>

     </table>

     <div class="modal hide">

         <div>

             <input name="hostname" type="text"  />

             <input name="port" type="text" />

         </div>

         <div>

             <input type="button" value="取消" onclick="cancelModal();" />

         </div>

     </div>

     <div class="shadow hide"></div>

     <script src="jquery-1.12.4.js"></script>

     <script>

         function addElement() {

             $('.modal,.shadow').removeClass('hide');

         }

         function cancelModal() {

             $('.modal,.shadow').addClass('hide');

             $('.modal input[type="text"]').val("")

         }

         $('.edit').click(function () {

             $('.modal,.shadow').removeClass('hide');

             var tds = $(this).parent().prevAll();

             tds.each(function () {

                 var n = $(this).attr("target");

                 var text = $(this).text();

                 $('.modal input[name="'+n+'"]').val(text)

             })

         })

     </script>

 </body>

 </html>

 资产管理页.html

4、点击开灯关灯效果

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .hide{

             display: none;

         }

     </style>

 </head>

 <body>

     <input id="i1" type="button" value="开关" />

     <div class="c1 hide">假装现在有效果了</div>

     <script src="jquery-1.12.4.js"></script>

     <script>

         $('#i1').click(function () {

             /* 第一种方法

             if($('.c1').hasClass('hide')){

                 $('.c1').removeClass('hide')

             }else {

                 $('.c1').addClass('hide')

             }   */

             $('.c1').toggleClass('hide')

         })

     </script>

 </body>

 </html>

 #备注：利用toggleClass()

5、升级版菜单栏-购物商场点击不同的菜单显示不同的内容
① 菜单和内容设置对应的自定义属性

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .hide{

             display: none;

         }

         .menu{

             height: 38px;

             background-color: #eeeeee;

             line-height: 38px;

         }

         .active{

             background-color: brown;

         }

         .menu .menu-item{

             float: left;

             border-right: 1px solid red;

             padding: 0 5px;

             cursor: pointer;

         }

         .content{

             min-height: 100px;

             border: 1px solid #eeeeee;

         }

     </style>

 </head>

 <body>

     <div style="width: 700px;margin:0 auto">

         <div class="menu">

             <div  class="menu-item active" a="">菜单一</div>

             <div  class="menu-item" a="">菜单二</div>

             <div  class="menu-item" a="">菜单三</div>

         </div>

         <div class="content">

             <div b="">内容一</div>

             <div class="hide"  b="">内容二</div>

             <div class="hide" b="">内容三</div>

         </div>

     </div>

     <script src="jquery-1.12.4.js"></script>

     <script>

         $('.menu-item').click(function () {

             $(this).addClass('active').siblings().removeClass('active');

             var target = $(this).attr('a');

             $('.content').children('[b="'+target+'"]').removeClass('hide').siblings().addClass('hide');

         })

     </script>

 </body>

 </html>

 升级版菜单栏.html

② 不设置对应的属性，直接用索引

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .hide{

             display: none;

         }

         .menu{

             height: 38px;

             background-color: #eeeeee;

             line-height: 38px;

         }

         .active{

             background-color: brown;

         }

         .menu .menu-item{

             float: left;

             border-right: 1px solid red;

             padding: 0 5px;

             cursor: pointer;

         }

         .content{

             min-height: 100px;

             border: 1px solid #eeeeee;

         }

     </style>

 </head>

 <body>

     <div style="width: 700px;margin:0 auto">

         <div class="menu">

             <div  class="menu-item active" a="">菜单一</div>

             <div  class="menu-item" a="">菜单二</div>

             <div  class="menu-item" a="">菜单三</div>

         </div>

         <div class="content">

             <div b="">内容一</div>

             <div class="hide"  b="">内容二</div>

             <div class="hide" b="">内容三</div>

         </div>

     </div>

     <script src="jquery-1.12.4.js"></script>

     <script>

         $('.menu-item').click(function () {

             $(this).addClass('active').siblings().removeClass('active');

             $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');

         })

     </script>

 </body>

 </html>

 索引菜单栏.html

6、添加、删除、复制列表

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <input id="t1" type="text" />

     <input id="a1" type="button" value="添加" />

     <input id="a2" type="button" value="删除" />

     <input id="a3" type="button" value="复制" />

     <ul id="u1">

         <li>1</li>

         <li>2</li>

         <li>3</li>

         <li>4</li>

     </ul>

     <script src="jquery-1.12.4.js"></script>

     <script>

         $('#a1').click(function () {

             var v = $('#t1').val();

             var temp = "<li>" + v + "</li>";

             $('#u1').append(temp);

         })

         $('#a2').click(function () {

             var index = $('#t1').val();

             $('#u1 li').eq(index).remove();

         })

         $('#a3').click(function () {

             var index = $('#t1').val();

             var v = $('#u1 li').eq(index).clone();

             console.log(v[0]);

             $('#u1').append(v);

         })

     </script>

 </body>

 </html>

 增删复制.html

7、模态对话框完善删除和添加功能

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .hide{

             display: none;

         }

         .modal{

             position: fixed;

             top: 50%;

             left: 50%;

             width: 500px;

             height: 400px;

             margin-left: -250px;

             margin-top: -250px;

             background-color: #eeeeee;

             z-index: 10;

         }

         .shadow{

             position: fixed;

             top: 0;

             left: 0;

             right: 0;

             bottom: 0;

             opacity: 0.6;

             background-color: black;

             z-index: 9;

         }

     </style>

 </head>

 <body>

     <a onclick="addElement();">添加</a>

     <table border="" id="tb">

         <tr>

             <td target="hostname">1.1.1.11</td>

             <td target="port">80</td>

             <td target="ip">80</td>

             <td>

                 <a class="edit">编辑</a> | <a class="del">删除</a>

             </td>

         </tr>

         <tr>

             <td target="hostname">1.1.1.12</td>

             <td target="port">80</td>

             <td target="ip">80</td>

             <td>

                 <a class="edit">编辑</a> | <a class="del">删除</a>

             </td>

         </tr>

         <tr>

             <td target="hostname">1.1.1.13</td>

             <td target="port">80</td>

             <td target="ip">80</td>

             <td>

                 <a class="edit">编辑</a> | <a class="del">删除</a>

             </td>

         </tr>

         <tr>

             <td target="hostname">1.1.1.14</td>

             <td target="port">80</td>

             <td target="ip">80</td>

             <td>

                 <a class="edit">编辑</a> | <a class="del">删除</a>

             </td>

         </tr>

     </table>

     <div class="modal hide">

         <div>

             <input name="hostname" type="text"  />

             <input name="port" type="text" />

             <input name="ip" type="text" />

         </div>

         <div>

             <input type="button" value="取消" onclick="cancelModal();" />

             <input type="button" value="确定" onclick="confirmModal();" />

         </div>

     </div>

     <div class="shadow hide"></div>

     <script src="jquery-1.12.4.js"></script>

     <script>

         $('.del').click(function () {

             $(this).parent().parent().remove();

         });

         function  confirmModal() {

             var tr = document.createElement('tr');

             var td1 = document.createElement('td');

             td1.innerHTML = "11.11.11.11";

             var td2 = document.createElement('td');

             td2.innerHTML = "";

             $(tr).append(td1);

             $(tr).append(td2);

             $('#tb').append(tr);

             $(".modal,.shadow").addClass('hide');

 //            $('.modal input[type="text"]').each(function () {

 //                // var temp = "<td>..."

 //

 //

 //

 //            })

         }

         function  addElement() {

             $(".modal,.shadow").removeClass('hide');

         }

         function cancelModal() {

             $(".modal,.shadow").addClass('hide');

             $('.modal input[type="text"]').val("");

         }

         $('.edit').click(function(){

             $(".modal,.shadow").removeClass('hide');

             // this

             var tds = $(this).parent().prevAll();

             tds.each(function () {

                 // 获取td的target属性值

                 var n = $(this).attr('target');

                 // 获取td中的内容

                 var text = $(this).text();

                 var a1 = '.modal input[name="';

                 var a2 = '"]';

                 var temp = a1 + n + a2;

                 $(temp).val(text);

             });

 //            var port = $(tds[0]).text();

 //            var host = $(tds[1]).text();

 //

 //            $('.modal input[name="hostname"]').val(host);

 //            $('.modal input[name="port"]').val(port);

             // 循环获取tds中内容

             // 获取 <td>内容</td> 获取中间的内容

             // 赋值给input标签中的value

         });

     </script>

 </body>

 </html>

 完善版资产管理页.html

8、抽屉网点赞动态效果

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .container{

             padding: 50px;

             border: 1px solid #dddddd;

         }

         .item{

             position: relative;

             width: 30px;

         }

     </style>

 </head>

 <body>

     <div class="container">

         <div class="item">

             <span>赞</span>

         </div>

     </div>

     <div class="container">

         <div class="item">

             <span>赞</span>

         </div>

     </div>

     <div class="container">

         <div class="item">

             <span>赞</span>

         </div>

     </div>

     <div class="container">

         <div class="item">

             <span>赞</span>

         </div>

     </div>

     <script src="jquery-1.12.4.js"></script>

     <script>

         $('.item').click(function () {

             addFavor(this);

         })

         function addFavor(self) {

             var fontSize = 15;

             var top = 0;

             var right= 0;

             var opacity = 1;

             var tag = document.createElement('span');

             $(tag).text('+1');

             $(tag).css('color','green');

             $(tag).css('position','absolute');

             $(tag).css('fontSize',fontSize + 'px');

             $(tag).css('right',right + 'px');

             $(tag).css('top',top + 'px');

             $(tag).css('opacity',opacity + 'px');

             $(self).append(tag);

             var obj = setInterval(function () {

                 fontSize = fontSize + 10;

                 top = top - 10;

                 right = right - 10;

                 opacity = opacity - 0.1;

                 $(tag).css('fontSize',fontSize + 'px');

                 $(tag).css('right',right + 'px');

                 $(tag).css('top',top + 'px');

                 $(tag).css('opacity',opacity);

                 if(opacity < 0 ){

                     clearInterval(obj);

                     $(tag).remove();

                 }

             },40);

         }

     </script>

 </body>

 </html>

 点赞.html

 #备注：利用CSS和定时器

9、做个可以随鼠标移动的条框

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

     <div style="border: 1px solid #ddd;width: 600px;position: absolute;">

         <div id="title" style="background-color: black;height: 40px;"></div>

         <div style="height: 300px;"></div>

     </div>

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

 <script>

     $(function(){

         $('#title').mouseover(function(){

             $(this).css('cursor','move');

         });

         $("#title").mousedown(function(e){

             //console.log($(this).offset());

             var _event = e || window.event;

             var ord_x = _event.clientX;

             var ord_y = _event.clientY;

             var parent_left = $(this).parent().offset().left;

             var parent_top = $(this).parent().offset().top;

             $('#title').on('mousemove', function(e){

                 var _new_event = e || window.event;

                 var new_x = _new_event.clientX;

                 var new_y = _new_event.clientY;

                 var x = parent_left + (new_x - ord_x);

                 var y = parent_top + (new_y - ord_y);

                 $(this).parent().css('left',x+'px');

                 $(this).parent().css('top',y+'px');

             })

         });

         $("#title").mouseup(function(){

             $("#title").off('mousemove');

         });

     })

 </script>

 </body>

 </html>

 拖拽框.html

10、事件委派delegate练习

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <input id="t1" type="text" />

 <input id="a1" type="button" value="添加" />

 <ul id="u1">

     <li>1</li>

     <li>2</li>

 </ul>

 <script src="jquery-1.12.4.js"></script>

     <script>

         $('#a1').click(function () {

             var v = $('#t1').val();

             var temp = "<li>" + v + "</li>";

             $('#u1').append(temp);

         });

         // 新添加的li不能执行

 //        $('ul li').click(function () {

 //            var v = $(this).text();

 //            alert(v);

 //        })

         // 新添加的li不能执行

 //        $('ul li').bind('click',function () {

 //            var v = $(this).text();

 //            alert(v);

 //        })

         // 新添加的li不能执行

 //        $('ul li').on('click', function () {

 //            var v = $(this).text();

 //            alert(v);

 //        })

         // 新添加的li能执行

         $('ul').delegate('li','click',function () {

             var v = $(this).text();

             alert(v);

         })

     </script>

 </body>

 </html>

 delegate绑定未来元素.html

11、多事件绑定执行顺序

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <a onclick="return ClickOn()" href="https://home.cnblogs.com/u/lianzhilei/">走你1</a>

     <a id="i1" href="http://https://home.cnblogs.com/u/lianzhilei/">走你2</a>

     <script src="jquery-1.12.4.js"></script>

     <script>

         function ClickOn() {

             alert(123);

             return true;

         }

         $('#i1').click(function () {

             alert(456);

             return false;

         })

     </script>

 </body>

 </html>

 click绑定多个事件.html

12、登录表单验证

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .error{

             color: red;

         }

     </style>

 </head>

 <body>

     <form id="f1" action="s5.html" method="POST">

         <div><input name="n1" tex = "用户名" type="text" /></div>

         <div><input name="n2" tex = "密码" type="password" /></div>

         <div><input name="n3" tex = "邮箱" type="text" /></div>

         <div><input name="n4" tex = "端口" type="text" /></div>

         <div><input name="n5" tex = "IP" type="text" /></div>

         <input type="submit" value="提交" />

     </form>

     <script src="jquery-1.12.4.js"></script>

     <script>

         // 当页面框架加载完毕后，自动执行

 //        $(function(){

 //            $.Login('#f1')

 //        });

 //

         $(function(){

             // 当页面所有元素完全加载完毕后，执行

             $(':submit').click(function () {

                 $('.error').remove();

                 var flag = true;

                 $('#f1').find('input[type="text"],input[type="password"]').each(function () {

                     var v = $(this).val();

                     var n = $(this).attr('tex');

                     if(v.length <= 0){

                         flag = false;

                         var tag = document.createElement('span');

                         tag.className = "error";

                         tag.innerHTML = n + "必填";

                         $(this).after(tag);

                         // return false;

                     }

                 });

                 return flag;

         });

         });

     </script>

 </body>

 </html>

 表单验证.html

13、后台管理编辑框 (重要)

 $(function(){

     BindSingleCheck('#edit_mode', '#tb1');

 });

 function BindSingleCheck(mode, tb){

     $(tb).find(':checkbox').bind('click', function(){

         var $tr = $(this).parent().parent();

         if($(mode).hasClass('editing')){

             if($(this).prop('checked')){

                 RowIntoEdit($tr);

             }else{

                 RowOutEdit($tr);

             }

         }

     });

 }

 function CreateSelect(attrs,csses,option_dict,item_key,item_value,current_val){

     var sel= document.createElement('select');

     $.each(attrs,function(k,v){

         $(sel).attr(k,v);

     });

     $.each(csses,function(k,v){

         $(sel).css(k,v);

     });

     $.each(option_dict,function(k,v){

         var opt1=document.createElement('option');

         var sel_text = v[item_value];

         var sel_value = v[item_key];

         if(sel_value==current_val){

             $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).attr('selected',true).appendTo($(sel));

         }else{

             $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).appendTo($(sel));

         }

     });

     return sel;

 }

 STATUS = [

     {'id': 1, 'value': "在线"},

     {'id': 2, 'value': "下线"}

 ];

 BUSINESS = [

     {'id': 1, 'value': "车上会"},

     {'id': 2, 'value': "二手车"}

 ];

 function RowIntoEdit($tr){

     $tr.children().each(function(){

         if($(this).attr('edit') == "true"){

             if($(this).attr('edit-type') == "select"){

                 var select_val = $(this).attr('sel-val');

                 var global_key = $(this).attr('global-key');

                 var selelct_tag = CreateSelect({"onchange": "MultiSelect(this);"}, {}, window[global_key], 'id', 'value', select_val);

                 $(this).html(selelct_tag);

             }else{

                 var orgin_value = $(this).text();

                 var temp = "<input value='"+ orgin_value+"' />";

                 $(this).html(temp);

             }

         }

     });

 }

 function RowOutEdit($tr){

     $tr.children().each(function(){

         if($(this).attr('edit') == "true"){

             if($(this).attr('edit-type') == "select"){

                 var new_val = $(this).children(':first').val();

                 var new_text = $(this).children(':first').find("option[value='"+new_val+"']").text();

                 $(this).attr('sel-val', new_val);

                 $(this).text(new_text);

             }else{

                 var orgin_value = $(this).children().first().val();

                 $(this).text(orgin_value);

             }

         }

     });

 }

 function CheckAll(mode, tb){

     if($(mode).hasClass('editing')){

         $(tb).children().each(function(){

             var tr = $(this);

             var check_box = tr.children().first().find(':checkbox');

             if(check_box.prop('checked')){

             }else{

                 check_box.prop('checked',true);

                 RowIntoEdit(tr);

             }

         });

     }else{

         $(tb).find(':checkbox').prop('checked', true);

     }

 }

 function CheckReverse(mode, tb){

     if($(mode).hasClass('editing')){

         $(tb).children().each(function(){

             var tr = $(this);

             var check_box = tr.children().first().find(':checkbox');

             if(check_box.prop('checked')){

                 check_box.prop('checked',false);

                 RowOutEdit(tr);

             }else{

                 check_box.prop('checked',true);

                 RowIntoEdit(tr);

             }

         });

     }else{

         //

         $(tb).children().each(function(){

             var tr = $(this);

             var check_box = tr.children().first().find(':checkbox');

             if(check_box.prop('checked')){

                 check_box.prop('checked',false);

             }else{

                 check_box.prop('checked',true);

             }

         });

     }

 }

 function CheckCancel(mode, tb){

     if($(mode).hasClass('editing')){

         $(tb).children().each(function(){

             var tr = $(this);

             var check_box = tr.children().first().find(':checkbox');

             if(check_box.prop('checked')){

                 check_box.prop('checked',false);

                 RowOutEdit(tr);

             }else{

             }

         });

     }else{

         $(tb).find(':checkbox').prop('checked', false);

     }

 }

 function EditMode(ths, tb){

     if($(ths).hasClass('editing')){

         $(ths).removeClass('editing');

         $(tb).children().each(function(){

             var tr = $(this);

             var check_box = tr.children().first().find(':checkbox');

             if(check_box.prop('checked')){

                 RowOutEdit(tr);

             }else{

             }

         });

     }else{

         $(ths).addClass('editing');

         $(tb).children().each(function(){

             var tr = $(this);

             var check_box = tr.children().first().find(':checkbox');

             if(check_box.prop('checked')){

                 RowIntoEdit(tr);

             }else{

             }

         });

     }

 }

 edit_row.js

edit_row.js

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style>

         .edit-mode{

             background-color: #b3b3b3;

             padding: 8px;

             text-decoration: none;

             color: white;

         }

         .editing{

             background-color: #f0ad4e;

         }

     </style>

 </head>

 <body>

     <div style="padding: 20px">

         <input type="button" onclick="CheckAll('#edit_mode', '#tb1');" value="全选" />

         <input type="button" onclick="CheckReverse('#edit_mode', '#tb1');" value="反选" />

         <input type="button" onclick="CheckCancel('#edit_mode', '#tb1');" value="取消" />

         <a id="edit_mode" class="edit-mode"   onclick="EditMode(this, '#tb1');">进入编辑模式</a>

     </div>

     <table border="">

         <thead>

         <tr>

             <th>选择</th>

             <th>主机名</th>

             <th>端口</th>

             <th>状态</th>

         </tr>

         </thead>

         <tbody id="tb1">

             <tr>

                 <td><input type="checkbox" /></td>

                 <td edit="true">v1</td>

                 <td>v11</td>

                 <td edit="true" edit-type="select" sel-val="" global-key="STATUS">在线</td>

             </tr>

             <tr>

                 <td><input type="checkbox" /></td>

                 <td edit="true">v1</td>

                 <td>v11</td>

                 <td edit="true" edit-type="select" sel-val="" global-key="STATUS">下线</td>

             </tr>

             <tr>

                 <td><input type="checkbox" /></td>

                 <td edit="true">v1</td>

                 <td>v11</td>

                 <td edit="true" edit-type="select" sel-val="" global-key="STATUS">在线</td>

             </tr>

         </tbody>

     </table>

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

     <script type="text/javascript" src="edit_row.js"></script>

     <script>

         /*

          监听是否已经按下control键

          */

         window.globalCtrlKeyPress = false;

         window.onkeydown = function(event){

             if(event && event.keyCode == 17){

                 window.globalCtrlKeyPress = true;

             }

         };

         window.onkeyup = function(event){

             if(event && event.keyCode == 17){

                 window.globalCtrlKeyPress = false;

             }

         };

         /*

          按下Control，联动表格中正在编辑的select

          */

         function MultiSelect(ths){

             if(window.globalCtrlKeyPress){

                 var index = $(ths).parent().index();

                 var value = $(ths).val();

                 $(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){

                     $(this).parent().parent().children().eq(index).children().val(value);

                 });

             }

         }

     </script>

 </body>

 </html>

 edit_row.html

edit_row.html

码农公寓

相关文章