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
    })

2. $(“元素”).parents(“选择器”) 返回元素的指定的祖先级元素（选择器）

jQuery元素操作

1. 遍历

（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 属性值
        })

2. 创建元素
   $("<li></li>") 这样就动态创建了一个li标签
3. 添加元素
   （1）内部添加，把创建的元素放入原先的元素里面
   element.append("内容") 把内容放入匹配元素内部的最后面，类似于原生 appendChild
   element.prepend("内容") 把内容放入匹配元素内部的最前面
   （2）外部添加，把创建的元素放入原先的元素外面
   element.after("内容") 把内容放入目标元素的后面
   element.before("内容") 把内容放入目标元素的前面
4. 删除元素
   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 效果等价
    })