jQuery小结三

benlalagang

已于 2022-08-06 11:52:50 修改

阅读量193

点赞数

分类专栏： jquery 文章标签： jquery javascript 前端

于 2022-08-06 11:52:42 首次发布

本文链接：https://blog.csdn.net/benlalagang/article/details/126190823

版权

jquery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

jQuery对元素属性的操作

设置或获取元素的固有属性prop()

固有属性就是元素自带的属性，比如<a>元素里的href <img>的 src <input>的type

获取属性语法：

prop('属性')

设置属性语法：

prop('属性','属性值')

设置或获取元素的自定义属性attr()

固有属性就是元素自带的属性，比如给div添加 index = '1'

获取属性语法：

attr('属性') // 类似原生 getAttribute()

设置属性语法：

attr('属性','属性值') // 类似原生 setAttribute()

数据缓存data()

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除

附加缓存数据语法

data("name","value") // 向被选元素附加数据

获取缓存数据语法

data("name")// 向被选元素获取数据

获取元素内部文本

<div>

<span>123</span>

</div>

<input type="text" value="这里填写你的年龄">

获取元素内部html文本
console.log($('div').html());   // <span>123</span>

获取元素内部纯文本
console.log($('div').text())  // 123

修改元素内步html文本
$('div').html('<p>546</p>') 

修改元素内部纯文本
$('div').text('456')

获取输入框的内容
console.log($('input').val()) // 这里填写你的年龄

修改输入框的内容
$('input').val('789')

jQuery each方法

each 主要是进行遍历对元素进行创建、添加、删除元素等操作。

jQuery隐式迭代是对同一类元素做了同样的操作。如果要给同一类元素做不同的操作，就需要用到遍历。

each() 方法遍历匹配每一个元素主要用DOM处理 each每一个

里面的回调函数有2个参数：index是每个元素的索引号，domEle 是每个DOM元素对象，不是jquery对象

使用jquery方法需要给这个dom元素转换为jquery对象$(domEle)

语法1

$("div").each(function(index,domEle){xxxx})

语法2 主要用来遍历数据

$.each(object,function(index,element){xxxx})

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

<script>
  let colorArr = ['#41a124','#f35','#457ca4','#a5b7a4','#845123'],
    uuj = {
      '名字':'方硕',
      '年龄':'19',
      '身高':'191cm',
    },
    sum = 0;
  $('div').each(function (i,ele) {
    console.log(i)
    $(ele).css('color',colorArr[i])
    sum += parseFloat($(ele).text())

  })
  sum.toFixed(2)
  console.log(sum);

  // 处理数组 i 是索引值  ele是对应内容
  $.each(colorArr,function (i,ele) {
    console.log(ele)
  })

  // 处理对象 i 是key  ele是 value
  $.each(uuj,function (i,ele) {
    console.log(ele)
    console.log(i);
  })
</script>

jQuery对元素的动态操作

创建元素

let abc = $("<li></li>")

添加到页面中

内部添加元素

$("ul").append(abc) // 内部添加并且放到内容的最后面

$("ul").prepend(abc) // 内部添加并且放到内容的最前面

外部添加元素

$("ul").after("内容") // 把内容放入元素后面

$("ul").before("内容") // 把内容放入元素前面

内部添加元素，生成之后它们是父子关系

外部添加元素，生成之后它们是兄弟关系

删除元素：

$('div').remove()//删除匹配的元素（自身）

$('div').empty()//删除元素内部所有的子节点

$('div').html('')// 清空匹配的元素内容

发布信息的案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="jquery-3.6.0.js"></script>
  <link rel="stylesheet" href="../Double%20thread/initialize.css">
  <style>
    #weobo{
      width: 720px;
      height: auto;
      padding: 24px;
      margin: 0 auto;
      border: 1px solid #cccccc;
      position: relative;
    }

    .txt{
      width: 100%;
    }

    button{
      position: absolute;
      right: 32px;
      top: 200px;
    }

    ul{
      transition: all 0.2s ease;
    }

li{
  padding: 6px 12px;
  display: none;
  position: relative;
}

li a{
  position: absolute;
  right: 0;
  top: 4px;
}

   a{
     cursor: pointer;
   }
  </style>
</head>
<body>
<div id="weobo">
  <p>发布微博</p>
  <textarea name="" id="" cols="30" rows="10" class="txt"></textarea>
  <button>发布</button>
  <ul></ul>

  <script>
    $('button').on({
      click:function () {
        let vall = $('.txt').val()
        if (vall == '') {
          alert("空的不能发布")
          return false
        } else {
          let li = $('<li>' + vall + ' <a>删除</a></li>')
          $('ul').prepend(li)
          $('li').slideDown(200)
          $('.txt').val('')
        }
      }
    })

    $('ul').on('click','a',function () {
        $(this).parent().slideUp(200,function(){
          $(this).remove()
        })
    })
  </script>
</div>
</body>
</html>