属性操作练习

原创2018-12-25 17:03:5863
摘要:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>操作属性</title> <script type="text/javascript" src="jquery-3.3.1.min.js">

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>操作属性</title>

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

<style type="text/css">

.box{color:red;}

.bb{color: red;}

</style>

</head>

<body>

<script type="text/javascript">

$(document).ready(function(){

 

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

// $('p').removeClass('box')//removeClass()移除类

// alert($('p').attr(title))//返回元素属性值

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

// $('img').removeAttr('src')

// })                          //removeAttr()移除元素属性值

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

//  alert($('div').hasClass('one'))    //hasClass()检查元素是否含有指定class,返回值为布尔值

//  })          

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

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

// })                                      //toggleClass()添加切换class类


//$('span').text('hello world')         //text()返回/设置元素文本内容

//$('p').html()         //html()返回元素内容/标签

//$('p').html('<h1>wowowo</h1>')         //html()设置元素内容

$('input').val('我是被修改过的')         //返回/修改value的值


})


</script>

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

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

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

<div class="one">您好</div>

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

<span>大家好</span>

<b>欢迎你</b>

<p>PHP中文网</p>

<button>点击切换</button>

<input type="text" name="" value="我是返回值">


</body>

</html>

总结:先获取元素然后用方法设置属性,click事件嵌套写法有些繁琐

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

 $('img').removeAttr('src')

 })


发布手记

热门词条