jQuery的学习

最新推荐文章于 2024-11-09 15:56:43 发布

今日份学习

最新推荐文章于 2024-11-09 15:56:43 发布

阅读量55

点赞数

文章标签： jquery 学习前端

本文链接：https://blog.csdn.net/m0_73648753/article/details/134654003

版权

本文介绍了jQuery的基本概念，包括其作为轻量级JavaScript库的作用、插件丰富性、基本语法如选择器和$(document).ready的用法。还讲解了如何构建重复HTML元素和jQuery的遍历功能，展示了其在DOM操作中的强大实用性。

摘要由CSDN通过智能技术生成

1、jQuery是什么？

jQuery是一个轻量的JavaScript代码库，可以简化开发，避免重复造轮子

2、为什么用jQuery：

（1）插件多，可扩展性强

（2）功能多，可以使用的地方多

（3）为市面主流，支持和使用的公司多

3、jQuery语法

$(xxx).yyy

通过$来定义，xxx来找到对应的HTML元素，yyy为对元素进行的操作

例：

选择HTML元素：$("p").hide() //隐藏所有的p标签

id选择器：$("#text").hide() //隐藏id为“text”标签

类选择器：$(".text").hide() //隐藏类名为“text”标签

4、$(document).ready解析

.ready()方法是用于文档加载完毕之后执行

一般将需要处理的函数放入.ready()方法后

定义方法一：
    $(document).ready(function(){
        //这里是后续的函数
    })
定义方法二：
    $(function(){
        //这里是后续的函数
    })
注：function(){}是必需的，不可缺省

5、构建重复的HTML元素

（1）先创建数组，定义需要重复执行元素的内容

const list=[
			{title:"选项一",content:"内容一"},
            {title:"选项二",content:"内容二"},
            {title:"选项三",content:"内容三"},
            {title:"选项四",content:"内容四"},
            {title:"选项五",content:"内容五"},
		]

（2）在ready()方法后循环数组，并通过.append()方法完成对HTML的架构

$(function () {
		    for (let i=0;i<list.length;i++){
                $(".warp").append("<li><div class='title'>"+list[i].title+"</div>
                <div class='content'>"+list[i].content+"</div></li>")
			}
			})
		})