jQuery的学习

最新推荐文章于 2024-05-17 18:09:22 发布

今日份学习

最新推荐文章于 2024-05-17 18:09:22 发布

阅读量41

点赞数

文章标签： jquery 学习前端

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

版权

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>")
			}
			})
		})

5、jQuery的遍历

通过遍历可以找到，当前选中的元素的上级元素、同级元素、下级元素

上级元素：

（1）parent()方法：向上查找一级

（2）parents()方法：查找到根目录(<html>) 或通过给定的参数对上级元素进行搜索

（3）

同级元素：

（1）siblings()方法：所有的同级元素(不分前后)

（2）next()方法：后一个同级元素

（3）nextAll()方法：后面的所有的同级元素

（4）prev()方法：前一个同级元素

（5）prevAll()方法：前面的所有的同级元素

（6）从选定元素到给定参数之间所有的同级元素

往后：nextUntil()方法

往前：prevUntil()方法

下级元素：

（1）children()方法：向下查找一级

（2）find()方法：向下查找，直到最后一级

今日份学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的学习

id选择器：$("#text").hide() //隐藏id为“text”标签。类选择器：$(".text").hide() //隐藏类名为“text”标签。（2）在ready()方法后循环数组，并通过.append()方法完成对HTML的架构。选择HTML元素：$("p").hide() //隐藏所有的p标签。（3）nextAll()方法：后面的所有的同级元素。（5）prevAll()方法：前面的所有的同级元素。（2）next()方法：后一个同级元素。
复制链接

扫一扫