JQuery基本介绍和使用方法

🕗 发布于 2024-11-15 00:38 jquery 前端 javascript

JQuery基本介绍和使用方法

W3C 标准给我们提供了⼀系列的函数, 让我们可以操作:

⽹⻚内容
⽹⻚结构
⽹⻚样式

但是原⽣的JavaScript提供的API操作DOM元素时, 代码⽐较繁琐, 冗⻓. 我们可以使⽤JQuery来操作⻚⾯对象.

jQuery是⼀个快速、简洁且功能丰富的JavaScript框架, 于2006年发布. 它封装JavaScript常⽤的功能代码, 提供了简洁⽽强⼤的选择器和DOM操作⽅法. 使⽤JQuery可以轻松地选择和操作HTML元素，从⽽减少了开发⼈员编写的代码量，提⾼了开发效率,

它提供的 API 易于使⽤且兼容众多浏览器，这让诸如 HTML ⽂档遍历和操作、事件处理、动画和 Ajax 操作更加简单. JQuery对于事件的处理也进⾏了简化, 提供了⼀个简单的API来绑定、触发和处理事件，使开发⼈员能够更⽅便地处理各种交互⾏为.

引入依赖

使⽤JQuery需要先引⼊对应的库

在使⽤jQuery CDN时，只需要在HTML⽂档中加⼊如下代码

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

参考地址：jQuery CDN

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Jquery官⽅共提供了4种类型的JQuery库：

uncompressed : ⾮压缩版本(易读, 但是⽂件较⼤, 传输速度慢)

minified: 压缩版(不易读, ⽂件⼩, 性能⾼, 开发中推荐)

slim: 精简瘦⾝版, 没有Ajax和⼀些特效

slim minified : slim 的压缩版

开发时, 建议把JQuery库下载到本地, 放在当前项⽬中. 引⼊外部地址, 会有外部地址不能访问的⻛险.

下载⽅式:

通过浏览器访问上述连接
右键 -> 另存为… 保存到本地, 放在项⽬中即可.

也可以从其他CDN上下载引⽤JQuery

⽐如：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></scr

jQuery语法

jQuery 语法是通过选取 HTML 元素, 并对选取的元素执⾏某些操作

基础语法：

 $(selector).action()

$() 是⼀个函数, 它是 jQuery 提供的⼀个全局函数, ⽤于选择和操作 HTML 元素.
Selector 选择器, ⽤来"查询"和"查找" HTML 元素
action 操作, 执⾏对元素的操作

JQuery 的代码通常都写在 document ready 函数中

document：整个⽂档对象, ⼀个⻚⾯就是⼀个⽂档对象, 使⽤document表⽰.

这是为了防⽌⽂档在完全加载（就绪）之前运⾏ jQuery 代码，即在⽂档加载完成后才可以对⻚⾯进⾏操作。

如果在⽂档没有完全加载之前就运⾏函数，操作可能失败

$(document).ready(function(){
    // jQuery functions go here
})

示例：

<button type="button">点我消失</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    $(document).ready(function(){
    $('button').click(function(){
        $(this).hide();
    });
});

</script>

给按钮添加了click事件,点击后元素消失.

简洁写法:

$(function(){  // jQuery functions go here  });

jQuery选择器

我们通过JQuery选择器来选择⼀些HTML元素.然后对元素进⾏操作.

JQuery选择器基于已经存在的CSS选择器,除此之外,还有⼀些⾃定义的选择器.

jQuery中所有选择器都以$ 开头：$().

语法	描述
$(“*”)	选取所有元素
$(this)	选取当前 HTML 元素
$(“p”)	所有元素
$(“p:first”)	选取第一个元素
$(“p:last”)	最后一个元素
$(“.box”)	所有 class=“box” 的元素
$(“#box”)	id=“box” 的元素
$(“.intro.demo”)	所有 class=“intro” 且 class=“demo” 的元素
$(“p.intro”)	选取 class 为 intro 的元素
$(“ul li:first”)	选取第一个元素的第一个元素
$(“:input”)	所有元素
$(“:text”)	所有 type=“text” 的元素
$(“:checkbox”)	所有 type=“checkbox” 的元素

jQuery事件

JS要构建动态⻚⾯,就需要感知到⽤⼾的⾏为.

⽤⼾对于⻚⾯的⼀些操作(点击,选择,修改等)操作都会在浏览器中产⽣⼀个个事件,被JS获取到,从⽽进⾏更复杂的交互操作.

浏览器就是⼀个哨兵,在侦查敌情(⽤⼾⾏为).⼀旦⽤⼾有反应(触发具体动作),哨兵就会点燃烽⽕台的狼烟(事件),后⽅就可以根据狼烟来决定下⼀步的对敌策略.

事件由三部分组成：

事件源:哪个元素触发的
事件类型:是点击,选中,还是修改?
事件处理程序:进⼀步如何处理.往往是⼀个回调函数.

例如:某个元素的点击事件:

$("p").click(function(){
    //动作发⽣后执⾏的代码 
});

常⻅的事件有:

事件	代码
文档就绪事件(完成加载)	$(document).ready(function)
点击事件	$(selector).click(function)
双击事件	$(selector).dblclick(function)
元素的值发生改变	$(selector).change(function)
鼠标悬停事件	$(selector).mouseover(function)

操作元素

获取/设置元素内容

三个简单的获取元素内容的JQuery⽅法：

JQuery方法	说明
text()	设置或返回所选元素的文本内容
html()	设置或返回所选元素的内容（包括 HTML 标签）
val()	设置或返回表单字段的值

**这三个⽅法即可以获取元素的内容,⼜可以设置元素的内容. **

有参数时,就进⾏元素的值设置
没有参数时,就进⾏元素内容的获取

代码示例：

获取元素内容：

<div id="test"><span>你好</span></div>
    <input type="text" value="hello">
        
<script>
        $(document).ready(function () {
        var html = $("#test").html();
        console.log("html内容为:"+html);
        var text = $("#test").text();
        console.log("⽂本内容为:"+text);
        var inputVal = $("input").val();
        console.log(inputVal);
    });
</script>

设置元素内容：

<div id="test"></div>
<div id="test2"></div>
<input type="text" value="">
    
<script>
    $(document).ready(function () {
    $("#test").html('<h1>设置html</h1>');
    $("#test2").text('<h1>设置text</h1>');
    $("input").val("设置内容");
});
</script>

获取/设置元素属性

JQuery attr()⽅法⽤于获取属性值.

代码示例：

获取元素属性：

<p><a href="https://www.bitejiuyeke.com/index" id="bite">小明</a></p>

<script>
    $(function(){
    var href = $("p a").attr("href")
    console.log(href);
});
</script>

设置元素属性：

<p><a href="https://www.bitejiuyeke.com/index" id="bite">小明</a></p>
    
<script>
    $(function(){
    $("p a").attr("href","baidu.com")
    console.log($("p a").attr("href"));
});
</script>

获取/返回css属性

css()⽅法设置或返回被选元素的⼀个或多个样式属性

代码⽰例：

获取元素属性

<div style="font-size: 36px;">我是⼀个⽂本</div>

<script>
    $(function(){
    var fontSize = $("div").css("font-size");
    console.log(fontSize);
});
</script>

设置元素属性

<div style="font-size: 36px;">我是⼀个⽂本</div>

<script>
    $(function(){
    $("div").css("font-size","24px");
});
</script>

添加元素

添加HTML内容

append():在被选元素的结尾插⼊内容
prepend():在被选元素的开头插⼊内容
after():在被选元素之后插⼊内容
before():在被选元素之前插⼊内容

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>
<img src="pic/rose.jpg">
    
<script>
    $(function () {
    $("ol").append("<li>append</li>");
    $("ol").prepend("<li>prepend</li>");

    $("img").before("图⽚前插⼊");
    $("img").after("图⽚后插⼊");
});
</script>

删除元素

删除元素和内容，⼀般使⽤以下两个jQuery⽅法：

remove():删除被选元素（及其⼦元素）
empty():删除被选元素的⼦元素。

代码示例：

删除被选元素（及其子元素）

<div id="div1">我是⼀个div</div>
<button>删除 div 元素</button>

<script>
    $(function () {
    $('button').click(function(){
        $('#div1').remove();
    });
});
</script>

删除被选元素的子元素

<ol>
     <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>
<button>删除列表元素</button>


<script>
    $(function () {
    $('button').click(function(){

        $('ol').empty();
    });
});
</script>

{
$(‘button’).click(function(){
$(‘#div1’).remove();
});
});


**删除被选元素的子元素**

```javascript
<ol>
     <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>
<button>删除列表元素</button>


<script>
    $(function () {
    $('button').click(function(){

        $('ol').empty();
    });
});
</script>

原文地址：https://blog.csdn.net/2301_79849925/article/details/143782743

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Swift 宏（Macro）入门趣谈（一）
下一篇：打造专业问答社区：Windows部署Apache Answer结合cpolar实现公网访问

【电脑】解决DiskGenius调整分区大小时报错“文件使用的簇被标记为空闲或与其它文件有交叉”
本文介绍如何解决DiskGenius调整分区大小时报错“文件使用的簇被标记为空闲或与其它文件有交叉”的错误。
阅读更多2024-11-16
UNI-APP小程序答题功能开发(左右滑动,判断,填空,问答,答题卡,纠错,做题倒计时等)
这里没啥好说的,就是根据不同的状态显示不同的内容。
阅读更多2024-11-16
ES6更新的内容中什么是proxy
Proxy 是 ES6（ECMAScript 2015）中引入的一个新的内置对象，用于定义某些操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。通过创建一个对象的 Proxy，你可以控制对这个对
阅读更多2024-11-16
OTX 架构开发
（一）开发环境搭建编程环境配置根据选定的编程语言，安装相应的开发工具和编译器。如果选择 Java，安装 JDK（Java Development Kit），并配置环境变量。选择合适的集成开发环境（I
阅读更多2024-11-16
领夹麦克风哪个品牌好，手机领夹麦克风哪个牌子好，选购推荐
它最大的优势就是具有高度的灵活性，而且不受距离的过多限制，能够保证声音清晰、传输稳定，让交流沟通毫无阻碍。在此，我根据自己的选购经验以及周围朋友使用后的反馈情况，总结出了无线麦克风中那些销量靠前、口碑
阅读更多2024-11-16
SQL，力扣题目1126，查询活跃业务
(business_id, event_type) 是这个表的主键（具有唯一值的列的组合）。表中的每一行记录了某种类型的事件在某些业务中多次发生的信息。1、CTE表达式 + 窗口函数 + group
阅读更多2024-11-16
客运购票售票小程序校园巴士预约售票小程序开发方案php+uniapp
客运购票小程序开发，开发语言后端php，前端uniapp。
阅读更多2024-11-16
电子电气架构 --- 车载48V系统
电子电气架构 --- 车载48V系统
阅读更多2024-11-16
每日OJ题_牛客_DP36 abb_C++_Java
每日OJ题_牛客_DP36 abb_C++_Java（用abb中第一个出现的b来考虑，一个字符作为第一b能产生的abb字符，等于它后面相同的字符数量（意味着还能凑成多少个bb）乘以它前面与它不相同的字
阅读更多2024-11-16
51单片机基础03 矩阵按键读取与外部中断读取
介绍了独立按键读取、51单片机外部中断、矩阵按键读取等
阅读更多2024-11-16

JQuery基本介绍和使用方法