前端技术（JQuery）学习笔记（一）JQuery文档准备就绪事件、JQuery事件处理、JQuery对象与DOM对象的、JQuery取值

叁歲伎倆 2022-05-25 01:19 215阅读 0赞

一、JQuery，是一套JavaScript的函数库（类库），可以很大程度上简化js代码。所以，利用Jquery对HTML元素的操作更加的便捷。

1、JQuery的核心函数：jQuery()函数，利用这个核心函数可以完成html元素的选取功能。为了简化开发过程，JQuery提供了$号代替JQuery核心函数

比如jQuery("div");等价于$("div");

2、Jquery的文档准备就绪事件  
我们知道JavaScript代码要嵌入到<script>元素内，而因为浏览器是以顺序解析法解析前端代码的，  
所以<script>元素的位置是有一定要求的。  
![代码案例][Image 1]  
![这里写图片描述][Image 1]  
所以我们经常会看到将JavaScript代码放在body的最下面的情况，同时开发人员也可以通过onload事件，解决以上问题  
![这里写图片描述][Image 1]

我们已经看到head中的JavaScript代码也成功执行了。所以开发人员可以将js代码编写到文档准备就绪事件中编写，避免在获取html元素时找不到的情况。  
JQuery也一样，也提供了文档准备就绪事件ready()来解决这样的问题，具体代码见下图。（注意，两种写法)  
![这里写图片描述][Image 1]

3、JQuery的选择器，JQuery选择器允许我们对单个html元素或者某个元素组（多个html元素）进行操作，与css选择器概念一致，同时CSS选择器在JQuery中照样实用  
比如，在css中要设置某个html元素的样式，需要使用css选择器先去选中具体的html元素  
比如，在JavaScript中要完成对html元素的操作，首先需要获取html元素对应的dom对象，然后通过dom对象对html元素进行操作  
在jquery中，要完成对html元素的操作首先需要通过jquery的选择器选中被操作的html元素后，才能对其操作  
![这里写图片描述][Image 1]

4、JQuery对象和DOM对象，在JQuery中通过$获取的对象是JQuery对象，而非DOM对象，同时dom对象和JQuery对象不能通用。也就是JQuery对象不能访问dom对象，而dom对象也不能访问JQuery对象中的方法中的方法  
![这里写图片描述][Image 1]

5、DOM对象与JQuery对象之间的转化  
①、将dom对象转化成jq对象

var jqObj=$(dom对象);

②、将jquery对象转化成dom对象

var domObj=$("div").get(0);            
    var domObj=$("div")[0];

![这里写图片描述][Image 1]

6、JQuery对html事件的处理，在JavaScript中，可以通过DOM对象html事件进行相关处理，在JQuery中，JQuery也可以对html事件进行处理  
①、JavaScript处理html事件:  
![这里写图片描述][Image 1]

②、JQuery对事件的处理方式：

<!DOCTYPE html>                                 
    <html lang="en">                                    
    <head>                                  
        <meta charset="UTF-8">                                  
        <title>Title</title>                                    
        <style type="text/css"> div{ background-color: blueviolet; } </style>                                    
        <script type="text/javascript" src="js/jquery-2.1.4.js"></script>                                   
        <script type="text/javascript"> // javascript提供的用于绑定html元素事件的方法 var pObj=document.getElementById("d1"); pObj.click=function () { console.log("这里是JavaScript对html单击事件的处理机制"); } $(document).ready(function () { // jquery绑定事件，在事件名称括号中通过匿名函数绑定事件的处理程序 $("div").mouseover(function(){ $("div").css("backgroundColor","red"); }); $("div").mouseout(function(){ // $("div").css("backgroundColor","blueviolet"); /* 注意：若直接写this，这个this是dom对象而非是jquery对象，若希望this是JQuery对象的话， 需要将this这个dom对象通过转化方式转化成JQuery对象。类型转换$(domObj) 即 $(this); */ $(this).css("backgroundColor","yellow"); }); //jQuery提供的鼠标进入事件，与html原生的mouseover基本一样 // 区别： $("p").mouseenter(function () { $(this).css("backgroundColor","blue"); }); //jQuery提供的鼠标离开事件，与html原生的mouseout基本一样 $("p").mouseleave(function () { $(this).css("backgroundColor","orange"); }); }); </script>                                   
    </head>                                 
    <body>                                  
        <div>我是<p>div</p>元素的值</div>                                 
        <p id="d1">我是p元素的值</p>                                  
    
    </body>                                 
    </html>

7、JQuery获取html元素的值 Jquery中提供了对html元素和属性进行操作的强大方法，同样也提供了获取html元素值的方法  
JQuery提供的获取html元素内容（值）方法与JavaScript对比如下  
①、html() —->domObj.innerHTML  
②、text() —->domObj.innerText  
③、val() —->domObj.value;  
代码案例如下：  
![这里写图片描述][Image 1]

![这里写图片描述][Image 1]

[Image 1]: