AI智能
改变未来

新手入门JQuery第一天学习指南


1.1、JQuery介绍

JavaScript库,一个封装号的特定的集合。封装了大量的预先定义好的函数在里面

1.2、JQuery的基本使用

jQuery 的下载

jQuery的官网地址:,官网即可下载最新版本。各个版本的下载网址:

体验JQuery

  • 引入jQuery文件。
  • 在文档最末尾插入 script 标签,书写体验代码。

jQuery的入口函数

jQuery中常见的两种入口函数:

// 第一种: 简单易用。$(function () {...  // 此处是页面 DOM 加载完成的入口}) ;// 第二种: 繁琐,但是也可以实现$(document).ready(function(){...  //  此处是页面DOM加载完成的入口});

jQuery中的顶级对象$

$

是 jQuery 的别称,在代码中可以使用 jQuery 代替,但一般为了方便,通常都直接使用

$

$

是jQuery的顶级对象,相当于原生JavaScript中的 window。把元素利用

$

包装成jQuery对象,就可以调用jQuery 的方法

jQuery 对象和 DOM 对象

用原生获取的就是DOM对象
原生获取元素:

var box = document.getElementById(\'box\')

用JQuery获取的就是JQuery对象
JQuery获取元素:

$(\'.div\')

jQuery 对象和 DOM 对象互换

因为JQuery对象不能使用DOM对象的方法,DOM对象也不能使用JQuery对象的方法,所有有的时候需要对象互换

// 1.DOM对象转换成jQuery对象,方法只有一种var box = document.getElementById(\'box\');  // 获取DOM对象var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象// 2.jQuery 对象转换为 DOM 对象有两种方法://   2.1 jQuery对象[索引值]var domObject1 = $(\'div\')[0]//   2.2 jQuery对象.get(索引值)var domObject2 = $(\'div\')[0]

jQuery 优点

  • 隐式迭代
    获取的多个元素,JQuery已经内部帮我们遍历好了,我们直接对元素添加事件就可以作用于每个元素
  • 链式编程
    JQuery可以连续的通过.(点)来调用方法
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>Document</title><script src=\"./jquery.min.js\"></script></head><body><button>快速</button><button>快速</button><button>快速</button><button>快速</button><button>快速</button><button>快速</button><button>快速</button><button>快速</button><script>$(function () {//获取的多个button,JQuery隐式迭代,我们可以直接给多个元素注册事件$(\'button\').click( function () {//链式编程//当前这个button的背景颜色pink,他的其他兄弟背景颜色清空$(this).css(\'backgroundColor\', \'pink\').siblings().css(\'backgroundColor\', \'\');})})</script></body></html>

jQuery 选择器

  • 基础选择器
  • 层级选择器
  • 筛选选择器

jQuery事件方法

传统事件去掉on,JQuery有hover事件,.hover(fn,fn),第一个函数代表移入发生的事件,移出代表移出发生的事件

jQuery样式修改

  • .css(‘属性’,‘值’)
  • .css(\’属性),返回这个属性的值
  • .css({‘属性’:\’值’}),利用对象添加多个值,但是样式过多一般通过类样式操作来完成

jQuery类操作

  • .addClass(‘类名’),添加类
  • .removeClass(’\’类名),删除类
  • .toggleClass(‘类名’),替换类

jQuery 效果

jQuery 给我们封装了很多动画效果,最为常见的如下:

  • 显示隐藏:show() / hide() / toggle() ;
  • 划入画出:slideDown() / slideUp() / slideToggle() ;
  • 淡入淡出:fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
  • 自定义动画:animate() ;

注意:

动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。

jQuery为我们提供另一个方法,可以停止动画排队:stop() ;

赞(0) 打赏
未经允许不得转载:爱站程序员基地 » 新手入门JQuery第一天学习指南