• jQuery之选择器以及相关基本操作(操作元素属性、操作元素内容、操作元素样式)

    jQuery之选择器以及相关操作

    一、jQuery的选择器

    1、id选择器

    //id选择器
function testId(){
     //jQuery--id
     var inp = $("#uname");
     alert(inp.val());
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    2、标签选择器

    //标签选择器
function testEle(){
      var inps = $("input");
      alert(inps.length);
}

    • 1
    • 2
    • 3
    • 4
    • 5

    3、类选择器

    //类选择器
function testClass(){
      var inps = $(".common");
      alert(inps.length);
}

    • 1
    • 2
    • 3
    • 4
    • 5

    4、组合选择器

    //组合选择器
function testAll(){
      var eles = $("h3,input");
      alert(eles.length);
}

    • 1
    • 2
    • 3
    • 4
    • 5

    5、测试子选择器

    //测试子选择器
function testChild(){
      var inps=$("#showdiv>input");
      alert(inps.length);
}

    • 1
    • 2
    • 3
    • 4
    • 5

    6、测试层级选择器

    //测试层级选择器
function testCj(){
     var inp = $("input:first");
     alert(inp.val());
}

 function testCj2(){
     var tds=$("td:not(td[width])");
     alert(tds.html());
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    7、其它选择器简介

    简单选择器
    内容选择器
    可见性选择器
    属性选择器
    子元素选择器
    表单选择器

    8、注意

    jquery中选择器获取的是存储了HTML元素对象的数组。
    jQuery获取的元素对象不能够直接用js的内容，按照数组的取出方式将对象取出后可以使用js的内容。
    jQuery对我们提供了多种多样的选择器来选择需要操作的HTML元素对象

    9、完整代码

    DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <script src="js/jQuery-1.9.1.min.js" type="text/javascript" charset="utf-8">script>
    <title>jQuery之选择器title>
    <script type="text/javascript">
        //id选择器
        function testId(){
            //jQuery--id
            var inp = $("#uname");
            alert(inp.val());
        }
        //标签选择器
        function testEle(){
            var inps = $("input");
            alert(inps.length);
        }
        //类选择器
        function testClass(){
            var inps = $(".common");
            alert(inps.length);
        }
        //组合选择器
        function testAll(){
            var eles = $("h3,input");
            alert(eles.length);
        }
        //测试子选择器
        function testChild(){
            var inps=$("#showdiv>input");
            alert(inps.length);
        }
        //测试层级选择器
        function testCj(){
            var inp = $("input:first");
            alert(inp.val());
        }
        function testCj2(){
            var tds=$("td:not(td[width])");
            alert(tds.html());
        }
    script>
    <style type="text/css">
        .common{}
        #showdiv{
            width:300px;
            height:300px;
            border:solid 2px orange;
        }
    style>
head>
<body>
    <h3>jquery的选择器h3>
    <hr/>
    <input type="button" name="" id="" value="测试id" onclick="testId()" class="common"/>
    <input type="button" name="" id="" value="测试标签选择器" onclick="testEle()"/>
    <input type="button" name="" id="" value="测试类选择器" onclick="testClass()"/>
    <input type="button" name="" id="" value="测试组合选择器" onclick="testAll()"/>
    <input type="button" name="" id="" value="测试子选择器" onclick="testChild()"/>
    <input type="button" name="" id="" value="测试层级选择器" onclick="testCj()"/>
    <input type="button" name="" id="" value="测试层级选择器2" onclick="testCj2()"/>
    <hr/>
    用户名：<input type="text" name="uname" id="uname" value="张三" class="common"/>
    <div id="showdiv">
        <input type="text" name="" id="" value="" />
        <input type="text" name="" id="" value="" />
        <input type="text" name="" id="" value="" />
        <input type="text" name="" id="" value="" />
    div>
    <table border="1px" height="200px">
        <tr>
            <td width="100px">td>
            <td width="100px">td>
            <td width="100px">td>
        tr>
        <tr>
            <td>1td>
            <td>2td>
            <td>3td>
        tr>
        <tr>
            <td>4td>
            <td>5td>
            <td>6td>
        tr>
    table>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91

    二、jQuery操作元素属性

    1、获取元素属性

    对象名.attr(“属性名”) //返回当前属性值
    注意此种方式不能获取value属性的实时数据，使用对象名.val()进行获取。

    function testField(){
      //获取元素对象
      var uname = $("#uname");
      //获取元素属性
      alert(uname.attr("type")+":"+uname.attr("value")+":"+uname.val());
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    2、修改元素属性

    对象名.attr(“属性名”,“属性值”);

    function testField2(){
     //获取元素对象
     var uname = $("#uname");
     uname.attr("type","button");
}

    • 1
    • 2
    • 3
    • 4
    • 5

    3、完整代码

    DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>jQuery操作元素属性title>
    <script src="js/jQuery-1.9.1.min.js" type="text/javascript" charset="utf-8">script>
    <script >
        function testField(){
            //获取元素对象
            var uname = $("#uname");
            //获取
            alert(uname.attr("type")+":"+uname.attr("value")+":"+uname.val());
        }

        function testField2(){
            //获取元素对象
            var uname = $("#uname");
            uname.attr("type","button");
        }
    script>
head>
<body>
    <h3>jQuery操作元素属性h3>
    <input type="button" name="" id="" value="测试获取元素属性" onclick="testField()"/>
    <input type="button" name="" id="" value="测试修改元素属性" onclick="testField2()"/>
    <hr/>
    用户名：<input type="text" name="uname" id="uname" value="哈哈"/>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    三、jQuery操作元素内容

    1、获取元素内容

    1.1 对象名.html() //返回当前对象的所有内容，包括HTML标签

     //声明元素对象
function testHtml(){
     //获取元素对象
     var showdiv=$("#showdiv");
     //获取元素的内容
     alert(showdiv.html());
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    1.2 对象名.text() //返回当前对象的文本内容，不包括HTML标签

    function testText(){
       //获取元素内容
       var showdiv = $("#showdiv");
       //获取元素内容
       alert(showdiv.text());
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    2、修改元素内容

    2.1 对象名.html(“新的内容”) //新的内容会将原有内容覆盖，HTML标签会被解析执行

    function testHtml2(){
      //获取元素对象
      var showdiv=$("#showdiv");
       //修改元素内容
       showdiv.html("今天天气很好");
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    2.2 对象名.text(“新的内容”) //新的内容会将原有内容覆盖，HTML标签不会被解析执行

    function testText2(){
      //获取元素内容
      var showdiv = $("#showdiv");
      //修改元素内容
      showdiv.text("今天天气很好");
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    3、完整代码

    DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>jQuery操作元素内容title>
    <script src="js/jQuery-1.9.1.min.js" type="text/javascript" charset="utf-8">script>
    <script type="text/javascript">
        //声明元素对象
        function testHtml(){
            //获取元素对象
            var showdiv=$("#showdiv");
            //获取元素的内容
            alert(showdiv.html());
        }
        function testHtml2(){
            //获取元素对象
            var showdiv=$("#showdiv");
            //修改元素内容
            showdiv.html("今天天气很好");
        }
        function testText(){
            //获取元素内容
            var showdiv = $("#showdiv");
            //获取元素内容
            alert(showdiv.text());
        }
        function testText2(){
            //获取元素内容
            var showdiv = $("#showdiv");
            //修改元素内容
            showdiv.text("今天天气很好");
        }
    script>
head>
<body>
    <h3>jQuery操作元素内容h3>
    <input type="button" name="" id="" value="测试获取元素内容--html()" onclick="testHtml()"/>
    <input type="button" name="" id="" value="测试修改元素内容--html()" onclick="testHtml2()"/>
    <input type="button" name="" id="" value="测试获取元素内容--text()" onclick="testText()"/>
    <input type="button" name="" id="" value="测试修改元素内容--text2()" onclick="testText2()"/>
    <hr/>
    <div id="showdiv">
        <b>买菜b>
    div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48

    四、jQuery操作元素样式

    1、使用css()

    1.1 对象名.css(“属性名”) //返回当前属性的样式值

    function testCss(){
      //获取元素对象
      var showdiv=$("#showdiv");
       //操作样式--增加
       showdiv.css("background-color","orange");
       //操作样式--获取
       alert(showdiv.css("width"));
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    1.2 对象名.css(“属性名”,“属性值”) //增加、修改元素的样式

    function testCss2(){
      //获取元素对象
      var div = $("#div01");
      //操作样式
      div.css("border":"solid 1px");
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    1.3 对象名.css({“样式名”；“样式值”，“样式名”；“样式值”…}) //使用json传参，提升代码书写效率。

    function testCss3(){
      //获取元素对象
      var div = $("#div01");
      //操作样式
      div.css({"border":"solid 1px","width":"300px","height":"300px"});
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    2、使用addClass()

    2.1 对象名.addClass(“类选择器名”) //追加一个类样式

    //jQuery操作样式--addClass()
function testAddClass(){
      //获取元素对象
      var div = $("#div01");
      //操作元素样式
      div.addClass("common");
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    2.2 对象名.removeClass(“类选择器名”) //删除一个指定的类样式

    function testRemoveClass(){
       //获取元素对象
       var div = $("#div01");
       //操作元素样式
       div.removeClass("dd");
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    3、完整代码

    DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width = device - width, initial - scale = 1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie-edge">
    <title>jQuery操作元素样式title>
    <style type="text/css">
        #showdiv{
            width:300px;
            height:300px;
            border:solid 1px;
        }
        .common{
            width:300px;
            height:300px;
            border:solid 1px;
            background-color: blueviolet;
        }
        .dd{
            font-size: 30px;
            color: white;
        }
    style>
    <script src="js/jQuery-1.9.1.min.js" type="text/javascript" charset="utf-8">script>
    <script type="text/javascript">
        function testCss(){
            //获取元素对象
            var showdiv=$("#showdiv");
            //操作样式--增加
            showdiv.css("background-color","orange");
            //操作样式--获取
            alert(showdiv.css("width"));
        }
        function testCss2(){
            //获取元素对象
            var div = $("#div01");
            //操作样式
            div.css({"border":"solid 1px","width":"300px","height":"300px"});
        }

        //jQuery操作样式--addClass()
        function testAddClass(){
            //获取元素对象
            var div = $("#div01");
            //操作元素样式
            div.addClass("common");
        }

        function testAddClass2(){
            //获取元素对象
            var div = $("#div01");
            //操作元素样式
            div.addClass("dd");
        }
        
        function testRemoveClass(){
            //获取元素对象
            var div = $("#div01");
            //操作元素样式
            div.removeClass("dd");
        }
    script>
head>
<body>
    <h3>jQuery操作元素样式h3>
    <input type="button" name="" id="" value="操作样式--css()" onclick="testCss()"/>
    <input type="button" name="" id="" value="操作样式--css--json()" onclick="testCss2()"/>
    <input type="button" name="" id="" value="操作样式--addClass()" onclick="testAddClass()"/>
    <input type="button" name="" id="" value="操作样式--addClass2()" onclick="testAddClass2()"/>
    <input type="button" name="" id="" value="操作样式--removeClass()" onclick="testRemoveClass()"/>
    <hr/>
    <div id="showdiv">
       
    div>
    <div id="div01">
         Good
    div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
  • 相关阅读:
    一些好用的系统、组件记录
    Spring Boot如何实现OAuth2授权？
    java 运算符
    react的计算属性useMemo
    Mac M芯片上安装统信UOS 1070arm64虚拟机
    docker -- 入门篇 （数据卷、自定义镜像、安装mysql & redis）
    Day15—热点搜索词统计
    拥有游戏的一部分，写在我的世界禁用NFT之后
    查看视频文件关键帧间隔
    Clion-MinGW编译后的exe文件添加ico图标
  • 原文地址：https://blog.csdn.net/qq_46106857/article/details/126756043