前端学习日志-5-jQuery-CSDN博客

本文链接：https://blog.csdn.net/abundoning/article/details/122813270

jQuery选择器

jQuery是JavaScript的库，它集成了DOM/BOM/JavaScript的类库，凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发Ajax的操作。

实现：动态效果

操作：(同DOM选择器)

1.查找、筛选元素

2.操作元素

jQuery文件引入方式：

CSS：<link rel='stylesheet' href=''/>

jQuery：<script src=''></script>

------------------

jQuery方法调用：

jQuery.方法  or  $.方法

jQuery选择器与DOM选择器：

jQuery对象[0] => DOM对象

DOM对象 => $(DOM对象)

------------------------jQuery选择器查找元素

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

1.id

$('#id') #获取id标签

2.class

$('.c1') #获取class标签

3.标签

$('a') #获取所有a

4.组合

$('a，.c1，#id') #获取所有标签

5.层级

$('#id a') #获取id标签下的所有a标签（子子孙孙）

$('#id>a') #获取id标签下的所有a标签（仅第一层标签，子）

$('#id>a：first') #获取id标签下的所有a标签中的第一个标签（仅第一层标签）

6.基本

$('#id>a：first') #获取id标签下的所有a标签中的第一个标签（仅第一层标签）

$('#id>a：last') #获取id标签下的所有a标签中的最后标签（仅第一层标签）

$('#id>a：eq()') #获取id标签下的所有a标签中的eq索引标签（仅第一层标签）

7.属性

$('[bbq]') #获取具有bbq属性的所有标签

$('[bbq='123']') #获取具有bbq=123属性的所有标签

表单属性

$('input[type='test']') #获取type='test'的所有input标签

$('：test') #获取type='test'的所有input标签（为上的简写）

EG-jQuery编程实例-对话框多/正/反选

jQuery方法内置有循环：$('').方法

下例中，jQuery中this指代dom对象，也即当前循环的元素

方法：prop，each

<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>端口</th>
            </tr>
        </thead>
        <tbody>
            <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-3.6.0.js"></script>        #引用jQuery库
    <script>
        function checkAll(){                        
            $(':checkbox').prop('checked',true)   #循环获取每一个checked并设置为true
        }                    

        function cancleAll(){
            $(':checkbox').prop('checked',false)    #循环获取每一个checked并设置为false
        }

        function reverseAll(){
            $(':checkbox').each(function(){    #循环每一个checked并调用函数
 
      1.dom对象    /*    if(this.checked){         #如果为选中（为true）
                    this.checked =false;
                }else{
                    this.checked =true;
                }
            */

      2.jquery对象    /*     if($(this).prop('checked')){    #如果返回子为true（选中）
                    $(this).prop('checked',false);        #获取checked并设置为false
                 }else{
                    $(this).prop('checked',true);        #获取checked并设置为true
                 }
            */

                //三元运算： var v=条件？真值：假值；
      3.逻辑运算    /*    var v=$(this).prop('checked')?false:true;    #按照运算逻辑赋值
                $(this).prop('checked',v);        #获取checked并设置为v对象
            */

            })
        }
    </script>
</body>

--------------------jQuery绑定事件

$('a/#id/c1').click(function(){})- 给所有标签绑定事件，函数中this即触发事件的对象

--------------------jQuery筛选器

$('').筛选器

$(this).next()- 下一个

$(this).prev()- 上一个

$(this).parent()- 父级

$(this).children()- 子级

$(this).siblings()- 同级（不包括本身）

EG-jQuery编程实例-下拉菜单的隐藏与显现

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color:black;
            color:white;
        }
        .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">标题1</div>
            <div class="content">内容</div>
        </div>
        <div class="item">
            <div class="header">标题2</div>
            <div class="content hide">内容</div>
        </div>
        <div class="item">
            <div class="header">标题3</div>
            <div class="content hide">内容</div>
        </div>
    </div>

    <script src="jquery-3.6.0.js"></script>
    <script>
        $('.header').click(function(){      #给所有header绑定click事件
            $(this).next().removeClass('hide');     #筛选器next()方法获取标签并移除类样式
            $(this).parent().siblings().find('.content').addClass('hide');
        })      #筛选器可以无限点下去(查)，this.父.all同级（除自己）.找下级标签(class样式).添加样式

            $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
        })          #jQuery支持链式编程，由于$(this).next().removeClass('hide')也是jQuery对象，因此它能够继续筛选
    </script>
</body>

--------------------jQuery文本操作

$(‘’).text()- 获取文本

$(‘’).text(‘<a>abc</a>’)- 设置文本内容（仅内容）

$(‘’).html()- 获取文本（附加标签信息）

$(‘’).html(‘<a>abc</a>’)- 设置文本内容（附加标签信息）

$(‘’).val()- 获取值

$(‘’).val(‘avc’)- 设置值

EG-jQuery编程实例-信息管理窗口

<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:-200px;
            background-color:#dddddd;
            z-index:10;
       }
       .shadow{                #遮罩层
            position:fixed;
            top:0px;
            left:0px;
            right:0px;
            bottom:0px;
            opacity:0.6;
            background-color:black;
            z-index:9;
       }
    </style>
</head>
<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>
    </table>

    <div class="modal hide">            #弹窗
        <div>
            <input name="hostname" type="text"/>
            <input name="port" type="text"/>
        </div>
        <div>
            <input type="button" value="取消" onclick="cancleModal()"/>
            <input type="submit" value="登录" onclick=""/>
        </div>
    </div>

    <div class="shadow hide"></div>        #遮罩

    <script src="jquery-3.6.0.js"></script>        #引用jQuery
    <script>
        function addElement(){
            $('.modal').removeClass('hide').next().removeClass('hide')  #jQuery链式编程
        }
        function cancleModal(){
            $('.modal').addClass('hide').next().addClass('hide')    #jQuery链式编程
            $('.modal input[type="text"]').val('')      
        }                                #获取modal下input[type="text"]标签对象并赋值
        $('.edit').click(function(){    #获取edit选择器标签对象并绑定事件
            $('.modal').removeClass('hide').next().removeClass('hide')  #jQuery链式编程
            var tds =$(this).parent().prevAll();    #this指代事件发生的对象
            var port =$(tds[0]).text();        #tds为获取port,host的列表
            var host =$(tds[1]).text();
            console.log(port,host);
            $('.modal input[name="hostname"]').val(host)
            $('.modal input[name="port"]').val(port)
        })                 #获取modal下input[name=""]标签对象并赋值
    </script>
</body>

--------------------jQuery样式操作

addClass

removeClass

toggleClass

EG-

<body>
    <input id="i1" type="button" value="开关"/>
    <div  class="c1 hide">adafgsdfg</div>
    <script src="jquery-3.6.0.js"></script>
    <script>
        $('#i1').click(function(){
            $('.c1').toggleClass('hide');   #有hide样式则删除，无则添加
        })
    </script>
</body>

--------------------jQuery属性操作

$('').attr(‘’)- 获取，添加，修改属性------用于自定义属性

$('').attr(‘n’)- 获取属性的值

$('').attr(‘n’,'x')- 修改属性/添加属性值

$('').removeAttr()- 删除属性

$('').prop(‘’)-获取，设置值 -------用于checkbox，radio的应用

$('').prop(‘checked’)-获取checked值

$('').prop(‘checked’，true/false)-设置checked值

$('').index()- 获取对象的索引值

EG-jQuery编程实例-信息管理窗口(jQuery优化-通过自定义属性查找)

<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:-200px;
            background-color:#dddddd;
            z-index:10;
       }
       .shadow{
            position:fixed;
            top:0px;
            left:0px;
            right:0px;
            bottom:0px;
            opacity:0.6;
            background-color:black;
            z-index:9;
       }
    </style>
</head>
<body>
    <a onclick="addElement()">添加</a>
    <table border="1">
        <tr>
            <td target="hostname">1.1.1.1</td>
            <td target="post">80</td>
            <td>
                <a class="edit">编辑</a> <a>删除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.2</td>
            <td target="post">80</td>
            <td>
                <a class="edit">编辑</a> <a>删除</a>
            </td>
        </tr>
    </table>


    <div class="modal hide">
        <div>
            <input name="hostname" type="text"/>
            <input name="post" type="text"/>
        </div>
        <div>
            <input type="button" value="取消" onclick="cancleModal()"/>
            <input type="submit" value="登录" onclick=""/>
        </div>
    </div>

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


    <script src="jquery-3.6.0.js"></script>
    <script>
        function addElement(){
            $('.modal').removeClass('hide').next().removeClass('hide')
        }
        function cancleModal(){
            $('.modal').addClass('hide').next().addClass('hide')
            $('.modal input[type="text"]').val('')
        }
        $('.edit').click(function(){
            $('.modal').removeClass('hide').next().removeClass('hide')
            var tds =$(this).parent().prevAll();

            tds.each(function(){
                var n =$(this).attr('target');      // #获取事件对象target属性值
                var text =$(this).text();              // #获取事件对象标签的值（内容）
                var a1 ='.modal input[name="';
                var a2 ='"]'
                var temp =a1 + n + a2;
                //字符串拼接，'.modal input[type="$(this).attr('target')"]' ==>a1 + n + a2
                $(temp).val(text);
            })
        })
    </script>
</body>

EG-jQuery编程实例-菜单窗口(jQuery优化-通过自定义属性查找)

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display:none;
        }
        .menu{
            height:38px;
            background-color:#dddddd;
            line-height:38px;
        }
        .active{
            background-color:brown;
        }
        .menu .menu-item{
            float:left;
            border-right:1px solid red;
            padding:0px 5px;
            cursor:pointer;                    #css样式：光标变为小手
        }
        .content{
            min-height:100px;
            border:1px solid #dddddd;
        }

    </style>
</head>
<body>
    <div style="width:700px;margin:0px 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>

        <script src="jquery-3.6.0.js"></script>
        <script>
            //jQuery获取选择器跟CSS定义选择器的方式相同，需要＋‘#/.’，总是忘记加'./#'
            $('.menu-item').click(function(){
                $(this).addClass('active').siblings().removeClass('active')
                var target =$(this).attr('a');        #获取自定义属性a的值
                $('.content').children("[b='"+ target +"']").removeClass('hide').siblings().addClass('hide');
                //.children()获取所有子标签， .children('[表达式]')进一步筛选，target为变量需用字符串拼接
            })
        </script>
    </div>
</body>

EG-jQuery编程实例-菜单窗口(jQuery优化-通过索引查找)

        <script>
            //jQuery获取选择器跟CSS定义选择器的方式相同，需要＋‘#/.’
            $('.menu-item').click(function(){
                $(this).addClass('active').siblings().removeClass('active');
                var v =$(this).index();           #获取事件对象的索引值（事件对象-列表）                          var=$('.content').children().eq(v).removeClass('hide').siblings().addClass('hide');
            })            #eq('')获取相同
        </script>

--------------------jQuery文档处理

$('').append()- 尾部添加

$('').prepend()- 前部添加

$('').after()- 同级添加

$('').before()- 同级添加

$('').remove()- 删除

$('').empty()- 清空内容(不针对标签)

$('').clone- 复制内容

EG-练习实例

<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="删除"/>

    <ul id="u1">
        <li>1</li>
        <li>2</li>
    </ul>
    <script src="jquery-3.6.0.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();     #清除（索引对应的标签）
        })
    </script>
</body>

--------------------jQuery对CSS操作

$('').css(‘样式名称’,‘样式值’)- 修改css样式

EG-jQuery编程实例-点赞数字的动态显示

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding:50px;
            border:1px solid #dddddd;
        }
        .item{
            position:relative;        #relative和absolute的组合应用
            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-3.6.0.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');   #dom选择器创建标签对象
            $(tag).text('+1');                        #$转为jQuery对象
            $(tag).css('color','green');
            $(tag).css('position','absolute');            #CSS样式操作
            $(tag).css('fontSize',fontsize + 'px');
            $(tag).css('right',right + 'px');            #有关像素的值需“ + 'px' ”
            $(tag).css('top',top + 'px');
            $(tag).css('opacity',opacity);
            $(self).append(tag);                #尾部追加数字

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

                    if(opacity<0){              //如果<0，则中断定时器、清空动态tag，否则定时器会持续运行
                        clearInterval(obj);     //obj为定时器句柄
                        $(tag).remove();
                    }
                },100);     #动态效果持续时间
        }
    </script>
</body>

--------------------jQuery位置操作

$('').scrollTop()- 获取位置/$(window).scrollTop()- 获取主窗位置

$('').scrollTop(0)- 设置位置/$(Window).scrollTop(0)- 设置主窗位置

-EG-

<body>
    <div id="i1" style="height:100px;overflow:auto">            #小滚动窗口
        <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
        <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
        <p>abc</p><p>abc</p><p>abc</p><p>abc</p><p>abc</p>
    </div>
    <div style="height:1000px;overflow:auto"></div>        #window滚动窗口
    <script src="jquery-3.6.0.js"></script>
</body>

$('').scrollLeft()- 获取左右窗口位置

$('').scrollLeft(0)- 设置左右窗口位置

$('').offset()- 获取指定标签在HTML中的坐标

$('').offset().top

$('').offset().left

--------------------jQuery事件

DOM：三种绑定方式

jQuery：四种

一：

$('.c1').click()

$('.c1').blur()

$('.c1').change()

二：

$('.c1').bind('click',function(){ }) 给c1标签绑定事件

$('.c1').unbind('click',function(){ }) 去除绑定

三：

方式三能够委托事件，对于新添加新创建的标签对象，也能附件上事件！！！！！

$('.c1').delegate('a','click',function(){ }) 给c1下所有a标签绑定事件

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

-EG-

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

            var temp ="<li>" + v + "</li>";
            $('#u1').append(temp);
        });

        $('ul').delegate('li','click',function(){    #委托事件，对于后添加标签，也绑定事件
            var v =$(this).text();
            alert(v);
        })
    </script>

四：

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

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

EG-jQuery编程实例-表单验证

要求：先弹窗验证，后跳转

知识点：dom，jQuery事件的绑定及执行顺序的不同

<body>
    <a onclick="return ClickOn()" href="http://www.baidu.com">这里</a>    #dom
    <a id="i1" href="http://www.baidu.com">这儿</a>        #jQuery
    <script src="jquery-3.6.0.js"></script>
    <script>
        function ClickOn(){        #dom事件
            alert(123);
            return true;            #return true表示进行后续事件（跳转）
        }
        $('#i1').click(function(){         #jQuery事件
            alert('abc');
            return false;          #return true表示不再进行后续事件（跳转）
        })
    </script>
</body>
            #dom事件，先执行事件，后执行跳转。应用return是必须要在标签内说明
            #jQuery事件，先执行事件，后执行跳转。不需要说明return的应用

----------=-------阻止事件发生

return false;true

EG-jQuery编程实例-完整登录验证窗口

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color:red;
        }
    </style>
</head>
<body>
    <form id="f1" action="e13.html" method="get">
        <div><input name="n1" type="text"/></div>
        <div><input name="n2" type="password"/></div>

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

    <script src="jquery-3.6.0.js"></script>
    <script>
        $(':submit').click(function(){
            $('.error').remove();       //#每次事件触发先清空error
            var flag =true;
            
            $('#f1').find('input[type="text"],input[type="password"]').each(function(){
                var v =$(this).val();
                if(v.length <= 0){
                    flag =false;                    //return false，全局变量
                    var tag =document.createElement("span");        //#dom创建标签
                    tag.className ='error';   //dom添加样式
                    tag.innerHTML='必填项';   //.innerHTML“=”赋值；
                    $(this).after(tag);           //  #同级尾部追加
                }
            })
            return flag;         //return false
        })
    </script>
</body>

------------------使事件发生

$(function(){    ......      })    //当页面框架加载完毕后，自动执行

$(':submit').click(function(){  .........   })    //当页面所有元素完全加载后，执行


#因为程序是按顺序执行的，若事件前内容缓存很大（eg:img），则需应用$(function(){  ......    })

------------------jQuery扩展

$.extend({......}) - 扩展能够直接调用($.)的自定义jQuery方法

<body>
    <script src="jquery-3.6.0.js"></script>
    <script>
        $.extend({
            'pqm':function(){
                return 'wa'
            }
        });
        var v =$.pqm();
        alert(v);
    </script>
</body>

$.fn.extend({......}) - 扩展自定义jQuery方法,调用时需通过选择器对象($('').)进行调用

-------------------------------------------------------------------------

！！！！！！！！！！注：

jQuery添加样式：$('').css(‘样式名称’,‘样式值’)

dom添加样式：对象.className =' '

同样的，其他操作也基本遵循这样的规则。

$('').方法(‘ ’)- 获取，修改，设置

dom对象.方法 ='' - 修改，设置

jQuery获取选择器跟CSS定义选择器的方式相同，需要＋‘#/.’，总是忘记加'./#'