2022-08-26 JQuery 概述

餐桌上的圣诞树

于 2022-08-26 22:32:15 发布

阅读量242

点赞数 1

文章标签： javascript ajax jquery

本文链接：https://blog.csdn.net/m0_71538835/article/details/126550989

版权

一、jQuery简介

1.什么是jQuery？

jQuery是一个优秀的JavaScript库，是一个凭借简洁的语法和跨平台的兼容性，极大地简化了

JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发Ajax的操作。jQuery封装了很多

预定义的对象和函数。其理念：write less,do more.

2.常见的javascript库?

Prototype:是最早成型的JS库之一，对于JS的内置对象做了大量的扩展。
      Do jo：提供了很多奇特JS库没有提供的功能。例如：离线存储的API，生成图标的组件等等。
      YUI：是由Yahoo公司开发的一套完备的，扩展性良好的富交互网页程序工作集。
      Ext JS：原本是对YUI的一个扩展，主要用于创建前端用户界面。
      Moo Tools：是一套轻量、简洁、模拟化和面向对象的JS框架。
      jQuery：同样是一个轻量级的库，拥有强大的选择器等更多优点，吸引了更多开发者去学习使用它。

二、jQuery的特性

jQuery能做以下事情：

  HTML元素选取
     HTML元素操作
     CSS操作
     HTML事件函数
     JavaScript特效和动画
     HTML DOM遍历和修改
     AJAX
     Utilities

三、jQuery介绍

1.jQuery的使用方式

下载后引入：

 <script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>

2.编写简单的 HelloWorld

   <html>
       <head>
       <meta charset="UTF-8">
       <title>dom操作</title>
       <script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
       <script>
          $(function(){
             alert('Hello World');
          });
       </script>
       </head>
    </html>

三、jQuery介绍

1.jQuery的使用方式

下载后引入：

 <script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>

2.编写简单的 HelloWorld

<html>
       <head>
       <meta charset="UTF-8">
       <title>dom操作</title>
       <script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
       <script>
          $(function(){
             alert('Hello World');
          });
       </script>
       </head>
    </html>

3.jQuery函数

jQuery库只提供了一个叫jQuery的函数，该函数中以及该元素的原型中定义了大量的方法。jQuery函数具有四种参数：

      1）选择器（字符串）
         jQuery函数通过该选择器获取对应的DOM，然后将这些DOM封装到一个人jQuery对象中并返回。
         
      2）DOM对象（即Node实例）
          jQuery函数将该DOM封装成jQuery对象并返回。
          
      3）HTML文本字符串
          jQuery函数根据传入的文本创建好HTML元素并封装成jQuery对象并返回。
           $("<div class="one">one</div>");
 
      4）一个匿名函数    
          $(function(){});
          当文当加载完毕之后jQuery函数调用匿名函数。

4.jQuery对象

jQuery对象是jQuery函数的一个实例，是一个类数组对象，数组中存放的是DOM对象，而DOM对象是Node的实例。
对jQuery对象的操作实际上是对jQuery数组中的DOM对象的批量操作。jQuery对象和DOM对象可以相互转化。
jQuery对象的获取通常是使用选择器来获j取的。比如，获取所有clss为one元素:$(".one");

四、jQuery选择器

1.基本选择器：

   所有选择器  *
   标签选择器  标签名
   ID选择器    #id
   类选择器    .className
   群组选择器  .one,.two   多个选择器使用都好分隔，取并集
   复合选择器  .one.two   多个选择器组合使用，取交集

2.层次选择器：

后代选择器   .one .two   
      两个选择器使用空格隔开，表示可以获取当前元素的子代以及孙子代等等后代元素。
   子代选择器   .one>.two
      两个选择器使用>隔开，表示只能获取当前选中元素的子代元素。

3.兄弟选择器：

 下一个兄弟选择器   .one+.two
      两个选择器使用+隔开，表示可以获取当前元素的下一个兄弟元素，下一个兄弟元素要能符合.two。
   之后所有子代选择器  .one~.two
      两个选择器使用~隔开，表示可以获取当前元素之后的所有兄弟元素，只有所有兄弟元素要能符合.two。

五、jQuery的事件和API

1.事件

   on()
      在选定的元素上绑定一个或多个事件处理函数。
   off()
      移除一个事件处理函数。
   trigger()
      根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。

2.鼠标事件

   click()  单击
   dblclick()  双击
   hover()   悬停
   mousedown()  按下
   mouseup()  抬起
   mouseenter()  移入  不支持子元素
   mouseleave()  离开  不支持子元素 
   mouseout()   离开  支持子元素 
   mouseover()  进入  支持子元素 
   mousemove()  移动

3.jQuery中属性设置函数

 //获取属性值
       attr(key)
       prop(key)
    //删除属性   
       removeAttr(attributeName)
       removeProp(propertyName)
    //批量设置属性   
       css(key)
    //添加类   
       addClass(className)
    //判断有没有指定的类，有，返回true，否则返回false   
       hasClass(className)
    //删除类   
       removeClass(className)

六、jQuery中的动画

 1.基本效果
      1）隐藏 hide()
      2）显示 show()
      3）隐藏与显示 toggle()
 
    2.淡入淡出效果
      1）淡入  fadeIn()
      2）淡出  fadeOut()
      3）淡入到 fadeTo()
      4）淡入与淡出 fadeToggle()
 
    3.滑动效果
      1）滑下 slideDown()
      2）滑上 slideUp()
      3）滑上与滑下 slideToggle()
 
    4.自定义效果
      animate()