jQuery 基本操作，jquery使用教程

01-简介

jQuery 是一个功能丰富且广泛使用的JavaScript 库，它简化了HTML 文档的遍历和操作、事件处理、动画和Ajax 操作。 jQuery 通过易于使用的API 简化了复杂的JavaScript 编程任务，并且与各种浏览器兼容。

1、jQuery特点

简化的DOM 操作：jQuery 提供了简洁的选择器和方法来轻松查找和操作DOM 元素。

跨浏览器兼容性：jQuery 处理不同浏览器之间的兼容性问题，允许开发人员编写一次代码并在多个浏览器之间无缝运行。

事件处理：jQuery提供简单而强大的事件绑定和事件触发功能。

动画效果：jQuery提供了多种内置的动画效果，可以轻松实现复杂的动画。

Ajax 支持：jQuery 促进与服务器的异步通信，允许您无需刷新即可更新页面。

插件系统：jQuery拥有丰富的插件库，可以扩展其功能以满足各种需求。

2、为什么要选择用jQuery，而不用原生JavaScript开发

简化的DOM 操作：jQuery 提供了干净直观的选择器和方法，使DOM 操作更容易、更直观。

跨浏览器兼容性：jQuery 处理不同浏览器之间的兼容性问题，允许开发人员编写一次代码并在多个浏览器之间无缝运行。

简化的事件处理：jQuery 提供简单而强大的事件绑定和事件委托方法来简化您的事件处理代码。

丰富的动画效果：jQuery提供了多种内置的动画效果，可以轻松实现复杂的动画。

强大的Ajax支持：jQuery促进与服务器的异步通信，允许您无需刷新即可更新页面。

插件系统：jQuery拥有丰富的插件库，可以扩展其功能以满足各种需求。

简洁的链接语法：jQuery 使用链接语法。这允许在一次选择后连续调用多个方法，提高了代码的可读性和简单性。

概括：

随着现代前端框架（React、Vue、Angular 等）的兴起，jQuery 的使用量有所下降，但对于许多简单的项目、快速开发，或者当你需要跨浏览器兼容性工具时，仍然是一个非常有用的工具。这简化了许多常见的JavaScript 任务，并允许开发人员更有效地创建强大且兼容的Web 应用程序。

02-jQuery基本使用

1、引入jQuery

jQuery 可以通过CDN 或下载本地文件引入。我们建议使用CDN，因为它可以提高加载速度。

通过CDN 部署jQuery

脚本src=\’https://code.jquery.com/jquery-3.6.0.min.js\’/script

2、基本用法

2.1、 选择元素

使用“$”函数和选择器选择元素。

$(文档).ready(函数() {

$(\’p\’).css(\’color\’, \’blue\’) //将所有段落的文本颜色更改为蓝色。

});

2.2、 修改内容

$(文档).ready(函数() {

$(\’#myParagraph\’).text(\’Hello, jQuery!\’); //更改id myParagraph 的段落文本。

});

2.3、 添加和删除元素

$(文档).ready(函数() {

$(\’ul\’).append(\’liNew item/li\’); //将新列表项添加到所有ul 元素。

$(\’li:first\’).remove(); //删除第一个列表项。

});

03-jQuery选择器

A. 基本选择器

1、元素选择器： 选择所有指定元素。

$(\’p\’).css(\’color\’, \’blue\’) //选择所有段落元素。

2、ID选择器： 选择具有特定 ID 的元素。

$(\’#myId\’).text(\’Hello, World!\’) //选择ID 为myId 的元素

3、类选择器： 选择具有特定类的元素。

$(\’.myClass\’).hide(); //选择myClass 类的元素。

4、全部选择器： 选择所有元素。

$(\’*\’).css(\’border\’, \’1px Solid red\’); //选择所有元素

B.层级选择器

1、后代选择器： 选择所有符合条件的后代元素。

$(\’ul li\’).css(\’color\’, \’green\’) //选择ul 元素的所有li 后代元素。

2、子选择器： 选择所有符合条件的子元素。

$(\’ul li\’).css(\’color\’, \’blue\’); //选择ul 元素的所有li 直接子元素。

3、同级选择器： 选择所有符合条件的同级元素。

$(\’h2 + p\’).css(\’color\’, \’purple\’) //选择紧随h2 元素之后的第一个p 元素。

$(\’h2 ~ p\’).css(\’color\’, \’orange\’) //选择h2元素之后的所有p元素。

C. 属性选择器

1、具有指定属性的元素：

$(\’input[name]\’).css(\’border\’, \’1px Solid red\’); //选择所有具有name 属性的input 元素

2、具有指定属性值的元素：

$(\’input[name=\’username\’]\’).css(\’background-color\’, \’yellow\’) //选择所有name属性值为username的input元素。

3、属性值以特定值开头的元素：

$(\’input[name^=\’user\’]\’).css(\’background-color\’, \’lightblue\’) //选择所有name属性值以user开头的input元素。

4、属性值以特定值结尾的元素：

$(\’input[name$=\’name\’]\’).css(\’background-color\’, \’lightgreen\’) //选择所有name属性值以name结尾的input元素。

5、属性值包含特定值的元素：

$(\’input[name*=\’ser\’]\’).css(\’background-color\’, \’lightcoral\’) //选择所有name属性值包含ser的input元素。

D. 过滤选择器

1、：选择第一个元素。

$(\’p:first\’).css(\’color\’, \’red\’) //选择第一个段落元素。

2、：选择最后一个元素。

$(\’p:last\’).css(\’color\’, \’blue\’) //选择最后一个段落元素。

3、： 选择索引为偶数或奇数的元素（索引从 0 开始）。

$(\’tr:even\’).css(\’background-color\’, \’lightgray\’) //选择索引为偶数的行

$(\’tr:odd\’).css(\’background-color\’, \’lightblue\’) //选择索引为奇数的行

4、（index）： 选择具有指定索引的元素。

$(\’li:eq(2)\’).css(\’color\’, \’purple\’); //选择索引2 处的列表项

5、（index）： 选择索引大于或小于指定值的元素。

$(\’li:gt(2)\’).css(\’color\’, \’green\’) //选择索引大于2的列表项。

$(\’li:lt(2)\’).css(\’color\’, \’red\’) //选择索引小于2 的列表项。

6、（selector）： 选择不匹配指定选择器的元素。

$(\’p:not(.intro)\’).css(\’color\’, \’gray\’) //选择没有类intro 的段落元素。

7、（text）： 选择包含指定文本的元素。

$(\’p:contains(\’jQuery\’)\’).css(\’font-weight\’, \’bold\’); //选择包含文本“jQuery”的段落元素。

8、（selector）： 选择包含指定选择器的元素。

$(\’div:has(p)\’).css(\’border\’, \’1px plain blue\’); //选择所有div 元素，包括段落元素。

9、 ：选择没有子元素的空元素。

$(\’p:empty\’).text(\’这是空的\’); //选择所有空段落元素并添加文本。

10、 ：选择至少包含一个子元素的元素。

$(\’p:parent\’).css(\’border\’, \’1px Solid green\’); //选择所有段落元素，包括子元素。

11、 ：选择可见或隐藏的元素。

$(\’div:visible\’).css(\’border\’, \’1px Solid red\’) //选择所有可见的div 元素。

$(\’div:hidden\’).show(); //显示所有隐藏的div 元素。

E. 子元素过滤器

1、 ：选择父元素的第一个或最后一个子元素。

$(\’p:first-child\’).css(\’color\’, \’red\’); //选择每个父元素的第一个子元素。

$(\’p:last-child\’).css(\’color\’, \’blue\’) //选择每个父元素的最后一个子元素。

2、（n） ：选择父元素的第 n 个子元素（从 1 开始）。

$(\’li:nth-child(2)\’).css(\’color\’, \’green\’); //选择每个父元素的第二个子元素。

3、 ：选择是唯一子元素的元素。

$(\’p:only-child\’).css(\’font-weight\’, \’bold\’); //选择唯一子元素的段落元素。

F. 表单选择器

1、 ：选择所有表单元素。

$(\’:input\’).css(\’border\’, \’1px Solid blue\’) //选择所有表单元素

2、 ：选择特定类型的表单元素。

$(\’:text\’).val(\’新文本值\’) //选择所有文本输入框并设置新值。

3、 ：选择所有选中的复选框或单选按钮。

$(\’:checkbox:checked\’).css(\’border\’, \’1px Solid red\’) //选择所有选中的复选框。

4、 ：选择所有选中的选项。

$(\’option:selected\’).css(\’background-color\’, \’yellow\’) //选择所有选中的选项

5、 ：选择所有禁用或启用的表单元素。

$(\’:disabled\’).css(\’background-color\’, \’lightgray\’) //选择所有禁用的表单元素。

04-方法

jQuery 提供了一组丰富的方法来简化DOM 操作、事件处理、动画和Ajax 操作。

A. DOM操作方法

1、‘text()’：获取或设置元素的文本内容。

$(\’#myElement\’).text(\’新文本内容\’);

2、‘html()’：获取或设置元素的 HTML 内容。

$(\’#myElement\’).html(\’bbold/b\’);

3、‘val()’：获取或设置表单元素的值。

$(\’input[type=\’text\’]\’).val(\’新值\’);

4、‘attr()’：获取或设置属性值。

$(\’img\’).attr(\’src\’, \’new-image.jpg\’);

5、‘css()’：获取或设置 CSS 样式。

$(\’#myElement\’).css(\’颜色\’, \’红色\’);

6、‘addClass()’：向元素添加一个或多个类。

$(\’#myElement\’).addClass(\’newClass\’);

7、‘ removeClass()’：从元素中删除一个或多个类。

$(\’#myElement\’).removeClass(\’oldClass\’);

8、‘ toggleClass()’：在元素中切换类。

$(\’#myElement\’).toggleClass(\’active\’);

9、‘ append() ’：在元素内部的末尾插入内容。

$(\’ul\’).append(\’liNew item/li\’);

10、‘ prepend() ’：在元素内部的开头插入内容。

$(\’ul\’).prepend(\’liFirst item/li\’);

11、‘ after() ’：在元素之后插入内容。

$(\’#myElement\’).after(\’pnew 段落/p\’);

12、‘ before() ’：在元素之前插入内容。

$(\’#myElement\’).before(\’pnew 段落/p\’);

13、‘ remove() ’：移除元素。

$(\’#myElement\’).remove();

14、‘ empty() ’：清空元素的内容。

$(\’#myElement\’).empty();

B. 事件处理方法

1、‘ click() ’： 绑定点击事件处理程序。

$(\’#myButton\’).click(function() {

Alert(\’按钮被点击！\’);

});

2、‘ dblclick() ’： 绑定双击事件处理程序。

$(\’#myButton\’).dblclick(function() {

alert(\’按钮被双击了！\’);

});

3、‘ hover() ’： 绑定鼠标悬停和离开事件处理程序。

$(\’#myElement\’).hover(

功能（） {

$(this).css(\’背景颜色\’, \’黄色\’);

},

功能（） {

$(this).css(\’背景颜色\’, \’白色\’);

}

）；

4、‘ on() ’： 用于事件委托，绑定多个事件。

$(\’#parentElement\’).on(\’click\’, \’.childElement\’, function() {

$(this).css(\’颜色\’, \’红色\’);

});

5、‘ off() ’： 移除事件处理程序。

$(\’#myButton\’).off(\’点击\’);

C. 动画效果

1、‘ show() ’： 显示元素。

$(\’#myElement\’).show();

2、‘ hide() ’： 隐藏元素。

$(\’#myElement\’).hide();

3、‘ toggle() ’： 切换元素的显示状态。

$(\’#myElement\’).toggle();

4、‘ fadeIn() ’： 淡入显示元素。

$(\’#myElement\’).fadeIn();

5、‘ fadeOut() ’： 淡出隐藏元素。

$(\’#myElement\’).fadeOut();

6、‘ slideUp() ’： 向上滑动隐藏元素。

$(\’#myElement\’).slideUp();

7、‘ slideDown() ’： 向下滑动显示元素。

$(

\”#myElement\”).slideDown();

8、‘ animate() ’： 自定义动画。

$(\”#myElement\”).animate({

    left: \’250px\’,

    opacity: \’0.5\’,

    height: \’toggle\’

});

#以上关于jQuery 基本操作的相关内容来源网络仅供参考，相关信息请以官方公告为准！