黑马就业班（02.JavaWeb+项目实战\day12.jQuery）part1—— JQuery基础

最新推荐文章于 2023-04-18 22:27:14 发布

KongJetLin

最新推荐文章于 2023-04-18 22:27:14 发布

阅读量335

点赞数

分类专栏： Java资料文章标签： JQuery

本文链接：https://blog.csdn.net/LKJgdut/article/details/104520847

版权

本文介绍了JQuery的基本概念，作为JavaScript框架，简化了JS开发。讲解了JQuery的快速入门，JQuery对象与JS对象的区别及转换，并详细探讨了各种选择器的使用，包括基本选择器、层级选择器、属性选择器和过滤选择器。此外，还阐述了DOM操作，如内容、属性的修改以及元素的增删改查操作，并给出了多个实际案例进行演示。

摘要由CSDN通过智能技术生成

本文参考自己的项目：myday12

今日内容

1. JQuery 基础：
	1. 概念
	2. 快速入门
	3. JQuery对象和JS对象区别与转换
	4. 选择器
	5. DOM操作
	6. 案例

1、JQuery概念
JQuery：一个JavaScript框架，简化JS开发。

* jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨	是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作（DOM操作）、事件处理、动画设计和Ajax交互。

* JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已

我们需要创建一个静态的Web工程（之前创建的都是动态的web工程），创建静态Web工程的方法参考文章：添加链接描述
我们尝试自定义JS框架，代码如下：

//MyJSFrame

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <!--
        我们在这里引入fun.js文件。
        -->
        <script src="js/fun.js"></script>
    </head>
    <body>
        <!--
            尝试自定义JS框架
        -->
        <div id="div1">div1....</div>
        <div id="div2">div2....</div>

        <script type="text/javascript">
            //1. 根据id获取元素对象
            // var div1 = document.getElementById("div1");
            // var div2 = document.getElementById("div2");

            //调用封装的方法简化
            // var div1 = get("div1");
            // var div2 = get("div2");

            //我们将fun.js里面的get方法名换为“$”。在这个文件引入后再调用fun.js里面的方法
            var div1 = $("div1");
            var div2 = $("div2");

            //2.获取标签体内容
            alert(div1.innerHTML);
            alert(div2.innerHTML);

        // //获取元素对象的代码太麻烦，我们可以定义一个方法来简化
        // function get(id) {
    
        //     return document.getElementById(id);
        // }
            //但是这仅仅是封装一个方法而已，并不是JS框架。
            /*
            我们将这个方法剪切，在项目下创建一个js文件夹，下面创建一个fun.js文件，将方法放入这个文件。
            我们在上面引入fun.js文件，这样我们就可以使用fun.js里面的get()方法。那么这个文件fun.js就可以成为fun.js文件JS框架.
            我们将get方法名换为“$”后，同样可以通过“$”调用
            */
        </script>
    </body>
</html>

//fun.js

//将MyJSFrame中封装的方法放入这个fun.js文件

//获取元素对象的代码太麻烦，我们可以定义一个方法来简化
// function get(id) {
   
//     return document.getElementById(id);
// }

//如果我们仍然记不住这个方法名，可以使用一个符号“$”来替代
function $(id) {
   
    return document.getElementById(id);
}

2、JQuery快速入门
JQuery的使用步骤如下：

1. 下载JQuery
	* 目前jQuery有三个大版本：
		1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
			 功能不再新增。因此一般项目来说，使用1.x版本就可以了，
			 最终版本：1.12.4 (2016年5月20日)
		2.x：不兼容ie678，很少有人使用，官方只做BUG维护，
			 功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，
			 最终版本：2.2.4 (2016年5月20日)
		3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，
			 一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
			 目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）
	* jquery-xxx.js 与 jquery-xxx.min.js区别：
		1. jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些（用于读源码）
		2. jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快（导入的时候导入这个）

2. 导入JQuery的js文件：导入min.js文件。一般情况下，我们会在项目下面创建一个js的包，里面存放我们各自js文件，我们将min.js文件放入这个js包。（注意，这些js文件不是jar包，而是类似于js的类库）

3. 使用
	var div1 = $("#div1");
	alert(div1.html());

测试代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>快速入门</title>
        <!--
        首先，我们导入相应的JQuery文件。
        导入的时候注意在前面加上文件夹js的名，因为当前文件在myday12文件夹下，想找到JQuery的源文件，
        必须通过myday12下的js文件夹，才能找到相应的JQuery源文件。如果当前文件放在js目录下，则不需要加js目录就可以找到JQuery的源文件
        -->
        <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    </head>
    <body>

        <div id="div1">div1....</div>
        <div id="div2">div2....</div>

        <script type="text/javascript">
            //使用JQuery获取元素对象.
            /*
           “$”是JQuery的核心函数，“$”就是一个函数名称。使用id选择器div1，注意id选择器前面加“#”
             */
            var div1 = $("#div1");
            //注意，我们之前使用的是div标签的innerHTML属性在获取标签体的内容，而这里要使用JQuery的html()函数获取。注意区分
            alert(div1.html());

        </script>
    </body>

3、JQuery对象和JS对象区别与转换
Jquery通过“$”函数获取出来的我们称之为JQuery对象。

1. JQuery对象在操作时，更加方便。
2. JQuery对象和js对象方法不通用的.
3. 两者相互转换
    * jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
    * js -- > jq : $(js对象)

代码解析

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JQuer对象和js对象的转换</title>
        <!--注意导入JQuery文件-->
        <script src="js/jquery-3.3.1.min.js"></script>
    </head>
    <body>

        <div id="div1">div1....</div>
        <div id="div2">div2....</div>

       <script>
           //1. 通过js方式来获取名称叫div的所有html元素对象
            var divs = document.getElementsByTagName("div");//获取一个JS的对象的数组
            // alert(divs);//[object HTMLCollection]
           //divs可以将其当做数组来使用
           // alert(divs.length);//2

           //对divs中所有的div 让其标签体内容变为"aaa"
           for(var i=0; i<divs.length ; i++)
           {
    
               // divs[i].innerHTML = "aaa";

               //我们将JS对象转换为jq对象，这样就可以使用jq的方法。每一个divs[i]都是一个JS对象
               // $(divs[i]).html("sss");//将单个JS对象转换为JQ对象
           }
           $(divs).html("hhh");//也可以将JS数组总体转换为JQ对象

       </script>

        <script>
            //2. 通过jq方式来获取名称叫div的所有html元素对象
            var $divs = $("div1");//使用元素选择器，这里通过JQuery的方法“$”获取一个JQuery对象的数组。
            // alert($divs);//[object Object]
            //$divs也可以当做数组使用
            // alert($divs.length);//2

            //对divs中所有的div 让其标签体内容变为"bbb"  使用jq方式