jQuary

http://jquery.cuishifeng.cn/

（一）查找元素

DOM： 10个左右

jQuery：

选择器，直接找到某个或者某类标签

1.id

$('#id')

2.class

$(".c1")

3.标签

</div>

</div>

</div>

$('a') //找出所有a标签

4.组合获取

$('a,.c2',#i1) //同时获取a标签和c2类和i1标签，多个用逗号隔开

5.层级找

$('#i10 a') 找i10下面的子子孙孙a

$('#i10>a') 找i10下面的儿子

6.基本筛选器：

</div>

$('#i10>a:first') //找到i10下面第一个a标签，有:first就有:last

$('#i10>a:eq(index)') //根据索引找,index=0开始，代表第一个索引位置

7.属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id='i10' class='c1'>
    <div>
        <a>asdfddd</a>
    </div>
    <a liyang='123'>123</a>
    <a liyang='456'>456</a>
    <a>f</a>
    <a>f</a>
</div>
<div class='c1'>
    <a>f</a>
</div>
<div class='c1'>
    <div class='c2'> abc</div>
</div>

</body>
</html>

找出具有liyang属性的标签

$('[liyang]') 这个说是可以把<a liyang='123'>123</a>和<a liyang='456'>456</a>都找出来，但是我测试只会默认匹配出第一个

$('[liyang="123"]') 这个倒是可以精确查找

$("input[type='text']") 也可以这么组合使用，找input标签下面的text属性

$("input[type='text']") 等同于 $(':text')

8.表单对象

<input type="text" disabled /> //加上disabled表示框框不可编辑

<input type="text" /> //默认可编辑

$(':disabled') //找到所有不可编辑的标签

实例：

多选，反选，全选

$("#rpt :checkbox").prop('checked'); 获取值

$("#rpt :checkbox").prop('checked',true); 设置值

id值后面有空格，然后再冒号，不然识别不了

$("#rpt :checkbox").each(function(k){

//k当前索引位置

//this,DOM,当前循环元素

//$(this),jQuery

}

var v = 条件?真值:假值

筛选器

$(this).next() 获取下一个标签

$(this).nextAll() 获取下面所有标签

$(this).nextUntil('#i1') 直到找到某个id，class也适用

$(this).prev() 获取上一个标签

$(this).prevAll() 获取上面所有标签

$(this).parent() 获取父标签

$(this).parents() 获取所有父标签，以列表形式展现直到找到祖宗

$(this).children() 获取所有子标签

$(this).siblings() 获取兄弟标签

文本操作：

$(..).text() ##获取文本内容

$(..).text("<a>1a</a>") ##设置文本内容

$(..).html() ##获取文本内容，解析标签

$(..).html("<a>1a</a>") ##设置文本内容，解析标签

$(..).val() ##获取value的值

$(..).val(..) ##设置value的值

样式操作：

addClass()

removeClass()

toggleClass()

属性操作：

$(..).attr('key') / $(..).attr('key','value') #专门用于做自定义属性

$(..).removeAttr('key') #删除属性

$(..).prop('key') # 专门用于checkbox，radio ,获取值

$(..).prop('key',true) # 专门用于checkbox，radio ,设置值

ps:

index 获取索引位置

文档处理：

append

prepend

after

before

remove

empty

clone

css处理

$('t1').css('样式名称'，'样式值')

点赞：

$('t1').append()

$('t1').remove()

setInterval #定时器

透明度 1 》0

position

字体大小，位置

位置：

$(window).scrollTop() /$('div').scrollTop() 获取

$(window).scrollTop(0) 设置

scrollLeft([value])

offset 指定标签在html中的坐标

position() 指定标签相对父标签（relative）标签的坐标

下面有三层div，当position('i1'),这里父标签是最外层的relative ，而不是第二层。

<div>

</div>

$('i1').height() 获取标签的高度，纯高度,80px

$('i1').innerHeight() 只获取边框+纯高度+?

$('i1').outerHeight() 只获取边框+纯高度+?

$('i1').outerHeight(true) 只获取边框+纯高度+?

事件

DOM：三种绑定方式

jQuery：

$('.c1').click(function(){})

$('.c1').bind('click',function(){})

$('.c1').unbind('click',function(){})

通过委托绑定

$('.c1').delegate('a','click',function(){}) a:标签

$('.c1').undelegate('a','click',function(){})

$('.c1').on('click',function(){})

$('.c1').off('click',function(){})

阻止事件发生

return false

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

$(function(){

$(......)

})

jQuery扩展

$.extend

$.fn.extend

(function(){

var status = 1;

//封装变量

})(jQuery)

（二）操作元素

一、jQuery选择器：

简单调用jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="i1">123</div>
<script src="jquery-1.12.4.js"></script>
<script>
    $("#i1")
</script>

</body>
</html>

jQuery和Dom操作比较

tab菜单示例

<!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>
        <tr>
            <th>选项</th>
            <th>IP</th>
            <th>PORT</th>

        </tr>
        </thead>
        <tbody id="rpt" >
            <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.2</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.3</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.4</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery-1.12.4.js"></script>
    <script>

        function checkAll(){
           $("#rpt :checkbox").prop('checked',true)
        }

        function cancelAll(){
           $("#rpt :checkbox").prop('checked',false)
        }

        function reverseAll(){
           $("#rpt :checkbox").each(function(){
           if($(this).prop('checked')){
               $(this).prop('checked',false);
           }else{
               $(this).prop('checked',true);
           }

           })
        }

    </script>

</body>
</html>

View Code

当然上面那个reverseAll（）函数也可以使用三元运算代替：

function reverseAll(){
           $("#rpt :checkbox").each(function(){
               <!--var v = 条件?真值:假值-->
               var v = $(this).prop('checked')?false:true;
               $(this).prop('checked',v);

           })

筛选器

<!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 red;">
        <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.js"></script>
    <script>
        <!--1.当前点击的标签 $(this)-->
        <!--2.获取某个标签的下一个标签-->
        <!--3.获取某个标签的父标签-->
        <!--4.获取所有兄弟标签（不包括自己）-->
        <!--5.添加样式和移除样式-->
        <!--$('.i1').addClass('hide')-->
        <!--$('.i1').removeClass('hide')-->

        $('.header').click(function(){
        console.log(this);
        <!--筛选器：在选择器基础上再选择一次-->
        <!--获取当前标签的下一个标签-->
        $(this).next().removeClass('hide');
        $(this).parent().siblings().find('.content').addClass('hide');

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

View Code

$(this).parent().siblings().find('.content')

find可以去直接找某个标签，包括前面parent()和siblings（），里面也可以加标签参数具体找哪一个。

上面例子里面两行也可以用上面一行实现，即链式编程。

模态对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .modal{
        position: fixed;
        top: 50%;
        left: 50%;
        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: 8;
    }

    .hide{
        display: none;
    }
</style>
<body>
    <a onclick="addElement();">添加</a>
    <table border="1">
        <tr>
            <td>1.1.1.1</td>
            <td>80</td>
            <td>
                <a class="edit">编辑</a> | <a>删除</a>
            </td>

        </tr>
        <tr>
            <td>1.1.1.2</td>
            <td>81</td>
            <td>
                <a class="edit">编辑</a> | <a>删除</a>
            </td>

        </tr>
        <tr>
            <td>1.1.1.3 </td>
            <td>82</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="cancelMode()"/>
        </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 cancelMode(){
        $(".modal,.shadow").addClass('hide');
        <!--清理数据-->
        $(".modal input[type='text']").val("");
        }

        $('.edit').click(function(){
        $(".modal,.shadow").removeClass('hide');
        var tds = $(this).parent().prevAll();
        <!--循环获取tds中内容-->
        <!--获取<td>内容</td>获取中间的内容-->
        <!--赋值给input标签中的value-->
        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>

View Code

也可以这样，优势在于当我新增一列数据时候不用再修改调用函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .modal{
        position: fixed;
        top: 50%;
        left: 50%;
        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: 8;
    }

    .hide{
        display: none;
    }
</style>
<body>
    <a onclick="addElement();">添加</a>
    <table border="1">
        <tr>
            <td target="hostname">1.1.1.1</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.2</td>
            <td target="port">81</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">编辑</a> | <a>删除</a>
            </td>

        </tr>
        <tr>
            <td target="hostname">1.1.1.3 </td>
            <td target="port">82</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="cancelMode()"/>
        </div>
    </div>
    <div class="shadow hide"></div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function addElement(){
        $(".modal").removeClass('hide');
        $(".shadow").removeClass('hide');

        }

        function cancelMode(){
        $(".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();
            var a1 = '.modal input[name="';
            var a2 = '"]';
            var temp = a1 + n +a2;
            $(temp).val(text)

            })
        })
    </script>

</body>
</html>

View Code

开关（注释掉的方法和toggleClass方法都可以）

<!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">asdkfjadf</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>

点击目录一，出现内容一；点击目录二，出现内容二；点击目录三，出现内容三

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .hide{
        display: none;
        }
        .menu{
        height: 48px;
        background-color: #eeeeee;
        line-height: 48px;

        }

        .menu .menu-item{
        float: left;
        border-right: 1px solid red;
        padding: 0 5px;
        cursor: pointer;
        }

        .active{
        background-color: brown;
        }

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

View Code

也可以通过索引的方式实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .hide{
        display: none;
        }
        .menu{
        height: 48px;
        background-color: #eeeeee;
        line-height: 48px;

        }

        .menu .menu-item{
        float: left;
        border-right: 1px solid red;
        padding: 0 5px;
        cursor: pointer;
        }

        .active{
        background-color: brown;
        }

        .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">菜单一</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>



    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.menu-item').click(function(){
        $(this).addClass('active').siblings().removeClass('active');
        var v = $(this).index();
        $('.content').children().eq(v).removeClass('hide').siblings().addClass('hide');


        })


    </script>

</body>
</html>

View Code

实现新增，删除，复制页面条目

<!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="ul">
        <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>";
    <!--append():在末尾添加-->
    <!--$('#ul').append(temp);-->
    <!--prepend():在开头添加-->
    $('#ul').prepend(temp);


    <!--在上一层添加-->
    <!--$('#ul').after(temp);-->
    <!--$('#ul').before(temp);-->
    })

    $('#a2').click(function(){
    var index = $('#t1').val();
    $('#ul li').eq(index).remove();
    <!--$('#ul li').eq(index).empty();-->

    })

    $('#a3').click(function(){
    var index = $('#t1').val();
    var v = $('#ul li').eq(index).clone();
    $('#ul').append(v);


    })



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

View Code

jquery操作高度及位置操作：点赞

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

        <!--生成一个DOM对象，创建+1标签-->
        var tag = document.createElement('span');
        <!--使用text方法给新建的标签赋值-->
        $(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);
        
        <!--加定时器obj，每隔100ms执行一次，一直到opacity变成负数，清除定时器，删除标签-->
        var obj = setInterval(function(){
            fontSize = fontSize + 5;
            top = top - 5;
            right = right - 5;
            opacity = opacity - 0.2;

            $(tag).css('fontSize',fontSize+'px');
            $(tag).css('right',right+'px');
            $(tag).css('top',top+'px');
            $(tag).css('opacity',opacity);
            
            <!--这里不要用opacity=0判断，因为不一定有0值，可能直接跳到负数了-->
            if(opacity < 0){
              clearInterval(obj);
              $(tag).remove();
            }

        },100);


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

View Code

表单验证前戏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a onclick="return clickOn()" href="http://www.baidu.com">点我</a>
<script>
    function clickOn(){
    alert(123);
    <!--return true;-->
    return false;
    }
</script>
</body>
</html>

View Code

简单表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="test2.html" method="POST">
    <input type="text" />
    <input type="submit" value="提交">

</form>
<script src="jquery-1.12.4.js"></script>
<script>
    $(':submit').click(function(){
        <!--判断上一个标签有没有值-->
        var v = $(this).prev().val();
        if(v.length > 0){
           return true;
        }else{
           alert('请输入内容');
           return false;
        }
    })
</script>

</body>
</html>

View Code

当有多个input的时候的表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
        color: red;
        }
    </style>
</head>
<body>
<form id="f1" action="test3.html" method="POST">
    <div><input name="n1" type="text" /></div>
    <div><input name="n2" type="password" /></div>
    <div><input name="n3" type="text" /></div>
    <div><input name="n4" type="text" /></div>
    <div><input name="n5" type="text" /></div>

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

</form>
<script src="jquery-1.12.4.js"></script>
<script>
    $(':submit').click(function(){
       $('.error').remove();
       var flag = true;
       $('#f1').find('input[type="text"],input[type="password"]').each(function(){
          var v = $(this).val();
          if(v.length <= 0){
            flag = false;
            var tag = document.createElement('span');
            tag.className = "error";
            tag.innerHTML = "必填";
            $(this).after(tag);
            return false;
          }

       });
       return flag;

    })
</script>

</body>
</html>

View Code