JQuery------库

JQuery-------------模块、类库

集成了DOM/BOM/JS的类库

一、查找元素

　　DOM 10左右

　　JQuery:

　　　　选择器：

　　　　筛选：

　　ps:版本：

　　1.x:兼容性最好。1.12推荐

　　2.x

　　3.x

二、操作元素

三、参考的文档和手册：http://jquery.cuishifeng.cn/

先下载jsquery-1.12.4.js文件，复制到项目中，如图：

下载地址-》》jquery-1.12.4.js、jquery-1.12.4.min.js

在<script></script>中，用jQuery或$加.进行调用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="cssenjian"/> <!--引用其它样式文件-->
    <style>  /*自编样式*/

    </style>
</head>
<body>
    <div id="i1">123</div>
    <script src="jquery-1.12.4.min.js"></script> <!--引用其它js文件-->
    <script> //自定义编写的js
        jQuery
        $("#i1") //查找id为i1的元素
    </script>
</body>
</html>

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

转换：

jQuery内部调用的DOM对象，因此可以通过$('#i1')[0]来转换为DOM对象。　　

DOM对象转换为jQuery对象，用$()直接转换。

二、选择器：

直接找到某个或者某类标签：

1.id选择器：

<div id="id">James</div>
$('#id')

2.class

<div class="c1">James</div>
$('.c1')

3.标签选择器

找到所有a标签，$('a')

查找所有的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,seletorN)

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

4.组合：$('a,.c2,#i10')

5.层级选择器：

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

同级向下匹配所有

6.基本筛选器：

操作html文件：

<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

$('#i10 a:eq(1)') 索引的方式

①: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的格式化识别码表示的目标元素

更多...

7.属性选择器：

① [ ]（匹配包含给定属性的元素）

<div class="c1">
    <div James="123">123</div>
    <div James="456">456</div>
</div>

> $('div[James]')
< [<div james="123">123</div>, <div james="456">456</div>]

匹配自定义属性

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

<div class="c1">
    <div James="123">123</div>
    <div James="456">456</div>
</div>

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

匹配自定义属性以及值

③ 其他

[attribute!=value]    匹配所有不含有指定的属性，或者属性不等于特定值的元素
[attribute^=value]    匹配给定的属性是以某些值开始的元素
[attribute$=value]    匹配给定的属性是以某些值结尾的元素
[attribute*=value]    匹配给定的属性是以包含某些值的元素
[selector1][selector2][selectorN]    复合属性选择器，需要同时满足多个条件时使用

$('[alex]') 查找具有alex属性的标签

$('[alex="123"]')

$("input[type='text']") 简写成$(':text')

实例一：多选、反选、全选：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="全选" onclick="checkAll();">
    <input type="button" value="反选" onclick="reverseAll();">
    <input type="button" value="取消" onclick="cancelAll();">
    <table border="1">
        <thead>
            <th>选项</th>
            <th>IP</th>
            <th>端口</th>

        </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.min.js"></script>
    <script>
        function checkAll() {
            $('#tb :checkbox').prop('checked',true);
        }
        function cancelAll() {
            $('#tb :checkbox').prop('checked',false);
        }
        function reverseAll() {
            $(':checkbox').each(function (){ //自动循环所有元素,this代表当前循环的每一个元素
               // console.log(this) //打印当前循环的每个元素
                //DOM方式：
                /*
                if(this.checked){
                    this.checked = false;
                }else{
                    this.checked = true;
                }*/
                //JQuery方式：
//                if($(this).prop('checked')){
//                    $(this).prop('checked',false);
//                }else{
//                    $(this).prop('checked',true);
//                }
                //三元运算
                var v = $(this).prop('checked')?false:true;
                $(this).prop('checked',v)
            })


        }
    </script>
</body>
</html>

8.表单选择器

操作html文件：

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

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">​]

六、表单对象属性

① :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" />]

匹配选中的input框

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

<select>
  <option value="1">Flowers</option>
  <option value="2" selected="selected">Gardens</option>
  <option value="3">Trees</option>
</select>

> $("select option:selected")
< [<option value="2" selected="selected">Gardens</option>]

匹配选中的select下拉框

jQuery筛选器

一、查找

① 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    从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素
next
nextAll    查找当前元素之后所有的同辈元素
nextUntil    查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止
offsetParent    返回第一个匹配元素用于定位的父节点
parents    取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选
parentsUntil    查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止
prevAll    查找当前元素之前所有的同辈元素
prevUntil    查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止
siblings    取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选

更多...

查找实例:

<!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; 200px;border: 1px solid #dddddd">
        <div class="item">
            <div class="header">标题一</div>
            <div class="content">内容</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.min.js"></script>
    <script>
        $('.header').click(function () {
            //当前点击的标签$(this)
            //获取某个标签的下一个标签
            //获取某个标签的父标签
            //获取所有的兄弟标签，把其它标签的content加上一个hide
            //添加样式和移除样式
            //利用筛选器
//            $(this).next();
//            $(this).prev();
//            $(this).parent();
//            $(this).children();
//            $(this).sibling(); //获取兄弟标签
            $(this).next().removeClass('hide');
            $(this).parent().siblings().find('.content').addClass('hide');

        })    //所有选定的标签绑定onclick事件
    </script>
</body>
</html>

二、过滤器：

① 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        选取一个匹配的子集

更多...

jQuery属性

一、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>]

html获取和设置内容

② 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是个字符而不是标签

text获取和设置内容

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

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

# 获取input框中的内容
> $('input').val()
< "默认值"

# 重设input框中的内容
> $('input').val('新输入的值')
< [<input name="James" type="text" value="默认值">]
> $('input').val()
< "新输入的值"

获取和设置input框中内容

模态框实例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .modal{
            position: fixed;
            top:50%;
            left: 50%;
             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;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <a onclick="addElement();">添加</a>
    <table border="1 ">
        <tr>
            <td>1.1.1.11</td>
            <td>80</td>
            <td>
                <a class="edit">编辑</a> | <a>删除</a>
            </td>
        </tr>
        <tr>
            <td>1.1.1.12</td>
            <td>80</td>
            <td>
                <a class="edit">编辑</a> | <a>删除</a>
            </td>
        </tr>
        <tr>
            <td>1.1.1.13</td>
            <td>80</td>
            <td>
                <a class="edit">编辑</a> | <a>删除</a>
            </td>
        </tr>
        <tr>
            <td>1.1.1.14</td>
            <td>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.min.js"></script>
    <script>
        function addElement(){
//            $(".modal").removeClass('hide');
//            $(".shadow").removeClass('hide');
            $(".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中的内容
            //获取<td></td>中间的内容，放到编辑窗口的input里
            var port = $(tds[0]).text();
            var host = $(tds[1]).text();
            $('.modal input[name="hostname"]').val(host);
            $('.modal input[name="port"]').val(port);
        })
    </script>
</body>
</html>

二、CSS

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

<div>
    <span>And Again</span>
</div>

> $('span').addClass('James')
< [<span class="James">And Again</span>]

添加class

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

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

> $('span').removeClass('James')
< [<span class>And Again</span>]

删除class

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

自动切换

<!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">asdfadef</div>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $('#i1').click(function () {
//            if($('.c1').hasClass('hide')){
//                $('.c1').removeClass('hide');
//            }else {
//                $('.c1').addClass('hide');
//            }
            //jQuery封装了上述功能，一句就能实现开关效果
            $('.c1').toggle('hide');
        })
    </script>
</body>
</html>

三、属性操作　　

① 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">]

删除prop设置的属性

模态框改进：不靠顺序获取内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .modal{
            position: fixed;
            top:50%;
            left: 50%;
             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;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <a onclick="addElement();">添加</a>
    <table border="1 ">
        <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>删除</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>删除</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>删除</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>删除</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();">
            </div>
    </div>
    <div class="shadow hide"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function addElement(){
//            $(".modal").removeClass('hide');
//            $(".shadow").removeClass('hide');
            $(".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中的内容
//            //获取<td></td>中间的内容，放到编辑窗口的input里
//            var port = $(tds[0]).text();
//            var host = $(tds[1]).text();
//            $('.modal input[name="hostname"]').val(host);
//            $('.modal input[name="port"]').val(port);
            tds.each(function () {
                //this,代指每个td
                //获取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);


            });
        })
    </script>
</body>
</html>

切换菜单实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
            padding: 0 5px;
        }
        .active{
            background-color: brown;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style=" 700px;margin: 0 auto"></div>
        <div class="menu">
            <div class="menu-item active" a="1">菜单一</div>
            <div class="menu-item" a="2">菜单二</div>
            <div class="menu-item" a="3">菜单三</div>

        </div>
        <div class="content">
            <div b="1">内容一</div>
            <div class="hide" b="2">内容二</div>
            <div class="hide" b="3">内容三</div>
        </div>
        <script src="jquery-1.12.4.min.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>

上述实例用索引的方式实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
            padding: 0 5px;
        }
        .active{
            background-color: brown;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style=" 700px;margin: 0 auto"></div>
        <div class="menu">
            <div class="menu-item active">菜单一</div>
            <div class="menu-item">菜单二</div>
            <div class="menu-item">菜单三</div>

        </div>
        <div class="content">
            <div>内容一</div>
            <div class="hide">内容二</div>
            <div class="hide">内容三</div>
        </div>
        <script src="jquery-1.12.4.min.js"></script>

        <script>
            $('.menu-item').click(function () {
                $(this).addClass('active').siblings().removeClass('active');
                var v = $(this).index(); //拿到索引
                var m = $('.content').children().eq(v) //找到指定的内容
                m.removeClass('hide').siblings().addClass('hide');
            })
        </script>
</body>
</html>

jQuery文档处理

一、内部添加

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

<!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">
    <ul id="u1">
        <li>1</li>
        <li>2</li>
    </ul>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $('#a1').click(function () {
            var v = $('#t1').val();
            var temp = "<li>" + v + "</li>";
//            $('#u1').append(temp); //追加
            $('#u1').prepend(temp); //前面追加
        })
    </script>
</body>
</html>

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

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

> $("div").prepend("<p>第零行</p>");
< [<div class="d1"><p>第零行</p><p>第一行</p></div>]

内部最前插入

二、外部添加

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

同级上面添加

三、删除

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

清空内容含标签

四、复制

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

克隆

实例一、

<!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>
    </ul>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
        $('#a1').click(function () {
            var v = $('#t1').val();
            var temp = "<li>" + v + "</li>";
//            $('#u1').append(temp); //追加
//            $('#u1').prepend(temp); //前面追加
//            $('#u1').after(temp); //加到ul后面
            $('#u1').before(temp);
        })

        $('#a2').click(function () {
            var index = $('#t1').val();
            $('#u1 li').eq(index).remove(); //全删除
//            $('#u1 li').eq(index).empty(); //标签还在，清除内容

        })
        $('#a3').click(function () {
            var index = $('#t1').val();
            var v =$('#u1 li').eq(index).clone();
            $('#u1').append(v);
//            $('#u1 li').eq(index).remove(); //全删除
//            $('#u1 li').eq(index).empty(); //标签还在，清除内容

        })
    </script>
</body>
</html>

jQuery CSS

一、css

$('t1').css('样式名称','样式值')
点赞：
    - $('t1').append()
　　 - $('t1').remove()
    -setInterval
    -透明度 1 >> 0
    -position
    -字体大小，位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding: 50px;
            border: 1px solid #dddddd;
        }
        .item{
             30px;
            position: relative;
        }
    </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.min.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);

            $(self).append(tag);

            var obj = setInterval(function () {
                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);
//            var v = $(self);
        }
    </script>
</body>
</html>

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

获取和设置样式属性

二、位置

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

$(window)：获取当前窗口的对象

$(window).scrollTop() ---获取当前窗口的滚轮位置

$(window).scrollTop(0)---设置---返回滚轮顶部

offset ----指定标签在整个html文档中的坐标

$('#i1').offset()

>object {top:8,left:8}
$('#i2').offset().top()

<div id="i1"></div>
    <div style="height: 100px;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;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;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; 2000px"></div>

# 获取
> $(window).scrollLeft()
< 0
# 设置
> $(window).scrollLeft(300)
< [Window]
> $(window).scrollLeft()
< 300

滚动条到左侧的坐标

三、尺寸

height        取得匹配元素当前计算的高度值（px）
innerHeight        获取第一个匹配元素内部区域高度（包括补白、不包括边框）
outerHeight        获取第一个匹配元素外部高度（默认包括补白和边框）
width        取得第一个匹配元素当前计算的宽度值（px）
innerWidth        获取第一个匹配元素内部区域宽度（包括补白、不包括边框）
outerWidth        获取第一个匹配元素外部宽度（默认包括补白和边框）

jQuery事件

一、事件处理

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

# 点击p标签打印标签内容
 
$("p").on("click", function(){
alert( $(this).text() );
});

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

# 移出on绑定的事件
 
$("p").off()

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

# 点击p标签打印标签内容
 
$("p").bind("click", function(){
  alert( $(this).text() );
});

二、事件委派

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

#使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）--关键
 
# 当点击div的button标签时，隐藏或显示 p 元素
div style="
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>
 
$("div").delegate("button","click",function(){
  $("p").slideToggle();
});

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

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

三、事件

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

# 所有的p标签点击后隐藏
 
$("p").click( function () { $(this).hide(); });

dom中，不想让标签执行默认的事件，需要加上return并在自定义的function中，加上return false;，如果想继续执行默认事件，返回return true;，如：

<body>
    <a onclick="return ClickOn();" href="http://www.oldboyedu.com">走你</a>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function ClickOn() {
            alert(123);
            return false; #true;
        }
    </script>
</body>

使用jquery方式，实现上面效果：

<body>
    <a onclick="return ClickOn();" href="http://www.oldboyedu.com">走你</a>
    <a id="i1" href="http://www.oldboyedu.com">走你2</a>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#i1').click(function () {
            alert(456);
            return false;
        })
    </script>
</body>

阻止事件发生：

当页面框架加载完成之后，自动执行

//表示当页面所有元素完全加载完毕后执行
$().click(function){

})
//当页面框架加载完成之后执行
$(function(){

})

JQury扩展：

一、
$.extend({
    'wangsen':function(){
        return 'sb';
    }
})
var v = $.wangsen(); //调用
alter(v);
二、
$.fn.extend({
　　"hangyang":function(){
　　　　return 'db';
　　}
})
$('#i1').hangyang()  //调用

jQuery练习

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <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; 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%;
             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="1">
        <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>

电源按钮.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=" 700px;margin:0 auto">

        <div class="menu">
            <div  class="menu-item active" a="1">菜单一</div>
            <div  class="menu-item" a="2">菜单二</div>
            <div  class="menu-item" a="3">菜单三</div>
        </div>
        <div class="content">
            <div b="1">内容一</div>
            <div class="hide"  b="2">内容二</div>
            <div class="hide" b="3">内容三</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=" 700px;margin:0 auto">

        <div class="menu">
            <div  class="menu-item active" a="1">菜单一</div>
            <div  class="menu-item" a="2">菜单二</div>
            <div  class="menu-item" a="3">菜单三</div>
        </div>
        <div class="content">
            <div b="1">内容一</div>
            <div class="hide"  b="2">内容二</div>
            <div class="hide" b="3">内容三</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%;
             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="1" 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 = "8001";

            $(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;
             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; 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

<!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="1">
        <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="1" 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="2" 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="1" 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

相关阅读:
Unicode与JavaScript详解 [很好的文章转]
4种方法生成二维码（js 控制canvas 画出二维码）
JQuery-Dialog(弹出窗口，遮蔽窗口)
JQuery实现可编辑的表格
 7个提高效率的JavaScript调试工具
 jQuery中的编程范式
 10款CSS3按钮
 jQuery(function(){})与(function(){})(jQuery)的区别
 JQuery之ContextMenu(右键菜单)
糟糕的css用法 1
原文地址：https://www.cnblogs.com/ld1977/p/6642616.html