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（获取匹配的最后一个元素）

1
2
> $('ul li:last')
< [<li>​list item 5​</li>​]

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

1
2
> $('ul li:eq(1)')
< [<li>​list item 2​</li>​]

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

1
2
> $('ul li:gt(2)')
< [<li>​list item 4​</li>​, <li>​list item 5​</li>​]

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

1
2
> $('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 元素）

1
2
3
4
> $(':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（匹配所有的单行文本框）

1
2
> $(':text')
< [<input type=​"text">​]

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

1
2
> $(':password')
< [<input type=​"password">​]

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

1
2
> $(':radio')
< [<input type=​"radio">​]

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

1
2
> $(':checkbox')
< [<input type=​"checkbox">​]

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

1
2
> (':submit')
< [<input type=​"submit">​, <button>​</button>​]

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

1
2
> $(':image')
< [<input type=​"image">​]

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

1
2
> $(':reset')
< [<input type=​"reset">​]

⑨ :button（匹配所有按钮）

1
2
(':button')
[<input type=​"button">​, <button>​</button>​]

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

1
2
> $(':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;width: 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%;

            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;

        }

        .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%;

            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;

        }

        .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="width: 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="width: 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{

            width: 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;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

滚动条到左侧的坐标

三、尺寸

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

jQuery事件

一、事件处理

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

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

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

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

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

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

二、事件委派

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

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

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

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

三、事件

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

1
2
3
# 所有的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;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="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="width: 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="width: 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%;

            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="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;

            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

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

　　

JQuery------库的更多相关文章

  1. jquery库和cityselect插 件的省市 级联

    /*$(function(){ $("#select_provice").citySelect({ prov:"北京", nodata:"none&q ...

  2. 锋利的jQuery-1--解决jquery库和其他库的冲突

    在jquery中,$(美元符号)就是jquery的别名,也就是说使用$和使用jquery是一样的,在很多时候我们命名空间时,正是因为这 个$而产生的冲突的发生.比如说:$('#xmlas')和JQue ...

  3. jQuery基础学习3——jQuery库冲突

    默认情况下,jQuery用$作为自身的快捷方式. jQuery库在其他库之后导入 在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权 ...

  4. Jquery库及其他库之间的$命名冲突解决办法

    首先我们应该知道,在jquery中,$(美元符号)就是jquery的别名,也就是说使用$和使用jquery是一样的,在很多时候我们命名空间时,正是因为这个$而产生的冲突的发生.比如说:$('#xmla ...

  5. 如何避免jQuery库和其他库的冲突

    默认情形:jQuery用$作为自身的快捷方式 1. jQuery库在其他库之后导入 (1)方法:使用jQuery.noConflict()函数将变量$的控制权转移给其他库 (2)操作: (a)在js代 ...

  6. 如何解决jquery库的冲突问题

    多个库之间的冲突 当一个项目中引入多个第三方库的时候,由于没有命名空间的约束(命名空间就好比同一个目录下的文件夹一样,名字相同就会产生冲突),库与库之间发生冲突在所难免. 那么,既然有冲突的问题,为什 ...

  7. jQuery库冲突解决办法

    一次面试中面试官问到jQuery解决怎么冲突?虽然以前看过,但是我已经不记得了. 我的思路就是如果让我来设计,那我就用一个默认值$,不传参数,那就用$,最后就挂载在window.$上,传参数就用传入名 ...

  8. 跨域 jQuery库ajax请求

    XMLHttpRequest是原生ajax,缺点是使用起来比较繁琐. jQuery库提供了一组简洁的ajax请求方法. ajax() get() post() 具体使用参考官方API: http:// ...

  9. day050 前端Jquery库的使用

    一.导入jquery文件 <script src=" jquery库文件"></script> 二.选择标签 >>概念明晰: $是jQuery类 ...

  10. 解决jquery库和base库的冲突

    jquery库引用在base库之前,$的所有权就是base库的:而jquery库引用在base库之前后的话,$的所有权就是jquery库的.解决这种库之间的冲突可用以下方法解决: 情况一,jquery ...

随机推荐

  1. 八大 IoT 安全关键技术解析

    IoT 设备的增长也伴随着网络攻击的风险的增长,因此在设计产品时就必须考虑到系统的安全. 高德纳咨询公司最近的报告预测,到 2020 年,全世界将有 200.4 亿的物联网设备相互连接,且平均每天约还 ...

  2. MySQL数据库的全局锁和表锁

    1.概念 数据库锁设计的初衷是处理并发问题.作为多用户共享的资源,当出现并发访问的时候,数据库需要合理地控制资源的访问规则.而锁就是用来实现这些访问规则的重要数据结构. 2.锁的分类 根据加锁的范围, ...

  3. drf模块及源码

    drf中的APIView请求生命周期 APIView的as_view(局部禁用csrf) => 调用父类view中的as_view返回view()方法 => 自己的类调用自己的dispat ...

  4. 洛谷P2982 [USACO10FEB]慢下来Slowing down [2017年四月计划 树状数组01]

    P2982 [USACO10FEB]慢下来Slowing down 题目描述 Every day each of Farmer John's N (1 <= N <= 100,000) c ...

  5. Leetcode617.Merge Two Binary Trees合并二叉树

    给定两个二叉树,想象当你将它们中的一个覆盖到另一个上时,两个二叉树的一些节点便会重叠. 你需要将他们合并为一个新的二叉树.合并的规则是如果两个节点重叠,那么将他们的值相加作为节点合并后的新值,否则不为 ...

  6. Mysql的CMD操作

    一.MySQL登录和退出——在CMD模式操作 l  语法格式:mysql.exe –h主机名 –u用户名 –p密码 l  参数说明:   mysql.exe是mysql服务器的主应用程序.   -h代 ...

  7. webpack学习之—— Manifest

    Runtime runtime,以及伴随的 manifest 数据,主要是指:在浏览器运行时,webpack 用来连接模块化的应用程序的所有代码.runtime 包含:在模块交互时,连接模块所需的加载 ...

  8. uni-app官方教程学习手记

    本人微信公众号:前端修炼之路,欢迎关注 背景介绍 大概在今年的十月份左右,我了解到Dcloud推出了uni-app.当时下载了一个Hbuilder X,下载了官方提供的hello示例教程.经过一番努力 ...

  9. 【JZOJ3213】【SDOI2013】直径

    ╰(￣▽￣)╭ 小 Q最近学习了一些图论知识.根据课本,有如下定义. 树:无回路且连通的无向图,每条边都有正整数的权值来表示其长度.如果一棵树有N个节点,可以证明其有且仅有 N-1 条边. 路径:一棵 ...

  10. VOIP开源项目源码地址

    http://blog.csdn.net/hwz119/article/details/1781482     VoIP bookmarks from Klaus Darilion Below you ...