JQuery-函数

客官°小女子只卖身不卖艺 2022-11-29 11:49 144阅读 0赞

**目录**

第一组

1、val（）

2、text（）

3、attr（）

第二组

1、hide（）

2、show（）

3、remove（）

4、empty（）

5、append （）

6、html （）

7、each （）

--------------------

## 第一组 ##

###        1、val（） ###

操作数组中 DOM 对象的**value属性**

**              $(选择器).val() ：****无参数调用形式**， 读取**数组中**第一个 DOM **对象的 value 属性值**

** $(选择器).val(值)：有参形式调用**;**对数**组中所有 DOM 对象**的 value 属性值进行统一赋值 **

###        2、text（） ###

操作数组中**所有 DOM 对象**的**文字显示内容属性**

**             $(选择器).text():无参数调用，**读取数组中**所有 DOM 对象的文字显示内容**，将得到**内容拼接 为一个字符串返回**

**             $(选择器).text(值):有参数方式，对数组中所有 DOM 对象的文字显示内容进行统一赋值**

###        3、attr（） ###

**        对 val, text 之外的其他属性操作 **

**            $(选择器).attr(“属性名”): 获取 DOM 数组第一个对象的属性值 **

**$(选择器).attr(“属性名”,“值”): 对数组中所有 DOM 对象的属性设为新值 **

**案例：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    </head>
    <body>
        <p>文本框</p>
        <input type="text" value="Java"><br/>
        <input type="text" value="C++"><br/>
        <p>文本数据text</p>
        <div>第1个div</div>
        <div>第2个div</div>
        <img id="img1" src="images/p1.jpg"/><br/>
        <img id="img2" src="images/p2.png"/><br/>
        <p>功能按钮</p>
        <input type="button" id="btn1" value="获取第一个文本框的值">
        <input type="button" id="btn2" value="设置所有文本框的值">
        <input type="button" id="btn3" value="获取所有文本数据的文字text">
        <input type="button" id="btn4" value="设置所有文本数据的文字">
        <input type="button" id="btn5" value="获取除text value之外的">
        <input type="button" id="btn6" value="设置除text value之外的">
    </body>
        <script>
            $(function(){
                $("#btn1").click(function(){
                   alert( $(":text").val());
                })
                $("#btn2").click(function(){
                    $(":text").val("hello Java");
                })
                $("#btn3").click(function(){
                    alert($("div").text());
                })
                $("#btn4").click(function(){
                   $("div").text("Hello javase");
                })
                $("#btn5").click(function(){
                    //images/p1.jpg
                   alert($("#img1").attr("src"));
                })
                $("#btn6").click(function(){
                   $("#img1").attr("src","images/p4.jpg");
                })
            })
        </script>
    </html>

## 第二组 ##

###        1、hide（） ###

** $(选择器).hide() :将数组中所有 DOM 对象隐藏起来 **

###        2、show（） ###

**$(选择器).show():将数组中所有 DOM 对象在浏览器中显示起来 **

###        3、remove（） ###

**$(选择器).remove() : 将数组中所有 DOM 对象及其子对象一并删除 **

###        4、empty（） ###

**$(选择器).empty()：将数组中所有 DOM 对象的子对象删除 **

###        5、append （） ###

**为数组中所有 DOM 对象添加子对象 **

**          $(选择器).append("<div>我动态添加的 div</div>")**

![20200820121159278.png][]

###        6、html （） ###

** 设置或返回被选元素的内容（innerHTML）**。

**$(选择器).html()：无参数调用方法，获取 DOM 数组第一个匹元素的内容。 **

**          $(选择器).html(值)：有参数调用，用于设置 DOM 数组中所有元素的内容**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70][]

###        7、each （） ###

each 是对数组，json 和 dom 数组等的遍历,对每个元素调用一次函数。

**语法 1：$.each( 要遍历的对象, function(index,element) \{ 处理程序 \} ) **

**        语法 2：jQuery 对象.each( function( index, element ) \{ 处理程序 \}  ) **

**       index: 数组的下标 **

**       element: 数组的对象 **

**      $：相当于是Java的一个类名**

**      each()：就是类中的一个静态方法**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 1][]

[20200820121159278.png]: /images/20221124/4b192b7c013b4cdc86d298356d5a2e2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70]: /images/20221124/6c753ef505e64f16a0f418e96dca9b97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcyNTUxNw_size_16_color_FFFFFF_t_70 1]: /images/20221124/1848925778b74543a4924cafdb9a279c.png