• ❋JQuery的快速入门 1 了解jq

    目录

    选定元素

    1. jquery基本选择器

    2. 层级选择器

    3. 元素精确定位

     4. 内容选择器

    5. 属性选择器及其他

    元素解析

    操作元素内容与样式

    操作文档的文本结构

    jq事件

    jq动画

    JQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。

    使用前要先导入jquery库，到jQuery官网下载，导入至html中的head标签即可

    <script src="jquery-3.6.0.min.js" type="text/javascript" charset="UTF-8">script>

    选定元素

    1. jquery基本选择器
    • *
    • id
    • class
    • 标签
    • 属性
    • 多个选择器一起
    1. <script>
    2.         function t2(){ 
    3.             var all=$('*'); // 通用选择器[包括]
    4.             console.log(all);
    5.             var ps=$('p');// 获取所有的p标签
    6.             console.log(ps);   // p标签数组 
    7.             console.log(ps[1]); // 获取第1个p标签对象
    8.             console.log(ps.eq(1).text()); //index=1的p标签值
    9.             // ps.hide();   // 隐藏所有对象
    10.             ps.eq(1).hide();    // 隐藏指定对象
    11.             console.log('获取指定id唯一:'+$('#p2').text());
    12.             console.log('获取指定class:'+$('.p2').html()); // 仅获取符合要求的第一条信息
    13.             // 属性选择器
    14.             console.log('获取指定属性：'+$('input[type=password]').val());
    15.             console.log('多个选择器：'+$('input,button').length);
    16.         }
    17.     script>
    18.     <p id="p2">This is a paragraph.p>
    19.     <p class="p2">This is another paragraph.p>
    20.     <p class="p2">This is another paragraph2.p>
    21.     <input type="text" name="" id="" value="1">
    22.     <input type="password" name="" id="" value="2">
    23.     <input type="text" name="" id="" value="3">
    24.     <button type="button" onclick="t2();">hide pbutton>
    2. 层级选择器

    后代，父子，兄弟

    2.     <script>
    3.         function t3(){
    4.             var spans=$('.box1 span');
    5.             console.log(spans.length);
    6.             var son=$('.box1>span');
    7.             console.log(son.length);
    8.             var nt=$('.box1>p+span');   // p标签后的紧挨span的个数
    9.             console.log(nt.length);
    10.             var pre=$('.box1>span~p'); // span之前是p标签的个数
    11.             console.log(pre.length);
    12.         }
    13.     script>
    14.     <div class="box1">
    15.         <p>p1p>
    16.         <span>p2span>
    17.         <p>p3<span>spanspan>p>
    18.         <span>span2span>
    19.     div>
    3. 元素精确定位

    first,last,even,odd,hearder【第一个，最后一个，偶数，奇数，h1这种】就不说了

    not:除什么外，eq(n)：第n的标号 ，gt(n):数组索引大于n的元素，lt(n):数组索引小于n的元素 

    1. <script>
    2.         function t1(){
    3.             var as=$('.box1>input:not(:button)');   // 非属性
    4.             console.log(as.length);
    5.             console.log(as.eq(2).val());
    6.             var as2=$('.box1>input:gt(1)'); // gt是大于，lt是小于
    7.             console.log(as2.length);
    8.         }
    9.     script>
    10.     <div class="box1">
    11.         <input value="0" type="text">
    12.         <input value="1" type="button">
    13.         <input value="2" type="text">
    14.         <input value="3" type="text">
    15.     div>
    16.     <button onclick="t1()">clickbutton>
     4. 内容选择器

    :contains('文本')【匹配含有该文本的标签】

    :empty【匹配所有不包含子元素或者文本的空元素】

    :has(tag)【匹配含有选择器所匹配的元素的元素】

    2.     <script>
    3.         function t2(){
    4.             var spans=$('.box2>span:contains("john")');
    5.             console.log(spans.length);
    6.             var em=$('.box2>span:empty');
    7.             console.log(em.length);
    8.             var hass=$('div:has(span)');
    9.             console.log(hass.length);
    10.         }
    11.     script>
    12.     <div class="box2">
    13.         <span>johnspan>
    14.         <span>excelspan>
    15.         <span>johnspan>
    16.         <span>span>
    17.     div>
    18.     <button onclick="t2()">clickbutton>

    空匹配有一个相反的函数，parent：匹配含有子元素或者文本的元素

    5. 属性选择器及其他
    1. $("div[属性]")
    2. $("div[属性=value]")
    3. $("div[属性!=value]")
    4. $("div[属性^=value]")属性以某些值开始
    5. $("div[属性$=value]")以某些值结束
    6. $("div[属性*=value]")包含某些值

    写法分别是：

            $("div:nth-child(1-index)")[index=even...]

            $(":input")

            $("input:enabled")

    元素解析

    •  text
    •  html
    • val
    1. <style>
    2.         .box1{
    3.             border: 1px solid;
    4.         }
    5.         .crs{
    6.             display: block;
    7.             border: 1px solid black;
    8.             background-color: aqua;
    9.             width: 60px;
    10.             height: 60px;
    11.         }
    12.         .hide{
    13.             display: none;
    14.         }
    15. style>
    1. <script>
    2.         function t5(){
    3.             var spans=$('.box5>span');
    4.             console.log('"html:"'+spans.html());//只获取第一个元素的内容
    5.             console.log('"text:"'+spans.text());// 将所有内容连在一起
    6.             // spans.html('全都变');    //会解析html标签
    7.             // spans.text('全都变'); //不会解析
    8.  
    9.             var opt=$('.box5>select');
    10.             console.log(opt.val()); //有value获取value，没有value获取值 或者input框内的value
    11.             var opts=$('.box5>select>option');
    12.             opts.val('999');    // 更改所有的value值，没有则添加
    13.         }
    14.     script>
    15.     <div class="box5">
    16.         <span value="span">1span>
    17.         <span>2span>
    18.         <span>3span>
    19.         <select name="" id="">
    20.             <option>1option>
    21.             <option>2option>
    22.             <option>3option>
    23.             <option>option>
    24.         select>
    25.     div>
    26.     <button onclick="t5()">clickbutton>
    27.     <hr>

    操作元素内容与样式

    css与attr非常相似，但是获取的值并不是实时的，获取实时的值，使用的是val

    使用css或attr更改元素的属性值

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <script src="jquery-3.6.0.min.js" type="text/javascript" charset="UTF-8">script>
    8.     <style>
    9.         .cls{
    10.             width: 300px;
    11.             height: 30px;
    12.             border: 1px solid;
    13.         }
    14.     style>
    15. head>
    16. <body>
    17.     
    18.     <script type="text/javascript">
    19.         function getext(){
    20.             var inp=$('#user');
    21.             console.log(inp.attr('type')); // 多个时，只获取第一个
    22.             console.log(inp.attr('value'));//相当于getAttribute拿不到实时信息
    23.             console.log(inp.val());
    24.         }
    25.     script>
    26.     <button onclick="getext();">获取元素button>
    27.     <input type="text" name="user" id="user" value="1">
    28.     <hr>
    29.     
    30.     <script>
    31.         function update(){
    32.             var inp=$('#inp');
    33.             inp.attr('type','button');
    34.         }
    35.     script>
    36.     <button onclick="update();">updatebutton>
    37.     <input type="text" id="inp">
    38.     <hr>
    39.     
    40.     <script>
    41.         function getcon(){
    42.             var con=$('#div01');
    43.             console.log(con.html());
    44.             con.html(con.html()+'更改后'); 
    45.         }
    46.         function testtext(){
    47.                 var con=$('#div01');
    48.                 console.log(con.text()); // 类似innerText
    49.                 con.text('更改后');
    50.         }
    51.     script>
    52.     <button onclick="getcon();">获取与修改内容button>
    53.     <button onclick="testtext();">获取与修改内容button>
    54.     <div id="div01">
    55.         <b>一段话b>
    56.     div>
    57.     <hr>
    58.     
    59.     <script>
    60.         function testcss(){
    61.             var cls=$('.cls');
    62.             cls.css('background-color','orange'); //attr一致
    63.             console.log(cls.css('width')); // 拿到属性对应的值
    64.         }
    65.         function testCss2(){
    66.             console.log('inside');
    67.             var cls=$('.cls');
    68.             cls.css({'border':'1px solid','color':'#ff0000','background-color':'blue','width':'300px','height':'40px'});
    69.         }
    70.     script>
    71.     <button onclick="testcss();">操作样式button>
    72.     <button onclick="testCss2();">操作样式button>
    73.     <div class="cls">
    74.         样式
    75.     div>
    76.     <hr>
    77.     
    78.     <script>
    79.         function addcss(){
    80.             var div=$('#div02');
    81.             div.addClass('cls');// 追加 要注意
    82.             div.removeClass('cls');
    83.             console.log('执行完成');
    84.         }
    85.     script>
    86.     <button onclick="addcss();">addcssbutton>
    87.     <div id="div02">
    88.         addcss
    89.     div>
    90. body>
    91. html>

    操作文档的文本结构

    1. div{
    2.             border: 1px dotted black;
    3.         }
    4. span{
    5.             border: 1px solid green;
    6.         }
    7. b{
    8.             /* display: block; */
    9.             border: 1px solid blue;
    10.         }
    11. i{
    12.             border: 1px solid hotpink;
    13.         }

    1. 内部插入：append，appendTo，prepend，prependTo【注意To与非To的区别】

    2.     <script>
    3.         function tin(){
    4.             var sn='插入';
    5.             var i=$('i');
    6.             var div=$('.box1');
    7.             div.append(sn); //尾插
    8.             div.prepend(sn); //头插
    9.             i.appendTo(div);
    10.             // i.prependTo(div);
    11.         }
    12.     script>
    13.     <i>TOi>
    14.     <div class="box1">
    15.         <span>span1span>
    16.         <span>span2span>
    17.     div>
    18.     <button onclick="tin()">div内部插入button>
    19.     <hr>

    2. 外部插入：after，before，inserAfter，inserBefore

    2.     <script>
    3.         function tout(){
    4.             var div_b=$('.box2>b');
    5.             var b='插入'
    6.             div_b.after(b);
    7.             div_b.before(b);
    8.  
    9.             var i=$('.box2 i');
    10.             // i.insertAfter(div_b);
    11.             i.insertBefore(div_b);
    12.  
    13.         }
    14.     script>
    15.     <div class="box2">
    16.         <b>span1<i>TOi>b>
    17.     div>
    18.     <button onclick="tout()">div中的b外部插入button>
    19.     <hr>

    3. 包裹：wrap，unwrap，wrapAll，wrapInner

    2.     <script>
    3.         function twrap(){
    4.             // $('.spa').wrap('
      '); // 一个span一个盒子
    5.             // $('.box3>b').unwrap($('.box3'));// 移除box3盒子
    6.             // $('.spa').wrapAll('
      '); //多个span放入一个盒子
    7.             $('.box3>b').wrapInner(''); // box3中的所有b标签加斜体
    8.         }
    9.     script>
    10.     <span class="spa">这是一个 spanspan>
    11.     <span class="spa">这是一个 spanspan>
    12.     <div class="box3">
    13.         这是box3
    14.         <b>b1b>
    15.         <b>b2b>
    16.         <span>span1span>
    17.     div>
    18.     <button onclick="twrap();">包裹button>
    19.     <hr>

    4. 替换：replaceWith，replaceAll

    2.     <script>
    3.         function treplace(){
    4.             var spans=$('.box4>span');
    5.             // spans.replaceWith('替换'); // 与All不能同时出现
    6.             $('.box4>i').replaceAll('.box4>b');
    7.         }
    8.     script>
    9.     <div class="box4">
    10.         <i>ini>
    11.         <span>span1span>
    12.         <span>span2span>
    13.         <b>b1b>
    14.         <b>b2b>
    15.     div>
    16.     <button onclick="treplace()">替换button>
    17.     <hr>

    5. 删除：empty，remove

    2.     <script>
    3.         function tdel(){
    4.             var div=$('.box5');
    5.             // div.empty();
    6.             $('.box5>span').remove();
    7.             
    8.         }
    9.     script>
    10.     <div class="box5">
    11.         <span>span1span>
    12.         <b>b1b>
    13.         <i>i1i>
    14.     div>
    15.     <button onclick="tdel()">删除button>
    16.     <hr>

    6. 克隆 ：clone

    2.     <script>
    3.         function tcopy(){
    4.             var span=$('.box6>b');
    5.             $('.box6').append(span.clone());
    6.             console.log('success');
    7.         }
    8.     script>
    9.     <div class="box6">
    10.         <span>span1span>
    11.         <b>b1b>
    12.     div>
    13.     <button onclick="tcopy()">复制b1button>

    jq事件

    1.页面载入ready

    当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

    这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

    简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

    有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。

    请确保在 元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。

    可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

    1. $(document).ready(function(){
    2.   // 在这里写你的代码...
    3. }); 
    4. 等价于
    5. $(function(){
    6.   // 在这里写你的代码...
    7. })
    2. 事件处理【bind，unbind，one】
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.     <script src="jquery-3.6.0.min.js" type="text/javascript" charset="UTF-8">script>
    8.     
    9. head>
    10. <body>
    11.     
    12.     <script>
    13.         function thingjs(){
    14.             var btn=document.getElementById('btn');
    15.             btn.onclick=function(){
    16.                 alert('js方式');
    17.             }
    18.         }
    19.         function thing(){
    20.             $('#btn2').bind('click',function(){alert('jquery')});
    21.             $('#btn2').bind('click',function(){alert('jquery2')});
    22.         }
    23.         // $(document).ready(alert('loading'));
    24.         // $(document).ready(alert('loading...'));
    25.  
    26.     script>
    27.     <button onclick="thingjs();">测试jsbutton>
    28.     <button onclick="thing();">测试jqbutton>
    29.     <button onclick="ubind();">unbindbutton>
    30.     <button onclick="tone();">一次性事件button>
    31.     
    32.     
    33.     
    34.     
    35.     <hr>
    36.     <button id="btn">jsbutton>
    37.     <button id="btn2">jqbindbutton>
    38.     
    39.     <script>
    40.         function ubind(){
    41.             $('#btn2').unbind('click');
    42.         }
    43.     script>
    44.     
    45.     <script>
    46.         function tone(){
    47.             $('#btn3').one('click',function(){
    48.                 alert('一次性事件');
    49.             })
    50.         }
    51.     script>
    52.     <button id="btn3">onebutton>
    53. body>
    54. html>
    3. 事件切换【hover，toggle】
    1. <script>
    2. $(function(){
    3.             console.log('load');
    4.             $('.div01').hover(
    5.                 function(){
    6.                     $(this).css('background-color','pink');
    7.                     console.log('inside');
    8.                 },
    9.                 function(){
    10.                     $(this).css('background-color','gray');
    11.                     console.log('outside');
    12.                 });
    13. })
    14. script>
    16. <div class="div01">
    17.         div
    18.     div>

    toggle（元素的隐藏与展示动画那里说） 

    4. 事件【click，mouseover，focus，blur等】
    1. <script>
    2.     $(function(){
    3. // blur 失去焦点事件 // focus 获取焦点事件
    4.             $('.div02>input').bind({
    5.                 'blur':function(){
    6.                     $(this).css('color','pink');
    7.                 },
    8.                 'focus':function(){
    9.                     $(this).css('color','gray');
    10.                 }
    11.             });
    12.             
    13.         //change 值改变事件
    14.             $('.div02>select').change(function(){
    15.                 $(this).css('color','pink');
    16.             });
    17.             // click,dblclick单双击事件
    18.             $('.div02>#btn1').click(function(){
    19.                 alert('单击事件');
    20.             });
    21.             $('.div02>#btn2').dblclick(function(){
    22.                 alert('双击事件');
    23.             });
    24.         })
    25.     script>
    26. <div class="div02">
    27.         <input type="text" value="000">
    28.         <select name="" id="">
    29.             <option value="">2option>
    30.             <option value="">1option>
    31.             <option value="">3option>
    32.         select>
    33.         <button id="btn1">clickbutton>
    34.         <button id="btn2">dbclickbutton>
    35.     div>

    jq动画

    show+hide【等比放大，等比缩小】 等价于toggle【切换元素展示与隐藏的状态】

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <script src="jquery-3.6.0.min.js" type="text/javascript" charset="UTF-8">script>
    7.     <title>Documenttitle>
    8.     <style>
    9.         *{
    10.             padding: 0;
    11.             margin: 0;
    12.         }
    13.         div{
    14.             border: 1px solid;
    15.             width: 100%;
    16.             height: 300px;
    17.         }
    18.         .div1{
    19.             background-color: orange;
    20.             display: none;
    21.         }
    22.         .div2{
    23.             background-color: blueviolet;
    24.         }
    25.     style>
    26. head>
    27. <body>
    28.     <script>
    29.         $(function(){
    30.             // 隐藏与显示
    31.             // $('.div1').show(3000);
    32.             // $('.div2').hide(3000);
    33.  
    34.             // $('.div1').hide(3000);
    35.             // $('.div2').show(3000);
    36.  
    37.             // $('div').toggle(10000);
    38.             // 滑动消失或展示
    39.             // $('.div1').slideDown(3000); //向下滑出显示【div1已经隐藏】
    40.             // $('.div2').slideUp(2000);  // 向上滑动隐藏
    41.             // 淡入淡出[位置在未显示之前预留]
    42.             $('.div2').fadeOut(3000);   //div2渐渐消失
    43.             $('.div1').fadeIn(6000); //div1渐渐显示
    44.         
    45.         })
    46.     script>
    47.     <div class="div1">div>
    48.     <div class="div2">div>
    49. body>
    50. html>

    下节为jq案例

  • 相关阅读:
    如何在外网访问内网服务器数据库
    CSS基础：盒子模型详解
    Flink Unaligned Checkpoint
    【数据分享】上海市出租车GPS数据
    【学习笔记】NOIP模拟赛 - B.游戏
    ssm小型物流信息系统毕业设计源码071146
    Promise面试实战指北
    解决Java中https请求接口报错问题
    [毕业设计源码下载]精品基于Python实现的学生在线选课系统[包运行成功]
    安卓Android 架构模式及UI布局设计
  • 原文地址：https://blog.csdn.net/m0_62836433/article/details/133023733