jquery基础知识,jquery的基础语法是什么

深圳嘉华学校：什么是JQuery？

什么是JQuery？这里将由北大青鸟深圳嘉华来介绍下关于JQuery部分知识，希望能让大家对JQuery有初步的映象。

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器，能很便利的处理HTML、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery 库可以通过一行简单的标记被添加到网页中。

您需要具备的基础知识

在您开始学习 jQuery 之前，您应该对以下知识有基本的了解：

HTML

CSS

JavaScript

什么是 jQuery ？

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的\”写的少，做的多\”的JavaScript库。

jQuery库包含以下功能：

HTML 元素选取

HTML 元素操作

CSS 操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

Utilities

提示：除此之外，Jquery还提供了大量的插件。

为什么使用 jQuery ？

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。

很多大公司都在使用 jQuery，例如:

Google

Microsoft

IBM

Netflix

jQuery是否适用于所有浏览器?

jQuery 团体知道JS在不同浏览器中存在着大量的兼容性问题，目前jQuery兼容于所有主流浏览器, 包括Internet Explorer 6!

用心办好学，深圳嘉华邀您加入互联网队伍！

微信号：jhzyjy（长按复制）

我们专注IT教育，欢迎你前来咨询！

jQuery入门看这一篇就够了！超详细！（二）

“这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

先变成自己喜欢的模样，

再去遇见无需取悦的人。

– 2023.06.12 –

上期给大家讲解了jQuery的基础概念和核心函数中选择器的使用，并且举了非常多的例子来说明各种选择器的使用，大家有没有跟着一起练习呢?今天小编将继续给大家讲解jQuery的相关内容。

1、工具

$.each方法

方法描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length – 1，其他对象通过其属性名进行迭代。

需求描述：给定一个数组，使用$.each方法进行遍历输出

var arr = [10, 90, 20, 80, 30, 70, 40, 60, 50];

$.each(arr, function (index, element) {

console.log(index, element);

});

需求描述：给定一个对象，使用$.each方法进行遍历输出

var obj = {

name: \’Tom\’,

age: 28,

speak: function () {}

};

$.each(obj, function (key, value) {

console.log(key, value);

});

方法描述：去掉字符串起始和结尾的空格。

需求描述：给定一个字符串，去掉该字符串的前后空格

var str = \’ hello \’;

console.log($.trim(str));

方法描述：确定JavaScript 对象的类型。

需求描述：给定一个对象，输出该对象的类型

var str = \’ hello \’;

console.log($.type(str));

$.isArray方法

方法描述：用来测试指定对象是否为一个数组。

需求描述：给定一个对象，输出该对象是不是数组类型

var arr = [10, 90, 20, 80, 30, 70, 40, 60, 50];

console.log($.isArray(arr));

方法描述：用来测试指定对象是否为一个函数。

需求描述：给定一个对象，输出该对象是不是函数类型

var fun = function () {

console.log(\”hello\”);

};

console.log($.isFunction(fun));

方法描述：执行一个异步的HTTP的请求。

需求描述：执行一个异步的HTTP GET请求，从服务器加载数据。

$.ajax({

url: \’/user/login\’,

type: \’get\’,

data: {

username: \’zhangsan\’,

password: \’123456\’

dataType: \’text\’,

success: function (response) {

alert(response);

error: function (response) {

alert(response);

}

});

需求描述：执行一个异步的HTTP POST请求，从服务器加载数据。

$.ajax({

url: \’/user/login\’,

type: \’post\’,

data: {

username: \’zhangsan\’,

password: \’123456\’

dataType: \’text\’,

success: function (response) {

alert(response);

error: function (response) {

alert(response);

}

});

方法描述：使用一个HTTP GET请求从服务器加载数据。

这是一个ajax功能的缩写，这相当于:

$.ajax({

url: url,

data: data,

success: success,

dataType: dataType

});

$.get(\’/user/login\’, {username: \’zhangsan\’, password: \’123456\’}, function (response) {

alert(response);

});

方法描述：使用一个HTTP POST请求从服务器加载数据。

这是一个ajax功能的缩写，这相当于:

$.ajax({

url: url,

data: data,

success: success,

dataType: dataType

});

$.post(\’/user/login\’, {username: \’zhangsan\’, password: \’123456\’}, function (response) {

alert(response);

});

方法描述：专门操作属性值为非布尔值的属性，该方法读写一体。

需求描述：设置p标签的title属性为”我是attr修改后的段落标题“

$(\’#content\’).attr(\’title\’, \’我是attr修改后的段落标题\’);

需求描述：读取p标签的title属性并输出

console.log($(\’#content\’).attr(\’title\’));

方法描述：专门操作属性值为布尔值的属性，该方法读写一体。

需求描述：设置复选框的状态为选中状态

<input type=\”checkbox\”>复选框

$(\’:checkbox\’).prop(\’checked\’, \’true\’);

<input type=\”checkbox\” checked>复选框

console.log($(\’:checkbox\’).prop(\’checked\’));

方法描述：该方法主要用于获取表单元素的值和设置表单元素的值，该方法读写一体。

需求描述：设置文本框的值为”123456“

$(\’:text\’).val(\’123456\’);

需求描述：读取文本框的值并输出

console.log($(\’:text\’).val());

方法描述：获取匹配元素集合中的第一个元素的样式属性的计算值或设置每个匹配元素的一个或多个CSS属性。

需求描述：设置div的背景颜色为红色，字体颜色为白色

<div>我是div</div>

$(\’div\’).css({

\’background\’: \’red\’,

\’color\’: \’white\’

});

需求描述：获取div的背景颜色和字体颜色并输出

<div style=\”background: red;color: white\”>我是div</div>

console.log($(\’div\’).css(\’background\’));

console.log($(\’div\’).css(\’color\’));

方法描述：为每个匹配的元素添加指定的样式类名。

需求描述：为所有的li添加样式”beauty“

.beauty {

font-weight: bold;

font-size: 18px;

color: coral;

}

<ul>

</ul>

$(\’li\’).addClass(\’beauty\’);

方法描述：移除集合中每个匹配元素上一个，多个或全部样式。

需求描述：为所有的li移除样式”beauty“

.beauty {

font-weight: bold;

font-size: 18px;

color: coral;

}

<ul>

</ul>

$(\’li\’).removeClass(\’beauty\’);

方法描述：确定任何一个匹配元素是否有被分配给定的样式类。

需求描述：判断p标签是否包含”beauty“的样式

.beauty {

font-weight: bold;

font-size: 18px;

color: coral;

}

<p></p>

console.log($(\’p\’).hasClass(\’beauty\’));

方法描述：为匹配的元素集合中的每个元素上添加或删除一个或多个样式类，取决于这个样式类是否存在。

注意：如果存在（不存在）就删除（添加）一个样式类

需求描述：当单击按钮的时候，隐藏div，再次单击按钮的时候，显示div

.hide {

width: 100px;

height: 100px;

display: none;

}

<div>我是div</div>

$(\’button\’).click(function () {

$(\’div\’).toggleClass(\’hide\’);

});

3、尺寸

width()

方法描述：获取内容元素width的值。

height()

方法描述：获取内容元素height的值。

innerWidth()

方法描述：获取内容元素width+padding的值。

innerHeight()

方法描述：获取内容元素height+padding的值。

outerWidth()

方法描述：outerWidth(false/true)，获取内容元素width+padding+border的值，如果是true再加上margin的值。

outerHeight()

方法描述：outerHeight(false/true)，获取内容元素height+padding+border的值，如果是true再加上margin的值。

综合演示

需求描述：创建按一个div，获取以上六种值

.box {

margin: 30px;

padding: 20px;

border: 10px;

width: 100px;

height: 100px;

background: coral;

}

var $box = $(\’.box\’);

console.log($box.width(), $box.height());// 100 100

console.log($box.innerWidth(), $box.innerHeight());// 140 140

console.log($box.outerWidth(), $box.outerHeight());// 160 160

console.log($box.outerWidth(true), $box.outerHeight(true));// 220 220

方法描述：相对页面左上角的坐标。

需求描述：获取div相对页面左上角的坐标。

.box {

width: 100px;

height: 100px;

background: coral;

}

var offset = $(\’.box\’).offset();

console.log(offset.left, offset.top);

方法描述：相对于父元素左上角的坐标。

需求描述：获取div相对于父元素左上角的坐标

.box-container {

width: 300px;

height: 300px;

background: pink;

position: absolute;

left: 20px;

top: 20px;

}

.box {

width: 100px;

height: 100px;

background: coral;

position: absolute;

left: 20px;

top: 20px;

}

</div>

var offset = $(\’.box\’).position();

console.log(offset.left, offset.top);

scrollLeft()

方法描述：读取/设置滚动条的X坐标，该方法读写合一。

读取页面滚动条的Y坐标(兼容chrome和IE)

var scrollLeft = $(document.body).scrollLeft()+$(document.documentElement).scrollLeft();

设置页面滚动条滚动到指定位置(兼容chrome和IE)

$(\’body,html\’).scrollLeft(60);

需求描述：设置页面的宽度为2000px，设置滚动条的X轴坐标为300px，要求兼容各种浏览器

$(\’body\’).css(\’width\’, \’2000px\’);

$(\’html,body\’).scrollLeft(300);

方法描述：读取/设置滚动条的Y坐标，该方法读写合一。

读取页面滚动条的Y坐标(兼容chrome和IE)

var scrollTop = $(document.body).scrollTop()+$(document.documentElement).scrollTop();

设置页面滚动条滚动到指定位置(兼容chrome和IE)

$(\’body,html\’).scrollTop(60);

需求描述：设置页面的高度为2000px，设置滚动条的Y轴坐标为300px，要求兼容各种浏览器

$(\’body\’).css(\’height\’, \’2000px\’);

$(\’html,body\’).scrollTop(300);

方法描述：设置/获取元素的文本内容，该方法读写合一。

需求描述：设置p段落标签的内容为“我是段落”

<p></p>

$(\’p\’).text(\’我是段落\’);

需求描述：获取p段落标签的内容并输出

console.log($(\’p\’).text());

方法描述：设置/获取元素的html内容，该方法读写合一。

需求描述：设置ul列表标签的li列表项

var li = \'<li>我是列表项</li>\’;

$(\’ul\’).html(li);

需求描述：获取ul列表中的列表项并输出

<ul><li>我是列表项</li></ul>

console.log($(\’ul\’).html());

方法描述：向当前匹配的所有元素内部的最后面插入指定内容。

需求描述：为当前的ul向后添加一个列表项

<ul>

<li>我是列表项1</li>

<li>我是列表项2</li>

</ul>

var last = \'<li>我是最后一个列表项</li>\’;

$(\’ul\’).append(last);

方法描述：将指定的内容追加到当前匹配的所有元素的最后面。

需求描述：为当前的ul向后添加一个列表项

<ul>

<li>我是列表项1</li>

<li>我是列表项2</li>

</ul>

var last = \'<li>我是最后一个列表项</li>\’;

$(last).appendTo($(\’ul\’));

方法描述：向当前匹配的所有元素内部的最前面插入指定内容。

需求描述：为当前的ul向前添加一个列表项

<ul>

<li>我是列表项1</li>

<li>我是列表项2</li>

</ul>

var first = \'<li>我是第一个列表项</li>\’;

$(\’ul\’).prepend(first);

方法描述：将指定的内容追加到当前匹配的所有元素的最前面。

需求描述：为当前的ul向前添加一个列表项

<ul>

<li>我是列表项1</li>

<li>我是列表项2</li>

</ul>

var first = \'<li>我是第一个列表项</li>\’;

$(first).prependTo($(\’ul\’));

方法描述：在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。

需求描述：在div的后边插入一个段落

<div>我是div</div>

var after = \'<p>我是段落</p>\’;

$(\’div\’).after(after);

方法描述：在匹配元素集合中的每个元素前边插入参数所指定的内容，作为其兄弟节点。

需求描述：在div的前边插入一个段落

<div>我是div</div>

var before = \'<p>我是段落</p>\’;

$(\’div\’).before(before);

insertAfter()

方法描述：.after()和.insertAfter() 实现同样的功能。主要的不同是语法，特别是插入内容和目标的位置。对于 .after()，选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter()，刚好相反，内容在方法前面，它将被放在参数里元素的后面。

需求描述：在div的后边插入一个段落

<div>我是div</div>

var content = \'<p>我是段落</p>\’;

$(content).insertAfter($(\’div\’));

insertBefore()

方法描述：.before()和.insertBefore()实现同样的功能。主要的不同是语法，特别是插入内容和目标的位置。对于 .before()，选择表达式在函数前面，参数是将要插入的内容。对于 .insertBefore()，刚好相反，内容在方法前面，它将被放在参数里元素的前面。

需求描述：在div的前边插入一个段落

<div>我是div</div>

var content = \'<p>我是段落</p>\’;

$(content).insertBefore($(\’div\’));

方法描述：删除所有匹配元素的子元素。

需求描述：将ul列表下所有的子节点全部移除

<ul>

</ul>

$(\’ul\’).empty();

方法描述：删除所有匹配的元素。

注意：同时移除元素上的事件及 jQuery 数据

需求描述：将ul列表下所有的p子节点全部移除

<ul>

</ul>

$(\’ul>p\’).remove();

方法介绍：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。

需求描述：将ul下的所有li替换为p标签

<ul>

</ul>

$(\’ul>li\’).replaceWith(\'<p>我是段落</p>\’);

方法介绍：.replaceAll()和.replaceWith()功能类似，但是目标和源相反。

需求描述：将ul下的所有li替换为p标签

<ul>

</ul>

$(\'<p>我是段落</p>\’).replaceAll($(\’ul>li\’));

方法描述：创建一个匹配的元素集合的深度拷贝副本。如果传入一个true，则表示是否会复制元素上的事件处理函数，从jQuery 1.4开始，元素数据也会被复制。

需求描述：为ul列表创建一个深克隆并追加到body后

<ul>

</ul>

var ul = $(\’#ul\’).clone();

$(\’body\’).append(ul);

方法描述：获取集合中每个匹配元素的父元素，可以提供一个可选的选择器来进行筛选。

需求描述：输出id为two的li的父元素

<ul>

</ul>

console.log($(\’#two\’).parent()[0]);

方法描述：获取集合中每个匹配元素的子元素，可以提供一个可选的选择器来进行筛选。

需求描述：输出ul下的所有子元素

<ul>

</ul>

var childrens = $(\’ul\’).children();

for (var i = 0; i < childrens.length; i++) {

console.log(childrens[i]);

}

方法描述：获取集合中每个匹配元素紧邻的前一个兄弟元素，可以提供一个可选的选择器来进行筛选。

需求描述：获取id为two元素的前一个兄弟元素并输出

<ul>

</ul>

console.log($(\’#two\’).prev()[0]);

方法描述：获得集合中每个匹配元素的所有前面的兄弟元素，可以提供一个可选的选择器来进行筛选。

需求描述：获取id为two元素的前边所有的兄弟元素并输出

<ul>

</ul>

var prevs = $(\’#two\’).prevAll();

for (var i = 0; i < prevs.length; i++) {

console.log(prevs[i]);

}

方法描述：获取集合中每个匹配元素紧邻的后一个兄弟元素，可以提供一个可选的选择器来进行筛选。

需求描述：获取id为two元素的后一个兄弟元素并输出

<ul>

</ul>

console.log($(\’#two\’).next()[0]);

方法描述：获得集合中每个匹配元素的所有后面的兄弟元素，可以提供一个可选的选择器来进行筛选。

需求描述：获取id为two元素的后边所有的兄弟元素并输出

<ul>

</ul>

var nexts = $(\’#two\’).nextAll();

for (var i = 0; i < nexts.length; i++) {

console.log(nexts[i]);

}

方法描述：获得集合中每个匹配元素的兄弟元素，可以提供一个可选的选择器来进行筛选。

需求描述：获取id为two元素的所有兄弟元素并输出

<ul>

</ul>

var siblings = $(\’#two\’).siblings();

for (var i = 0; i < siblings.length; i++) {

console.log(siblings[i]);

}

以上jQuery核心函数中工具和Ajax方法以及jQuery核心对象的属性和基本的操作的相关内容，内容比较多，下期接着更新遍历、事件和动画等内容，敬请期待哦！

今天就先讲到这里了，更多Java基础知识持续更新中，欢迎一起学Java！

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

jQuery 简介

本教程我们来学习 JQuery 的基础入门知识。JQuery 是一个快速、简洁的 JavaScript 框架，是继 Prototype 之后又一个优秀的 JavaScript 代码库。jQuery 极大的简化了 JavaScript 编程，例如以前要一大段 JavaScript 代码才能实现的功能，使用 jQuery 很轻松就能完成。

轻量级，jQuery 的体积较小，压缩之后，大约只有 100KB。
强大的选择器，jQuery 支持几乎所有的 CSS 选择器，以及 jQuery 自定义的特有选择器。
出色的 DOM 封装，jQuery 封装了大量常用的 DOM 操作，使开发者在编写 DOM 操作相关程序的时候能够更加得心应手。
浏览器兼容性，jQuery 消除了浏览器兼容问题。
可靠的事件处理机制，jQuery 的事件处理机制吸收了 JavaScript 中的事件处理函数的精华，使得 jQuery 在处理事件绑定时非常可靠。
提供了丰富多彩的页面动态效果。
与 Ajax 技术的完美结合，极大地方便了程序的开发，增强了页面交互，提升了用户体验。
有丰富的插件支持，目前已经有成百上千的官方插件支持，而且不断有新插件面世。

HTML 元素选取
HTML/DOM 操作
CSS 操作
JavaScript 效果和动画
HTML DOM 遍历和修改
AJAX
Utilities

除此之外，jQuery 还提供了一些插件供我们使用，对于代码的实现方便且快捷。

原生 JavaScript 的 API 名字太长，不容易记住，jQuery 的 API 名字容易记住。
原生 JavaScript 有的代码冗余，jQuery 的代码简洁。
原生 JavaScript 中的属性或者方法有些浏览器无法兼容，jQuery 帮我们解决了浏览器兼容问题。
原生 JavaScript 容错率比较低，前面的代码出现问题，后面的代码执行不到。jQuery 容错率比较高，前面的代码出现问题，不影响后面的代码。
原生 JavaScript 不能添加多个入口函数，如果添加了多个，后面的会把前面的覆盖掉。jQuery 可以写多个入口函数。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

文章为作者独立观点不代本网立场，未经允许不得转载。

继续阅读本文相关话题

TAG

全部

行业动态

C4D教程

C4D百科

jquery基础知识,jquery的基础语法是什么收藏 0

2025-02-04 07:47 作者：中望小编来源：互联网点击：0

深圳嘉华学校：什么是JQuery？

jQuery入门看这一篇就够了！超详细！（二）

jQuery 简介

继续阅读本文相关话题

C4D百科

3Dmax和C4D有什么区别？

上一篇

C4D百科

jquery基础教程(jquery基础教程详解)

下一篇

中望小编

C4D百科

jquery和vue的区别【jquery和vue的关系】

中望小编

C4D百科

jquery在线手册中文版,jquery手册中文版下载

中望小编

C4D百科

jquery图片轮播代码(jquery图片轮播无缝连接)

中望小编

C4D百科

jquery在线运行 js在线运行网站

中望小编

C4D百科

jquery在线文档-jquery 中文网

jquery基础知识,jquery的基础语法是什么 收藏 0

2025-02-04 07:47 作者： 中望小编 来源：互联网 点击：0

深圳嘉华学校：什么是JQuery？

jQuery入门看这一篇就够了！超详细！（二）

jQuery 简介

继续阅读本文相关话题

C4D百科

3Dmax和C4D有什么区别？

上一篇

C4D百科

jquery基础教程(jquery基础教程详解)

下一篇

中望小编

中望小编

中望小编

中望小编

中望小编

jquery基础知识,jquery的基础语法是什么收藏 0

2025-02-04 07:47 作者：中望小编来源：互联网点击：0