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

随机推荐

深入浅出带你玩转sqlilabs(五)-布尔/延时盲注与二次注入
SQL测试-基于布尔,延时盲注布尔,延时注入常用到的判断语句 regexp regexp '^xiaodi[a-z]' 匹配xiaodi及xiaodi...等 if if(条件,5,0) 条件成立 ...
Andrew Ng机器学习算法入门(四):阶梯下降算法
梯度降级算法简介之前如果需要求出最佳的线性回归模型,就需要求出代价函数的最小值.在上一篇文章中,求解的问题比较简单,只有一个简单的参数.梯度降级算法就可以用来求出代价函数最小值. 梯度降级算法的在维 ...
python-内置函数-文件操作
文件操作用的最多的就是r+,w+和a+都有局限性 w+是先清空,然后再写,之后再读 a+是无论如何调整指针位置,写时都在文件最后追加而r+可以通过调整指针位置来确定写入的位置文件操作之with处 ...
Mybatis学习之自定义持久层框架（六）自定义持久层框架：完善CRUD方法并进行测试
前言没想到会等到半年以后才来写这篇文章,我已经不记得当初自己想要在这篇文章中写什么了,还好有一些零散的笔记留着,就对照着上一篇文章及零散的笔记,把内容给补充完吧. 完善CRUD方法完善Defaul ...
C++基础——文件逐行读取与字符匹配
技术背景用惯了python,对其他语言就比较的生疏.但是python很多时候在性能上比较受局限,这里尝试通过C++来实现一个文件IO的功能,看看是否能够比python的表现更好一些.关于python ...
北航OO(2020)第三单元博客作业
一.JML理论基础及相关工具链 1.JML理论基础该部分梳理本单元作业中涉及到的JML知识. 1.1注释结构 JML采用javadoc注释的方式来表示规格,且每行以@开头.通过使用//@annota ...
微服务·API文档
阅文时长 | 3.92分钟字数统计 | 2754.05字符主要内容 | 1.什么是API文档 2.API文档的使用 3.声明与参考资料『微服务·API文档』编写人 | SCscHero 编写时 ...
[bug] IDEA：application context not configured for this file
参考 https://blog.csdn.net/a772304419/article/details/79680833
[tools] 工具
代码编辑 notepad++ 文档对比 Beyond Compare 代码阅读 source insight 代码分析 Scitools 下载 http://www.cr173.com/soft/29 ...
Bash技巧：使用 set 内置命令帮助调试 shell 脚本
Bash技巧:使用 set 内置命令帮助调试 shell 脚本霜鱼片发布于 2020-02-03 在 bash 中,可以使用 set 内置命令设置和查看 shell 的属性.这些属性会影响 sh ...

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