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

2019年10月25日 08:47:25阅读数：671博客 / 渊的博客 / JQuery

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

批改状态：合格

老师批语：dom操作是最重要的应用场景

版权申明：本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论

文明上网理性发言，请遵守新闻评论服务协议

0 条评论
  • 博主信息
    渊的博客
    渊的博客
    博文
    27
    粉丝
    0
    评论
    0
    访问量
    21366
    积分：0
    P豆：56
    最新更新
    MVC运行原理-2019年10月31日2019-11-01
    ajax表单处理-2019年10月30日2019-10-30
    ajax原理与使用(ajax)2019年10月29日2019-10-30
    Jquery(文档处理、筛选、ajax)2019年10月28日2019-10-29
    javascript基础与Jquery(选择器)2019年10月25日2019-10-27
    javascript基础与Jquery(添加移除属性，添加样式，移除样式)2019年10月24日2019-10-25
    javascript基础与Jquery(方法，对象，JQ基础操作)2019年10月24日2019-10-24
    javascript基础(数组，循环语句，常用函数，跳转，事件)2019年10月23日2019-10-23
    博文分类
    前端开发10篇
    PHP基础8篇
    javascript3篇
    JQuery5篇
    Laravel1篇
    热门文章
    php基础之数组（一维数组，二维数组，三维数组）2956
    前端框架布局（仿荔枝微课前端)-2019年9月12日1531
    选择器与内外边距使用方法（margin,padding使用）-2019年9月4日1138
    php-练习正则表达式练习-2019年10月17日957
    前端封装原理与知识点（HTML手册)-2019年9月11日844
    CSS布局原理与实现（消除浮动影响，绝对定位相对定位与布局)-2019年9月4日839
    会话实战（网页派发器）2019年9月27日791
    javascript基础(数组，循环语句，常用函数，跳转，事件)2019年10月23日750
    提交
    首页视频教程原生手册编程词典

    Copyright 2014-2020 //m.m.sbmmt.com/
    All Rights Reserved PHP中文网 版权所有

    皖B2-20150071-9皖公网安备34010402701654号

    如果有侵犯您的版权或其他权益，请联系邮箱: a@php.cn