jQuery小结三

jQuery对元素属性的操作

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

固有属性就是元素自带的属性，比如元素里的href 的 src 的type

获取属性语法：

prop('属性')

设置属性语法：

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

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

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

获取属性语法：

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

设置属性语法：

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

数据缓存data()

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

附加缓存数据语法

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

获取缓存数据语法

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

获取元素内部文本

123


获取元素内部html文本
console.log($('div').html());   // 123
 
获取元素内部纯文本
console.log($('div').text())  // 123
 
修改元素内步html文本
$('div').html('546
') 
 
修改元素内部纯文本
$('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>1div>
<div>2div>
<div>3div>
<div>4div>
<div>5div>
 
<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 = $("
")

添加到页面中

内部添加元素

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

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

外部添加元素

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

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

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

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

删除元素：

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

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

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

发布信息的案例


html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <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 = $('
' + vall + ' 删除
')

$('ul').prepend(li)
$('li').slideDown(200)
$('.txt').val('')
}
}
})
$('ul').on('click','a',function () {
$(this).parent().slideUp(200,function(){
$(this).remove()
})
})
script>
div>
body>
html>