jQuery - 公主的骑士

jQuery

参考网址
模块《=》类库
DOM/BOM/JavaScript的类库

转换：
jquery对象[0] => Dom对象
Dom对象 => $(Dom对象)

一、查找元素
DOM：
有十个左右

1、找到标签

获取单个元素 document.getElementById('i1')
获取多个元素（列表）document.getElementsByTagName('div')
获取多个元素（列表）document.getElementsByClassName('c1')

a. 直接找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合

b. 间接
tag = document.getElementById('i1')

parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素

jQuery：
选择器，直接找到某个或者某类标签
1. id
　　$('#id')

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

3. 标签
<div id='i10' class='c1'>
　　<a>f</a>
　　<a>f</a>
</div>
<div class='c1'>
　　<a>f</a>
</div>
<div class='c1'>
<div class='c2'> </div>
</div>

$('a')

4. 组合a
<div id='i10' class='c1'>
　　<a>f</a>
　　<a>f</a>
</div>
<div class='c1'>
　　<a>f</a>
</div>
<div class='c1'>
<div class='c2'> </div>
</div>

$('a')
$('.c2')

$('a,.c2,#i10')

5. 层级
　　$('#i10 a') 　　找到#i10 下面的子子孙孙
　　$('#i10>a') 　　找到#i10 下面的儿子

6. 基本
　　:first　　$('#id>a:first') 找到#id下面的第一个a标签
　　:last　　$('#id>a:last') 找到#id下面的最后一个a标签
　　:eq()　　$('#id a:eq(0)') 根据a的索引找到第几个a标签（从0开始）

7. 属性
$('[alex]') 具有alex属性的所有标签
$('[alex="123"]') alex属性等于123的标签

<input type='text'/>
<input type='text'/>
<input type='file'/>
<input type='password'/>

$("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="cancleAll();"/>

    <table border="1">
        <thead>
            <tr>
                <th>选项</th>
                <th>IP</th>
                <th>PORT</th>
            </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>
        </tbody>
    </table>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $('#tb :checkbox').prop('checked',true);
        }
        function cancleAll() {
            $('#tb :checkbox').prop('checked',false);
        }
        function reverseAll() {
            $(':checkbox').each(function(k){
                // this,代指当前循环的每一个元素
                // Dom
                /*
                if(this.checked){
                    this.checked = false;
                }else{
                    this.checked = true;
                }
                */
                /*
                if($(this).prop('checked')){
                    $(this).prop('checked', false);
                }else{
                    $(this).prop('checked', true);
                }
                */
              // 三元运算var v = 条件? 真值：假值
                var v = $(this).prop('checked')?false:true;
                $(this).prop('checked',v);
            })
        }
    </script>
</body>
</html>

- 选择权
-
$('#tb:checkbox').prop('checked'); 获取值
$('#tb:checkbox').prop('checked', true); 设置值
-
jQuery方法内置循环： $('#tb:checkbox').xxxx

- $('#tb:checkbox').each(function(k){
// k当前索引
// this，DOM，当前循环的元素 $(this)

})
- var 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;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>
        $('.header').click(function(){
            // 当前点击的标签 $(this)
            // 获取某个标签的下一个标签
            // 获取某个标签的父标签
            // 获取所有的兄弟标签
            // 添加样式和移除样式
            // $('.i1').addClass('hide')
            // $('#i1').removeClass('hide')
            // var v = $("this + div");
            // $("label + input")
            // console.log(v);
            //
            // $("afsldkfja;skjdf;aksdjf")

            // 筛选器
            /*
            $(this).next()      下一个
            $(this).prev()      上一个
            $(this).parent()    父
            $(this).children()  孩子
            $('#i1').siblings() 兄弟
            $('#i1').find('#i1') 子子孙孙中查找
            // . . .
            //
            $('#i1').addClass(..)
            $('#i1').removeClass(..)
            */

            // 链式编程
            // $(...).click(function(){
            //     this..
            // })


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

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

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

   　　　　　　当前点击的标签 $(this)
             获取某个标签的下一个标签
             获取某个标签的父标签
             获取所有的兄弟标签
             添加样式和移除样式
             $('.i1').addClass('hide')
             $('#i1').removeClass('hide')


             var v = $("this + div");
             $("label + input") #这种匹配所有跟在 label 后面的 input 元素 ，实际运用不常见，
             console.log(v);
            
             $("afsldkfja;skjdf;aksdjf")

             筛选器
            
             $(this).next()      下一个
            $(this).prev()      上一个
            $(this).parent()    父
            $(this).children()  孩子
            $('#i1').siblings() 兄弟
            $('#i1').find('#i1') 子子孙孙中查找
         
            $('#i1').addClass(..)
            $('#i1').removeClass(..)
            
             链式编程
             $(...).click(function(){
                 this..
             })

            .clink 对所有捕捉的header标签都添加点击事件

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

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

筛选

$('#i1').next()
$('#i1').nextAll()
$('#i1').nextUntil('#ii1')

<div>
<a>asdf</a>
<a>asdf</a>
<a id='i1'>asdf</a>
<a>asdf</a>
<a id='ii1'>asdf</a>
<a>asdf</a>
</div>

$('#i1').prev()
$('#i1').prevAll()
$('#i1').prevUntil('#ii1')

$('#i1').parent()
$('#i1').parents()
$('#i1').parentsUntil()

$('#i1').children()
$('#i1').siblings()
$('#i1').find()
$('li:eq(1)')
$('li').eq(1)
first()
last()
hasClass(class)

以下模拟表格编程框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .modal{
            position: fixed;
            width: 500px;
            height: 400px;
            background-color: #dddddd;
            top:50%;
            left: 50%;
            margin-top: -250px;
            margin-left: -200px;
            z-index: 10;
        }
        .shamodal{
            position: fixed;
            top:0;
            right: 0;
            left:0;
            bottom: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
    </style>
</head>
<body>
    <a onclick="addElement()">
        <input type="button" value="添加">
    </a>
    <table border="2">
        <tr>
            <td>1.1.1.1</td>
            <td>80</td>
            <td>80</td>
            <td>
                <a class="edit">编辑</a>|<a target="del">删除</a>
            </td>
        </tr>
        <tr>
            <td>1.1.1.12</td>
            <td>80</td>
            <td>80</td>
            <td><a class="edit">编辑</a>|<a target="del">删除</a> </td>

        </tr>
        <tr>
            <td>1.1.1.13</td>
            <td>80</td>
            <td>80</td>
            <td>
                <a class="edit">编辑</a>|<a target="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="cancleModal();"/>
            <input type="button" value="确定" onclick="cancleModal();"/>
        </div>
    </div>
    <div class="shamodal hide"></div>
    <script src="jquery-3.3.1.js"></script>
    <script>
        function addElement() {
            $('.modal,.shamodal').removeClass('hide')
        }
        function cancleModal() {
            $('.modal,.shamodal').addClass('hide');
            // $('.modal input[type="text"]').val("");
        }
        $('.edit').click(function () {
            $('.modal,.shamodal').removeClass('hide');
            //this
            var tds = $(this).parent().prevAll();
            var port = $(tds[0]).text();
            var id = $(tds[1]).text();
            var hostname = $(tds[2]).text();

            $('.model input[name="hostname"]').val(hostname);
            $('.model input[name="id"]').val(id);

            $('.model input[name="port"]').val(port);
           // 循环获取tds中内容
            // 获取 <td>内容</td> 获取中间的内容
            // 赋值给input标签中的value
        })
    </script>
</body>
</html>

View Code

文本操作：
$(..).text() # 获取文本内容
$(..).text(“<a>1</a>”) # 设置文本内容就变成字符串了

$(..).html() #获取标签及文本内容
$(..).html("<a>1</a>") #设置标签及文本内容

$(..).val() #获取input 等标签的value值
$(..).val(..)　#设置input 等标签的value值　

样式操作：
addClass 增加class对象
removeClass　删除class对象
toggleClass

   <!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: 500px;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 class="menu-item" a="4">菜单四</div>
        </div>
        <div class="content">
            <div b="1">内容一</div>
            <div class="hide" b="2">内容二</div>
            <div class="hide" b="3">内容三</div>
            <div class="hide" b="4">内容四</div>
        </div>

    </div>
    <script src="jquery-3.3.1.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: 50px;
            background-color: #dddddd;
            color: #FFF7FB;
            line-height: 50px;
        }
        .menu_item{
            float:left;
            border-right: #F00078;
            padding: 0 30px;
            cursor: pointer;
        }
        .active{
            background-color: crimson;
        }
        .content{
            min-height: 200px;
            border:1px solid red;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style="width: 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>
        </div>
        <div class="content">
            <div>内容1</div>
            <div class="hide">内容2</div>
            <div class="hide">内容3</div>
            <div class="hide">内容4</div>
        </div>
    </div>
    <script src="jquery-3.3.1.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>

View Code

属性操作：
# 专门用于做自定义属性
$(..).attr('n')
$(..).attr('n','v')
$(..).removeAttr('n')

<input type='checkbox' id='i1' />

# 专门用于chekbox,radio
$(..).prop('checked')
$(..).prop('checked', true)

PS:
index 获取索引位置

<!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-3.3.1.js"></script>
    <script>
        $('#a1').click(function () {
            var v = $('#t1').val();

            var temp = "<li>" + v + "</li>";
            // $('#u1').append(temp);
            $('#u1').prepend(temp);
            // $('#u1').after(temp)
            // $('#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>

文档处理：
append
prepend
after
before

remove
empty

clone
css处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            padding: 50px;
            border: 3px solid rebeccapurple;
        }
        .item{
            position: relative;
            width: 30px;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="content">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="content">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <div class="content">
        <div class="item">
            <span>赞</span>
        </div>
    </div>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $('.item').click(function (){
            AddFavor(this)
            });
        function AddFavor(self) {
            //DOM对象
            var fontSize = 15;
            var top = 0;
            var right = 0;
            var opacity = 1;

            var tag = document.createElement('span');
            $(tag).text('+1');
            $(tag).css('color','red');
            $(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 = fontSize +10;
                top = top -10;
                right = right -10;
                opacity = opacity -0.05;
                $(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>

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

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

位置：

$(window).scrollTop() 获取
$(window).scrollTop(0) 设置
scrollLeft([val])

offset().left 指定标签在html中的坐标
offset().top 指定标签在html中的坐标

position() 指定标签相对父标签(relative)标签的坐标
<div style='relative'>
<div>
<div id='i1' style='position:absolute;height:80px;border:1px'></div>
</div>
</div>

$('i1').height() # 获取标签的高度纯高度
$('i1').innerHeight() # 获取边框 + 纯高度 + ？
$('i1').outerHeight() # 获取边框 + 纯高度 + ？
$('i1').outerHeight(true) # 获取边框 + 纯高度 + ？

# 纯高度，边框，外边距，内边距

<!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-3.3.1.js"></script>
    <script>
        $('#a1').click(function () {
            var v = $('#t1').val();
            var temp = "<li>" + v + "</li>";
            $('#u1').append(temp);
        });

//        $('ul li').click(function () {
//            var v = $(this).text();
//            alert(v);
//        })

//        $('ul li').bind('click',function () {
//            var v = $(this).text();
//            alert(v);
//        })

//        $('ul li').on('click', function () {
//            var v = $(this).text();
//            alert(v);
//        })

        $('ul').delegate('li','click',function () {
            var v = $(this).text();
            alert(v);
        })

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

事件
DOM：三种绑定方式
jQuery：
$('.c1').click()
$('.c1').....

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

})

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

})

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

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

})

*******************
$('.c').delegate('a', 'click', function(){

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

})

这种绑定方式有所不同，它不仅能够绑定事件，而且还能够给事件增加其设有的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a onclick="return ClickOn()"  href="http://www.oldboyedu.com">走你1</a>

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

阻止事件发生
return false

<!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="提交" />
        <img src="...">
    </form>
    <script src="jquery-3.3.1.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;

        });


        });



//        $(':submit').click(function () {
//            var v = $(this).prev().val();
//            if(v.length > 0){
//                return true;
//            }else{
//                alert('请输入内容');
//                return false
//            }
//        })

    </script>
</body>
</html

 $.Login('#f1')  jquery扩展 

可以在网上找大量的扩展来引用，如果找的两个引用全局变量相同，可以使用匿名函数来解决，应为他们的作用域只在函数内生效

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

更加节省时间
$(function(){

　　$(...)

})

jQuery扩展：
- $.extend $.方法
- $.fn.extend $(.选择器.).方法

可以在网上找大量的扩展来引用，如果找的两个引用全局变量相同，可以使用匿名函数来解决，应为他们的作用域只在函数内生效

(function(){
var status = 1;
/ / 封装变量
})(jQuery)

posted on 2018-06-13 22:22 公主的骑士阅读(187) 评论(0) 编辑收藏举报