ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

jQuery 01: 常用选择器 + 部分常用函数

2022-07-23 11:00:39  阅读：113  来源： 互联网

标签：jQuery function 常用 dom 对象 选择器 图层 click


jQuery

概述

  1. js的类库，开源，轻量便捷
  2. 引入jQuery，官网下载，开发用未压缩版，上线用压缩版

入口函数及其简写

  1. 标准写法

    $(document).ready(function(){
    //执行代码
})

  2. 简写

    $(function(){
    //执行代码
})

dom对象和jQuery对象

  1. dom对象：传统js语法创建出的对象

  2. jQuery对象：jQuery语法创建出的对象

    //jQuery对象以数组的形式存储，因为某些选择器选择的结果不唯一，为了兼容这种情况，都用数组存储
$("#btn1")
$(".txt")

  3. 两类对象可以相互转换

    1. dom -> jdom：$(dom)

    2. jsom -> dom：从数组中获取第一个对象，第一个对象，就是dom对象，[0]或者get(0)

    3. 为什么要相互转换?

      1. 为了使用对应类型对象的相应方法

    4. 示例

      <!DOCTYPE html>
<html lang="en">
    <head>
        <title>dom对象转换成jdom</title>
        <meta charset="UTF-8">
    </head>
    <body>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
        $(function(){
            $("#btn").click(function(){
                alert($("#btn").val())
            })
        })
    </script>
    <input type="button" value="just a button" id="btn">
    </body>
</html>

      <!DOCTYPE html>
<html lang="en">
    <head>
        <title>jdom对象转换成dom对象</title>
        <meta charset="UTF-8">
    </head>
    <body>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
        $(function(){
            //dom -> jdom
            $("#btn").click(function(){
                //jdom -> dom
                alert($("#btn")[0].value)
                //alert("btn").get(0).value)
            })
        })
    </script>
    <input type="button" value="jdom to dom" id="btn">
    </body>
</html>

jQuery选择器

  1. 本质：一个字符串，用来定位dom对象，然后通过jQuery的函数来操作dom对象，最后用dom对象的原生函数和属性，让这些操作真实生效

基本选择器

id选择器

  1. 语法：$("#dom对象id")

class选择器

  1. 语法：$(".class样式名")

标签选择器

  1. 语法：$("标签名称")

示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>基本选择器</title>
        <meta charset="UTF-8">
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                margin-left: 10px;
                margin-bottom: 10px;
            }

            #div1{
                width: 300px;
                height: 100px;
                background-color: gray;
                margin-top: 10px;
            }

            .two{
                width: 300px;
                height: 100px;
                background-color: gray;
            }
        </style>
    </head>
    <body>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
        $(function(){
            $("#btn1").click(function(){
                //id选择器
                $("#div1").css("background", "red")
            })

            $("#btn2").click(function(){
                //class样式选择器
                $(".two").css("background", "green")
            })

            $("#btn3").click(function(){
                //标签选择器
                $("span").css("background", "blue")
                //操作数组中的全部成员
            })
        })
    </script>
    <div id="div1">id图层</div>
    <div class="two">样式图层1</div>
    <div class="two">样式图层2</div>
    <span>span标签</span><br><br>
    <input type="button" value="修改id图层" id="btn1">
    <input type="button" value="修改样式图层" id="btn2">
    <input type="button" value="修改标签" id="btn3">
    </body>
</html>

效果：

image

所有选择器

  1. 语法：$("*")

组合选择器

  1. 语法：$("#id, .class, 标签名")

表单选择器

  1. 语法：$(":type 属性值")

    例如：$(":text") $(":password")等

  2. 与是否有form标签无关，使用input标签的type属性值来定位dom对象

示例：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>表单选择器</title>
        <meta charset="UTF-8">
    </head>
    <body>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
        $(function(){
            //获取文本框的值
            $("#btn1").click(function(){
                alert($(":text")[0].value)
            })

            //获取单选按钮的值
            $("#btn2").click(function(){
                for(var i = 0; i < $(":radio").length; i++){
                    alert($(":radio")[i].value)
                }
            })

            //获取复选框的值
            $("#btn3").click(function(){
                for(var i = 0; i < $(":checkbox").length; i++){
                    //使用jQUery的val()
                    alert($($(":checkbox")[i]).val())
                }
            })
        })
    </script>
    <input type="text" value="文本框的值"><br>
    <input type="radio" value="1" name="sex">男<br>
    <input type="radio" value="0" name="sex">女<br>
    <input type="checkbox" value="linux" name="IT">linux
    <input type="checkbox" value="java" name="IT">java
    <input type="checkbox" value="web" name="IT">web<br>
    <input type="button" id="btn1" value="获取文本框里的值">
    <input type="button" id="btn2" value="获取单选按钮的值">
    <input type="button" id="btn3" value="获取复选框的值">
    </body>
</html>

过滤器

  1. 作用：选择器作用后，对已经定位的dom对象，根据条件进一步筛选，从dom数组中筛选出需要操作的对象

  2. 本质：一个字符串

  3. 出现背景：

<div>1</div>
<div>2</div>
<div>3</div>

<script>
    $("div")
</script>
<!--
此时 $("div") == [dom1, dom2, dom3]
dom数组中元素的顺序，与上面图层标签出现的顺序相同
过滤器的作用：在选择器作用之后，对选择得到的结果进一步过滤，选择目标dom元素
-->

基本过滤器

  1. 作用：根据位置进行过滤

  2. 语法：

    $("选择器：first")			//保留数组中第一个dom
$("选择器：last")			//保留数组中最后一个dom
$("选择器：eq(数组索引)")	 //保留数组下标为指定索引的dom对象
$("选择器：lt(数组索引)")	 //保留数组下标<指定索引的所有dom对象
$("选择器：gt(数组索引)")	 //保留数组下标>指定索引的所有dom对象

  3. 示例：

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>基本过滤器</title>
        <meta charset="UTF-8">
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body{
                background-color: bisque;
            }

            div{
                background-color: gray;
                width: 300px;
            }
        </style>
    </head>
    <body>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
        $(function(){
            //选择第一个图层
            $("#btn1").click(function(){
                $("div:first").css("background", "red")
            })
            //选择最后一个图层
            $("#btn2").click(function(){
                $("div:last").css("background", "green")
            })
            //选择数组下标等于3的图层
            $("#btn3").click(function(){
                $("div:eq(3)").css("background", "blue")
            })
            //选择数组下标小于3的图层
            $("#btn4").click(function(){
                $("div:lt(3)").css("background", "pink")
            })
            //选择数组下标大于3的图层
            $("#btn5").click(function(){
                $("div:gt(3)").css("background", "purple")
            })
            //选择数组下标等于1的图层
            $("#btn6").click(function(){
                $("div:eq(1)").css("background", "yellow")
            })
        })
    </script>
    <div id="div1">图层0</div>
    <div id="div2">图层1
        <div id="div3">图层2</div>
        <div id="div4">图层3</div>
    </div>
    <div id="div5">图层4</div>
    <input type="button" id="btn1" value="选择第一个图层"><br>
    <input type="button" id="btn2" value="选择最后一个图层"><br>
    <!--
	父级dom与子级dom，在dom数组中独立存在
	-->
    <input type="button" id="btn6" value="选择下标等于1的图层"><br>
    <input type="button" id="btn3" value="选择下标等于3的图层"><br>
    <input type="button" id="btn4" value="选择下标小于3的图层"><br>
    <input type="button" id="btn5" value="选择下标大于3的图层"><br>
    </body>
</html>

    效果：

    image

表单属性过滤器

  1. 根据表单中dom对象的状态情况，来定位dom对象，例如：是否启用，是否选中等等

  2. 语法

    $(":text:enabled")	//所有可用的文本框
$(":text:disabled")	//所有不可用的文本框
$(":check:checked")	//复选框中选择的元素
选择器>option:selected	//选择指定下拉列表的被选中的元素

  3. 示例：

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>表单属性过滤器</title>
        <meta charset="UTF-8">
    </head>
    <body>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
        $(function(){
            //所有可用text，设值为 hello jQuery
            $("#btn1").click(function(){
                for(var i = 0; i < $(":text:enabled").length; i++){
                    $(":text:enabled")[i].value = "hello jQuery"
                }
            })

            //显示被选中的复选框的值
            $("#btn2").click(function(){
                for(var i = 0; i < $(":checkbox:checked").length; i++){
                    alert($(":checkbox:checked")[i].value)
                }
            })

            //显示下拉列表选中的值
            $("#btn3").click(function(){
                alert("下拉列表值: " + $("select>option:selected").val())
            })
        })
    </script>

    <input type="text" id="txt1" value="text1"><br>
    <input type="text" id="txt2" value="text2" disabled><br>
    <input type="text" id="txt3" value="text3"><br>
    <input type="text" id="txt4" value="text4" disabled><br><br>

    <input type="checkbox" id="check1" name="IT" value="linux" checked>linux
    <input type="checkbox" id="check2" name="IT" value="web">web
    <input type="checkbox" id="check2" name="IT" value="mysql">mysql<br><br>

    <select id="language">
        <option value="java" selected>java</option>
        <option value="php">php</option>
        <option value="ruby">ruby</option>
        <option value="c">c</option>
    </select><br><br>

    <input type="button" id="btn1" value="所有可用text, 设值为 hello jQuery"><br> 
    <input type="button" id="btn2" value="显示被选中的复选框的值"><br>
    <input type="button" id="btn3" value="显示下拉列表选中的值"> 
    </body>
</html>

函数

val

  1. $(选择器).val()，无参调用，读取数组中第一个dom对象的value属性值
  2. $(选择器).val(值)，有参调用，对数组中所有dom对象的value属性值进行统一赋值

text

  1. $(选择器).text()，无参调用，读取数组中所有dom对象的文字显示内容，将得到的内容拼接为一个字符串返回
  2. $(选择器).text(值)，有参方式，对数组中所有dom对象的文字显示内容进行统一赋值

attr

  1. 作用：对val，text，之外的其他属性操作

  2. $(选择器).attr("属性名")，获取dom数组第一个对象的属性值

  3. $(选择器).attr("属性名"，"值")，将数组中所有dom对象的属性值设为新值

  4. 示例

    <!DOCTYPE html>
<html lang="en">
    <head>
        <title>val, text, attr函数的简单应用</title>
        <meta charset="UTF-8">
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                margin-top: 10px;
                margin-left: 10px;
                background-color: bisque;
            }

            div{
                width: 182px;
                height: 100px;
            }
        </style>
    </head>
    <body>
    <script src="js/jquery-3.6.0.js"></script>

    <script>
        $(function(){
            //获取第一个文本框的值
            $("#btn1").click(function(){
                alert("第一个文本框的值: " + $("#txt1").val())
                //将第一个文本框的值设为新值
                $("#txt1").val("第一个文本框的新值")
            })

            //将所有文本框的值设为新值
            $("#btn2").click(function(){
                $(":text").val("所有文本框的新值")
            })
            //获取图层的文本信息
            $("#btn3").click(function(){
                alert("图层的文本信息: " + $("#the-div").text())
            })

            //将图层的文本信息设为新值
            $("#btn4").click(function(){
                $("#the-div").text("图层新的文本信息")
            })

            //查看图层背景
            $("#btn5").click(function(){
                alert("图层背景色: " + $("#the-div").attr("style"))
            })
            
            //修改图层背景
            $("#btn6").click(function(){
                $("#the-div").attr("style", "background-color: purple")
            })
        })
    </script>

    <input type="text" id="txt1" value="text1"><br>
    <input type="text" id="txt2" value="text2"><br>
    <input type="text" id="txt3" value="text3"><br>
    <input type="text" id="txt4" value="text4"><br>
    <div id="the-div" style="background-color: gray">这是一个div图层</div>
    <input type="button" id="btn1" value="获取第一个文本框的值"><br>
    <input type="button" id="btn2" value="将所有文本框的值设为新值"><br>
    <input type="button" id="btn3" value="获取图层的文本信息"><br>
    <input type="button" id="btn4" value="将图层的文本信息设为新值"><br>
    <input type="button" id="btn5" value="查看图层背景色"><br>
    <input type="button" id="btn6" value="修改图层背景色"><br>

    </body>
</html>

    效果:

    image

定义元素监听事件

  1. 语法：$(选择器).监听事件名称(处理函数)，事件名称就是js中出现的事件名称
  2. 本质：处理函数在底层会被赋值给jQuery对象对应的dom对象的事件句柄

标签：jQuery,function,常用,dom,对象,选择器,图层,click
来源： https://www.cnblogs.com/nefu-wangxun/p/16508095.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有