jQuery之简介

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

m0_67631273

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

阅读量358

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_67631273/article/details/130139484

版权

jQuery简介

概念：
jQuery是一个快速、小型且功能丰富的JavaScript库。借助易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。
核心特性：
具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE6.0+，FF1.5+,Safari2.0+,Opera9.0+等。

jQuery优点：

占用空间小
压缩之后的jQuery文件的大小只有约30kb；
符合CSS规范
支持CSS3选择器查找元素样式属性操作；
跨浏览器
jQuery兼容各种主流浏览器，如IE，Chrome，Firefox，Safari，Opera等。

jQuery特点

快速获取文档元素

jQuery的选择机制构建与css选择器，它提供了快速查询DM文档中元素的能力，而且大大强化了JavaScript中获取也没面元素的方式。

提供漂亮的页面动态效果

jQuery这个库中内置了许多的动画效果，可以开发出许多漂亮的网页，许多网站都使用jQuery内置的动态效果。

创建Ajax无刷新网页

Ajax是异步的JavaScript和XML的简称，可以开发出许多灵敏无刷新的网页，特别是开发服务器端网页时比如PHP网站，需要往返的与服务器通信，如果不使用Ajax，每次数据更新就不得不刷新页面，但是使用Ajax之后，可以对页面进行局部刷新，提供动态的效果。

提供对JavaScript语言的增强

jQuery提供了对基本的JavaScript结构的增强，例如元素迭代和数组处理等操作。

增强的事件处理

jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太多事件处理代码，最重要的是，它的事件处理可以消除各种浏览器相关的兼容性问题。

更改页面内容

jQuery可以修改页面中的内容，比如更改网页的文本，插入或者翻转网页图像jQuery简化了原本使用JavaScript代码需要处理的方式。

jQuery语法

jQuery语法是通过选取HTML元素，并对选取的元素执行欧姆写相应的操作。(再写入语法之前必须要引入)
基础语法：$(selector).action();
语法解析：

美元符号$定义jQuery
选择符（selector）为需要进行操作的HTML元素
jQuery的action()执行对元素的操作
例如：
$(this).show() - 展示当前元素
$(“div”).hide() - 隐藏所有div盒子
$(“div.nav”).show() - 显示所有类名为nav的div

jQuery示例

选择器

元素选择器

  $("div")

id选择器

  $("#div")

class类选择器

$(".div")

事件处理

文档就绪事件

$(document).ready()方法表示在文档完全加载后执行该函数。该事件在所有jQuery代码之前写，在开发时，，所有的jQuery代码都要写到这个ready()回调函数中，代码如下：

  $(document).ready(function (){
      jQuery代码
  })

这是为了防止文档还未加载就运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，就会报错。例如某个元素还未加载出来就被jQuery代码来获取，就会报错。
上述代码还可简写：

    $(function () {
        jQuery代码
    })

上述代码和$(document).ready()方法的效果相同

鼠标事件

click()函数使用户点击鼠标左键所调用的函数
在下面实例中，鼠标左键点击粉色div会触发事件，使粉色盒子变为skyblue色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 150px;
            height: 150px;
            margin: 100px auto;
            background-color: pink;
        }
    </style>
    <script src="js/jquery.min.js"></script>
</head>
<body>
<div></div>
<script>
    $("div").click(function (){
        $(this).css("backgroundColor","skyblue");
    })
</script>
</body>
</html>

鼠标事件还有很多方法，如下表所示：
mouseenter():鼠标进入某元素事件；
mouseleave():鼠标离开某元素事件；
mouseup():鼠标松开事件；
mousedown():鼠标按下事件；
hover():鼠标光标悬停事件；
dblclick():鼠标双击事件
除了上述的事件之外，还有键盘事件，表单事件，窗口事件等。

jQuery相关总结：
jQuery是一个快速、高效，简介且功能丰富的JavaScript框架，是继Prototype之后又一个优秀的JavaScript库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript许多常用的功能代码，提供更加简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计以及和Ajax的交互。