jQuery的介绍和基本运用

最新推荐文章于 2024-08-15 08:55:57 发布

coderyeah

最新推荐文章于 2024-08-15 08:55:57 发布

阅读量249

点赞数

分类专栏：前端文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_49195366/article/details/127420431

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery的介绍和基本运用

一.简介

jQuery是继prototype之后一个优秀的开源的JavaScript代码库（或JavaScript框架），它封装JavaScript常用的功能代码；
特点：
- 具有独特的链式语法，可以把多个操作写在一行代码里，更加简洁；
- 拥有大量的选择器，不仅有高效灵活的css选择器，并且可对CSS选择器进行扩展；
- 拥有便捷的插件扩展机制和丰富的插件（树形菜单、日期控件、图片切换插件、弹出窗口等）。
核心思想：(write less，do more）写得更少，做得更多；

二.`jQuery`操作方式

1. $和`JQuery`

 <!--  $指代jQuery对象 如果有多个框架$发生冲突 就用 jQuery代替$  -->
    console.log($);
    console.log($ === jQuery)//true

2. 页面加载事件

<script type="text/javascript" src="static/jquery/jquery-2.1.3.min.js"></script>
<script>
    <!--  $指代jQuery对象 如果有多个框架$发生冲突 就用 jQuery代替$  -->
    window.onload = function () {
        //原生js页面加载事件 先加载html标签 静态资源图片等 再执行js代码 效率慢体验感差
        console.log("原生js页面加载事件......")
    }
    $(function () {
        //加载html标签 不用等待静态资源加载 直接执行 速度更快
        console.log("jquery加载页面事件......")
    })
</script>

3. 基本选择器

<body>
<div id="d1">
    <span>我系渣渣灰，一🔪九九九</span>
    <p>我司我冠</p>
</div>
<h1 class="h1">IU不错哦</h1>
<script>
    <!--  $指代jQuery对象 如果有多个框架$发生冲突 就用 jQuery代替$  -->
    $(function () {
        //id选择器
        var d1 = $("#d1");
        console.log(d1);
        //class选择器
        var h1 = $('.h1');
        console.log(h1);
        //标签选择器
        var p = $('p');
        console.log(p);
        //全局选择器
        var all = $('*');
        console.log(all);
        //组合选择器
        var zh = $('.h1,#d1,p');
        console.log(zh);
    })
</script>
</body>

4. 毗邻选择器

<body>
<form>
    <label>姓名：</label>
    <label>
        <input type="text">
        <span style="color: red">绯红之刃</span>
    </label>
    密码： <input type="number">
</form>
<script>
    <!--  $指代jQuery对象 如果有多个框架$发生冲突 就用 jQuery代替$  -->
    //后代选择器 标签之间空格 隔开
    console.log($('form label'));
    console.log($('form input'));
    //子选择器标签之间用 >
    console.log($('form > input'));
    //毗邻选择器 标签之间用+ 找后面的第一个
    console.log($('input + span'));
    //兄弟选择器 找的是平级后面的所有选择器 用~连接
    console.log($('label ~ input'));
    console.log($('label ~ label'));
</script>
</body>

5. 绑定事件

<body>
<button id="btn1">事件1</button>
<button id="btn2">事件2</button>
<button id="btn3">事件3</button>
<script>
    <!--  $指代jQuery对象 如果有多个框架$发生冲突 就用 jQuery代替$  -->
    //方式一
    $('#btn1').click(function () {
        alert("点击了事件一")
    });
    //方式二 指定事件为click
    $('#btn2').on('click', function () {
        alert("点击了事件二")
    })
    //方式三
    $('#btn3').bind('click', function () {
        alert("点击了事件三")
    })
    //    取消事件绑定
    $('#btn2').off('click');//常用
    $('#btn3').unbind('click');
</script>
</body>

6. 文本操作

<body>
<ul id="ul">
    <li>《天上人间》</li>
    <li>《JOJO》</li>
    <li>《斗破苍穹》</li>
</ul>
<div id="d1" style="background-color: wheat; width: 300px; height: 200px">
</div>
<script>
    <!--  $指代jQuery对象 如果有多个框架$发生冲突 就用 jQuery代替$  -->\
    $(function () {
        //获取网页内容
        console.log($('ul').html());
        //获取纯文本
        console.log($('ul').text());
        $('#d1').mouseover(function () {
            $(this).html("<span style='color: red'>hello</span>");
        });
        $('#d1').mouseout(function () {
            $(this).text("再见");
        });
    })
</script>
</body>

7. 取值操作

<body>
<script>
    <!--  $指代jQuery对象 如果有多个框架$发生冲突 就用 jQuery代替$  -->
    //获取值
    $(function () {
        $('#getVal').click(function () {
            var username = $('#username').val();
            console.log(username);
            console.log($('#age').val());
            console.log($('#fruit').val());
            console.log($('#girl').val());
            console.log($('#boy').val());
        });
        $('#setVal').click(function () {
            $('#username').val('coderyeah爱喝水');
            $('#age').val(22)
            $('#fruit').val('Apple')
            $('#girl').val('00000')
            $('#boy').val('11111');
        });
    })
</script>
</body>

8. 属性操作

<body>
<a href="https://www.jd.com/" id="hre1" data-abc="123"
   data-person='{"id":1,"name":"tom","address":"四川成都"}'
   data-name="赵子龙"
   data-age="22"
   data-sex="true">京东</a>
<script>
    <!--  $指代jQuery对象 如果有多个框架$发生冲突 就用 jQuery代替$  -->
    //加载页面事件
    $(function () {
        //获取属性
        console.log($('#hre1').attr('href'));
        //自定义属性 使用data-属性名=属性值
        var abc = $('#hre1').data('abc');//获取自定义属性 这种方式会自动进行类型转换 例如"123"--数字123
        console.log(abc);
        //通过attr获取自定义属性值
        var attr = $('#hre1').attr('data-abc');//不能省略data了 这种方式不会进行类型转换默认字符类型
        console.log(attr);
        //自动解析json对象
        var p1 = $('#hre1').data('person');
        console.log(p1);
        //不会解析 json字符串
        var p2 = $('#hre1').attr('data-person');
        console.log(p2)

        //    将json字符串转换为json对象用JSON.parse(json字符串)
        console.log(JSON.parse(p2));
        //    将json对象转换为json字符串用JSON.stringify(json对象)
        console.log(JSON.stringify(p1));

    });
</script>
</body>

9. 样式操作

<style>
    .myClass {
        background-color: #0a885e;
        width: 300px;
        height: 300px;
        text-align: center;
    }
</style>

<div id="d1" class="myClass">
    i am a monster!!!
</div>
<script>
    <!--  $指代jQuery对象 如果有多个框架$发生冲突 就用 jQuery代替$  -->
    $(function () {
        //添加样式
        $('#d1').addClass('myClass')
        //删除样式
        $('#d1').removeClass('myClass')

    })
</script>

10. 元素节点操作

<div id="d1" style="background-color: #0a885e">
</div>
<script>
    <!--  $指代jQuery对象 如果有多个框架$发生冲突 就用 jQuery代替$  -->
    $(function () {
        //添加节点
        $('#d1').append("<span>i  am  stronger than  you  ?????</span>")
        //删除节点（包括子节点）
        // $('#d1').remove();
        //清空子节点
        $('#d1').empty()
    })
    console.log($('#d1'));
</script>

11. 原生`DOM`和`jQuery`的转换

<div id="d1">000001</div>
<div id="d2">000002</div>
<script>
    <!--  $指代jQuery对象 如果有多个框架$发生冲突 就用 jQuery代替$  -->
    console.log(document.getElementById("d1"));//返回html标签内容
    console.log($('#d2'));//返回数组对象

    //将jquery转换为原生DOM
    console.log($('#d2')[0].innerText);
    //将原生DOM转换为jquery
    console.log($(document.getElementById("d1")).text());
</script>

12. 遍历

<ul id="u">
    <li>天青色等烟雨</li>
    <li>而我在等你</li>
    <li>give up！</li>
</ul>
<script>
    <!--  $指代jQuery对象 如果有多个框架$发生冲突 就用 jQuery代替$  -->
    $(function () {
        var li = $('li');
        // $(li).each(function (index, item) {
        //
        // })
        li.each(function (index, item) {
            console.log(index + "  " + item.innerText);
        })
    })
</script>

三.异步请求方式

1. Ajax实现GET请求

账号:<input type="text" name="username" id="username"><span id="msg" style="color: red"></span><br><br>
<button id="btn">登录</button>
<script>
    $(function () {
        $('#btn').click(function () {
            var username = $('#username').val();
            $.get("/req", {"username": username}, function (res) {
                //回调函数
                $('#msg').text(res)
            }, 'text');
        })
    })
</script>

2. Ajax实现POST请求

<script>
    $(function () {
        $('#btn').click(function () {
            var username = $('#username').val();
            $.post("/req", {"username": username}, function (res) {
                //回调函数
                $('#msg').text(res)
            }, 'text');
        })
    })
</script>

3. Ajax统一请求

<script>
    $(function () {
        $('#btn').click(function () {
            var username = $('#username').val();
            $.ajax({
                url: '/req',//请求路径
                type: 'GET',//请求方式
                data: {"username": username},//json格式参数
                success: function (res) {//返回res结果集
                    $('#msg').text(res);//回调函数
                },
                dataType: 'text',//数据返回格式 text,json
                async: true//表示异步请求 默认异步请求
            });
        })
    });
</script>

coderyeah

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的介绍和基本运用

jQuery是继prototype之后一个优秀的开源的JavaScript代码库（或JavaScript框架），它封装JavaScript常用的功能代码；特点：具有独特的链式语法，可以把多个操作写在一行代码里，更加简洁；拥有大量的选择器，不仅有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件（树形菜单、日期控件、图片切换插件、弹出窗口等）。核心思想：(write less，do more）写得更少，做得更多；
复制链接

扫一扫