JQuery的基础笔记

前言:

j --> JavaScript Query --> 查询

jquery的入口函数

等DOM结构渲染完毕即可执行内部代码

相当于原生js的DOMContentLoaded

不同于原生js中的load是等一切加载完毕再执行

用法:(推荐第二种)

$(document).ready(function() { // 执行代码 })

$(function() { // 执行代码 })

$ 和 jQuery

1.$是jQuery的别称

jQuery(function() {jQuery('div').hide();
});

2.$是jQuery的顶级对象

DOM对象和jQuery对象

1.DOM对象: 用原生js获取过来的对象就是DOM对象

2.jQuery对象: 用jquery方式获取过来的就是jQuery对象。本质:通过$把DOM元素进行了包装

3.jQuery对象 只能使用jquery方法 DOM对象则使用原生的JavaScript属性和方法

错误写法:

myDiv.hide();  //myDiv是一个DOM对象不能使用jquery里面的hide方法
$('div').style.display = 'none';  
//这个$('div')是一个jQuery对象不能使用原生js的属性和方法
DOM对象和jQuery对象的转换

1.DOM --> jQuery:

a.直接获取:$('video');

b.将dom转换为jquery:$(DOM对象)

2.jQuery --> DOM:

(1).$('div')[index] //index是索引号

eg: $('div')[index].play()

(2).$('div').get(index) // 通过此方法可以引用DOM有的一些而jq没有的方法

jQuery基础选择器

基础选择器:

名称用法描述
ID选择器$("#id")
全选选择器$("*")
类选择器$(".class")
标签选择器$("div")
并集选择器$("div,p,li")选取多个元素
交集选择器$("li.current")交集元素

层级选择器:

子代选择器$("ul>li")亲儿子
后代选择器$("ul li")儿子、孙子等
隐式迭代

把匹配的所有元素内部进行遍历循环

jQuery筛选选择器
语法用法描述
:first$("li:first")获取第一个li元素
:last$("li:last")最后一个
:eq(index)$("li:eq(2)")索引号为2的元素,索引号从0开始
:odd$("li:odd")奇数
:even$("li:even")偶数
jQuery筛选方法
语法用法说明
parent()$("li").parent();查找父级
children(selector)$("ul").children("li")相当于$("ul>li")找亲儿子
find(selector)$("ul").find("li")相当于$("ul li")找后代
siblings(selector)$(".first").siblings("li")兄弟,不包括自己
nextAll([expr])$(".first").nextAll()该元素之后所有同辈元素
prevtAll([expr])$(".last").prevAll该元素之前所有同辈元素
hasClass(class)$('div').hasClass("protected")检查当前元素是否含某特定值,若有则返回true
eq(index)$("li").eq(2)当对于$("li:eq(2)")

写在最后:这个是备战蓝桥杯web组时学习的一些JQuery基础用法,不过现在蓝桥杯web组已经不考JQuery了

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

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

相关文章

分段线性化问题探析

目录 1 使用0-1变量将分段函数转换为线性约束 2 连续函数采用分段线性化示例 3 matlab程序测试 4 matlab测试结果说明 5 分段线性化应用 1 使用0-1变量将分段函数转换为线性约束 2 连续函数采用分段线性化示例 3 matlab程序测试 clc;clear all; gn10;tn1; x_pfsdpvar(1, t…

vue3基础教程(3)——引入ui框架iview(viewui)

博主个人微信小程序已经上线:【中二少年工具箱】。欢迎搜索试用 正文开始 专栏简介1. 下载iview2.更新资源3.引入插件4.运行项目 专栏简介 本系列文章由浅入深,从基础知识到实战开发,非常适合入门同学。 零基础读者也能成功由本系列文章入门…

认识事物的几个阶段 GPU学习

1. GPT的说法 认识事物的过程通常可以分为以下几个阶段: 1. 感知阶段: 这是认识事物的第一步,通过感官(视觉、听觉、触觉、味觉、嗅觉)接收外界信息。感知是对外部世界的直接观察和感受。 2. 注意阶段:…

底层day2作业

思维导图 作业: 1.使用ADC采样光敏电阻数值,如何根据这个数值调节LED灯亮度 连接硬件:将光敏电阻与单片机的ADC引脚连接,将LED灯与单片机的PWM引脚连接。初始化:在程序中初始化ADC和PWM模块,并设置相应的…

大数据分析技术工程师CCRC-BDATE

大数据分析技术工程师介绍 大数据始于科技之美,归于创造价值。大数据时代,“谁用好数据,谁就能把握先机、赢得主动”。当下数据驱动的电信、社交媒体、生物医疗、电子政务商务等行业都在产生着海量的数据,随着大规模数据关联、交叉…

@ResponseStatus

目录 概述: 用途: 参数: 注意事项: 自定义异常类: 底层原理: 概述: 在 Spring MVC 中,我们有很多方法来设置 HTTP 响应的状态码其中最直接的方法:使用 ResponseSt…

FolkMQ 作一个简单的消息中间件(最简单的那种)

FolkMQ 打算作一个简单的消息中间件(全球最简单的那种,要比谁都简单!)。追世间简单为何物,可叫我生死相许! 面向简单编程 1) 启动服务 docker run -p 18602:18602 -p 8602:8602 noearorg/folkmq-server:…

K8S之实现业务的蓝绿部署

如何实现蓝绿部署 什么是蓝绿部署?蓝绿部署的优势和缺点优点缺点 通过k8s实现线上业务的蓝绿部署 什么是蓝绿部署? 部署两套系统:一套是正在提供服务系统,标记为 “绿色” ;另一套是准备发布的系统,标记为…

删除指定的数

删除指定的数 题目描述:解法思路:解法代码:运行结果: 题目描述: 先输入10个整数存放在数组中,再输入⼀个整数n,删除数组中所有等于n的数字,数组中剩余的数组保证数组的最前面&#…

向爬虫而生---Redis 探究篇6<Redis的Bigkey问题介绍>

前言: 随着数据规模的增长,Redis的BigKey问题也开始显现。 BigKey问题主要指的是存储了大量数据的key,这可能给Redis的性能和可用性带来负面影响。当一个key的数据量过大时,会占用宝贵的内存资源,拖慢Redis的响应速度。此外,存储和恢复这些BigKey也会变得困难和耗时,增…

SpringBoot项目如何添加全局接口上下文

1. 定义Spring Boot应用的路由 首先,确保您的Spring Boot应用有一个统一的路由前缀。例如,可以在application.properties或application.yml配置文件中使用server.servlet.context-path属性来定义所有请求的基础路径。 # application.properties server…

vue基础教程(4)——深入理解vue项目各目录

博主个人微信小程序已经上线:【中二少年工具箱】。欢迎搜索试用 正文开始 专栏简介1. 总览2. node_modules3.public4.src5.assets6.components7.router8.stores9.views10.App.vue11.main.js12.index.html 专栏简介 本系列文章由浅入深,从基础知识到实战…

docker部署若依项目

目录 目录 一、搭建局域 二、redis安装 1.创建目录 2. redis.conf修改 三、MySQL安装 1. 安装 2. 设置远程连接 3. 创建数据库 四、若依后端项目搭建 1. 切换到家目录 2. 上传jar包 3. 上传Dockerfile文件 4. 构建镜像 5. 运行容器 6. 查看运行情况 7. 测试(自己…

AD20软件使用指南:拼板操作与Gerber文件生成详解

文章目录 一、前言二、拼板1.创建新的PCB,用于放置拼板文件2.放置拼板阵列3.设置阵列信息4.V割拼板,放置工艺边和定位孔和光点5.完成拼板 三、生成Gerber文件1.输出Gerber文件2.选择单位和格式3.选择输出的图层4.生成Gerber文件5.生成钻孔文件 四、上传嘉…

01.AJAX 概念和 axios 使用

01.AJAX 概念和 axios 使用 1. 什么是 AJAX ? 使用浏览器的 XMLHttpRequest 对象 与服务器通信 浏览器网页中,使用 AJAX技术(XHR对象)发起获取省份列表数据的请求,服务器代码响应准备好的省份列表数据给前端,前端拿…

使用Pandas 玩转透视表(pivot_table)

也许大多数人都有在Excel中使用数据透视表的经历,其实Pandas也提供了一个类似的功能,名为 pivot_table。虽然pivot_table非常有用,但是我发现为了格式化输出我所需要的内容,经常需要记住它的使用语法。所以,本文将重点…

腾讯云学生服务器多少钱?怎么申请?

2024年腾讯云学生服务器优惠活动「云校园」,学生服务器优惠价格:轻量应用服务器2核2G学生价30元3个月、58元6个月、112元一年,轻量应用服务器4核8G配置191.1元3个月、352.8元6个月、646.8元一年,CVM云服务器2核4G配置842.4元一年&…

微信小程序(五十一)页面背景(全屏)

注释很详细,直接上代码 上一篇 新增内容: 1.页面背景的基本写法 2.去除默认上标题实习全屏背景 3. 背景适配细节 源码: index.wxss page{/* 背景链接 */background-image: url(https://pic3.zhimg.com/v2-a76bafdecdacebcc89b5d4f351a53e6a_…

python 截取字符串string.split

目录 作用语法只要第一个值获得第3个值遍历 作用 根据某个符号对数据进行截取 从而获得自己想要的内容 语法 使用’string.split’ 方法 对字符串’123/abc/BPYC’ 以 ‘/’ 进行截取 string "123/abc/BPYC" substring string.split("/") print(subs…

【目标分类图像增强方法】

图像增强方法及其原理 目标分类图像增强是一种用于提高深度学习模型泛化能力的技术,通过在训练过程中对原始图像进行各种变换来增加模型所见数据的多样性。以下是几种常见的图像增强方法及其原理: 几何变换: 旋转(Rotation&#…