jQuery笔记 01

目录

01  jquery概述

02 jq的特点和基本操作

03 jq的过滤选择器

04 jq的筛选选择器

05 jq对象和js对象的相互转化

06 jq的css方法

07 jq的class方法


 

01  jquery概述

        jq是一个第三方的库文件

                是其他团队 把js一些繁琐的操作封装成了一个个的方法  放到一个单独的js文件里面

                然后把源代码开发出来 我们拿过来直接引入即可使用

        js代码:

<button>点我显示</button>
<ul id="box"><li>十年生死两茫茫,喜羊羊,灰太狼。1</li><li>十年生死两茫茫,喜羊羊,灰太狼。1</li><li>十年生死两茫茫,喜羊羊,灰太狼。1</li><li>十年生死两茫茫,喜羊羊,灰太狼。1</li><li>十年生死两茫茫,喜羊羊,灰太狼。1</li>
</ul>
<script>var btn=document.querySelector('button')var box=document.querySelector('#box')btn.onclick=function(){box.style.display='block'}
</script>

        jq代码:        

    <button>点我显示</button><ul id="box"><li>十年生死两茫茫,喜羊羊,灰太狼。1</li><li>十年生死两茫茫,喜羊羊,灰太狼。1</li><li>十年生死两茫茫,喜羊羊,灰太狼。1</li><li>十年生死两茫茫,喜羊羊,灰太狼。1</li><li>十年生死两茫茫,喜羊羊,灰太狼。1</li></ul><script src="./jquery.js"></script><script>$('button').click(function(){$('ul').show(3000)})</script>

02 jq的特点和基本操作

        1.特点:

                1.隐式迭代 (系统自己悄悄的遍历 然后把要设置的内容设置上)

                2.链式编程

                jq的入口函数: 

                $(function(){

                })   功能和window.onload类似

       2. jq的基本操作:

                jq是通过$('选择器') 选择指定的元素

                返回的是伪数组

                $('ul>li').html('设置内容') //隐式迭代

03 jq的过滤选择器

        jq过滤选择器的使用

                :even  匹配索引值为偶数的元素

                :odd  匹配索引值为奇数的元素

                :first 匹配第一个元素

                :last  匹配最后一个元素

                :gt(索引值)  找到比当前索引值还大的所有元素

                :lt(索引值)  找到比当前索引值还小的所有元素

                :eq(索引值)  找到指定索引值的元素

04 jq的筛选选择器

        jq的筛选选择器: 相当于原生js的节点访问关系

        获取父节点:

                js: 原生js的属性名:节点对象.parentNode

                jq: jq对象.parent()

        获取子节点:

                js: 节点对象.children

                      节点对象.childNodes

                jq: jq对象.children([选择器])  [ ] 表示当前参数选择器  可传可不传

                         获取所有子节点  或者  按照参数选择器获取子节点

                      jq对象.find(选择器) 选择器必传

                         获取选择器选择的后代元素

        获取兄弟节点:

                js:    节点对象.previousELementSibling

                        节点对象.nextElementSibling

                jq:    jq对象.prev() 获取上一个兄弟

                        jq对象.next() 获取下一个兄弟

                        jq对象.prevAll() 获取前面所有的兄弟

                        jq对象.nextAll() 获取后面所有的兄弟

                        jq对象.Sibling([选择器]) 获取所有兄弟  参数可传

                                不传表示获取所有兄弟

                                传选择器表示获取指定选择器的兄弟

        获取指定元素:

                jq对象.first()  在选择器关联的一堆元素中找第一个

                jq对象.last()  在选择器关联的一堆元素中找最后一个

                jq对象.eq(索引值)  在选择器关联的一堆元素中找到指定索引值的元素

05 jq对象和js对象的相互转化

        jq对象和js对象的相互转换:

        jq对象转换成原生js对象

                jq对象.get(索引值)

                或者

                jq对象[索引值]

        原生js对象转换成jq对象

                $(原生js对象)

06 jq的css方法

        jq的css方法操作样式

        1.增加单个样式

                jq对象.css("键","值")

        2.增加多个对象

                jq对象.css({

                        css属性名和css属性值的集合

                })

        3.修改样式 (跟增加样式一样)

        4. 获取样式的值

                jq对象.css("css属性名")

                        外链,内嵌,行内样式的值都可以获取

        css方法操作的样式都是行内样式

07 jq的class方法

        jq增加class的方式

                增加 :   JQ对象.addClass("类名1 类名2 ...")

                删除 :   JQ对象.removeClass("类名1 类名2 ...")

                判断是否拥有指定class:

                        jq对象.hasClass('类名')

                切换class:

                        jq对象.toggleClass("类名1 类名2 ...")

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/798162.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

隐私计算实训营第七讲-隐语SCQL的开发实践

隐私计算实训营第七讲-隐语SCQL的开发实践 文章目录 隐私计算实训营第七讲-隐语SCQL的开发实践1.如何使用SCQL&#xff1f;2.使用流程3.SCQL部署4.SCQL使用示例4.1创建用户4.2创建项目&用户授权4.3创建表4.4设置CCL4.5发起联合分析查询 1.如何使用SCQL&#xff1f; 2.使用流…

Echarts实现高亮某一个点

背景 接口会返回所有点的数据&#xff0c;以及最优点的数据。产品要求在绘制图形后&#xff0c;高亮最优点&#xff0c;添加一个红色的样式&#xff0c;如图。点击select选择器时&#xff0c;可选择不同指标和花费对应的关系。 以下介绍实现思路 1、自定义配置选择器的数据源…

关于Fragment这一篇就够了

Fragment是什么&#xff1f; Fragment是Android中的一个组件&#xff0c;它被引入在Android 3.0&#xff08;API 11&#xff09;中。Fragment是依赖于Activity的&#xff0c;不能独立存在。一个Activity可以有多个Fragment&#xff0c;一个Fragment也可以被多个Activity重用。…

C#基础:类,对象,类成员简介(第四节课)

本节内容&#xff1a; 类与对象的关系 什么时候叫“对象”&#xff0c;什么时候叫实例引用变量与实例的关系 类的三大成员 属性方法事件 类的静态成员与实例成员 关于“绑定” 1.什么是类&#xff1a;&#xff08;再详细一点&#xff09; 类是对现实世界事物进行抽象所…

LLM是优秀的手语翻译者

LLM是优秀的手语翻译者 简介Related WorkMethodSignLLM Overviewector-Quantized Visual Sign ModuleCodebook Reconstruction and Alignment LLMs are Good Sign Language Translators 简介 基于观察&#xff0c;我们发现LLMs可以通过利用与之前学习过的语言的共有特性来有效…

CPU+GPU+NPU三位一体AI边缘控制器,三屏异显,搭载RK3588处理器

XMS-201采用了Rockchip RK3588八核64位处理器&#xff0c;集成ARM Mali-G610 MP4四核GPU&#xff0c;内置AI加速器NPU&#xff0c;可提供6Tops算力&#xff0c;支持主流的深度学习框架&#xff1b;性能强劲的RK3588可为各类AI应用场景带来更强大的性能表现&#xff0c;适用于机…

青蛙跳杯子【蓝桥杯】/bfs

青蛙跳杯子 bfs 思路&#xff1a;刚开始用的是dfs&#xff0c;但是不太行&#xff0c;DFS 可能会导致搜索深度过深&#xff0c;增加了时间复杂度&#xff0c;BFS 适合求解最短路径问题&#xff0c;BFS 在搜索过程中&#xff0c;首先访问距离初始节点最近的节点&#xff0c;因此…

C++ //练习 11.27 对于什么问题你会使用count来解决?什么时候你又会选择find呢?

C Primer&#xff08;第5版&#xff09; 练习 11.27 练习 11.27 对于什么问题你会使用count来解决&#xff1f;什么时候你又会选择find呢? 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 解释 当需要对具有重复关键字的容器中的某个…

STL--deque

deque 容器deque是一个双向队列&#xff08;double-ended queue&#xff09;&#xff0c;可以在队列的两端进行元素的插入和删除操作。deque 和 vector 非常相似。也采用dynamic array(动态数组) 来管理元素&#xff0c;提供随机访向&#xff0c;并有着和 vector 几乎一模一样…

端盒日记Day03

vocal&#xff01;&#xff01;拖了这么久我才来写&#xff0c;我好Dior。刚刚吃了四根冰淇淋我好Dior。。。 CSS 平面转换——transform 作用&#xff1a;为元素添加动态效果&#xff0c;一般与过渡配合使用 概念&#xff1a;改变盒子在平面内的形态&#xff08;位移、旋转…

一文学会Semaphore(信号量)

// 空出来椅子 semaphore.release(count); } } catch (Exception e){ } } }; t.setName("Thread --> " i); t.start(); } } 程序将一直执行下去&#xff0c;不会漏单&#xff0c;也不会出现椅子占用数量大于20的情况。 AQS基础 Semaphore是一种共享锁&#xf…

js的qq换肤效果

文章目录 1. 演示效果2. 分析思路3. 代码实现3.1. 方式一3.2. 方式二3.3. 整体代码 1. 演示效果 2. 分析思路 先编写样式&#xff0c;弄好布局和排版。遍历这个集合&#xff0c;对每个图片元素&#xff08;img&#xff09;添加一个点击事件监听器。可以使用 for 或者 forEach …

自动化运维工具

Ansible批处理工具 Ansible批处理工具功能图 Ansible项目架构图 一、Ansible介绍 1、Ansible简介 简介 ansible是一种自动化运维工具&#xff0c;基于paramiko模块开发&#xff0c;实现了批量系统配置、批量程序部署、批量运行命令功能。 ansible是基于模块工作的&#xff0…

【C++11】右值引用 + 移动语义 + 完美转发(重点)

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前学习C和算法 ✈️专栏&#xff1a;C航路 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章对你有帮助的话 欢迎 评论&#x1f4ac; 点赞&#x1…

C++学习笔记(七)

一、string字符串容器 #include <iostream>using namespace std;int main() {string name;name "hello";string str(10,w);cout << str << endl;name "hello world";string sub1(name,0,5);cout << sub1 << endl;4string…

第四百四十六回

文章目录 1. 概念介绍2. 使用方法3. 示例代码4. 经验与总结4.1 经验分享4.2 内容总结 我们在上一章回中介绍了"overlay_tooltip简介"相关的内容&#xff0c;本章回中将再谈flutter_launcher_icons包.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 我…

python练习三

模式A num int(input("请输入模式A的层数&#xff1a;")) for i in range(1, num 1):# 画数字for j in range(1, i 1):print(str(j) "\t", end"")print() 模式B num int(input("请输入模式B的层数&#xff1a;")) for i in ran…

Pandas中的 .map 方法

1. Pandas中的 .map 方法 在Pandas中&#xff0c;.map 方法通常用于Series对象&#xff0c;它允许你根据一个字典或者函数对Series中的每个元素进行转换。 import pandas as pd # 创建一个简单的DataFrame df pd.DataFrame({ Name: [Alice, Bob, Charlie, Alice, Bob, C…

redis-Hash

一&#xff0c;应用场景 Redis hash 是一个string类型的field和value的映射表&#xff0c;hash特别适合用于存储对象。Set就是一种简化的Hash,只变动key,而value使用默认值填充。 可以将一个Hash表作为一个对象进行存储&#xff0c;表中存放对象的信息。 二&#xff0c;命令 H…

Ubuntu18.04安装Node.js教程

在Ubuntu 18.04上安装Node并部署环境变量的过程可以分为以下几个步骤&#xff1a; 安装Node.js 您可以选择从Ubuntu的软件源直接安装Node.js&#xff0c;或者使用NodeSource提供的仓库安装特定版本的Node.js。 从Ubuntu软件源安装 运行以下命令来更新软件包列表并安装Node.js&…