jQuery 快速入门，看完这篇文章你就会了！

最新推荐文章于 2024-09-01 13:33:34 发布

William Ma

最新推荐文章于 2024-09-01 13:33:34 发布

阅读量150

点赞数

文章标签： jquery js javascript

本文链接：https://blog.csdn.net/wiaaiam/article/details/109610613

版权

本篇文章主要包含以下内容：

jQuery 的介绍
选择器
各种方法的使用
事件处理
动画
ajax

jQuery 的介绍

jQuery 是 2006 年推出的一个 js 库。在原生 js 的基础上，进行了一层封装，目的就是简化 js 的开发，提高开发效率。

快速入门示例：

// 原生 js
let oP = document.getElementsByClassName('test')[0];
// jQuery
let oP = $('.test');

jQuery 版本

目前最新的 jQuery 版本为 3.X，和前面的区别在于 1.X 的版本兼容 IE 8 以下的浏览器，从 2.X 版本开始，jQuery 就不再提供 IE 浏览器的兼容。

jQuery 特点

轻量
强大的选择器
事件处理
ajax
链式调用
开源

选择器

选择器除了使用 css 的语法来选择元素以外，jQuery 中还提供了诸如 eq，gt，lt 等方式来选择素。详细的用法可以查询 api 手册。

除了选择器以外，jQuery 还提供了一组筛选方法。

筛选方法用于目前已经是 jQuery，我们要从jQuery 对象中筛选某一个 jQuery对象，那么这个时候就需要使用筛选方法。

// 选择器
$('ul>li.eq(4)')
// 筛选器（用于已经拿到了一组 jQuery 对象，要从里面筛选东西出来）
$('ul>li').eq(4)

各种方法的使用

首先要介绍的是 jQuery 中最核心的方法，jQuery( )，jQuery 有一个别名，别名就是 $，$ ( )

这个方法的作用，就是将一个对象包装成 jQuery 对象，需要注意的是，jQuery 对象不要去调用 DOM 对象的方法，同理 DOM 对象也不要调用 jQuery 对象的方法。

如果我们要将一个 dom 对象转换为 jQuery，那么只需要使用 $( ) 方法包一下就可以了。

如果要将 jQuery 对象转换回 dom 对象，一种是通过 get 方法来获取 dom 对象。

$('#root').get(0).innerHTML = 'xxx';

如果是 jQuery 对象，那么就不能使用 innerHTML，jQuery对象修改 html 内容用的就是 html 方法，例如：

$('#root').html('xxxx');

还有一种方法，也可以将 jQuery 对象转换为dom

$('#root')[0].innerHTML = 'xxxx';

each 方法

each 方法和原生 js 中的 foreach 很相似，示例：

$('#root > p').each(function(){
  console.log(this); // 就是每一项
})

示例如下：

let arr = [1,2,3];
$(arr).each(function(){
  console.log(this);
})

ready 方法

在我们原生 js 里面，有一个 window.onload 事件，整个文档加载完成之后会触发 load 事件。

在 jQuery 里面，提供 ready 方法，类似于 widnow.onload，写法如下：

$(document).ready(function(){
  
})

还有一种简便写法：

$(function(){})

面试的时候，容易问到：window.onload 和 jQuery 中 ready 方法的区别？

widnow.onload 是在整个文档加载完毕后触发，ready 方法是在 dom 节点准备好后就会触发。

jQuery 中操作属性的方法

在 jQuery 中，有个特点就是设置和获取集一体

attr
removeAttr
prop
removeProp
addClass
removeClass
toggleClass
html
text
val

快速入门示例如下：

// 部分方法示例
// 示例 1
console.log($('a').attr('href'));
$('a').attr('href','http://www.taobao.com');

// 示例 2
console.log($('a').html());
$('a').html('href');

问：attr 和 prop 方法都是设置元素的属性，有什么区别？

答：

attr 用于设置普通属性（id，class，href，title，src）

prop 用于设置特殊属性（checked，disabled，这些属性就两个值，true 或者false）

// attr 使用示例
$('div').attr('id'); // 获取
$('div').attr('id','test'); // 设置

// props 使用示例
$(':checkbox').prop('checked'); // 获取
$(':checkbox').prop('checked', false); // 设置

jQuery 中操作 css 的方法

在 jQuery 里面，提供了一组操作 css 的方法：

css
offset
postion
scrollTop
scrollLeft
height
width
innerHeight / innerWidth
outerHeight / outerWidth

快速入门示例：

// 设置一个属性
$('div').css(width , '200px');

// 设置多个属性
$('div').css({
   width: '200px',
   height: '200px',
   border:'1px solid',
   backgroundColor : 'blue'
 });

jQuery 中文档处理相关方法

在原生dom操作中，如果我们要创建一个新的dom元素插入到文档，步骤是比较繁琐的，例如：

let oP = document.createElement('p');
let text = document.createTextNode('this is content');
oP.appendChild(text);
document.body.appendChild(oP);

在 jQuery 中，就非常方便了，如下：

$('body').append('<p>this is content</p>');

在 jQuery 中，常见的节点操作方法有：

append
appendTo
prepend
prependTo
after
before
insertAfter
insertBefore
replaceWith
replaceAll
empty、remove、detach
wrap
wrapAll
wrapInner
unwrap
clone

本质上没什么区别，就是顺序上面的区别，例如下面两句代码是一个效果：

// append 示例（把后面的东西添加到前面）
$('body').append('<p>this is content</p>');

// appendTo 示例（把前面的东西添加到后面）
$('<p>this is content</p>').appendTo('body')

empty 是清空节点内部的内容，但是节点本身还存在，remove 是节点本身也会被清除。

detach 不会清除节点上面的事件，只会删除元素。

// wrap 使用示例如下：

<body>
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js">
    </script>
    <script>
        $('p').wrap('<div class="test"></div>')
    </script>
</body>

事件处理

在 jQuery 中，绑定事件可以使用 on 来进行绑定，语法如下：

$('div').on('click',function(){})

在 jQuery 中，解绑可以使用 off 来进行事件的解绑，语法如下：

$('div').off();

具体示例如下：

$('p:first').on('click',function(){
  alert('haha')
})
$('p:last').on('click',function(){
  $('p:first').off();
});

除了通过 on 来绑定事件，常见的事件（例如 click）提供了简写的形式：

$('p:first').click(function(){
  alert('aaa')
})

如果大家在网上查询资料，可能还会看到 live，delegate，bind 等绑事件的方法，这些方法已经过时，不用再关心。

如果要事件委托，那么就是接收 3 个参数:

$('ul').on('click','li',function(){
  alert('aaa')
})

hover 事件

jQuery 中提供的 hover 事件，它相当于 mouseenter 和 mouseout 的事件结合，示例如下：

 $('p:first').hover(function(){
   console.log('移入');
 },function(){
   console.log('移出');
 })

one 事件

jQuery 中提供了 one 事件，就是事件只触发一次：

$('p:first').one('click',function(){
  console.log('移入');
})

事件对象

jQuery 中的事件对象基本上和原生dom的相同，例如：

$('p:first').on('click',function(e){
  console.log(e);
})

唯一需要注意的是，target 和 currentTarget 的区别。

target 和 currentTarget 在没有事件委托的情况，两者一样，但是如果存在事件委托，target 指的是触发事件的元素，currentTarget 是绑定事件的元素。

$('ul').click(function(e){
  console.log(e.target);
  console.log(e.currentTarget);
})

动画

在 jQuery 中，提供了很多实现动画效果的方法，例如：

show
hide
toggle
slideDown
slideUp
slideToggle
fadeIn
fadeOut
fadeTo
fadeToggle
animate
stop
delay
finish

show、hide、toggle 方法

show 将一个隐藏的元素，从小到大显示出来。

hide 将一个显示的元素，从大到小隐藏。

toggle 两者之间进行切换。

$('#demo').show(500);
$('#demo').hide(500);
$('#demo').toggle(500);

slideDown、slideUp、slideToggle

slideDown 将一个隐藏的元素从上到下显示。

slideUp 将一个显示的元素从下到上隐藏。

slideToggle 就是上面两种方法的切换。

fadeIn、fadeOut、fadeTo、fadeToggle

淡入淡出的效果，fadeIn 是淡入，fadeOut 是淡出，fadeTo 淡化到指定透明度，fadeToggle 就是切换。

具体示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <button>toggle</button>
    <div></div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <script>
        $('button').click(function(){
            $('div').fadeToggle(1000);
        })
    </script>
</body>
</html>

Ajax

在 jQuery 中，提供了很多 ajax 方法，如下：

ajax
load
get
post
serialize
serializeArray

ajax 方法

这是最常用的方法，所有的 ajax 请求都可以用它实现。它的方法中有个参数，是一个 JSON 对象，用来对 ajax 请求进行配置。

语法如下：

$.ajax({
  url : "请求地址",
  type : "请求类型",
  async : "是否异步",
  data : "要传递给服务器的数据",
  success : function(data){
    // 服务器返回数据时调用回调函数，data 是服务器返回的数据
  }
})

具体示例如下：

<body>
    <button>send</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <script>
        $('button').click(function(){
            $.ajax({
                url : './stu.json',
                type : 'GET',
                success : (data)=>{
                    console.log(data);
                }
            })
        })
    </script>
</body>

serialize 和 serializeArray

这两个方法称之为表单序列化，用大白话来讲的话，就是获取表单里面的所有控件的数据。

serialize 返回的是一个字符串，serializeArray 返回的是一个数组。示例如下：

<body>
    <form action="#" id="fm">
        <div>
            学生姓名：<input type="text" name="stuname" id="">
        </div>
        <div>
            学生年龄：<input type="text" name="stuage" id="">
        </div>
        <div>
            学生性别：男<input type="radio" name="gender" id="" value="male">
            女<input type="radio" name="gender" id="" value="female">
        </div>
    </form>
    <button>获取表单中的控件值</button>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <script>
        $('button').click(function(){
            console.log($('#fm').serialize());
            console.log($('#fm').serializeArray());
        })
    </script>
</body>

William Ma

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 快速入门，看完这篇文章你就会了！

jQuery快速上手jQuery 的介绍jQuery 版本jQuery 特点选择器各种方法的使用each 方法ready 方法jQuery 中操作属性的方法jQuery 中操作 css 的方法jQuery 中文档处理相关方法事件处理hover 事件one 事件事件对象动画show、hide、toggle 方法slideDown、slideUp、slideTogglefadeIn、fadeOut、fadeTo、fadeToggleAjaxajax 方法serialize 和 serializeArray本篇
复制链接

扫一扫