菜单 搜索
首页 前端知识 史上最快、最全的Jquery速成笔记

史上最快、最全的Jquery速成笔记

2024-06-07 23:06:06 前端知识 前端哥 445 705 我要收藏

史无前例！Jquery速成笔记

  • 01~前言
  • 02~基础选择器
    • 介绍
    • 代码展示
      • HTML5
      • Javascript
  • 03~层次选择器
    • 介绍
    • 代码展示
      • HTML5
      • Javascript
  • 04~表单选择器
    • 介绍
    • 代码展示
      • HTML5
      • Javascript
  • 05~操作元素的属性
    • 介绍
    • 代码展示
      • HTML5
      • Javascript
  • 06~操作元素的样式
    • 介绍
    • 代码展示
      • CSS3
      • HTML5
      • Javascript
  • 07~操作元素的内容
    • 介绍
    • 代码展示
      • HTML5
      • Javascript
  • 08~创建和添加元素
    • 介绍
    • 代码展示
      • HTML5
      • Javascript
  • 09~删除和遍历元素
    • 介绍
    • 代码展示
      • HTML
      • Javascript
  • 10~事件
    • 介绍
    • 代码展示
      • HTML5
      • Javascript
  • 11~JQuery Ajax
    • $.ajax() 介绍
    • $.ajax() 代码展示
      • index.html
      • get.php
      • post.php
    • $.get() / \$.post() 介绍
    • $.get() / \$.post() 代码展示
      • index.html
      • get.php
      • post.php
  • 12~拓展
  • 13~结束

01~前言

前不久，一位朋友问我如何迅速学习jQuery，这让我想起了我自己曾经学习这门技术的经历。当时，学校举办比赛，而我还没有学jquery，随后，通过高效的学习方法和快速的实践，仅用几天时间就掌握了jQuery的基本应用，并且随着不断扩展知识，也在这个领域中不断进步。今天，我将分享我的学习笔记，希望能为那些想要快速掌握jQuery技巧的朋友提供一些参考和帮助。

02~基础选择器

介绍

1：ID选择器，名称:#id，例：$(“#testDiv”)，选择id为testDiv的元素。(ID重复时，将选取第一个)
2：类选择器，名称:.class，例：$(“.testDiv”)，选择类为testDiv的元素。
3：标签选择器，名称:element，例：$(“div”)，选择所有div。
4：通配符选择器，名称:*，例：$(“*”)，选择页面所有元素。
5：组合选择器，名称:selector1,selector2,selector3，例：$(“#testDiv,.blue,span”)，同时选中多个选择器匹配的元素

代码展示

HTML5

<div id="testDiv" class="blue">我是第一个div，<span>我是第一个div里的span</span></div>
<div class="blue">我是第二个div</div>
<span id="testDiv">我是span</span>

Javascript

// 输出id为 testDiv 的元素集
console.log($("#testDiv"));
// 输出所有类叫 blue的
console.log($(".blue"));
// 输出所有div与所有span
console.log($('div'));
console.log($('span'));
// 输出页面所有元素
console.log($('*'));

console.log('-------------------------------------');

// 将dom对象转化为jquery对象
var testDiv = document.querySelector('div#testDiv');
console.log('将dom对象转化为jquery对象');
console.log('转化前：');
console.log(testDiv);
console.log('转化后：');
console.log($(testDiv));
// 将jquery对象转化为dom对象
var testDiv2 = $('#testDiv');
console.log('将jquery对象转化为dom对象');
console.log('转化前：');
console.log(testDiv2);
console.log('转化后：');
console.log($(testDiv2)[0]);

03~层次选择器

介绍

1：后代选择器，名称：div p，例：$(‘#myDiv p’)，获取div中的所有p标签
2：子代选择器，名称：div >p，例：$(‘#myDiv >p’)，获取div下的所有子元素是p的标签(不包括孙元素等)。
3：相邻选择器，名称：div +p，例：$(‘#myDiv +p’)，获取div的下一个p元素，如果没有，则获取不到。
4：同辈选择器，名称：div ~p，例：$(‘#myDiv ~p’)，选择div下的所有p标签，上边的获取不到。

代码展示

HTML5

<div id="myDiv">
    <div>
        <p>myDiv >div p1</p>
        <p>myDiv >div p1</p>
    </div>
    <p>myDiv >p</p>
    <p>myDiv >p</p>
</div>
<span class="k">k</span>
<p class="a">a</p>
<p class="b">b</p>
<span class="o">o</span>

Javascript

// 获取id#myDiv中后代是p的所有元素
var myDivP = $('#myDiv p');
console.log('获取id#myDiv中后代是p的所有元素：');
console.log(myDivP);

console.log('--------------------------------------------------------------');

// 获取id#myDiv中所有子代为p的元素
console.log('获取id#myDiv中子代是p的所有元素：');
console.log($('#myDiv >p'));

console.log('--------------------------------------------------------------');

// 获取id#myDiv的相邻p元素
console.log('获取id#myDiv的相邻span元素：');
console.log($('#myDiv +span'));

console.log('--------------------------------------------------------------');

// 获取id#myDiv后的的所有同辈元素
console.log('获取id#myDiv后的的所有同辈元素：');
console.log($('#myDiv ~p'));

04~表单选择器

介绍

1：表单控件选择器，名称：:input，查找所有input控件元素，$(‘:input’)，会匹配所有的input, button, select, textarea。
2：文本框选择器，名称：:text，查找所有文本框元素，$(‘:text’)。
3：密码框选择器，名称：:password，查找所有密码框，$(‘:password’)。
4：单选按钮选择器，名称：:radio，查找所有单选按钮，$(“:radio”)。
5：复选框选择器，名称：:checkbox，查找所有复选框，$(‘:checkbox’)。
6：提交按钮选择器，名称：:submit，查找所有提交按钮，$(‘:submit’)，包括input:button、button、input:submit
7：图像域选择器，名称：:image，查找所有图像域，$(‘:image’)。
8：重置按钮选择器，名称：:reset，查找所有重置按钮，$(‘:reset’)。
9：按钮选择器，名称：:button，查找所有按钮，$(‘:button’)，包括input:button、button。
10：文件域选择器，名称：:file，查找所有文件域，$(‘:file’)。

代码展示

HTML5

<div class="cls1">
    <form action="#" method="get">
        <input type="text"><br />
        <input type="password">
        <select>
            <option>123</option>
            <option>456</option>
            <option>789</option>
            <option>011</option>
        </select>
        <textarea cols="30" rows="10"></textarea>
        <div>
            <input type="radio" name="cls1radiuo">
            <input type="radio" name="cls1radiuo">
            <input type="radio" name="cls1radiuo">
            <input type="radio" name="cls1radiuo">
        </div>
        <div>
            <input type="checkbox" name="cls1checkbox">
            <input type="checkbox" name="cls1checkbox">
            <input type="checkbox" name="cls1checkbox">
            <input type="checkbox" name="cls1checkbox">
        </div>
        <button>普通按钮1</button>
        <button>普通按钮2</button>
        <input type="button" value="input按钮">
        <input type="reset" value="重置按钮">
        <input type="submit" value="提交按钮">
        <input type="file">
    </form>
</div>
<div class="cls2">
    <form action="#" method="get">
        <input type="text"><br />
        <input type="password">
        <select>
            <option>123</option>
            <option>456</option>
            <option>789</option>
            <option>011</option>
        </select>
        <textarea cols="30" rows="10"></textarea>
        <div>
            <input type="radio" name="cls2radiuo">
            <input type="radio" name="cls2radiuo">
            <input type="radio" name="cls2radiuo">
            <input type="radio" name="cls2radiuo">
        </div>
        <div>
            <input type="checkbox" name="cls2checkbox">
            <input type="checkbox" name="cls2checkbox">
            <input type="checkbox" name="cls2checkbox">
            <input type="checkbox" name="cls2checkbox">
        </div>
        <button>普通按钮1</button>
        <button>普通按钮2</button>
        <input type="button" value="input按钮">
        <input type="reset" value="重置按钮">
        <input type="submit" value="提交按钮">
        <input type="file">
    </form>
</div>

Javascript

// 获取页面所有的表单控件
console.log('获取页面所有的表单控件：');
console.log($(':input'));

console.log('----------------------------------------------------------');

// 获取页面所有文本框
console.log('获取页面所有文本框：');
console.log($(':text'));

console.log('----------------------------------------------------------');

// 获取页面所有密码框
console.log('获取页面所有密码框：');
console.log($(':password'))
console.log('----------------------------------------------------------')
// 获取页面所有单选按钮与复选钮
console.log('获取页面所有单选按钮与复选钮');
console.log($(':radio'));
console.log($(':checkbox'))
console.log('----------------------------------------------------------')
// 获取页面所有的按钮
console.log('获取页面所有的按钮：');
console.log($(':button'))
console.log('----------------------------------------------------------')
// 获取页面所有的提交按钮
console.log('获取页面所有的提交按钮：');
console.log($(':submit'))
console.log('----------------------------------------------------------')
// 获取页面所有的重置按钮
console.log('获取页面所有的重置按钮：');
console.log($(':reset'))
console.log('----------------------------------------------------------')
// 获取页面所有的文件域
console.log('获取页面所有的文件域：');
console.log($(':file'))
console.log('----------------------------------------------------------')
// 选择类为cls1的div中的所有按钮
console.log('选择类为cls1的div中的所有按钮：');
console.log($('.cls1 :button'))
console.log('----------------------------------------------------------')
// 选择类为cls2的div中的所有复选框
console.log('选择类为cls2的div中的所有复选框');
console.log($('.cls2 :checkbox'));

05~操作元素的属性

介绍

1：获取属性
(1). attr(属性名称)，获取指定的属性值，操作checkbox时，选中返回checked，没有则返回undefined。例：$(‘checked’)、$(‘name’)。
(2). prop(属性名称)，获取具有true与false两个属性的属性值。
[注意]：
1)：如果元素属性是自定义的，attr()能获取到，而prop()获取不到(undefined)。
2)：如果是元素 [属性名=属性值] 的情况，attr()获取到的是属性名，prop()获取到的是true、false。
3)：当元素是 [属性名=属性值] 的情况，是可以省略属性值的，如果没有写属性值，attr()获取到的是一个空值，而prop()获取的仍然是true和false。
2：设置属性
1). attr(‘属性名称’,‘属性值’)
2). prop(‘属性名称’,‘属性值’)
[注意]：
1)：attr()可以设置自定义属性，prop()不可以设置自定义属性
3：移除属性
1). removeAttr()，用法：$(‘#radio’).removeAttr(‘checked’)

代码展示

HTML5

<input type="radio" checked id="a" abc="abc" class="che">
<input type="checkbox" checked="checked" id="b" class="che">
<div id="c" contenteditable></div>
<input type="checkbox" id="d">
<input type="checkbox" id="e">

Javascript

// 获取两个控件的属性以及属性值
console.log('获取两个控件的属性以及属性值(attr)：');
console.log($('#b').attr('checked'));
console.log($('#a').attr('abc'));
console.log($('#a').attr('class'));
console.log('获取两个控件的属性以及属性值(prop)：');
console.log($('#b').prop('checked'));
console.log($('#a').prop('abc'));
console.log($('#a').prop('class'));
console.log('用两种方法获取div的contenteditable值(1attr，2prop)：');
console.log($('#c').attr('contenteditable'));
console.log($('#c').prop('contenteditable'));

// 设置控件的属性以及属性值
$('#d').attr('checked',true);
$('#e').prop('checked',true);
console.log('#d与#e 的 checked：');
console.log($('#d').attr('checked'));
console.log($('#e').prop('checked'));
$('#d').attr('value','1');
$('#e').attr('value','2');
console.log('#d与#e 的 value：');
console.log($('#d').prop('value'));
console.log($('#e').prop('value'));
$('#d').attr('zidingyi','jiale');
$('#e').prop('zidingyi','jiale');
console.log('attr()与prop()设置自定义属性值：');
console.log($('#d').prop('zidingyi'));
console.log($('#e').prop('zidingyi'));

// 移除 #d 的checked属性
// $('#d').removeAttr('checked');
console.log('移除 #d 的checked属性：');
console.log($('#d'));

06~操作元素的样式

介绍

1：attr()
attr(‘class’)，获取元素的class属性值。
attr(‘class’,‘样式名’)，设置元素的class。
2：addClass()与removeClass()
addClass(‘添加class’)，添加样式名。
removeClass(‘样式名’)，移除样式。
3：css()，添加具体样式，添加的是行内样式，优先级高。
css(‘属性’,‘属性值’)：设置单个。
css({‘属性01’:‘属性值01’,‘属性02’:‘属性值02’…})

代码展示

CSS3

.test01 {
   width: 400px;
   height: 170px;
   background-color: red;
}

.test02 {
   width: 400px;
   height: 400px;
   border: solid 4px blue;
   box-sizing: border-box;
   transition: background-color .2s;
}
.test02:hover {
   background-color: green;
}

.test03 {
   width: 30px;
   height: 30px;
   border: dotted 1px red;
   background-color: antiquewhite;
}
.test03::after {
   content: 'test03';
}

HTML5

<div>第一个</div>
<div>第二个</div>
<button id="btn">变化</button>

Javascript

var div01 = $('body div:nth-of-type(1)');
var div02 = $('body div:nth-of-type(2)');
// 获取第一个div的class值
console.log(div01.attr('class'));

btn.addEventListener('click',function() {
// 将第一个div的class改为test01
div01.attr('class','test01')
// 将第二个div的class改为test02
div02.attr('class','test02');
// 给第二个div再添加一个test01的样式
div02.addClass('test01');
// 给第二个div再添加一个test03的样式
div02.addClass('test03');
// 删除第二个div的test01、test03的样式
div02.removeClass('test03');
div02.removeClass('test01');
// 设置第一个div宽度为100%
div01.css('width','100%');
// 设置第二个div宽度为1000px, 背景色pink，字体颜色是白色
div02.css({'width':'1000px','background-color':'pink','color':'white'});
});

07~操作元素的内容

介绍

1：html()，获取元素的内容，包含HTML标签（非表单元素）
2：html(‘内容’)，设置元素的内容，包含HTML标签（非表单元素）
3：text()，获取元素的纯文本内容，不识别HTML标签（非表单元素）
4：text(‘内容’)，设置元素的纯文本内容，不识别HTML标签（非表单元素）
5：val()，获取元素的值（表单元素）
6：val(‘值’)，设置元素的值（表单元素）

代码展示

HTML5

<form action="#" method="get">
    <input type="text" value="op" id="int1">
    <input type="password" id="int2">
</form>
<div class="div01"><mark>div01</mark></div>
<div class="div02"><mark>div02</mark></div>
<div class="div03"><mark>div03</mark></div>

Javascript

var div01 = $('.div01');
var div02 = $('.div02');
var div03 = $('.div03');
// 输出div01中的内容
console.log('html()：'+div01.html());
console.log('text()：'+div01.text());
// 设置div02、div03中的内容是jiale
div02.html('<font color="red">他奶奶的</font>');
div03.text('<font color="red">他爷爷的</font>');
// 获取文本框的值
console.log($('#int1').val());
// 设置文本框值为jiale
$('#int1').val('jiale');
// 设置密码框值为0215song
$('#int2').val('0215song');
console.log($('#int2').val());

08~创建和添加元素

介绍

1：prepend(content)：在被选元素内部的开头插入元素或者内容，被追加的content参数，可以是字符、HTML标记、jquery对象。（父子）
2：$(‘content’).prependTo(selector)：把content元素或内容、jquery对象添加到selector的开头。（父子）
3：append(content)：在被选元素内部的结尾插入元素或者内容，被追加的content参数，可以是字符、HTML标记、jquery对象。（父子）
4：$(‘content’).appendTo(selector)：把content元素或内容、jquery对象添加到selector的结尾。（父子）
5：before()：在元素前插入指定元素或内容。（兄弟）例：$(‘selector’).before(content)
6：$(‘content’).insertBefore(selector)，将内容插到某个元素前。（兄弟）
7：after()：在元素后插入指定元素或内容。（兄弟）例：$(‘selector’).after(content)
8：$(‘content’).insertAfter(selector)，将内容插到某个元素后。（兄弟）
[注意]：
将页面中的jquery对象插入到某个元素中，原来代表的jquery对象会消失。

代码展示

HTML5

<b id="b1">我是b1标记</b>
<b id="b2">我是b2标记</b>
<div class="div01">我是div01</div>
<div class="div02">我是div02</div>

Javascript

var div01 = $('.div01');
var div02 = $('.div02');
// 在div01前边添加个mark标记
div01.prepend('<mark>mark标记</mark>');
// 在div01前边添加个b标记
$('#b1').prependTo(div01);
// 在div02后边添加个mark标记
div02.append('<mark>mark标记</mark>');
// 在div02后边添加个b标记
$("#b2").appendTo(div02);
// 在div01前创建个div.div0-5的元素
// div01.before('<div class="div0-5">div0.5</div>');
$('<div class="div0-5">div0.5</div>').insertBefore(div01);
// 在div01前创建个div.div1-5的元素
// div01.after('<div class="div1-5">div1.5</div>');
$('<div class="div1-5">div1.5</div>').insertAfter(div01);

/**
* 1：字符串无法通过prependTo()或appendTo()、insertBefore()、insertAfter()方法直接插入，必须先转化为jquery对象。
* 2：var span = '<span>我是span标记</span>';
* $(span).appendTo(selector);
*/

09~删除和遍历元素

介绍

1：删除元素
  1. remove()：删除元素及其对应的子元素，标签和内容一起删除。用法：指定元素.remove();
  1. empty()：清空元素内容，保存标签，但不保存子标签。 用法：指定元素.empty();
  1. [注意]：元素删掉后，原有的jquery对象不变，不会随页面上的元素消失而消失。
2：遍历元素
  1. each()
    语法：$(selector).each(function(index,element));
    参数function为遍历时的回调函数；index为遍历元素的序列号，从0开始；element是当前元素，此时是dom元素。
  1. for()
    语法：for(var i = 0;i < $(selector).length;i++) {}
    获取的也是dom元素。

代码展示

HTML

<div class="div01">我是div01，<mark>div01里面的mark</mark></div>
<div class="div02">我是div02，<mark>div02里面的mark</mark></div>
<ul>
    <li class="lis">li1</li>
    <li class="lis">li2</li>
    <li class="lis">li3</li>
    <li class="lis">li4</li>
    <li class="lis">li5</li>
    <li class="lis">li6</li>
</ul>

Javascript

var div01 = $('.div01');
var div02 = $('.div02');
// 使用remove()方法删除div01
div01.remove();
console.log(div01);
// 使用empty()方法删除div02
div02.empty();
console.log(div02);
// 将div01添加到div02
div01.appendTo(div02);
// 获取所有li，遍历
var lis = $('ul >li');
console.log('使用 for 循环：');
for(var i = 0;i < lis.length;i++) { console.log(lis[i]); console.log($(lis[i])); } console.log('使用 each：');
    lis.each(function(i,ele){ console.log(i,ele); console.log($(ele)); });

10~事件

介绍

  1. ready事件（预加载事件）
    1). 当页面的dom结构加载完毕后执行，类似于load事件。
    2). 语法：$(document).ready(function(){ //代码 }); 简写：$(function(){ //代码 });
    3). ready事件可以写多个，js从上往下执行，所以先执行上边的。
  2. bind()绑定事件
    1). 为被选元素添加一个或者多个事件处理程序，并规定事件发生时运行的函数。
    2). 语法：
    $(selector).bind(eventType [, eventDate] , handler());
    eventType：一个字符串类型的事件类型，就是要绑定的事件
    eventDate：传递的参数，格式{ 名:值 , 名 : 值}
    handler：事件触发执行的函数
  3. 绑定单个事件
    1). $(selector).bind(‘click’,function() { //代码块 });
    2). $(selector).事件名(function(){ //代码块 });
  4. 绑定多个事件
    1). 使多个事件绑定一个函数
    $(selector).bind(‘事件1，事件2’,function() { //代码块 });
    2). 为元素绑定多个事件，并设置相应的函数
    $(selector).bind(‘事件类型’,function(){
    }).bind(‘事件类型’,function(){
    })
    3). 为元素绑定多个事件，并设置对应的函数
    $(selector).bind({
    ‘事件类型’ : function() {},
    ‘事件类型’ : function() {}
    });
    4). $(selector).事件名(function() {
    // 代码块
    }).事件名(function(){
    // 代码块
    });

代码展示

HTML5

<button id="btn01">btn01</button>
<button id="btn02">btn02</button>
<button id="btn03">btn03</button>
<button id="btn04">btn04</button>
<button id="btn05">btn05</button>
<button id="btn06">btn06</button>

Javascript

// 点击btn01, btn02获取内容
$(btn01).bind('click', function () {
console.log($(this).text());
});
$(btn02).click(function () {
console.log($(this).text());
});
// 点击、鼠标移开、鼠标进入在控制台输出btn03操作
$(btn03).bind('click mouseover mouseout', function () {
console.log($(this).text());
});
// 点击、鼠标移开、进入分别输出对应的事件（btn04）
$(btn04).bind('click', function () {
console.log($(this).text() + '：点击');
}).bind('mouseover', function () {
console.log($(this).text() + '：鼠标进入');
}).bind('mouseout', function () {
console.log($(this).text() + '：鼠标出去');
});
// 点击、鼠标移开、进入分别输出对应的事件（btn05）
$(btn05).bind({
'click' : function() {
console.log($(this).text()+'：鼠标点击');
},
'mouseover' : function() {
console.log($(this).text()+'：鼠标进入');
},
'mouseout' : function() {
console.log($(this).text()+'：鼠标出去');
}
});
// 点击、鼠标移开、进入分别输出对应的事件（btn06）
$(btn06).click(function() {
console.log($(this).text()+'：鼠标点击');
}).mouseover(function(){
console.log($(this).text()+'：鼠标进入');
}).mouseout(function() {
console.log($(this).text()+'：鼠标出去');
});

11~JQuery Ajax

$.ajax() 介绍

格式：$.ajax({ });
参数：
1. type：请求方式GET/POST
2. url：请求地址url
3. async：是否异步，默认true异步
4. data：发送到服务器的数据
5. dataType：预期服务器返回的数据类型
6. contentType：设置请求头
7. success：请求成功时调用此函数
8. error：请求失败时调用此函数

$.ajax() 代码展示

index.html

<input type="text" class="username">
<input type="password" class="passwd">
<button class="submit01">get请求</button>
<button class="submit02">post请求</button>
<script>
    var submitBtn01 = $('.submit01');
    var submitBtn02 = $('.submit02');

    // ajax get请求
    submitBtn01.click(function () {
        var un = $('.username').val();
        var pw = $('.passwd').val();
        if (un && pw) {
            $.ajax({
                type: 'get',
                url: 'get.php?username=' + un + '&passwd=' + pw,
                success: function (data) {
                    alert(data);
                }
            });
        } else alert('请将信息填写完整！');
    });

    // ajax get请求
    submitBtn02.click(function () {
        var un = $('.username').val();
        var pw = $('.passwd').val();
        if (un && pw) {
            $.ajax({
                type: 'post',
                url: 'post.php',
                // data使post请求独有的字段，用来存放post的数据，格式为json
                data: {
                    'username': un,
                    'passwd': pw
                },
                success: function (data) {
                    alert(data);
                }
            });
        } else alert('请将信息填写完整！');
    });
</script>

get.php

<?php
$name = 'jiale';
$passwd = '0215song';
$usName = $_GET['username'];
$usPasswd = $_GET['passwd'];
if($usName == $name) {
    if($usPasswd == $passwd) {
        echo '登录成功！';
    } else echo '密码不正确！';
} else {echo '用户名不正确！';}
?>

post.php

<?php
$name = 'jiale';
$passwd = '0215song';
$usName = $_POST['username'];
$usPasswd = $_POST['passwd'];
if($usName == $name) {
    if($usPasswd == $passwd) {
        echo '登录成功！';
    } else echo '密码不正确！';
} else {echo '用户名不正确！';}
?>

$.get() / $.post() 介绍

  1. $.get()
    这是一个简单的GET请求功能以取代复杂的$.ajax()
    请求成功时可调用回调函数，如果需要出错时执行函数，请用$.ajax()
    格式：$.get(‘url’,data,function(data,statu,xhr){},dataType);
    url：请求的地址
    data：请求的数据，以json对象形式
    function(data,status,xhr)：请求成功运行的函数
    data：包含来自请求的结果数据
    status：包含请求的状态( success, notmodified, error, timeout, parsererror )
    xhr：包含xmlHttpRequest对象
    dataType：规定预期的服务器相应的数据类型
  2. $.post()
    这是一个简单的POST请求功能以取代复杂的$.ajax()
    请求成功时可调用回调函数，如果需要出错时执行函数，请用$.ajax()
    格式：$.post(‘url’,data,function(data,statu,xhr){},dataType);
    url：请求的地址
    data：请求的数据，以json对象形式
    function(data,status,xhr)：请求成功运行的函数
    data：包含来自请求的结果数据
    status：包含请求的状态( success, notmodified, error, timeout, parsererror )
    xhr：包含xmlHttpRequest对象
    dataType：规定预期的服务器相应的数据类型

$.get() / $.post() 代码展示

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>$.get()与$.post()</title>
    <script src="./script/jquery.min.js"></script>
</head>

<body>
    <input type="text" id="un">
    <input type="password" id="pw">
    <button class="getRes">get</button>
    <button class="postRes">post</button>
    <script>
        // get
        $('.getRes').click(function () {
            var un = $('#un').val();
            if (un) {
                $.get('$_get.php', { username: un, passwd: '0215song' }, function (data, status, xhr) {
                    alert(data);
                    console.log(status);
                    console.log(xhr);
                });
            } else alert('请将数据填写完整！');
        });
        // post
        $('.postRes').click(function () {
            var pw = $('#pw').val();
            if (pw) {
                $.post('$_post.php', { password: pw }, function (data, status, xhr) {
                    alert(data);
                    console.log(status);
                    console.log(xhr);
                })
            } else alert('请将数据填写完整！');
        });
    </script>
</body>

</html>

get.php

<?php
$username = 'jiale';
$un = $_GET['username'];
if($username == $un) {
    echo '登录成功！';
} else echo '爬！';
?>

post.php

<?php
$pw = '02150215';
$passwd = $_POST['password'];
if($pw == $passwd) {
    echo '密码正确！';
} else echo '密码错误！';
?>

12~拓展

  1. $.trim()
    去掉字符串前后的空格，但不会改变原字符串。
  2. $.isArrray()
    检测对象是否为一个数组，获取的页面元素集(jquery对象)不是数组。
  3. $.isFunction()
    检测对象是否为一个函数。
  4. $(selector).toArray()
    将jquery集合中所有dom元素恢复成一个数组
    格式：$(selector).toArray();
  5. $(selector).hasClass(clsName)
    判断某个元素是否有这个类，有true，没有false
  6. $(selector).toggleClass(‘clsName’)
    判断一个元素是否有此类，取反操作
  7. 元素尺寸的操作
    width(): 获取内容元素width的值
    height(): 获取内容元素height的值。
    innerWidth(): 获取内容元素width+padding的值。
    innerHeight()：获取内容元素height+padding的值。
    outerWidth(false/true): 获取内容元素width+padding+border的值，如果是true再加上margin的值。
    outerHeight(false/true)，获取内容元素height+padding+border的值，如果是true再加上margin的值。
  8. 元素的偏移量
    $(selector).offset()：相对于页面左上角的坐标，返回一个{top: y,left: x}对象。
    $(selector).position()：相对于父元素左上角的坐标，返回一个{top: y,left: x}对象。
  9. 滚动条操作
    $(selector).scrollTop() / $(selector).scrollLeft()，获取元素的纵向/横向滚动条
    $(selector).scrollTop( i ) / $(selector).scrollLeft( i )，设置元素的纵向/横向滚动条
  10. replaceWith()/replaceAll()
    用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。
    格式：
    $(selector).replaceWith($(‘<mark>m</mark>’))
    $(‘<mark>m</mark>’).replaceAll($(selector))
  11. $(selector).parent()：获取元素的父元素
    $(selector).children()：获取元素的子元素
  12. $(selector).hide() / $(selector).show() / $(selector).toggle()
    隐藏相应元素 / 显示相应元素 / 取反操作。
    fadeIn()/fadeOut()/fadeGoogle()
    淡入/淡出 的 显示/隐藏 元素。
    slideIn()/slideOut()/slideToggle()
    滑入/滑出 的 显示/隐藏 元素。

13~结束

除了JQuery本身的强大功能外，还有许多优秀的插件可以让你更好地实现各种需求。比如JQuery Cookie、JQuery Growl等，还有备受推崇的JQuery UI，这些插件的使用可以为你的开发工作带来极大的便利。当然，这里就不一一进行详细介绍了。只要您能够掌握这些技能，相信您已经可以轻松地实现许多令人惊叹的效果了。

非常感谢您的耐心阅读，希望这些内容对您有所启发和帮助。如有疑问或需要进一步的探讨，欢迎随时与我交流。感谢您的支持和信任，祝您在今后的工作或学习中取得更大的成功！

转载请注明出处或者链接地址：https://www.qianduange.cn//article/11361.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

简单实现jQuery和Ajax的图片/文件上传与下载

2024-06-14 23:06:40

echarts 鼠标划过显示信息

2024-06-14 23:06:40

Echarts 中grid只有最外边的边框，设置边框包裹整个grid

2024-06-14 23:06:39

echarts@5 动画失效

2024-06-14 23:06:39

关于echarts鼠标悬浮位置不准确的问题

2024-06-14 23:06:39

vue3 聊天机器人 聊天界面

2024-06-14 23:06:06

用vsCode开发uni-app(vue ts)项目流程

2024-06-14 23:06:04

vscode中vue代码没有高亮显示的问题

2024-06-14 23:06:59

Vue - Vue3 集成编辑器功能

2024-06-14 23:06:54

Vue 中清空 el-select 选项的方法

2024-06-14 23:06:53

大家推荐的文章
1

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
2

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
3

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
4

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
5

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
6

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
7

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
8

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
9

UE4.27支持HTML5

2024-05-07 13:05:261000
10

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！