新手入门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() ;

你可能感兴趣的:(新手入门JQuery第一天学习指南)