简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > jQuery的基本操作 20191024
Blogger Information
Blog 30
fans 1
comment 0
visits 24016
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery的基本操作 20191024
阿乎乎的学习
Original
713 people have browsed it

jQuery获取元素个数从1.8版本使用length属性替代size()方法

attr('属性名','属性值')为dom元素添加新的属性和值，可以随意添加，并不影响。当attr()只写一个参数时，获取dom元素属性值，填两个参数时就是设置属性值。removeAttr()删除一个属性。
prop('属性名','属性值')的用法跟attr()类似。prop()获取属性值时只能获得到通过prop()方法添加的属性

感觉目前attr()和prop()最直观的区别在于，prop()方法添加非dom元素本身属性的话不会显示，而且prop()方法添加的dom元素本身属性使用removeProp()方法删除不了,但是可以使用removeAttr()方法删除

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <title>jQuery学习</title>
</head>
<body>
<p class="p" id="p">id P段落</p>
<p class="p">p段落</p>
<div class="div" id="div">id DIV段落</div>
<div class="div"> 段落</div>
<img alt="" id="img">
<button onclick="attr()">attr添加</button>
<button onclick="removeAttr()">attr移除</button>
<button onclick="prop()">prop添加</button>
<button onclick="removeProp()">prop移除</button>
<script>
    //这个位置发现attr添加的固有属性能够移除，
    alert($('p').length);
    function attr(){
        $('#img').attr('src','./im.jpg');
        console.log($('#img').attr('src'));
        $('#p').attr('flag','旗帜');
        console.log($('#p').attr('flag'));
    }
    function removeAttr(){
        $('#img').removeAttr('src');
        console.log($('#img').attr('src'));
        $('#p').removeAttr('flag','旗帜');
        console.log($('#p').attr('flag'));
    }
    function prop(){
        $('#img').prop('src','./im.jpg');
        console.log($('#img').prop('src'));
        $('#p').prop('flag','旗帜');
        console.log($('#p').prop('flag'));
    }
    function removeProp(){
        $('#img').removeProp('src','./im.jpg');
        console.log($('#img').prop('src'));
        $('#p').removeProp('flag','旗帜');
        alert($('#p').prop('flag'));
    }
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

addClass()和removeClass()一看就知道是为dom元素添加类和移除dom元素的类，toggleClass()可以判断有则移除，没有则添加。

text(),当有参数时为修改标签内的文本，没有时是获取标签文本。html()是获取元素内的html文本。
使用setInerval(func,1000)来设置一个定时器,使用clearInerval()清除定时器。不清除的话会一直执行

setTimeOut(func,1000)延迟1000毫秒后执行函数，只执行一次

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <title>jQuery学习</title>
    <style>
        .div{
            width: 200px;
            height:200px;
            background-color: #2aabd2;
        }
        .border{
            border:1px solid #008856;
            border-radius: 5%;
            color:red;
        }
    </style>
</head>
<body>
    <div class="div">这是一个div段落</div>
    <button onclick="addClass()">add类样式</button>
    <button onclick="removeClass()">remove类样式</button>
    <button onclick="toggleClass()">toggle类样式</button>
    <!--计时器-->
    <button onclick="clickme()" id="clickme">获取验证码</button>
    <button onclick="click()" id="click">获取验证码</button>
    <script>
        function addClass(){
            $('.div').addClass('border');
        }
        function removeClass(){
            $('.border').removeClass('border');
        }
        function toggleClass(){
            $('.div').toggleClass('border');
        }
        /*setTimeout(function(){
            clickme();
        },1000);   // 自动执行方法*/

        function clickme(){
            if($('#clickme').text()=='获取验证码'){
                timer();
            }
        }
        //设置定时器
        function timer(){
            $('#clickme').attr('disabled',true);
            var i=5;
            var time=setInterval(function(){
                $('#clickme').text(i);
                if(i<=0){
                    $('#clickme').text('获取验证码');
                    $('#clickme').removeAttr('disabled');
                    //清除定时器，否则会一直计时下去
                    clearInterval(time);
                }
                i--;
            },1000);
        }
    </script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

val()一般用来获取表单的值。也可以设置表单的值

width()和height()  获取和设置元素宽度和高度，用法和text()类似。

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <title>Document</title>
    <style>
        #div{
            width: 200px;
            height:200px;
            background-color: #2aabd2;
        }
    </style>
</head>
<body>
<input type="text" placeholder="请输入文本" id="user">
<button onclick="user()">获取</button>
<button onclick="addUser()">添加</button>
<div id="div">这是一个DIV容器</div>
<button onclick="wir()">获取div宽高</button>
<button onclick="wic()">修改div宽高</button>
<script>
    function user(){
        alert($('#user').val());
    }
    function addUser(){
        $('#user').val('amdin');
    }
    function wir(){
        var width=$('#div').width();
        var height=$('#div').height();
        alert('div容器的宽度是'+width+'高度是'+height);
    }
    function wic(){
        $('#div').width(500);
        $('#div').height(500);
        var width=$('#div').width();
        var height=$('#div').height();
        alert('div容器的宽度是'+width+'高度是'+height);
    }
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：qualified

Teacher's comments：属性操作, 有多个方法, 要留意他们之间的区别, 很多情况下可以通用
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！