jQuery 操作属性

jQuery 操作属性

1.设置或获取元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性（input 的 type）

1. 获取属性语法

   ​ prop(‘属性’)

2. 设置属性语法

   ​ prop(‘属性’，‘属性值’)

// element.prop('属性名')  获取元素固有的属性值
// element.prop('属性名','属性值')  设置属性值

2.设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性 （div添加 index=‘1’ ）

1. 获取属性语法

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

2. 设置属性语法

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

---

jQuery 内容文本值

1.普通元素内容 html ( ) （相当于原生innerHTML）

• html() //获取元素的内容
• html(‘内容’) //设置元素的内容

2.元素文本内容 text ( ) （相当于原生innerText）

• text() //获取元素的内容 不含标签
• text(‘内容’) //设置元素的文本内容

3.表单的值 val() （相当于原生value）

• val() //获取表单的值
• val(‘内容’) //设置表单的值

---

jQuery 元素操作

• 遍历元素

语法1：$(‘div’).each(function(index,domEle){xxx;})

1. each()方法遍历匹配到的每一个元素。主要用DOM处理，each每一个
2. 里面的回调函数有两个参数：index是每个元素的索引号，domEle是每个DOM元素对象，不是jQuery对象
3. 所以想要使用jQuery的方法，需要给这个dom元素转换为jQuery对象 $(domEle);

<div>1</div>
<div>2</div>
<div>3</div>

$(function(){
    let arr = ['red','green','blue'];
    $('div').each(function(index,domEle){
        //回调函数的第一个参数一定是索引号  可以自己指定索引号的名称
        console.log(index);   // 0 1 2
        //回调函数第二个参数一定是dom元素对象
        console.log(domEle);  // <div>1</div>  <div>2</div>  <div>3</div>
        
        //将domEle改变为jQuery对象  $(dom对象)
        //遍历改变文字颜色
        $(domEle).css('color',arr[index]);
    })
})

语法2：$.each(object,function(index , element){xxx;})

1. $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2. 里面的函数有两个参数：index是每个元素的索引号；element遍历内容

数组：
let arr = ['red','green','blue'];
$.each(arr,function(i,ele){
    console.log(i);
    console.log(ele);
})
>>控制台输出 0 red 1 green 2 blue
---------------------------------------------------------------------------------------------------------
对象：
$.each({
    name:'小米',
    age:18
},function(i,ele){
    console.log(i)  	 // 属性名  name，age
    console.log(ele)	 // 属性值 '小米'，18
})
>>控制台输出 name '小米' age 18

---

• 创建元素

语法： $('<li></li>') // 动态的创建了一个li

• 添加元素

  • 内部添加：

    element.append(‘内容’) $(‘ul’).append(li) 把内容放入匹配元素内部的后面，类似于原生appendChild

    element.prepend(‘内容’) $(‘ul’).prepend(li) 把内容放入匹配元素内部的前面

    <ul>
    	<li>原先的li</li>
    </ul>
    
    <script>
        $(function(){
        let li = $('<li>后来创建的li</li>')   //动态创建一个li
        $("ul").append("li");   //把li放在了ul内部的后面
        $("ul").prepend("li");  //把li放在了ul内部的前面
    })
    </script>
    

  • 外部添加：

    element.after(‘内容’) 把目标放入目标元素后面

    element,before(‘内容’) 把目标放入目标元素前面

    <div>原本有的div</div>
    
    <script>
    	$(function(){
        let div = $('<div>后面创建的div</div>')
        $("div").after(div);     // 把创建的div放在了原有的div的后面
        $("div").before(div);    // 把创建的div放在了原有的div的前面
    })    
    </script>
    

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

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

  • 删除元素：

  语法：element.remove( ) // 删除匹配的元素（本身）

  <ul>
      <li>我是一个小li</li>
  </ul>
  <script>
      $("ul").remove()   //删除ul标签
  <script>
  

  语法：element.empty( ) ===element.html(“”) // 删除匹配的元素集合中所有的子节点

<ul>
    <li>我是一个小li</li>
</ul>
<script>
	$("ul").empty()   //删除ul标签的所有子节点 li
	$("ul").html("")  //删除ul标签的所有子节点 li
<script>