search

博客列表 >javascript基础与Jquery(添加移除属性，添加样式，移除样式)2019年10月24日

javascript基础与Jquery(添加移除属性，添加样式，移除样式)2019年10月24日

渊的博客
渊的博客原创
2019年10月25日 08:47:25874浏览

1、元素选择器

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>2019年10月24日——选择器</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
</body>
</html>
<script type="text/javascript">
var res=$('button');
console.log(res);
$.each(res,function(i,v){
    console.log(v);
})
var res=$("button").length;
console.log(res);
</script>

运行实例 »

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


运行效果图

元素选择器.png


2、动态添加样式

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>2019年10月24日——选择器</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>

<p></p>
<button onclick="add_style()">添加样式</button>
</body>
</html>
<script type="text/javascript">
    function add_style(){
        $('p').attr('flag','123');
    }
</script>

运行实例 »

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


运行效果图

动态样式.png

3、attr添加属性

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>2019年10月24日——选择器</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>

<p></p>
<input id="input_chk" flag='true' type="checkbox" />
<button onclick="chk()">选中</button>

</body>
</html>
<script type="text/javascript">
   function chk(){
    $('#input_chk').attr('checked','checked');
    }
</script>

运行实例 »

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


运行效果图

attr.png

4、prop添加属性

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>2019年10月24日——选择器</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>

<p></p>
<input id="input_chk" flag='true' type="checkbox"  />
<button onclick="chk()">选中</button>
<button onclick="ischk()">是否选中</button>

</body>
</html>
<script type="text/javascript">
function chk(){
    $('#input_chk').prop('checked','true');
}
function ischk(){
    var res=$('#input_chk').prop('checked');
    console.log(res);
}

</script>

运行实例 »

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


运行效果图

prop.png

5、removeAttr删除属性

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>2019年10月24日——选择器</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>

<input id="input_chk" flag='true' type="checkbox" width="500px" />
<button onclick="remove()">移除flag</button>
</body>
</html>
<script type="text/javascript">
function remove(){
    $('#input_chk').removeAttr('flag');
}
</script>

运行实例 »

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


运行效果图

removeAttr.png

6、addClass

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>2019年10月24日——选择器</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <style>
        .myclass{width:100px;height:100px;background: red;}
        .radius{border-radius:50%;}
    </style>
</head>
<body>
<div class="myclass"></div><br>
<button onclick="add()">addclass</button>

</body>
</html>
<script type="text/javascript">
    function add(){
        $('div').addClass('radius');
      }
</script>

运行实例 »

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


运行效果图

addclass.png


7、removeClass

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>2019年10月24日——选择器</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <style>
        .myclass{width:100px;height:100px;background: red;}
        .radius{border-radius:50%;}
    </style>
</head>
<body>
<div class="myclass radius"></div><br>
<button onclick="remove()">remove</button>
</body>
</html>
<script type="text/javascript">
   function remove(){
        $('div').removeClass('radius');
    }
</script>

运行实例 »

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


运行效果图

removeclass.png


8、toggleClass

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>2019年10月24日——选择器</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <style>
        .myclass{width:100px;height:100px;background: red;}
        .radius{border-radius:50%;}
    </style>
</head>
<body>
<div class="myclass"></div><br>
<button onclick="toggle()">toggleclass</button>
</body>
</html>
<script type="text/javascript">
     function toggle(){
        $('div').toggleClass('radius');
    }

</script>

运行实例 »

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


运行效果图

toggleClass.png


9、html方法和text方法

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>2019年10月24日——选择器</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="myclass">
    <span>wwwbaiducom</span>
</div>
<button onclick="get_html()">获取html</button>
</body>
</html>
<script type="text/javascript">
function get_html(){
    var res=$('.myclass').text();
    var resa=$('.myclass').html();
     console.log(res);
    console.log(resa);
}
</script>

运行实例 »

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


运行效果图

htmltext.png

10、获取val值

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>2019年10月24日——选择器</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>

<input type="text" id="username" /><br>
<button onclick="get_username()">获取val值</button>

</body>
</html>
<script type="text/javascript">
  function get_username(){
        var username=$('#username').val();//设置写内容，获取不写
        alert(username);
    }
</script>

运行实例 »

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


运行效果图

val.png


11、width与height

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>2019年10月24日——选择器</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <style>
        .myclass{width:100px;height:100px;background: red;}
        .radius{border-radius:50%;}
    </style>
</head>
<body>
<div class="myclass"><span style="color:green;">wwwphpcn</span></div><br>
<button onclick="get_size()">获取DIV的宽度和高度</button>
</body>
</html>
<script type="text/javascript">
   function get_size(){
        var width=$('.myclass').width();
        var height=$('.myclass').height();
        console.log('宽度：'+width);
        console.log('高度：'+height);
    }
</script>

运行实例 »

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


运行效果图

widthheight.png


13、settimer 与settimeout

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>2019年10月24日——选择器</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <style>
        .myclass{width:100px;height:100px;background: red;}
        .radius{border-radius:50%;}
        button{width:150px;height: 80px;background: #ccc;radius:15px;}
    </style>
</head>
<body>
<button id="btn" onclick="clickme()">点击获取验证码</button>
</body>
</html>
<script type="text/javascript">
setTimeout(function(){
    clickme()
},5000)
function clickme(){
    var res=$('#btn').text();
    if(res=='点击获取验证码'){
    //启动倒计时
    set_timer();
}

 function set_timer(){
    $('#btn').attr('disabled',true);
    var i=5;
    var timer=setInterval(function(){
        $('#btn').text(i);
        if(i<=0){
          $('#btn').text('点击获取验证码');
          $('#btn').removeAttr('disabled',false);
          //清除定时器
          clearInterval(timer);
        }
        i--;
    },1000);
}
}
</script>

运行实例 »

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


运行效果图

settimer.png


14、多个选择器操作

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>2019年10月24日——选择器</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <style>
        .myclass{width:100px;height:100px;background: red;}
        .radius{border-radius:50%;}
        button{width:150px;height: 80px;background: #ccc;radius:15px;}
    </style>
</head>
<body>
<div class="myclass"><span style="color:green;">wwwphpcn</span></div><br>

    <div class="radius"></div>
    <button onclick="get_input_div()">get_input_div</button>
    <input id="username" type="text"  placeholder="abcde" >
    <input id="password" type="text"   >
</body>
</html>
<script type="text/javascript">

  function get_input_div(){
        var res=$('div,input');
        $.each(res,function(i, v) {
            console.log(v);
        });
    }
</script>

运行实例 »

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


运行效果图

多个选择器.png


15、层级选择器

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>2019年10月24日——选择器</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
    <style>
        .myclass{width:100px;height:100px;background: red;}
        .radius{border-radius:50%;}
        button{width:150px;height: 80px;background: #ccc;radius:15px;}
    </style>
</head>
<body>
<div class="myclass">
    <span style="color:green;">wwwphpcn</span><br>
    <span style="color:green;">abcdefg</span>
</div>
    <button onclick="get_span()">层级选择器</button>
</body>
</html>
<script type="text/javascript">
    function get_span(){
       var res=$('.myclass span').text();
        console.log(res);
    }
</script>

运行实例 »

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


运行效果图

层级选择器.png

上一条：js第四天作业 继续jquery下一条：JS学习总结（2）数组和常用事件——2019年10月22号20:00分
添加移除属性，添加样式，移除样式
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多