JQuery-函数

放肆的青春゛つ

于 2020-08-20 12:19:14 发布

阅读量306

点赞数

分类专栏： jQuery 文章标签： jquery

本文为博主原创文章，未经博主允许不得转载。如有问题，欢迎指正。

本文链接：https://blog.csdn.net/weixin_43725517/article/details/108120008

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

第一组

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

6、html （）

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

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

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

7、each （）

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

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

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

index: 数组的下标

element: 数组的对象

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

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

放肆的青春゛つ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery-函数

第一组 1、val（）操作数组中 DOM 对象的value属性 $(选择器).val() ：无参数调用形式，读取数组中第一个 DOM 对象的 value 属性值 $(选择器).val(值)：有参形式调用;对数组中所有 DOM 对象的 value 属性值进行统一赋值 2、text（）操作数组中所有 DOM 对象的文字显示内容属性 ...
复制链接

扫一扫

专栏目录