首页 > 其他分享 >jQuery--常用函数

jQuery--常用函数

时间:2023-08-03 15:56:52浏览次数:55  
标签:jQuery function 函数 dom -- text 选择器 数组 click

1、val

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

// 无参形式,读取数组中第一个dom对象的value值
$(选择器).val()
// 有参形式,对数组中所有dom对象的value属性值统一赋值
$(选择器).val(值)

2、text

操作数组中所有 dom对象的文字内容属性

// 无参形式,读取数组中所有dom对象的文字显示内容,
// 将得到的内容拼接为一个字符串返回
$(选择器).text()
// 有参形式,对数组中所有dom对象的文字内容统一赋值
$(选择器).text(值)

3、attr

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

// 获取dom数组中第一个对象的属性值
$(选择器).attr("属性名")
// 对数组中所有dom对象的属性设定值
$(选择器).attr("属性名","值")

 

val,text,attr例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数</title>
    <script src="jquery-3.7.0.js"></script>
</head>
<body>
    <script>
        $(function(){
            $("#btn1").click(function(){
                // 获取数组中第一个的value值
                console.log($(":text").val())
            })
            $("#btn2").click(function(){
                // 给数组中所有的赋值
                $(":text").val("hello")
                
            })
            $("#btn3").click(function(){
                // 获取所有dom的text值,连在一起
                console.log($("div").text())
            })
            $("#btn4").click(function(){
                // 设置所有dom的text值,连在一起
                $("div").text("新的div的值")
            })
            $("#btn5").click(function(){
                // 读取指定属性的值
                console.log($("img").attr("src"))
            })
            $("#btn6").click(function(){
                // 读取指定属性的值
                $("img").attr("src","img/img2.jpg")
                console.log($("img").attr("src"))
            })
        })
    </script>
    <input type="text" name="" id="" value="貂蝉">
    <input type="text" name="" id="" value="吕布">
    <input type="text" name="" id="" value="刘备">
    <br>
    <div>第一个div</div>
    <div>第二个div</div>
    <img src="img/img1.jpg" alt="img1" srcset="">
    <input type="button" id="btn1" value="获取第一个文本框的值">
    <input type="button" id="btn2" value="赋值所有文本框的值">
    <input type="button" id="btn3" value="获取所有div的文本内容">
    <input type="button" id="btn4" value="设置所有div的文本内容">
    <input type="button" id="btn5" value="读取src属性的值">
    <input type="button" id="btn6" value="设置src属性的值">
</body>
</html>

 

 4、remove

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

 5、empty

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

 6、append

// 为数组中所有dom对象添加子对象
$(选择器).append("<div>动态添加一个div</div>")

 7、html

设置或者返回被选中元素的内容(相当于innerHTML)

// 无参形式,获取dom数组中第一个元素的内容
$(选择器).html()
// 有参形式,设置dom数组中所有元素的内容
$(选择器).html(值)

 

remove,empty,append,html例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>函数</title>
    <script src="jquery-3.7.0.js"></script>
</head>
<body>
    <script>
        $(function(){
            $("#btn1").click(function(){
                $("#zoon").remove()
            })
            $("#btn2").click(function(){
                $("#zhou").empty()
            })
            $("#btn3").click(function(){
                $("#fatherDiv").append("<button>一个按钮</button>")
            })
            $("#btn4").click(function(){
                console.log($("span").html())
                // 使用text()的话只有文本
            })
            $("#btn5").click(function(){
                $("span").html("我是新的<b>数据</b>")
            })
        })
    </script>
    <select name="" id="zoon">
        <option value="老虎">老虎</option>
        <option value="狮子">狮子</option>
        <option value="包子">包子</option>
    </select>
    <select name="" id="zhou">
        <option value="亚洲">亚洲</option>
        <option value="欧洲">欧洲</option>
        <option value="美洲">美洲</option>
    </select>
    <br>
    <div id="fatherDiv">
        父div
    </div>
    <span>我是span标签<b>span</b></span>
    <br>
    <span>我是span标签么</span>
    <input type="button" id="btn1" value="删除父和子对象">
    <input type="button" id="btn2" value="删除子对象">
    <input type="button" id="btn3" value="给div增加子对象">
    <input type="button" id="btn4" value="获取第一个dom的文本值">
    <input type="button" id="btn5" value="设置span的所有dom的值">
</body>
</html>

 

 8、each

对数组,json,dom数组等的遍历循环,对每个元素调用一次处理程序

$.each(要遍历的对象,function(index,element){
    // 处理程序
})
jQuery对象.each(function(index,element){
    // 处理程序
})
// index 数组的下标索引
// element 数组的对象

 

each例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>each函数</title>
    <script src="jquery-3.7.0.js"></script>
</head>

<body>
    <script>
        $(function () {
            // 遍历数组
            $("#btn1").click(function () {
                var arr = [1, 2, 3]
                $.each(arr, function (index, element) {
                    console.log(index, element)
                })
            })
            // 遍历json
            $("#btn2").click(function () {
                var json = { "name": "张三", "age": 20 }
                $.each(json, function (key, value) {
                    console.log(key + "的值是 " + value)
                })
            })
            // 遍历dom数组
            $("#btn3").click(function () {
                var domArr = $(":text")
                $.each(domArr, function (index, e) {
                    console.log(index, e.value)
                })
            })
            // 遍历jQuery对象
            $("#btn4").click(function () {
                $(":text").each(function (i, n) {
                    console.log(i, n.value)
                })
            })
        })
    </script>
    <input type="text" name="" id="" value="text1">
    <input type="text" name="" id="" value="text2">
    <input type="text" name="" id="" value="text3">
    <input type="button" id="btn1" value="遍历数组">
    <input type="button" id="btn2" value="遍历json">
    <input type="button" id="btn3" value="遍历dom数组">
    <input type="button" id="btn4" value="遍历jquery对象">
</body>

</html>

 

标签:jQuery,function,函数,dom,--,text,选择器,数组,click
From: https://www.cnblogs.com/hyy-0/p/17602861.html

相关文章

  • 码风
    我的码风前后经历了两次变革:\(1.\quad2020\sim2023.8.1\)\(2.\quad2023.8.1\simtoday\)之前的码风:#include<iostream>#include<cstring>#include<cstdio>#include<cmath>#include<algorithm>#include<stack>#include<queue&......
  • minio python sdk使用
    如下fromminioimportMiniofromminio.errorimportS3Errorimportlogginglogging.basicConfig(filename='logs/myProgramLog.log',level=logging.INFO,format='%(asctime)s-%(levelname)s-%(message)s')classBucket......
  • Java入门题-20!阶乘
    重要:由于阶乘的特殊性,结果可能过大,最好使用存储范围更大的long处理问题,而不是使用int、short、byte代码:主要利用循环语句解决阶乘问题longtotal=1;for(inti=1;i<21;i++){total*=i;}System.out.println(total);......
  • 如果通过POWER BI爬取网页信息
    问题描述:同事想收集电商网站上面的竞品信息,再通过使用POWERBI作为分析工具,进行相关的分析。今天过来找我询问,是否有合适的工具可以方便抓取到页面上面的竞品信息? 解决方案:通过POWERBIDesktop自带功能实现抓取网页上面的信息。优势就是出成果快。 再给同事......
  • 更安全的验证码=AIGC+集成环境信息检测!
    黑灰产经常采用批量撞库方式登录用户账号,然后进行违法违规操作。黑灰产将各种方式窃取账号密码导入批量登录软件,登录软件自动尝试账号登录。邮箱服务器检测到异常登录请求,会下发验证码进行安全验证,但是黑灰产能够自动破解简单验证码,完成撞库登录过程。整个过程完全自动化操作,无需......
  • Linux2
    目录切换相关命令(cd/pwd)cd切换工作目录当Linux终端(命令行)打开的时候,会默认以用户的HOME目录作为当前的工作目录。我们可以通过cd命令,更改当前所在的工作目录语法:cd[Linux路径]cd命令无需选项,只有参数,表示要切换到哪个目录下cd命令直接执行,不写参数,表示回到用户的HOME......
  • slurm 不支持--share 选项-解决方法
    提交脚本含有--share的会报错,反复安装slurm尝试都失败sbatchslurm_scriptsbatch:unrecognizedoption'--share'Try"sbatch--help"formoreinformation 结果是:slurm自从14.0后就不支持share了,改用--oversubscribe,这样就允许一个节点同......
  • Linux常用命令(工作)
    1、查询相关服务例:ps-ef|grepjava2、切换用户默认切换管理员:su切换至指定用户:suname3、给用户赋予文件夹权限例:chown -Rname:name/home/4、ll与lsls:查看当前目录下的文件ll:查看当前目录下的文件详情5、查看当前位置pwd6、修改文......
  • uniapp底部弹出层
    methods:{changeRelation(){uni.showActionSheet({itemList:['妻子','丈夫','妈妈','爸爸','爷爷','奶奶','儿子','女儿','兄弟姐妹','亲......
  • dart的语法
    dart的语法main方法main(){print("有返回值");}voidmain(){print("没有返回值");}字符串的定义的方式//字符串定义的几种方式varstr1="thisisstr1";varstr2="thisisstr2";//2.字符串的拼接2种varstr3=str1+str2;print("$str1......