jQuery内容文本值/元素操作

jQuery内容文本值

主要针对元素的内容和表单的值操作

1. 普通元素内容 html() (相当于原生innerHTML)
   (1) 获取元素设置内容 html() 连着标签一起显示
   (2) 获取设置元素文本内容 text() 只得到文本
   (3) 获取设置表单值 val()

         $(function() {
           //获取元素设置内容 html() 连着标签一起显示
           console.log($("div").html());
           $("div").html("123"); //把内容改为123
           //2.获取设置元素文本内容 text() 只得到文本
           console.log("div").text();
           $("div").text("234"); //把内容改为234
           //3.获取设置表单值 val()
           console.log("input").val();
           $("input").val("234"); //把内容改为234
       })
   

   $(“元素”).parents(“选择器”) 返回元素的指定的祖先级元素（选择器）
   jQuery元素操作
   遍历
   （1） each（）遍历元素：

   语法：$("div").each(function(index, domEle) {....}
   回调函数第一个参数一定是索引号 可以自己指定索引号名称
   第二个参数一定是DOM元素对象
    

       $(function() {
           //如果针对同一类元素做不同操作，需要用到遍历元素（类似for 但比for强大）
           //1.each()方法遍历元素
           //把盒子内容改成不同颜色
           var arr = ["red", "green", "blue"];
           var sum = 0;
           $("div").each(function(index, domEle) {
               //回调函数第一个参数一定是索引号 可以自己指定索引号名称
               //第二个参数一定是DOM元素对象
               console.log(index);
               console.log(domEle);
               //DOM对象没有css方法
               $(domEle).css("color", arr[index]); //先转化为jquery对象，才能使用css方法
               //把每个盒子内容取出相加
               sum += parseInt($(domEle).text()); //先把内容转化为数字型
               console.log(sum);
           })
       })
   

   （2） $.each()遍历元素

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

         $.each($("div"),function(i,ele){
               console.log(i);
               console.log(ele);//输出结果和上面的一样
           })
           $.each(arr,function(i,ele){
               //遍历数组
               console.log(i);
               console.log(ele);
           })
           $.each({
               name:"andy",
               age:18
           },function(i,ele){
             console.log(i);//输出的是 name age 属性名
             console.log(ele);//输出的是 andy 18 属性值
           })
   

   创建元素
   $("<li></li>") 这样就动态创建了一个li标签
   添加元素
   （1）内部添加，把创建的元素放入原先的元素里面
   element.append("内容") 把内容放入匹配元素内部的最后面，类似于原生 appendChild
   element.prepend("内容") 把内容放入匹配元素内部的最前面
   （2）外部添加，把创建的元素放入原先的元素外面
   element.after("内容") 把内容放入目标元素的后面
   element.before("内容") 把内容放入目标元素的前面
   删除元素
   element.remove() remove 可以删除匹配的元素 自杀
   element.empty() empty 可以删除匹配元素里面的子节点 孩子 本身不删除
   element.html("") 和 empty 效果等价
    

         $(function() {
           //1.创建元素
           var li = $("<li>后来的</li>");
   
           //2.添加元素
           //（1）内部添加，把创建的元素放入原先的元素里面
           //`element.append("内容")` 把内容放入匹配元素内部的最后面，类似于原生 appendChild
           $("ul").append(li);
           //`element.prepend("内容")` 把内容放入匹配元素内部的最前面
           $("ul").prepend(li);
           //（2） 外部添加， 把创建的元素放入原先的元素外面
           var div = $("<div>外面的</div>");
           //`element.after("内容")` 把内容放入目标元素的后面
           $("ul").after(div);
           //`element.before("内容")` 把内容放入目标元素的前面
           $("ul").before(div);
   
           //3. 删除元素
           // `element.remove()`  remove 可以删除匹配的元素 自杀
           // `element.empty()`  empty 可以删除匹配元素里面的子节点 孩子 本身不删
           // `element.html("")`  和 empty 效果等价
       })