posts - 501,comments - 0,views - 23683

视频

text()得到文本BBBBB,html()得到标签BBBBB

attr(): 专门操作属性值为非布尔值的属性。
prop():专门操作属性值为布尔值的属性。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>10_属性</title>
</head>
<body>

<div id="div1" class="box" title="one">class为box的div1</div>
<div id="div2" class="box" title="two">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<ul>
  <li>AAAAA</li>
  <li title="hello" class="box2">BBBBB</li>
  <li class="box">CCCCC</li>
  <li title="hello">DDDDDD</li>
  <li title="two"><span>BBBBB</span></li>
</ul>

<input type="text" name="username" value="guiguClass"/>
<br>
<input type="checkbox">
<input type="checkbox">
<br>
<button>选中</button>
<button>不选中</button>

<!--
1. 操作任意属性
   attr()
   removeAttr()
   prop()
2. 操作class属性
   addClass()
   removeClass()
3. 操作HTML代码/文本/值
   html()
   val()
-->

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
   需求:
   1. 读取第一个div的title属性
   2. 给所有的div设置name属性(value为atguigu)
   3. 移除所有div的title属性
   4. 给所有的div设置class='guiguClass'
   5. 给所有的div添加class='abc'
   6. 移除所有div的guiguClass的class
   7. 得到最后一个li的标签体文本
   8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
   9. 得到输入框中的value值
   10. 将输入框的值设置为atguigu
   11. 点击'全选'按钮实现全选
   12. 点击'全不选'按钮实现全不选
   */
  $(function () {
//  1. 读取第一个div的title属性
    // console.log($('div:first').attr('title'))
//  2. 给所有的div设置name属性(value为atguigu)
    // $('div').attr('name', 'atguigu')
//  3. 移除所有div的title属性
    // $('div').removeAttr('title')
//  4. 给所有的div设置class='guiguClass'
    // $('div').attr('class', 'guiguClass')
//  5. 给所有的div添加class值(abc)
    // $('div').addClass('abc')
//  6. 移除所有div的guiguClass的class
    // $('div').removeClass('guiguClass')
//  7. 得到最后一个li的标签体文本
    // console.log($('li:last').html())
//  8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
    // $('li:first').html('<h1>mmmmmmmmm</h1>')
//  9. 得到输入框中的value值
    // console.log($(':text').val())
//  10. 将输入框的值设置为atguigu
    // $(':text').val('atguigu')
//  11. 点击'全选'按钮实现全选
    $('button:first').click(function () {
      $(':checkbox').prop('checked', true)
    })
//  12. 点击'全不选'按钮实现全不选
    $('button:last').click(function () {
      $(':checkbox').prop('checked', false)
    })
  })

</script>
</body>
</html>

posted on   垂序葎草  阅读(33)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示