jQuery操作属性方法总结

原创 2018-11-10 15:21:07 163
摘要:<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <script src="前端课件/jQuery/jquery-3.3.1.min.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="前端课件/jQuery/jquery-3.3.1.min.js"></script>
    <style type="text/css">
    /*.box{color: red;}
    .main{font-size: 24px;font-weight: bold;}*/
    .bb{color: red;}
    </style>
</head>
<body>
    <script>
    //jQuery的操作属性其原理还是对于DOM的操作
    //通过对象的关系,对节点树中的元素的属性进行操作的方法有以下

    //addClass()该方法向被选中的元素添加一个或多个类
    //removeClass()该方法从被选中的元素中移除一个或多个类
    //attr()该方法设置或者返回被选中元素的属性值
    //removeAttr()该方法从被选中的元素中移除属性
    //hasClass()该方法检查被选中的元素是否包含指定的class
    //toggleClass()该方法对被选中元素进行添加删除类的切换操作
    //设置内容
    //text()该方法返回或者设置选中的元素的文本内容
    //html()该方法返回或者设置被选中的元素的内容(类似innerHTML 可以包括html标签)
    //val()该方法返回或者设置被选中元素的值
        $(document).ready(function(){
              // $('p').addClass('box main')  //多个类空格隔开
              // $('p').removeClass('box main')
              // alert($('p').attr('title'))
              // $('p').attr('title','你好')
              // alert($('p').attr('title'))
              // $('button').click(function(){
              // $('img').removeAttr('src')
              // })
              // $('button').click(function(){
              // alert($('div').hasClass('one'))
              // })
              // $('button').click(function(){
              //     $('span,b,p').toggleClass('bb')
              // })
              // alert($('span').text())
              // $('span').text('大家好  我是小西瓜')
              // alert($('p').html())
              $('p').html('<h1>helloworld!</h1>')
              // alert($('input').val())
              $('input').val('我是被修改的值')
        })
    </script>
    <!--<p title="content">PHP中文网</p>
    <img src="image/img.jpg" style="width: 300px;">
    <button>点击删除图片</button>
    <div class="one">你好</div>
    <button>点击</button>-->
    <span>大家好  我是小袜子</span>
    <b>欢迎大家</b>
    <p>php中文网</p>
    <button>点击切换</button>
    <input type="text" name="" value="我是元素的值">

</body>
</html>

主要学习到了控制class、控制属性、控制文本元素内容、控制值的方法,addClass()、removeClass()
一个是添加class一个是移除class,attr()、removeAttr()一个是设置返回属性一个是移除属性,hasClass()
是检测是否存在class,返回值是true和false,toggleClass是添加和删除class,text()返回或设置文本,html()返回或设置元素,val()是返回或设置值。

发布手记

热门词条