网页设计之jQuery

时间：2023-03-09 04:57:06
网页设计之jQuery

1.在html中引入css和jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css文件"> #引入css文件
</head>
<body>
    <script src="jquery-1.12.4.js"></script>#引入jQuery文件，src为路径

</body>
</html>

2.jQuery对象与DOM对象互相转化

　　将jQuery转化为DOM： $("#i1")[0] = dom

　　将DOM转化为jQuery： $(dom) = jQuery

　　　　　　　　　　　　　$(dom)=jquery

　　　　　　　　　　　　　　　　　　　　【$('<div id='i1'>123</div>') = [div#i1]或

d='<div id='i1'>123</div>'

$(d) = [div#i1]】

3.jQuery查找元素，选择器

  • id

　　　　<div id='i1'>ww</div>

　　　　$('#i1')

  • class

　　　　<div class='c1'>123</div>

　　　　$('.c1')

  • 标签

　　　　<div class='c1'>

　　　　　　<a>f</a>

　　　　　　<a>f</a>

　　　　</div>

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

  • 多选择器组合查找

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

  • 层级选择器

　　  $('#i1 a')　　找div id=‘i1’内的所有a标签，包括子子孙孙

　　  $('#i1 > a')  只找div id='i1'内的所有子a标签，不包括孙a标签，所谓的孙a标签就是子div下的a标签

　　  $('#i1 + a')   找div i1的下一个a标签，此a标签跟i1是同一级的

$('#i1 ~ a')  找div i1下边的所有兄弟标签，i1上边的就不找，此a标签跟i1是同一级的

　　  $('#i1 a:first') 找div id='i1'内的第一个a标签 【还有last找最后一个】

　　  $('#i1 a:eq(0)') 找div id='i1'内的所有a标签的第0个a标签【eq是等于的意思，0是索引，还有lt小于，gt大于  】

$('#i1').text()  获取div id='i1'内的内容

　　  $('#i1').next()  找div id='i1'的下一个兄弟标签

　　  $('#i1').prev()  找div id='i1'的上一个兄弟标签　

　　  $('#i1').prev()  找div id='i1'的上边的所有兄弟标签

　　  $('#i1').parent()  找div id='i1'的父标签

　　  $('#i1').children()  找div id='i1'的所有孩子标签

　　  $('#i1').siblings()  找div id = 'i1'的所有兄弟标签

　　  $('#i1').find('c1')  找div id='i1'内的所有class为‘c1’的标签

　　  $('#i1').addClass('c1')  找到div id='i1'并给该div添加class 'c1'

　　  $('#i1').removeClass('c1')  找到div id='i1'并给该div去掉class 'c1'

　　  $('#i1').hasClass('c1')  找到div id='i1'并判断该div是否有class 'c1'，有则返回true

　　  $('#i1').toggleClass('c1') 找到div id='i1'并判断该div是否有class 'c1'，有则去掉c1，没有则添加c1

　　  $('#i1').parents() 找div id='i1'的父标签以及祖宗标签，一直到html标签

　　  $('#i1').parentsUntil('.c1')  找div id='i1'的父标签以及祖宗标签，一直到class='.c1'标签结束

  • 属性选择器　　

　　  $('[alex]') 找所有属性为alex的标签。【<a alex='123'></a> <p alex='456'></p>,会找到这两个属性为alex的a、p标签】

　　  $('[alex="123"]')  找属性为alex="123"的标签，注意引号的不同

$(':disabled')  找到所有不可编辑的标签【<input type='text' disabled />,disabled表示该输入框不可输入内容，enabled表示可以输入内容】

  • 文本操作

　　$('#i1').text() # 获取文本内容
　　$('#i1').text(“1”) # 设置文本内容

　　$('#i1').html() #获取文本内容加网页标签
　　$('#i1').html("<a>1</a>")#设置文本内容加网页标签

　　$('#i1').val()  #获取value的值
　　$('#i1').val(..)#设置value的值

  • 属性操作

　　<input id='i1' type='button' value='取消' />

　　$('#i1').attr('value') #获取div id='i1'内的属性value的值

　　$('#i1').attr('value','new') #设置div id='i1'内的属性value的值为new，这种方式也可以新加一个属性

　　$('#i1').removeAttr('value') #删除i1标签内的value属性　

　　# prop()专门用于chekbox,radio框的选中操作
　　$('#i1').prop('checked')   #获取i1标签内checkbox的checked值，打上对勾则返回true
　　$('#i1').prop('checked', true) #设置i1标签内checkbox的checked值，true为打上对勾

　　$('#i1').prop('checked', false) #设置i1标签内checkbox的checked值，false为去掉对勾

　　$('.c1').index(2) #获取索引值2对应的标签

  • 文档操作

　　$('#i1').append(temp)  #在i1标签内部的最后添加temp，此处temp为变量　

　　$('#i1').prepend(temp)  #在i1标签内部的前边添加temp，此处temp为变量　

　　$('#i1').after(temp)  #在i1标签外部的下边添加一个兄弟temp，此处temp为变量

　　$('#i1').before(temp)  #在i1标签外部的上边添加一个兄弟temp，此处temp为变量

　　$('#i1').remove()  # 找到i1标签并将该标签删除

　　$('#i1').eq(index).remove()  #index为一个数值，找到i1标签内index值为对应值的标签并删除

　　$('#i1').eq(index).clone() #index为一个数值，找到i1标签内index值为对应值的标签并复制

  • css样式操作　
    var tag = document.createElement('span');  #增加一个新标签span，这时tag为DOM对象
　　 $(tag).css('color','green');             #将DOM对象转换为jQuery对象，给标签span添加样式：颜色为green
　　$(tag).css('position','absolute');       #给标签添加样式position
　　$(tag).css('fontSize',fontSize + "px");  #给标签添加样式字体大小
　　$(tag).css('right',right + "px");        #给标签添加样式右边距
　　$(tag).css('top',top + 'px');            #给标签添加样式上边距
　　$(tag).css('opacity',opacity);           #给标签添加样式 透明度
  • 位置操作　

　　$(window).scroolTop()  获取当前滚动条的位置

　　$(window).scroolTop(0) 返回顶部，即给滚动条设置一个位置

　　$(window).scroolLeft(0) 返回左部

　　网页设计之jQuery

　　$('#i1').height()   =height #获取标签高度，不包括边框宽度

　　$('#i1').innerHeight()  =padding-top + height + padding-bottom#获取标签定义高度+内边距高度

　　$('#i1').outerHeight()  =boder-top + padding-top + height + padding-bottom + boder-bottom#获取标签定义高度+上下内边距高度+上下边框宽度

　　$('#i1').outerHeight(true)  =boder-top + padding-top + height + padding-bottom + boder-bottom + margin-top + margin-bottom #获取标签定义高度+上下内边距高度+上下边框宽度+上下外

　　边距

　　$('#i1').offset()  获取坐标   {top:20,left:30}

　　$('#i1').offset().top  获取i1标签距离顶部的高度

　　$('#i1').offset().left  获取i1标签距离左部的高度

　　$('#i1').position()  i1标签中含有position=absolute样式，该方法会获取i1标签与含有position=relative标签的距离

  • jQuery绑定事件的四种方式：(以click事件举例)

　　 1.$('#i1').click(function(){ })  #没有委托属性，新添加的标签，不能立即绑定事件

　　 2.$('#i1').bind('click',function(){   #没有委托属性，新添加的标签，不能立即绑定事件

　　    })　绑定　　

　　    $('#i1').unbind('click',function(){   解绑

　　    })

　　 3.$('#i1').delegate('a','click',function(){  })  绑定  #给i1标签下的所有a标签绑定事件。有委托属性，新添加的标签，立即可以绑定事件

　　    $('#i1').undelegate('a','click',function(){  })  解绑

　　 4.$('#i1').on('click', function(){ })  绑定 #没有委托属性，新添加的标签，不能立即绑定事件

　　    $('#i1').on('click', function(){ })  解绑

4.实现全选反选取消框

$('#tb:checkbox').prop('checked');         获取值
$('#tb:checkbox').prop('checked', true); 设置值
-
jQuery方法内置循环： 
- $('#tb:checkbox').each(function(){
       // this，在DOM中指代当前循环的元素
})
- var v = 条件 ? 真值 : 假值

<!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="cancle()" />

    <table border="1">
        <thead>
            <tr>
                <th>选项</th>
                <th>选项</th>
                <th>选项</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>2.2.2.2</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function checkAll() {
            $('#tb :checkbox').prop('checked',true);
        }
    </script>

    <script>
        function reverseAll() {
            $('#tb :checkbox').each(function () {
                //each()函数会循环遍历jQuery找到的所有标签，并给这些标签执行某函数
                //this指代当前正在循环的标签（是DOM对象）
                /* dom实现方式
                if(this.checked){  //表示如果this.checked为true，不要写成this.checked = true
                    this.checked = false;
                }else {
                    this.checked = true;
                }
                */
                /*jQuery实现方式*/
                if($(this).prop('checked')){  //若果checkbox被选中，则$(this).prop('checked')返回true
                    $(this).prop('checked',false);
                }else {
                    $(this).prop('checked',true);
                }
            })
        }
    </script>

    <script>
        function cancle() {
            $('#tb :checkbox').prop('checked',false);
        }
    </script>

</body>
</html>

5.jQuery支持链式编程

菜单栏显示

<!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(){
            //jQuery支持链式编程，可以一直点下去
            $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
        })
    </script>
</body>
</html>

6.表格页面编辑

<!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();" />

        </div>
    </div>

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

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

        $('.del').click(function () {
            $(this).parent().parent().remove();
        });

        }

        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指代$(".modal,.shadow")获取的标签
            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);
            });

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

7.标签的添加、删除、复制

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

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

8. 获取输入框的内容并添加到表格，删除表格

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

9.点赞动画效果

<!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) {  //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','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 = 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>

10.实现可拖动的标签

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

11. find发现多个标签类型；判断输入框是否为空，若空则会报‘必填’；等框架加载出来就会执行函数

<!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-1.12.4.js"></script>
    <script>
        $(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);   //在标签的后边添加tag标签
                        // return false;  当第一个输入框未填内容时，函数不会继续执行
                    }
                });
                return flag;
        });
        });

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

12.自定义jQuery扩展两种方式

　　方式一：　

　　<script>

　　　　$.fn.extend({

　　　　　　'wangsen':function() {

　　　　　　　　return 'sb';

　　　　　   }

　　　　});

　　　　$('#i1').wangsen(); //调用方式

　　</script>

　　方式二：

　　<script>

　　　　$.extend({

　　　　　　'wangsen':function() {

　　　　　　　　return 'sb';

　　　　　   }

　　　　});

　　　　$.wangsen(); //调用方式

　　</script>

　　方式三：将扩展写成.js文件，一定要写成自执行函数，方便封装自己的全局变量。

　　　　【使用其他现成的jQuery扩展：<script src='zidingyi.js'></script>】

/**
 * Created by wt on 2016/11/26.
 */
(function (arg) {
    var status = 1;  //封装的自己的全局变量
    arg.extend({     //自定义的扩展函数
       'wangsen': function () {
           return 'sb';
       }
    });
})(jQu$ery); //一定要写参数为jQuery

相关文章