JQuery学习笔记(1)——选择器
2023-02-18 16:39:08 时间
JQuery本质上还是JavaScript,是JavaScript的一个框架,可以让我们更简洁地去使用JavaScript
使用之前,记得在html头部引用JQuery
通过选择器获得JQuery对象
- id
$('#myDiv').css('background:red');
- element
$('h2').css('color:red');
- class
$('.mydiv').css('color:red');
- selector1,selector2...
$('#myDiv,#myText').css('background:red');
- 层级
<h2>this is h2</h2>
<h3>this is h3</h3>
$('h2 + h3') 当h2和h3为同级,且相邻
<form>
<input name="t1">
<form>
<input name="t2">
</form>
</form>
$('form > input') form标签的子元素
使用此,只会获得name=t1的input元素
$('form input') form标签之中,子元素,孙元素...
使用此,会获得name=t1和name=t2的两个input元素
- attribute
$('[href]')
$("[type!='button']")
$("[type^='b']") 以b开头
$("[type$='b']") 以b结尾
- 表单
//input标签,name属性为username的全部元素
$("input[name='username']")
表单对象属性
$('input:checked')
文档解析完毕执行操作
html文档首先是被解析,之后才会被显示
解析完毕也就是ready事件的触发
$(document).ready(function () {
//相关的操作,如修改样式等
});
//ready简写方式
$(function(){
//相关的操作,如修改样式等
});
创建并添加元素
var title = $('<h1>这是标题</h1>');
$('#mydiv').append(title);
修改css
- 单个属性
//把全部class属于mydiv的元素的样式都修改
$('.mydiv').css('background‘,’red');
- 多个属性
//属性有"-",得加上引号,没有"-",可以省略引号
$('.mydiv').css({'background-color':'red',width:'50px'});
jQuery对象转为DOM对象
有两种方法
- jQueryObject[0]
- jQueryObject.get(0)
var mydiv = $('.mydiv')[0];
var mydiv = $('.mydiv').get(0);
相关文章
- 2020-03-12推荐阅读链接
- 一问带你区分清楚Authentication,Authorization以及Cookie、Session、Token
- Alibaba-技术专区-开源项目之Nacos源码分析
- Alibaba-技术专区-开源项目之Nacos功能特性
- Alibaba-技术专区-开源项目之Nacos环境准备
- SkyWalking 6.x 源码分析 —— 调试环境搭建 (非原创)
- SkyWalking 6.2-Docker-Compose搭建单体
- Zookeeper-技术专区-配置以及学习
- Springboot-技术专区-war包部署在Tomcat上并修改默认端口
- HTTP报文头Accept和Content-Type总结
- 如何优雅关闭 Spring Boot 应用
- Mybatis-技术专区-Mapper接口以及Example的实例函数及详解
- SpringBoot-技术专区-详细打印启动时异常堆栈信息
- 消息中间件-技术专区-RocketMQ架构原理
- APM-全链路追踪
- 微服务-技术专区-监控对比分析
- 微服务-技术专区-监控专区(Skywalking与Pinpoint) - 监控对比分析
- Nacos-服务注册地址为内网IP的解决办法
- 👊【SpringBoot技术专题】「Async&Future」异步编程机制以及功能分析讲解
- SpringBoot-技术专区-异步编程