❋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
• 标签
• 属性
• 多个选择器一起

<script>
        function t2(){ 
            var all=$('*'); // 通用选择器[包括]
            console.log(all);
            var ps=$('p');// 获取所有的p标签
            console.log(ps);   // p标签数组 
            console.log(ps[1]); // 获取第1个p标签对象
            console.log(ps.eq(1).text()); //index=1的p标签值
            // ps.hide();   // 隐藏所有对象
            ps.eq(1).hide();    // 隐藏指定对象
            console.log('获取指定id唯一:'+$('#p2').text());
            console.log('获取指定class:'+$('.p2').html()); // 仅获取符合要求的第一条信息
            // 属性选择器
            console.log('获取指定属性：'+$('input[type=password]').val());
            console.log('多个选择器：'+$('input,button').length);
        }
    </script>
    <p id="p2">This is a paragraph.</p>
    <p class="p2">This is another paragraph.</p>
    <p class="p2">This is another paragraph2.</p>
    <input type="text" name="" id="" value="1">
    <input type="password" name="" id="" value="2">
    <input type="text" name="" id="" value="3">
    <button type="button" onclick="t2();">hide p</button>

2. 层级选择器

后代，父子，兄弟

<!-- 3. 层级选择器 -->
    <script>
        function t3(){
            var spans=$('.box1 span');
            console.log(spans.length);
            var son=$('.box1>span');
            console.log(son.length);
            var nt=$('.box1>p+span');   // p标签后的紧挨span的个数
            console.log(nt.length);
            var pre=$('.box1>span~p'); // span之前是p标签的个数
            console.log(pre.length);
        }
    </script>
    <div class="box1">
        <p>p1</p>
        <span>p2</span>
        <p>p3<span>span</span></p>
        <span>span2</span>
    </div>

3. 元素精确定位

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

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

<script>
        function t1(){
            var as=$('.box1>input:not(:button)');   // 非属性
            console.log(as.length);
            console.log(as.eq(2).val());
            var as2=$('.box1>input:gt(1)'); // gt是大于，lt是小于
            console.log(as2.length);
        }
    </script>
    <div class="box1">
        <input value="0" type="text">
        <input value="1" type="button">
        <input value="2" type="text">
        <input value="3" type="text">
    </div>
    <button onclick="t1()">click</button>

 4. 内容选择器

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

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

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

<!-- 文本,空匹配 -->
    <script>
        function t2(){
            var spans=$('.box2>span:contains("john")');
            console.log(spans.length);
            var em=$('.box2>span:empty');
            console.log(em.length);
            var hass=$('div:has(span)');
            console.log(hass.length);
        }
    </script>
    <div class="box2">
        <span>john</span>
        <span>excel</span>
        <span>john</span>
        <span></span>
    </div>
    <button onclick="t2()">click</button>

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

5. 属性选择器及其他

$("div[属性]")
$("div[属性=value]")
$("div[属性!=value]")
$("div[属性^=value]")属性以某些值开始
$("div[属性$=value]")以某些值结束
$("div[属性*=value]")包含某些值

写法分别是：

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

        $(":input")

        $("input:enabled")

元素解析

•  text
•  html
• val

<style>
        .box1{
            border: 1px solid;
        }
        .crs{
            display: block;
            border: 1px solid black;
            background-color: aqua;
            width: 60px;
            height: 60px;
        }
        .hide{
            display: none;
        }
</style>

<script>
        function t5(){
            var spans=$('.box5>span');
            console.log('"html:"'+spans.html());//只获取第一个元素的内容
            console.log('"text:"'+spans.text());// 将所有内容连在一起
            // spans.html('<i>全都变</i>');    //会解析html标签
            // spans.text('<i>全都变</i>'); //不会解析

            var opt=$('.box5>select');
            console.log(opt.val()); //有value获取value，没有value获取值 或者input框内的value
            var opts=$('.box5>select>option');
            opts.val('999');    // 更改所有的value值，没有则添加
        }
    </script>
    <div class="box5">
        <span value="span">1</span>
        <span>2</span>
        <span>3</span>
        <select name="" id="">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option></option>
        </select>
    </div>
    <button onclick="t5()">click</button>
    <hr>

操作元素内容与样式

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.min.js" type="text/javascript" charset="UTF-8"></script>
    <style>
        .cls{
            width: 300px;
            height: 30px;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <!-- 1、获取元素 -->
    <script type="text/javascript">
        function getext(){
            var inp=$('#user');
            console.log(inp.attr('type')); // 多个时，只获取第一个
            console.log(inp.attr('value'));//相当于getAttribute拿不到实时信息
            console.log(inp.val());
        }
    </script>
    <button onclick="getext();">获取元素</button>
    <input type="text" name="user" id="user" value="1">
    <hr>
    <!-- 2、修改对象属性 -->
    <script>
        function update(){
            var inp=$('#inp');
            inp.attr('type','button');
        }
    </script>
    <button onclick="update();">update</button>
    <input type="text" id="inp">
    <hr>
    <!-- 3、操作元素的内容 -->
    <script>
        function getcon(){
            var con=$('#div01');
            console.log(con.html());
            con.html(con.html()+'<i>更改后</i>'); 
        }
        function testtext(){
                var con=$('#div01');
                console.log(con.text()); // 类似innerText
                con.text('<i>更改后</i>');
        }
    </script>
    <button onclick="getcon();">获取与修改内容</button>
    <button onclick="testtext();">获取与修改内容</button>
    <div id="div01">
        <b>一段话</b>
    </div>
    <hr>
    <!-- 4、 操作元素样式 -->
    <script>
        function testcss(){
            var cls=$('.cls');
            cls.css('background-color','orange'); //attr一致
            console.log(cls.css('width')); // 拿到属性对应的值
        }
        function testCss2(){
            console.log('inside');
            var cls=$('.cls');
            cls.css({'border':'1px solid','color':'#ff0000','background-color':'blue','width':'300px','height':'40px'});
        }
    </script>
    <button onclick="testcss();">操作样式</button>
    <button onclick="testCss2();">操作样式</button>
    <div class="cls">
        样式
    </div>
    <hr>
    <!-- 5、为选择器添加写好的样式 -->
    <script>
        function addcss(){
            var div=$('#div02');
            div.addClass('cls');// 追加 要注意
            div.removeClass('cls');
            console.log('执行完成');
        }
    </script>
    <button onclick="addcss();">addcss</button>
    <div id="div02">
        addcss
    </div>
</body>
</html>

操作文档的文本结构

div{
            border: 1px dotted black;
        }
span{
            border: 1px solid green;
        }
b{
            /* display: block; */
            border: 1px solid blue;
        }
i{
            border: 1px solid hotpink;
        }

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

<!-- 1 内部插入 -->
    <script>
        function tin(){
            var sn='<span>插入</span>';
            var i=$('i');
            var div=$('.box1');
            div.append(sn); //尾插
            div.prepend(sn); //头插
            i.appendTo(div);
            // i.prependTo(div);
        }
    </script>
    <i>TO</i>
    <div class="box1">
        <span>span1</span>
        <span>span2</span>
    </div>
    <button onclick="tin()">div内部插入</button>
    <hr>

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

<!-- 2 外部插入 -->
    <script>
        function tout(){
            var div_b=$('.box2>b');
            var b='<span>插入</span>'
            div_b.after(b);
            div_b.before(b);

            var i=$('.box2 i');
            // i.insertAfter(div_b);
            i.insertBefore(div_b);

        }
    </script>
    <div class="box2">
        <b>span1<i>TO</i></b>
    </div>
    <button onclick="tout()">div中的b外部插入</button>
    <hr>

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

<!-- 3、 包裹 -->
    <script>
        function twrap(){
            // $('.spa').wrap('<div></div>'); // 一个span一个盒子
            // $('.box3>b').unwrap($('.box3'));// 移除box3盒子
            // $('.spa').wrapAll('<div></div>'); //多个span放入一个盒子
            $('.box3>b').wrapInner('<i></i>'); // box3中的所有b标签加斜体
        }
    </script>
    <span class="spa">这是一个 span</span>
    <span class="spa">这是一个 span</span>
    <div class="box3">
        这是box3
        <b>b1</b>
        <b>b2</b>
        <span>span1</span>
    </div>
    <button onclick="twrap();">包裹</button>
    <hr>

4. 替换：replaceWith，replaceAll

<!-- 4、替换 -->
    <script>
        function treplace(){
            var spans=$('.box4>span');
            // spans.replaceWith('<i>替换</i>'); // 与All不能同时出现
            $('.box4>i').replaceAll('.box4>b');
        }
    </script>
    <div class="box4">
        <i>in</i>
        <span>span1</span>
        <span>span2</span>
        <b>b1</b>
        <b>b2</b>
    </div>
    <button onclick="treplace()">替换</button>
    <hr>

5. 删除：empty，remove

<!-- 5、删除 -->
    <script>
        function tdel(){
            var div=$('.box5');
            // div.empty();
            $('.box5>span').remove();
            
        }
    </script>
    <div class="box5">
        <span>span1</span>
        <b>b1</b>
        <i>i1</i>
    </div>
    <button onclick="tdel()">删除</button>
    <hr>

6. 克隆 ：clone

<!-- 6、复制 -->
    <script>
        function tcopy(){
            var span=$('.box6>b');
            $('.box6').append(span.clone());
            console.log('success');
        }
    </script>
    <div class="box6">
        <span>span1</span>
        <b>b1</b>
    </div>
    <button onclick="tcopy()">复制b1</button>

jq事件

1.页面载入ready

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

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

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

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

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

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

$(document).ready(function(){
  // 在这里写你的代码...
}); 
等价于
$(function(){
  // 在这里写你的代码...
})

2. 事件处理【bind，unbind，one】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.6.0.min.js" type="text/javascript" charset="UTF-8"></script>
    
</head>
<body>
    <!-- 1. 添加事件 -->
    <script>
        function thingjs(){
            var btn=document.getElementById('btn');
            btn.onclick=function(){
                alert('js方式');
            }
        }
        function thing(){
            $('#btn2').bind('click',function(){alert('jquery')});
            $('#btn2').bind('click',function(){alert('jquery2')});
        }
        // $(document).ready(alert('loading'));
        // $(document).ready(alert('loading...'));

    </script>
    <button onclick="thingjs();">测试js</button>
    <button onclick="thing();">测试jq</button>
    <button onclick="ubind();">unbind</button>
    <button onclick="tone();">一次性事件</button>
    
    <!-- <button>    </button> -->
    
    
    <hr>
    <button id="btn">js</button>
    <button id="btn2">jqbind</button>
    <!-- 2、解绑事件 -->
    <script>
        function ubind(){
            $('#btn2').unbind('click');
        }
    </script>
    <!-- 3、一次性事件 -->
    <script>
        function tone(){
            $('#btn3').one('click',function(){
                alert('一次性事件');
            })
        }
    </script>
    <button id="btn3">one</button>
</body>
</html>

3. 事件切换【hover，toggle】

<script>
$(function(){
            console.log('load');
            $('.div01').hover(
                function(){
                    $(this).css('background-color','pink');
                    console.log('inside');
                },
                function(){
                    $(this).css('background-color','gray');
                    console.log('outside');
                });
})
</script>
<!-- 为div设置宽高与边框 -->
<div class="div01">
        div
    </div>

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

4. 事件【click，mouseover，focus，blur等】

<script>
    $(function(){
// blur 失去焦点事件 // focus 获取焦点事件
            $('.div02>input').bind({
                'blur':function(){
                    $(this).css('color','pink');
                },
                'focus':function(){
                    $(this).css('color','gray');
                }
            });
            
        //change 值改变事件
            $('.div02>select').change(function(){
                $(this).css('color','pink');
            });
            // click,dblclick单双击事件
            $('.div02>#btn1').click(function(){
                alert('单击事件');
            });
            $('.div02>#btn2').dblclick(function(){
                alert('双击事件');
            });
        })
    </script>
<div class="div02">
        <input type="text" value="000">
        <select name="" id="">
            <option value="">2</option>
            <option value="">1</option>
            <option value="">3</option>
        </select>
        <button id="btn1">click</button>
        <button id="btn2">dbclick</button>
    </div>

jq动画

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="jquery-3.6.0.min.js" type="text/javascript" charset="UTF-8"></script>
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            border: 1px solid;
            width: 100%;
            height: 300px;
        }
        .div1{
            background-color: orange;
            display: none;
        }
        .div2{
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <script>
        $(function(){
            // 隐藏与显示
            // $('.div1').show(3000);
            // $('.div2').hide(3000);

            // $('.div1').hide(3000);
            // $('.div2').show(3000);

            // $('div').toggle(10000);
            // 滑动消失或展示
            // $('.div1').slideDown(3000); //向下滑出显示【div1已经隐藏】
            // $('.div2').slideUp(2000);  // 向上滑动隐藏
            // 淡入淡出[位置在未显示之前预留]
            $('.div2').fadeOut(3000);   //div2渐渐消失
            $('.div1').fadeIn(6000); //div1渐渐显示
        
        })
    </script>
    <div class="div1"></div>
    <div class="div2"></div>
</body>
</html>

下节为jq案例