操作属性的方法

Original 2018-11-13 19:27:03 218
abstract:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>jQuery操作属性的方法</title> <script type="text/javascript" src="jquery-3.3.1.min.js&

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery操作属性的方法</title>

<script type="text/javascript" src="jquery-3.3.1.min.js"></script>

<style type="text/css">

/*.box{color: red;}

.main{font-size: 40px;font-weight: bold;}

.aa{ list-style:none;background: pink;height: 30px;width: 400px; }*/

    .bb{color: red;}

</style>

</head>

<body>

<!-- <p title="content">PHP中文网</p>

<img src="images/1.jpg">

<button>点击删除图片</button>

<div class="">你好</div>

<button>点击</button> -->

<script type="text/javascript">

// $(document).ready(function(){

// $('p').addClass('box main') //d多个类,用空格隔开

 //        $('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'))

 //        })

// })

// jQuery的操作属性其原理还是对于DOM的操作

// 通过对象的关系,对节点树中的元素的属性进行操作的方法有以下:

    

// addClass() 该方法向被选中的元素添加一个或者多个类

// removeClass() 该方法从被选中的元素移除一个或者多个类

// attr() 该方法设置或者返回被选中元素的属性值

// removeAttr() 该方法从被选中的元素中移除属性

// hasClass() 该方法检查被选中的元素是否包含指定class

// toggleClass()该方法对被选中元素进行添加/删除类的切换操作

// 设置内容:

// text()  该方法返回或者设置被选中的元素的文本内容

     //html() 该方法返回或者设置被选中的元素的内容(类似innerHTML 可以包括html标签)

// val() 该方法返回或者设置被选元素的值

    $(document).ready(function(){

      // $('button').click(function(){

      // $('span,b,p').toggleClass('bb')

      // })

      // alert($('b').text())

      $('span').text('大家好,我是灭绝')

      $('b').text('hello word')


      // alert($('p').html())

      $('p').html('<h1>helloworld!</h1>')

      // alert($('input').val())

      $('input').val('我是被修改的值')

    })


</script>

<span>大家好 我是小师太</span><br>

<b>欢迎来到</b>

<p>php中文网</p>

<button>点击切换</button>

<input type="text" name="" value="我是元素的值">

</body>

</html>


Release Notes

Popular Entries