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>
posted @ 2021-06-13 13:47  JSW79  阅读(168)  评论(0)  编辑  收藏  举报
隐藏目录