JavaWeb之jQuery

甜瓜瓜哥

已于 2023-01-17 10:03:51 修改

阅读量654

点赞数

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

于 2022-12-18 20:58:09 首次发布

本文链接：https://blog.csdn.net/qq_46130027/article/details/128355199

版权

JavaWeb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. jQuery介绍

什么是jQuery?
jQuery,顾名思义，也就是JavaScript和查询(Query)，它就是辅助JavaScript开发的js类库。

jQuery核心思想
它的核心思想是mrite less，do more(写得更少，做得更多)，所以它实现了很多浏览器的兼容问题。

jQuery流行程度
jQuery现在已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

jQuery的好处
jQuery是免费、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择D0M元素、制作动画效果、事件处理、使用Ajax以及其他功能。

2. Hello程序示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
      $(function(){ // 表示页面加载完成之后，相当window.onload = function(){}
        var $btnObj = $("#btnId"); // 表示按id查询标签对象
        $btnObj.click(function (){ // 绑定单击事件
          alert("jQuery 的单击事件");
        });
      });
    </script>
</head>
<body>
    <button id = "btnId">SayHello</button>
</body>
</html>

3. 核心函数

$是 j Q u ery 的核心函数，能完成 j Q u ery 的很多功能。$ ()就是调用$这个函数。

1、传入参数为[函数]时：
表示页面加载完成之后。相当于window.onload = function(){}

2、传入参数为[HTML字符串]时：
会对我们创建这个html标签对象

3、传入参数为[选择器字符串]时：
$("#id属性值“)； id选择器，根据id查询标签对象
$(“标签名“)；标签名选择器，根据指定的标签名查询标签对象
$(”.class属性值“)；类型选择器，可以根据class属性查询标签对象

4、传入参数为[DOM对象]时
会把这个dom对象转换为jQuery对象

4. jQuery对象和dom对象区分

4.1 什么是jQuery对象，什么是dom对象

Dom对象
1通过getElementByld0查询出来的标签对象是Dom对象
2,通过getElementsByName0查询出来的标签对象是Dom对象
3.通过getElementsBYTagName()查询出来的标签对象是Dom对象
4通过createElement0方法创建的对象，是Dom对象

jQuery对象
5.通过JQuery提供的API创建的对象，是JQuery对象
6.通过JQuery包装的Dom对象，也是JQuery对象
7,通过JQuery提供的API查询到的对象，是JQuey对象

4.2 jQuery对象的本质

jQuery对象是dom对象的数组 + jQuery提供的一系列功能函数。

4.3 jQuery对象和Dom对象使用区别

jQuery对象不能使用DOM对象的属性和方法
DOM对象也不能使用jQuery对象的属性和方法

4.4 Dom对象和jQuery对象互转

1、dom对象转化为jQuery对象
1）先有DOM对象
2）$(DOM对象)就可以转换成为jQuery对象

2、jQuery对象转为dom对象
1）先有jQuery对象
2）jQuery对象[下标]取出相应的DOM对象

在这里插入图片描述

5. 原生js和jQuery页面加载完成之后的区别

5.1 他们分别是在什么时候触发的

1、 jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行。

2、原生js的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成。

5.2 他们触发的顺序

1、jQuery页面加载完成之后先执行
2、原生js的页面加载完成之后

5.3 他们执行的次数

1、原生js的页面加载完成之后，只会执行最后一次的赋值函数。
2、 jQuery的页面加载完成之后是全部把注册的function函数，依次顺序全部执行。

6. jQuery中其他的事件处理方法

click() 它可以绑定单击事件，以及触发单击事件
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
bind() 可以给元素一次性绑定一个或多个事件
one() 使用上跟bind一样。但是one方法绑定的事件只会响应一次。
unbind() 跟bind方法相反的操作，解除事件的绑定。
live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效。