jQuery入门（简介、简单使用）

最新推荐文章于 2024-11-02 12:42:04 发布

清风挽歌

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量222

点赞数 1

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

本文链接：https://blog.csdn.net/zxy144/article/details/109756343

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jQuery简介

jQuery是一个快速、简洁的JavaScript工具库。jQuery的宗旨是“write less，do more”，写更少的代码，做更多的事情。jQuery封装了JavaScript常用的功能代码，提供了一套易于使用的api，可以跨多种浏览器工作，使HTML文档的遍历、事件处理、动画设计和Ajax交互等操作变得更加简单

jQuery中的版本

1.x.x：兼容IE678，使用最为广泛的，官方只做bug维护，功能不再新增。因此对一般项目来说使用1版本就够了。最终版本1.12.4
2.x.x：不兼容IE678，只做bug维护，功能不再新增，如果不考虑兼容低版本的浏览器可以使用2版本。最终版本2.2.4
3.x.x：不兼容IE678，只支持最新的浏览器，实际开发中一般不会使用最新版本的jQuery，因为很多的jQuery插件并不一定立即支持最新版的jQuery，官方目前在更新的就是3版本

官网下载：https://jquery.com/download/

语法

通过选取HTML元素，并对选取的元素进行某些操作

$(selector).action()

selector：需要查询的元素（里面写选择器，除了支持css的选择器，还有一些特有的选择器）

action：对该元素执行的操作

jQuery的入口函数：

$(document).ready(function(){
    //执行代码
});
//简写形式：
$(function(){
   //指定代码 
});

jQuery中的入口函数和JavaScript入口函数window.onload对比：

区别点	window.onload	$(document).ready()
执行时机	等待整个网页全部加载完毕，然后执行该方法中的代码	等待网页中的DOM结构加载完毕，就会执行该方法中的代码
执行次数	只能执行一次，如果是第二次，那么第一次的执行会被覆盖	可以执行多次，不会被覆盖（就是可以写多个该方法）

jQuery对象和js对象之间的转换

虽然jQuery也是使用js写的，但是jQuery对象和js对象对应了自己独有的属性和方法，jQuery对象不能使用js中的方法，js对象也不可以使用jQuery中的方法，如果需要使用对方的API就需要进行转换：

js中的DOM对象转换为jQuery对象：$(js对象)
jQuery对象转换为js中的对象：jQuery对象[索引] 或者 jQuery对象.get(索引)

        $(function (){
            //获取一个js中的对象
            var html1 = document.getElementById("box1")
            //获取一个jQuery中的对象
            var html2 = $("#box1")

            console.info("js中的对象内容--》"+html1.innerText);
            console.info("jQuery中对象的内容--》"+html2.html());

            // //js对象中能使用jQuery的方法吗？  不能
            // console.info(html1.html());
            // //jQuery对象能使用js中的方法吗？  不能
            // console.info(html2.innerText);

            //js中的对象和jQuery中的对象互相转换
            //调用jQuery中的get方法就可以得到一个js对象
            console.info("将jQuery对象转换为js对象，然后使用innerText方法--》"+html2.get(0).innerText);
            //给使用$()中放入js对象，就能将其转换为jQuery对象
            console.info("将js对象转换为jQuery对象，然后使用html()方法--》"+$(html1).html())


        })

开发中，使用这种方便的方式进行对象之间来回的转换，让我们js和jQuery中的方法都可以使用，让开发更加方便，而且还能实现更多的效果

jQuery中的DOM操作

对DOM树中的文本和值进行操作

方法	说明
val([value])	获得/设置该元素value属性的值，有参数就是设置值没有就是得到值
text([value])	获得/设置该元素中的文本内容，有参数就是设置值没有就是得到值
html([value])	获得/设置该元素的带标签体的内容，有参数就是设置值没有就是得到值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .p1{background-color:red}
    </style>
    <script src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<p class="p1">段落一</p>
<p id="pp2">段落二</p>
<p >段落三</p>
<div id="box"><p>哈哈</p></div>
<script>
    $(function (){
        //给元素添加一个class
        $("#pp2").addClass("p1");

        //删除元素的class
        $("p:first").removeClass();

        //原本有该class的删除掉，没有的添加
        $("p").toggleClass("p1");

        //获取value
        var value = $("input:first").val();
        console.log(value);

        //获取标签中的文本内容
        var text = $("#box").text();
        console.log(text);

        //获得标签中的全部内容，包括标签体
        var html = $("#box").html();
        console.log(html);
    })
</script>
</body>
</html>

对DOM树中的属性进行操作

方法	说明
attr(name,[value])	获得/设置该元素指定属性的值，有第二个参数就是设置值没有就是得到值
prop(name,[value])	获得/设置该元素指定属性的值，有第二个参数就是设置值没有就是得到值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<input type="checkbox" value="1" id="eat">吃
<input type="checkbox" value="2">睡
<script>
    $(function (){
        //给type为checkbox的元素加上属性checked=true
        $("input:checkbox").prop("checked",true);
        //获得id为eat的元素中的checked属性的值
        console.log($("#eat").prop("checked"))//可以得到 true,就算没有该属性也会返回false
        console.log($("#eat").attr("checked"))//不能得到，返回undefined

        //让prop和attr获取一个不存在的属性
        console.log($("#eat").prop("name"))//会返回空
        console.log($("#eat").attr("name"))//会返回undefined
    })
</script>
</body>
</html>

（在获取checked和selected属性的值时要使用prop，其他情况功能相同，获取不到时prop会返回空或者false，attr会返回undefined）

jQuery中的遍历

原始遍历方法

for (var i=0;i<数组length;i++){
    //数组[i]
}

jQuery中对象中的遍历方法

数组.each(function (index,element){
    //index  element
})

index：元素在数组中的索引值，element：代表数组中的这个元素

jQuery中全局的遍历方法

$.each(数组,function (index,element){
    //index  element
})

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery中的遍历</title>
    <script src="../js/jquery-3.4.1.js"></script>
    <script>
        $(function (){
            //获得所有的li元素对象
            var $city = $("ul li");
            
            //使用普通的for循环
            for (var i=0;i<$city.length;i++){
                console.log($city[i].innerText);
            }

            //使用jQuery中对象的each方法
            $city.each(function (index,element){
                console.log(index+"----->"+element.innerText);
            })

            //使用jQuery中全局的each方法
            $.each($city,function (index,element){
                console.log(index+"====>"+element.innerText);
            })
        })
    </script>
</head>
<body>
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>广州</li>
    <li>深圳</li>

</ul>
</body>
</html>

jQuery中的事件

大多数DOM事件在jQuery中都有对应的一个方法（去掉了on）

jQuery对象.事件方法(function(){
    
})

常用的事件方法：

方法名	描述
$(document).ready()	文档加载完毕后自动执行的函数
click()	点击元素时
bdlclick()	双击元素时
focus()	元素获得焦点时
blur()	元素失去焦点时
change()	元素中的内容改变时

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery中的事件</title>
    <script src="../js/jquery-3.4.1.js"></script>
    <script>
        $(function (){
            var $i = $("input:text");
            $i.focus(function (){
                $("#ps").text("正在输入···")
            })
            $i.blur(function (){
                $("#ps").text("")
            })
        })
    </script>
</head>
<body>
<input type="text" ><span id="ps"></span>
</body>
</html>