入口函数：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")	所有可见的表格

隐式迭代

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处理与开发常见中经常使用的功能.我们可 ...

随机推荐

启动spring boot项目时报错：java.lang.ClassNotFoundException: javax.servlet.Filter
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...
【c#】使用Directory.GetFiles获取局域网中任意电脑指定文件夹下的文件
本文为老魏原创,如需转载请留言格式如下: // 获取IP地址为10.172.10.167下D盘下railway下的所有文件 string[] picArray = Directory.GetFile ...
Python JWT 介绍
Python JWT 介绍目录 Python JWT 介绍 1. JWT 介绍 2. JWT 创建 token 2.1 JWT 生成原理 2.2 JWT 校验 token 原理 3. 代码实现 4. ...
Win10安装MySQL5和MySQL8
1. 下载数据库,配置环境变量因为是安装两个MySQL数据库,端口号要不一样,MySQL默认端口号是3306,建议先配置非默认端口号,以免出现问题 1.1 官网下载5.7和8.0的压缩包我下载的是 ...
轻量级工具Vite到底牛在哪——一文全知道
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文参考:https://www.sitepoint.com/vitejs-front-end-build- ...
推荐一些学习MySQL的资源
前言: 在日常工作与学习中,无论是开发.运维.还是测试,对于数据库的学习是不可避免的,同时也是日常工作的必备技术之一.在互联网公司,开源数据库用得比较多的当属MySQL了,相信各位小伙伴关注我的原因也 ...
KMP板子（其实还没完全懂...）
KMP模板 1.next数组的实际含义 next数组从-1开始,主串a,子串b,next[j]=k,满足b[0,k-1]==b[j-k,j-1],k同时也为b子串前缀的下标,j为b子串后缀的下标 ge ...
Node.js-Events 模块总结与源码解析
Events 描述大多数 Node.js API 采用异步事件驱动架构,这些对象都是EventEmitter类的实例(Emitter),通过触发命名事件(eventName or type)来调用函 ...
Jmeter(四十五) - 从入门到精通高级篇 - Jmeter之网页爬虫-上篇（详解教程）
1.简介上大学的时候,第一次听同学说网页爬虫,当时比较幼稚和懵懂,觉得就是几只电子虫子爬在网页上在抓取东西.后来又听说写代码可以实现网页爬虫,宏哥感觉高大上,后来工作又听说,有的公司做爬虫被抓的新闻 ...
[Qt] 打包
步骤: 1.release项目,生成exe文件 2.在命令行中使用windeployqt,将相关文件复制到exe文件所在文件夹 3.用Enigma Virtual Box打包所有文件参考 https ...

jQuery基础-选择器，样式操作