jQuery基础-选择器，样式操作
入口函数：ready()
当 DOM（文档对象模型） 已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。
由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。
ready() 函数规定当 ready 事件发生时执行的代码。
ready() 函数仅能用于当前文档，因此无需选择器。
允许使用以下三种语法：
语法 1
$(document).ready(function)
语法 2
$().ready(function)
语法 3
$(function)
| 参数 | 描述 |
|---|---|
| function | 必需。规定当文档加载后要运行的函数。 |
例如，隐藏一个div盒子：
<script>
//第一种方法
$(document).ready(function() {
$('div').hide();
});
//第二种方法
$().ready(function() {
$('div').hide();
});
//第三种方法
$(function() {
$('div').hide();
});
</script>
JQuery顶级对象$
定义及基本语法
$和JQuery用法相同，皆为JQuery选择器
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法：
$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
实例：
- $(this).hide() - 隐藏当前元素
- $("p").hide() - 隐藏所有
<p>元素 - $("p.test").hide() - 隐藏所有 class="test" 的
<p>元素 - $("#test").hide() - 隐藏 id="test" 的元素
$选择器
jQuery的选择器包含CSS选择器和条件过滤选择器
CSS选择器
CSS选择器包含基本选择器、层次选择器、属性选择器
CSS选择器语法同CSS相同，可以参考我之前的文章，并且可以使用CSS3的选择器
| 语法 | 描述 |
|---|---|
| $(this) | 当前 HTML 元素 |
| $("p") | 所有 <p> 元素 |
| $("p.intro") | 所有 class="intro" 的 <p> 元素 |
| $(".intro") | 所有 class="intro" 的元素 |
| $("#intro") | id="intro" 的元素 |
| $("ul li:first-child") | 每个 <ul> 的第一个 <li> 元素 |
| $("[href$='.jpg']") | 所有带有以 ".jpg" 结尾的属性值的 href 属性 |
| $("div#intro .head") | id="intro" 的 <div> 元素中的所有 class="head" 的元素 |
例如，选择所有偶数li设置背景颜色为天蓝色：
<script>
$(function() {
$('ul li:nth-child(even)').css("background-color","skyblue");
});
</script>
$也可以用Jquery代替，效果完全相同：
<script>
jQuery(function() {
jQuery('ul li:nth-child(even)').css("background-color","skyblue");
});
</script>
条件过滤选择器
语法与CSS选择器稍有不同，能更方便的选出元素。
| 语法 | 实例 | 描述 |
|---|---|---|
| :first | $("p:first") | 第一个 <p> 元素 |
| :last | $("p:last") | 最后一个 <p> 元素 |
| :even | $("tr:even") | 所有偶数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。 |
| :odd | $("tr:odd") | 所有奇数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。 |
| :not(selector) | $("input:not(:empty)") | 所有不为空的输入元素 |
| :eq(index) | $("ul li:eq(3)") | 列表中的第四个元素（index 值从 0 开始） |
| :gt(no) | $("ul li:gt(3)") | 列举 index 大于 3 的元素 |
| :lt(no) | $("ul li:lt(3)") | 列举 index 小于 3 的元素 |
| :header | $(":header") | 所有标题元素 <h1>, <h2> ... |
| :focus | $(":focus") | 当前具有焦点的元素 |
可见性过滤选择器
| 语法 | 实例 | 描述 |
|---|---|---|
| :hidden | $("p:hidden") | 所有隐藏的
元素 |
| :visible | $("table:visible") | 所有可见的表格 |
更多选择器
更多完整的选择器可以前往W3C或者菜鸟教程
https://www.runoob.com/jquery/jquery-ref-selectors.html
隐式迭代
jQuery获取的对象式一个伪数组形式，当获取到多个元素时，对该对象进行操作，会对数组中所有元素进行操作，例如：
将所有的li颜色变为红色：
<body>
<script>
$(function() {
$('li').css('color', 'red');
});
</script>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</body>
jQuery筛选方法
| 语法 | 用法 | 说明 |
|---|---|---|
parent() |
$('.son').parent() |
查找直接父级，也就是最近一级的父级 |
parents() |
$('.son').parents() |
查找所有父级，直到查找到最大的父级对象html |
children() |
$('.grandpa').children() |
查找最近一级的子节点 |
find(selector) |
$('.grandpa').find('div') |
查找该节点下的所有符合条件的节点，类似于后代选择器 |
siblings(*filter*) |
$('.father').siblings() |
查找该节点的兄弟节点，不包括自身， |
nextAll(expr) |
$('.two-father').nextAll() |
查找该节点之后的所有同辈元素 |
next() |
$('.two-father').next() |
查找该节点后的一个同辈元素 |
prevAll(expr) |
$('.three-father').prevAll() |
查找该节点之前的所有同辈元素 |
prev() |
$('.three-father').prev() |
查找该节点前的一个同辈元素 |
hasClass() |
$('div').hasClass('father') |
检查当前元素是否含有某个特定的类，如果有，则返回true |
eq(index) |
$('div').eq(2) |
选择第n个元素，index从0开始，注意该元素选择器不管父元素子元素，所有的符合条件的元素在一个队列里 |
Tips：
所有的选中多个元素的方法，例如parents()，children()，siblings()等等，括号内都可以跟筛选条件，可以根据该条件再进行筛选。比如：
$('.father').siblings('p')
就是选择.father类下所有的p元素
下面这个代码可以看出部分的选择器的特性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<title>Document</title>
</head>
<body>
<div class="grandpa">
<div class="father">
<div class="son"></div>
</div>
<div class="two-father"></div>
<div class="three-father"></div>
<p class="four-father"></p>
</div>
<script>
console.log($('.son').parent()); //div.father
console.log($('.son').parents('div')); //div.father, div.grandpa
console.log($('.grandpa').children()); //iv.father, div.two-father, div.three-father, p.four-father
console.log($('.grandpa').find('div')); //div.father, div.son, div.two-father, div.three-father
console.log($('.father').siblings('p')); //p.four-father
console.log($('.two-father').nextAll('p')); //p.four-father
console.log($('.two-father').next()); //div.three-father
console.log($('.three-father').prevAll()); //div.two-father, div.father
console.log($('.three-father').prev()); //div.two-father
console.log($('div').hasClass('father')); //true
console.log($('div').eq(2)); //div.son
</script>
</body>
</html>
DOM对象和jQuery对象
DOM对象是原生JS获取的对象，jQuery对象是通过$获取的对象，两者有着明显的差别
但有时候两者能相互转换
DOM对象转换为jQuery对象
一、DOM对象未被命名
直接用$选择对象
<body>
<div></div>
<script>
$('div').css('background-color', 'red');
</script>
</body>
二、DOM对象被获取命名
用$选择对象，此时没有引号
<body>
<div></div>
<script>
var myDiv = document.querySelector('div');
myDiv.style.backgroundColor = 'skyblue';
$(myDiv).css('background-color', 'red');
</script>
</body>
jQuery对象转换为DOM对象
jQuery对象是以伪数组形式存储的，所以转换DOM对象只需以数组元素形式即可
<body>
<div></div>
<script>
$('div')[0].style.backgroundColor = 'skyblue'
</script>
</body>
jQuery链式编程
同一个对象的多个方法可以写在一行上，例如以下排他思想：
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
$('button').click(function() {
$(this).css('backgroundColor', 'pink');
$(this).siblings().css('backgroundColor', '');
});
</script>
</body>
上述代码写成链式为：
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
$('button').click(function() {
$(this).css('backgroundColor', 'pink').siblings().css('backgroundColor', '');
// $(this).siblings().css('backgroundColor', '');
});
</script>
链式编程需要注意的是方法应用的对象
jQuery操作样式
jQuery可以通过修改属性操作CSS样式，也可以通过类名操作CSS样式
一、通过CSS方法操作
1、参数为属性
参数只写属性名，返回的是属性值
//<style>
// .son {
// color: red;
// }
//</style>
<script>
console.log($('.son').css('color'));//返回color的值rgb(255, 0, 0)
</script>
2、参数为属性名，属性值
参数是属性名，属性值，用逗号分隔，是设置的一组样式，属性必须加引号，如果值是数字那么可以不加引号
<script>
console.log($('.son').css('color', 'blue'));//son的颜色设置为蓝色
</script>
3、参数为对象形式
参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不加引号
<script>
$('.son').css({
backgroundColor: 'pink', //属性值需用引号
color: 'skyblue',
width: 100, //属性值为数字可不用引号
height: 100
});
</script>
二、通过设置类样式
设置类有三种方式：
1、添加类：
$('div').addClass('current');
2、移除类：
$('div').removeClass('current');
3、切换类：
$('div').toggleClass('current')
下面这个代码诠释了这三个类的用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: skyblue;
transition: all .5s;
}
.current {
background-color: pink;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div></div>
<script>
$('div').addClass('current');
$('div').removeClass('current');
$('div').click(function() {
$(this).toggleClass('current')
});
</script>
</body>
</html>
index()方法
index方法可以获取当前元素的索引号，索引号从0开始
<body>
<ul>
<li>123</li> <!--0-->
<li>123</li> <!--1-->
<li>123</li> <!--2-->
<li>123</li> <!--3-->
<li>123</li> <!--4-->
</ul>
<script>
$('li').click(function() {
console.log($(this).index());
});
</script>
</body>
jQuery基础-选择器，样式操作的更多相关文章
- jQuery-介绍 加载 选择器 样式操作 属性操作 绑定click事件
jQuery - 介绍 加载 选择器 样式操作 属性操作 绑定click事件 注意:以下部分问题不能实现效果,因该是单词拼写错误(少个t)或者没有加引号(“swing”)... jquery介绍 jQ ...
- jQuery基础（样式篇，DOM对象，选择器，属性样式）
1. $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真 ...
- jQuery基础——选择器、效果
一.使用JS的痛处 在学习和使用js的过程中发现了js的一些痛处: 1.书写繁琐,代码量大. 2.代码复杂. 3.动画效果很难实现.使用定时器,要小心各种定时器的清除.各种操作和处理事件不好实现. 4 ...
- Jquery基础之DOM操作
转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...
- 三、jQuery--jQuery基础--jQuery基础课程--第2章 jQuery 基础选择器
1.#id选择器 jquery能使用CSS选择器来操作网页中的标签元素.如果你想要通过一个id号去查找一个元素,就可以使用如下格式的选择器:$("#my_id") 其中#my_id ...
- 【总结整理】JQuery基础学习---样式篇
进入官方网站获取最新的版本 http://jquery.com/download/ 中文 https://www.jquery123.com/ <!--JQuery:轻量级的JavaScr ...
- jQuery属性和样式操作
回顾 1. jquery基本使用 <script src="jquery.min.js"></script><script> $(functio ...
- 19 01 13 JQery 加载 选择器 样式操作
在Javascript 中应该用下方法经行编辑 <script type="text/javascript" src="js/jquery-1.12.4.min ...
- JQuery基础修炼-样式篇
jQuery对象转化成DOM对象 jQuery库本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,为了是提供更好更方便快捷的DOM处理与开发常见中经常使用的功能.我们可 ...
随机推荐
- 【python】Leetcode每日一题-最大数
[python]Leetcode每日一题-最大数 [题目描述] 给定一组非负整数 nums,重新排列每个数的顺序(每个数不可拆分)使之组成一个最大的整数. 注意:输出结果可能非常大,所以你需要返回一个 ...
- java8中的Optional
Optional类主要解决空指针异常NullPointerException.Optional 类(java.util.Optional)是一个容器类,代表一个值存在或不存在,原来用 null 表示一 ...
- PHP 上传文件至阿里云OSS对象存储
简述 1.阿里云开通对象存储服务 OSS 并创建Bucket 2.下载PHP SDK至框架扩展目录,点我下载 3.码上code 阿里云操作 开通对象存储服务 OSS 创建 Bucket 配置Acces ...
- 不想用teamviewer和向日葵远程 试试frp吧
前言 最近发现teamview越来越不稳定了,总连接不上,对向日葵也是无感,倒不是说这两个产品不好,毕竟也是陪伴过我很长一段时间的软件了,于是上网找寻到了一个反向代理神器--FRP 介绍 frp是一个 ...
- c#RSA 私钥加签公钥解签
/// RSA签名 /// </summary> /// <param name="data">待签名数据</param> /// <pa ...
- 不同规模的企业对CRM的需求是否相同？
CRM客户管理系统在我们的认知中往往是中大型企业的选择.如今,越来越多中小规模企业开始使用CRM系统.CRM的功能随着发展变得越来越实用,可以满足不同行业不同业务规模的企业的需求.同时,CRM功能类型 ...
- JDBC核心技术（获取数据库链接、数据库事务、数据库链接池）
@ 目录 前言 数据的持久化 Java数据存储技术 JDBC介绍 JDBC体系结构 获取数据库链接 Driver接口 加载注册JDBC驱动 获取数据库链接 数据库链接方式(实例) 方式一:代码中显示出 ...
- 风变编程（Python自学笔记）第11关-杀死那只“机”生虫
1.Debug:为程序排除错误. 2.SyntaxError:语法错误. 3.append()函数是列表的一个方法,要用句点.调用,且append()每次只能接受一个参数. 4.解决思路不清的两个工具 ...
- 使用 CSS perfer-* 规范，提升网站的可访问性与健壮性
文本将介绍 CSS 媒体查询中新增的几个特性功能: prefers-reduced-motion prefers-color-scheme prefers-contrast prefers-reduc ...
- java基础——何为方法
方法 java中方法时语句的集合,他们在一起执行一个功能 方法时解决一类问题的步骤的有序组合 方法包含于与类或者对象中 方法在程序中被创建,在其他地方被引用 设计方法的原则:保持其原子性. 就是一个方 ...