jQuery 核心函数

jQuery 核心函数

jQuery 选择器

• 选择器本身只是一个特定语法的规则的字符串
• 它基本语法规则使用的就是CSS的选择器语法，并且对其进行了扩展
• 用法： 调用$("selector"),将选择器作为参数传入才能起作用
• 作用： 根据选择器规则在整个文档中查找所有匹配的标签的数组，并封装成一个jQuery对象返回

jQuery 基本选择器

1. #id：id选择器

// 选择id为div1的元素
$("#div1")

2. element： 元素选择器

// 选择所有的div元素
$("div")

3. .class： 类选择器

// 选择所有的class属性为box的元素
$(".box")

4. *： 通配符选择器

// 选择所有的元素
$("*")

5. selecot1, selector2, selectorN：并集选择器

// 选择所有的div和span的元素
$("div, span")

6. selecot1selector2selectorN：交集选择器

// 选择所有的class属性为box的div的元素
$("div.box")

层次选择器

1. selecot1 selecot2：后代选择器
   在给定的祖先元素下匹配所有的后代元素

// 选中ul元素下所有的span元素(包括内嵌span)
$("ul span");

2. selecot1 > selecot2：子代选择器
   在给定的父元素下匹配所有的子元素

// 选中ul元素下所有的子元素span
$("ul>li");

3. selecot1 ~ selecot2：通用兄弟选择器
   选择之后具有相同父元素且同级的所有选择器

// 选中class属性为box之后所有同级兄弟li元素
$(".box ~ li");

4. selecot1 + selecot2：相邻兄弟选择器
   选择具有相同父元素且同级的下一个紧挨选择器

// 选中class属性为box下一个紧挨的li
$(".box + li");

过滤选择器

1. :first获取匹配的第一个元素

// 选中第一个li元素
$("li:first");

2. :not(selector)去除所有与给定选择器匹配的元素

// 选中非div元素的元素
$(":not(div)");

3. :even匹配所有索引值为偶数的元素，索引值从 0 开始计数

// 选中索引为偶数的tr元素
$("tr:even");

4. :odd匹配所有索引值为奇数的元素，索引值从 0 开始计数

// 选中索引为奇数的tr元素
$("tr:odd");

5. :eq(index)匹配一个给定索引值的元素,索引值从 0 开始计数

// 选中第二行的tr元素
$("tr:eq(1)")

6. :gt(index)匹配所有大于给定索引值的元素,索引值从 0 开始计数
7. :lt(index)匹配所有小于给定索引值的元素,索引值从 0 开始计数

// 选中第二三四行的tr元素
$("tr:gt(0):lt(3)");//第一种写法//多个选择器是依次执行的
$("tr:lt(4):gt(0)");//第二种写法

8. :last()获取最后个元素

// 选中第一个li元素
$('li:last');

9. :header匹配如 h1, h2, h3之类的标题元素

// 选中页面中的标题
$(":header");

10. :animated匹配所有正在执行动画效果的元素
11. :focus匹配当前获取焦点的元素
12. :contains(text)匹配包含给定文本的元素

// 查找所有包含 "John" 的 div 元素
$("div:contains('John')")

13. :hidden匹配所有不可见元素，或者type为hidden的元素

// 匹配type为hidden的input元素
$("input:hidden")

14. [attribute]匹配包含给定属性的元素。

// 查找所有含有 id 属性的 div 元素
$("div[id]")

15. [attribute=value]匹配给定的属性是某个特定值的元素

// 查找所有 name 属性是 newsletter 的 input 元素
$("input[name='newsletter']");

16. [attribute!=value]匹配所有不含有指定的属性，或者属性不等于特定值的元素。

// 查找所有 name 属性不是 newsletter 的 input 元素
$("input[name!='newsletter']");

17. [attribute^=value]匹配给定的属性是以某些值开始的元素

// 查找所有 name 以 'news' 开始的 input 元素
$("input[name^='news']")

18. [attribute$=value]匹配给定的属性是以某些值结尾的元素

// 查找所有 name 以 'letter' 结尾的 input 元素
$("input[name$='letter']")

19. [attribute*=value]匹配给定的属性是以包含某些值的元素

// 查找所有 name 包含 'man' 的 input 元素
$("input[name*='man']")

20. [selector1][selector2][selectorN]复合属性选择器，需要同时满足多个条件时使用。

// 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的
$("input[id][name$='man']")

表单选择器

1. :input匹配所有 input, textarea, select 和 button 元素

// 查找所有的input元素，textarea, select 和 button 元素这些元素都会被匹配到。
$(":input")

2. :text匹配所有的单行文本框

// 查找所有文本框[ <input type="text" /> ]
$(":text")

3. :password匹配所有密码框

// 查找所有密码框
$(":password")

4. :radio匹配所有单选按钮

// 查找所有单选按钮
$(":radio")

5. :checkbox匹配所有复选框

// 查找所有复选框
$(":checkbox")

6. :submit匹配所有提交按钮

// 查找所有提交按钮
$(":submit")

7. :image匹配所有图像域

// 匹配所有图像域
$(":image")

8. :reset匹配所有重置按钮

// 查找所有重置按钮
$(":reset")

9. :button匹配所有按钮

// 查找所有按钮
$(":button")

10. :file匹配所有文件域

// 查找所有文件域
$(":file")

11. :enabled匹配所有可用元素

// 查找所有可用的input元素
$("input:enabled")

12. :disabled匹配所有不可用元素

// 查找所有不可用的input元素
$("input:disabled")

13. :checked匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

// 查找所有选中的复选框元素
$("input:checked")

14. :selected匹配所有选中的option元素

// 查找所有选中的选项元素
$("select option:selected")

属性

1. attr(name|properties|key,value)获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。
   arrt()操作属性值为非布尔值

// 返回文档中所有图像的src属性值
$("img").attr("src");

// 为所有图像设置src和alt属性
$("img").attr({ src: "test.jpg", alt: "Test Image" });

2. removeAttr(name)从每一个匹配的元素中删除一个属性

// 将文档中图像的src属性删除
$("img").removeAttr("src");

3. prop(name|properties|key,value)获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。
   prop()操作属性值为布尔值

// 禁用和选中所有页面上的复选框
$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);

4. removeProp(name)用来删除由.prop()方法设置的属性集

// 设置一个段落数字属性，然后将其删除
var $para = $("p");
$para.prop("luggageCode", 1234);
$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
$para.removeProp("luggageCode");

5. addClass(class)为每个匹配的元素添加指定的类名。

// 为匹配的元素加上 'selected' 类
$("p").addClass("selected");
$("p").addClass("selected1 selected2");

6. removeClass([class])从所有匹配的元素中删除全部或者指定的类。

// 从匹配的元素中删除 'selected' 类
$("p").removeClass("selected");

7. toggleClass([class])如果存在（不存在）就删除（添加）一个类。

// 为匹配的元素切换 'selected' 类
$("p").toggleClass("selected");

8. html([val])取得第一个匹配元素的html内容。
   这个函数不能用于XML文档。但可以用于XHTML文档。

// 返回p元素的内容
$('p').html();
// 设置所有 p 元素的内容
$("p").html("Hello <b>world</b>!");

9. text([val|fn])取得所有匹配元素的内容。

// 返回p元素的文本内容
$('p').text();
// 设置所有 p 元素的文本内容
$("p").text("Hello world!");

10. val([val])获得匹配元素的当前值。

// 获取文本框中的值
$("input").val();
// 设定文本框的值
$("input").val("hello world!");

多Tab点击切换

<!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">

    <title>多Tab点击切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .tab li {
            float: left;
            list-style: none;
            width: 80px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            text-align: center;
        }

        .tab1,
        .container1 {
            background-color: lightblue;
        }

        .tab2,
        .container2 {
            background-color: lightcoral;
        }

        .tab3,
        .container3 {
            background-color: lightpink;
        }

        .container {
            position: relative;
        }

        .container1,
        .container2,
        .container3 {
            width: 400px;
            height: 200px;
            position: absolute;
            top: 40px;
            left: 0;
        }
    </style>

    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            var $contents = $('.container>div');
            // 给3个li加监听
            $('.tab>li').click(function () { //隐式遍历
                // 隐藏所以内容div
                $contents.css('display', 'none')
                // 得到当前点击的li在兄弟中下标
                var index = $(this).index()
                // 找到对应的内容div
                $contents[index].style.display = "block";
                // $($contents[index].css("display", "block"));
            })
        })
    </script>
</head>

<body>
    <h1>多Tab点击切换</h1>
    <ul class="tab">
        <li class="tab1">第一列</li>
        <li class="tab2">第二列</li>
        <li class="tab3">第三列</li>
    </ul>
    <div class="container">
        <div class="container1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab distinctio minima, voluptas
            laborum voluptatibus autem praesentium vitae similique error nobis accusamus. Dolor vero in ratione, sed
            tenetur
            voluptatem expedita perspiciatis.</div>
        <div class="container2" style="display: none;">Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Perferendis,
            soluta. Fugiat eos
            fugit dignissimos consequuntur quae ratione, iure natus illo quia, nulla earum laborum, voluptatum eum
            suscipit
            excepturi magnam tempore?</div>
        <div class="container3" style="display: none;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam
            dolores consequuntur
            laboriosam fuga quia nihil placeat. Vero, eum suscipit dolore fugiat laudantium itaque. Blanditiis, nam.
            Facere,
            nobis. Tempora, natus laudantium.</div>
    </div>
</body>

</html>