网站开发

网站前端开发-jQuery快速入门

简介

jQuery是一个JavaScript库，旨在简化处理HTML文档遍历、事件处理、动画效果和AJAX等操作。它的设计目标是使开发者能够更轻松地操作文档对象模型（DOM），并提供更简洁的代码来处理跨浏览器的兼容性问题。jQuery由John Resig于2006年创建，并由他和一群开发者共同维护。

img

安装

本地源码安装

前往jQuery官网下载相应版本的js源码至本地，然后在HTML文件中用script标签引入。

1

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

包管理工具安装

使用npm包管理工具

1

npm install jquery

使用yarn包管理工具

1

yarn add jquery

CDN方式引入

使用CDN网络直接在HTML文件中引入

1

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

对象

DOM对象

DOM对象是浏览器提供的一种接口，它将网页文档表示为树形结构，使开发者可以通过JavaScript来访问和操作这些网页元素。获取DOM对象通常使用原生JavaScript的方法，例如document.getElementById()、document.querySelector()、document.querySelectorAll()等。

1
2
3
4
5
6
7
8

// 获取id为myElement的DOM对象
var element = document.getElementById('myElement');

// 获取第一个class为myClass的DOM对象
var element = document.querySelector('.myClass');

// 获取所有class为myClass的DOM对象集合
var elements = document.querySelectorAll('.myClass');

jQuery对象

jQuery对象是由jQuery库封装的一种特殊对象。获取jQuery对象需要在页面中引入jQuery库，然后使用jQuery选择器来选取元素。在jQuery中，选择器的语法类似于CSS选择器。

1
2
3
4
5

// 获取id为myElement的jQuery对象
var $element = $('#myElement');

// 获取所有class为myClass的jQuery对象集合
var $elements = $('.myClass');

选择器

基础选择器

选择器 名称 举例
id选择器 #id $("#id")
标签选择器 div $("div")
类选择器 class $(".class")
所有选择器 * $("*")
组合选择器 selector1,selector2 $("selector1,selector2") 
1
2
3
4
5
6
7
8
9

<h1 id="title"></h1>
<div class="c1"></div>
<p></p>

<script>
    console.log($("#title")); 
    console.log($(".c1")); 
    console.log($("div")); 
</script>

层次选择器

选择器 名称 举例
后代选择器 ancestor descendant $("#ancestor div")
子代选择器 parent > child $("#parent>div")
相邻选择器 prev + next $("#prev+div")
同辈选择器 prev ~ sibling $("#prev~div") 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<div id="ancestor">
    <div>
        <div>
            <div></div>
        </div>
    </div>
</div>
<div id="parent">
    <div>
        <div>
            <div></div>
        </div>
    </div>
</div>

<script>
    console.log($("#ancestor div")); // length:3
    console.log($("#ancestor>div")); // length:1
</script>

表单选择器

选择器 名称 举例
表单选择器 :input $(":input")会匹配所有input,textarea,select,button元素
文本框选择器 :text $(":text")
密码框选择器 :password $(":password")
单选框选择器 :radio $(":radio")
复选框选择器 :checkbox $(":checkbox")
提交按钮选择器 :submit $(":submit")
图像域选择器 :image $(":image")
重置按钮选择器 :reset $(":reset")
按钮选择器 :button $(":button")
文件域选择器 :file $(":file")

DOM操作

操作属性

方法 说明
attr("属性名") 获取属性方法
prop("属性名") 获取属性方法
attr("属性名","属性值") 修改属性方法
prop("属性名","属性值") 修改属性方法

元素属性

  1. 固有属性：id,name,class,style
  2. 布尔属性：checked,selected,disabled
  3. 自定义属性：开发者定义的属性
attr方法 prop方法
固有属性 可获取 可获取
布尔属性 属性值 布尔值
自定义属性 可获取 不可获取 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<input type="checkbox" name="ch" id="a" checked p="1">
<input type="checkbox" name="ch" id="b">

<script>
    // 获取属性
    console.log($("#a").attr("name"));		// ch
    console.log($("#a").prop("name"));		// ch
    console.log($("#a").attr("checked"));	// checked
    console.log($("#a").prop("checked"));	// true
    console.log($("#b").attr("checked"));	// undefined
    console.log($("#b").prop("checked"));	// false
    console.log($("#a").attr("p"));			// 1
    console.log($("#a").prop("p"));			// undefined
    // 修改属性
    $("#a").attr("name","ch1");
    $("#b").attr("p","2");
    console.log($("#b").attr("p"));
    $("#a").prop("checked",false);
</script>
  • 通常非布尔值属性使用attr方法，布尔值属性使用prop方法。

操作样式

方法 说明
attr("class") 获取class属性的值，即样式名
attr("class","样式名") 修改class属性的值，修改样式
addClass("样式名") 添加样式名称
css() 添加具体的样式
removeClass("样式名") 移除样式名称

操作内容

方法 说明
html() 获取元素的html内容
html("html内容") 修改元素的html内容
text() 获取元素的text内容
text("text内容") 修改元素的text内容
val() 获取元素的value值
val("值") 修改元素的val值

元素编辑

创建元素

1
2

$("元素内容")
$("<p>这是个p标签</p>")

添加元素

方法 说明
selector.prepend(content) 在selector对象元素内部开头插入content对象元素
content.prependTo(selector) 把content对象元素插入到selector对象元素开头
selector.append(content) 在selector对象元素内部结尾插入content对象元素
content.appendTo(selector) 把content对象元素插入到selector对象元素结尾
selector.before(content) 在selector对象元素前插入content对象元素
selector.after(content) 在selector对象元素后插入content对象元素

删除元素

方法 说明
remove() 删除所选元素或指定子元素
empty() 清空所选元素内容

遍历元素

  • selector.each(function(index,element))此时element是DOM对象
1
2
3
4
5
6
7
8
9

<span>s1</span>
<span>s2</span>
<span>s3</span>
<span>s4</span>
<script>
    $("span").each(function(index,element) {
        console.log(element);
    })
</script>

事件

加载事件

  • ready()类似onLoad()事件
  • ready()可以写多个，按顺序执行
  • $(document).ready(function(){})等价于$(function(){})
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            console.log($("#a"));
        })
        $(function() {
            console.log($("#a"));
        })
    </script>
</head>

<body>
    <p id="a"></p>
</body>

绑定事件

bind绑定

  • selector.bind("eventType", handler)：传入事件类型和回调函数

直接绑定

  • selector.eventType(handler)：传入事件类型和回调函数

常见的事件类型

  1. 点击事件
    • 单击：click
    • 双击：dblclick
  2. 鼠标事件
    • 鼠标移上：mouseover
    • 鼠标移出：mouseout
    • 鼠标按下：mousedown
    • 鼠标弹起：mouseup
    • 鼠标移动：mousemove
  3. 键盘事件
    • 键盘按下：keydown
    • 键盘弹起：keyup

绑定多个事件

  1. selector.bind("eventType1 eventType2 ..",handler)：为多个事件绑定同一个回调函数
  2. selector.bind("eventType1",handler1).bind("eventType2",handler2)：简写对象链式绑定
  3. selector.bind({"eventType1":handler1,"eventType2":handler2})：对象式绑定
  4. selector.eventType1(handler1).eventType2(handler2)：直接链式绑定，推荐使用
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<button id="a">button1</button>
<button id="b">button2</button>
<script>
    $("#a").bind("click",function() {
        console.log("button1 is clicked");
    })
    $("#b").click(function() {
        console.log("button2 is clicked");
    }).mouseover(function() {
        console.log("button2 mouse is over")
    })
</script>

Ajax

AJAX（Asynchronous JavaScript and XML）是一种用于在不刷新整个页面的情况下与服务器进行异步通信的技术。它允许网页通过后台与服务器进行数据交换，以便动态更新部分页面内容，提升用户体验并减少页面加载时间。AJAX通常使用XMLHttpRequest对象来实现数据的异步传输。

$.ajax()方法 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

$.ajax({
  url: "your_server_endpoint",
  method: "GET", // 或 "POST" 等HTTP请求方法
  data: { key1: value1, key2: value2 }, // 可选，发送给服务器的数据
  dataType: "json", // 服务器返回的数据类型
  success: function(response) {
    // 请求成功时的回调函数，处理从服务器返回的数据
    console.log(response);
  },
  error: function(xhr, status, error) {
    // 请求失败时的回调函数
    console.log("AJAX request error:", error);
  }
});

$.get() 和 $.post()方法

这些方法是$.ajax()方法的简化版本，用于执行GET和POST请求。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// 执行GET请求
$.get("your_server_endpoint", { key1: value1, key2: value2 }, function(response) {
  // 请求成功时的回调函数
  console.log(response);
});

// 执行POST请求
$.post("your_server_endpoint", { key1: value1, key2: value2 }, function(response) {
  // 请求成功时的回调函数
  console.log(response);
});
  • jQuery还提供了另一个专门用于执行GET请求并且预期服务器返回JSON数据的方法，称为$.getJSON()。
comments powered by Disqus