jQuery 文档操作方法

这些方法对于 XML 文档和 HTML 文档均是适用的，除了 html()

方法	描述	示例
html()	设置或返回匹配的元素集合中的 HTML 内容	相当于innerHTML
text()	设置或返回匹配元素的内容	相当于innerText
val()	设置或返回匹配元素的值

css()	写元素的样式	$("#dv").css("width","300px")
hasClass()	检查是否拥有指定的类
addClass()	添加指定的类名
removeClass()	删除全部或者指定的类
toggleClass()	切换(添加或删除)一个类


append()	父元素将子元素追加到末尾	对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
appendTo()	向目标结尾插入匹配元素集合中的每个元素。	对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾
prepend()	父元素将子元素追加到开头	对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头
prependTo()	向目标开头插入匹配元素集合中的每个元素	对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头


after()	添加元素到元素后边
insertAfter()	把匹配的元素插入到另一个指定的元素集合的后面	对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
before()	添加元素到元素前边
insertBefore()	把匹配的元素插入到另一个指定的元素集合的前面	对象1.insertBefore(对象2)：将对象2添加到对象1前边。对象1和对象2是兄弟关系


remove()	移除所有匹配的元素	对象.remove():将对象删除掉
empty()	删除匹配的元素集合中所有的子节点，清空元素的所有后代元素	对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点
detach()	从 DOM 中移除匹配元素集合
attr()	设置或返回匹配元素的属性和值
removeAttr()	从所有匹配的元素中移除指定的属性
replaceAll()	用匹配的元素替换所有匹配到的元素
replaceWith()	用新内容替换匹配的元素
wrap()	把匹配的元素用指定的内容或元素包裹起来
unwrap()	移除并替换指定元素的父元素
wrapAll()	把所有匹配的元素用指定的内容或元素包裹起来
wrapinner()	将每一个匹配的元素的子内容用指定的内容或元素包裹起来
clone()	创建匹配元素集合的副本	对象A.append对象B.clone()) //添加克隆的对象B

jQuery DOM元素方法

函数	描述
.get()	获得由选择器指定的 DOM 元素。
.index()	返回指定元素相对于其他指定元素的 index 位置。
.size()	返回被 jQuery 选择器匹配的元素的数量。
.toArray()	以数组的形式返回 jQuery 选择器匹配的元素。

jQuery 数据操作函数

这些方法允许我们将指定的 DOM 元素与任意数据相关联。

函数	描述
.clearQueue()	从队列中删除所有未运行的项目。
.data()	存储与匹配元素相关的任意数据。
jQuery.data()	存储与指定元素相关的任意数据。
.dequeue()	从队列最前端移除一个队列函数，并执行它。
jQuery.dequeue()	从队列最前端移除一个队列函数，并执行它。
jQuery.hasData()	存储与匹配元素相关的任意数据。
.queue()	显示或操作匹配元素所执行函数的队列。
jQuery.queue()	显示或操作匹配元素所执行函数的队列。
.removeData()	移除之前存放的数据。
jQuery.removeData()	移除之前存放的数据。

节点元素创建

$("代码及内容")

<body> </body>
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

<script>
  $("<p>哈哈</p>").appendTo(document.body)
</script>

对象.html("代码及内容")

<div id="div"></div>
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  $('#div').html('<span>添加文字</span>') // 设置html内容
  console.log($('#div').html())  //打印html内容
</script>

节点值的获取 val()

val() 方法的使用,可以设置表单的value属性值 val() 也可以设置下拉框某个option选中

<input type="text" name="" id="text" value="今天下雨了">
<input type="button" value="按钮" id="btn">

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  $("#btn").click(function () {
    console.log($("#text").val()) //获取文本框的value属性
    $("#text").val("今天天气一点也不好") //设置文本框的value属性
  })
</script>

<select name="" id="select">
  <option value="1">杨过</option>
  <option value="2">小龙女</option>
  <option value="3">郭靖</option>
  <option value="4">黄蓉</option>
</select>

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  //为select标签中value属性是5的这个option标签选中
  $("#select").val(2);
 document.body.append($("#select").val())
</script>

样式属性操作

css 元素样式设置

写法1

$("#div").css("width", "300px");
$("#div").css("height", "200px");
$("#div").css("backgroundColor", "hotpink");
$("#div").css("border", "2px solid red");

写法2:键值对的写法

var json = { "width": "200px", "height": "100px", "backgroundColor": "pink", "border": "2px solid green" };
$("#div").css(json);

写法3:链式编程

$("#div")
  .css("width", "300px")
  .css("height", "200px")
  .css("backgroundColor", "hotpink")
  .css("border", "2px solid red");

.hasClass() 判断有没有这个属性

<input type="button" value="按钮" id="btn">
<div id="div"></div>

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
    $("#div").addClass("className1").addClass("className2")
    $("#div").hasClass("className1") //true
</script>

.addClass() 添加样式

addClass() 返回或者设置了Class,返回来的是这个对象,即使在括号中设置了内容,返回来的还是这个对象

<input type="button" value="按钮" id="btn">
<div id="div"></div>

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  $("#btn").click(function () {
    //为div设置类样式,同时应用多个类样式
    $("#div").addClass("className1").addClass("className2")
    $("#div").addClass("uesrname mt-20")
    console.log($("#div").addClass())
    console.log($("#div").addClass()[0].classList)
    console.log($("#div").addClass()[0].classList.value)
    console.log($("#div").addClass()[0].classList + "")
  })
</script>

.removeClass() 移除样式

<input type="button" value="按钮" id="btn">
<div id="div"></div>

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  $("#btn").click(function () {
    //为div设置类样式,同时应用多个类样式
    $("#div").addClass("className1").addClass("className2").addClass("username mt-20")
    var obj = $("#div").removeClass("className1 className2");
    console.log(obj)
    console.log(obj[0].classList.value)  //username mt-20
    console.log($("#div").addClass()[0].classList.value)  //username mt-20
  })
</script>

⚠️总结: 设置元素的样式可以使用css(),也可以使用 addClass()+removeClass() 方法。区别在于:

css()设置的是元素的style
addClass()+removeClass()设置的类名

.toggleClass() 切换样式

<input type="button" value="开关" id="btn">
<style>
  .cls {
    background-color: black;
  }
</style>
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  // $(function () {
  //   $("#btn").click(function () {
  //     if ($("body").hasClass("cls")) {
  //       $("body").removeClass("cls")
  //       $(this).val("关灯")
  //     }
  //     else {
  //       $("body").addClass("cls")
  //       $(this).val("开灯")
  //     }
  //   })
  // })


  $("#btn").click(function () {
    $("body").toggleClass("cls");
  })
</script>

清除节点

使用empty、remove、html清除节点

<div id="div1">1 <a href="">这是子元素跳转链接</a></div></div>
<div id="div2">2 <a href="">这是子元素跳转链接</a></div></div>
<div id="div3">3 <a href="">这是子元素跳转链接</a></div></div>
<div id="div4">4 <a href="">这是子元素跳转链接</a></div>
<div id="div5">5</div>
<input type="button" value="清除按钮" id="btn">

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(function () {
    $("#btn").click(function () {
      $("#div1").html("");
      $("#div2").empty();
      $("#div3").remove(); //自杀
      $("#div4").children().remove();
      $("#div5").append($("<a href='www.baidu.com'>百度</a>"));
    })
  })
</script>

使用detach 清除/恢复节点

<body>
  <p>这是一个段落。</p>
  <button id="btn1">删除 p 元素</button>
  <button id="btn2">恢复 p 元素</button>
</body>



<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    var x

    $("#btn1").click(function () {
      x = $("p").detach()
    })

    $("#btn2").click(function () {
      $("body").prepend(x)
    })
  })
</script>

在父元素加元素

在元素开头插入内容（父子关系）

prepend()
prependTo()

<div id="div">
  <p>我是原来是第一个节点的</p>
</div>

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  $("#div").prepend($("<p>this is p</p>"))
  $("<p>this is p</p>").prependTo($("#div"))
</script>

在元素结尾插入内容（父子关系）

append()
appendTo()

<div id="div">
  <p>我是原来是第一个节点的</p>
</div>

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  $("#div").append($("<p>this is p</p>"))
  $("<p>this is p</p>").appendTo($("#div"))
</script>

用if判断元素对象的length

<div id="div">
  <p>我是原来是第一个节点的</p>
</div>

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  if ($("div").children().length < 2) { $("#div").append($("<a>你是猪</a>")) }
</script>

元素添加到当前元素的前面的位置（兄弟元素关系）

当前元素.before()
insertBefore(当前元素)

<div id="div">
  <p>我是原来是第一个节点的</p>
</div>

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  $("p").before($("<p>使用 before() 添加的</p>"));
  $("<p>使用 insertBefore() 添加的</p>").insertBefore($("#div"));
</script>

元素添加到当前元素的后面的位置 (兄弟元素关系)

当前元素.after( )
insertAfter(当前元素)

<div id="div">
  <p>我是原来是第一个节点的</p>
</div>

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  $("p").after($("<p>使用 after() 添加的</p>"));
  $("<p>使用 insertAfter() 添加的</p>").insertAfter($("#div"));
</script>

clone()

获取的元素通过

prepend()
prependTo()
append
appendTo
当前元素.before()
insertBefore(当前元素)
当前元素.after( )
insertAfter(当前元素)
等等... 方法添加到另一个元素中的时候,类似于剪切加上 clone() 才能复制

$("#div1>p").clone().appendTo($("#div2"));

案例

创建十个p标签

<div id="div"> </div>

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(function () {
    for (var i = 0; i < 10; i++) {
      //$("#dv").append($("<p>哦买尬的,我竟然没想到</p>"))
      $("<p>哦买尬的,我竟然没想到</p>").appendTo($("#div"))
    }
  })
</script>

点击按钮创建列表

<div id="div"> </div>
<input type="button" value="按钮" id="btn">
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(function () {
    $("#btn").click(function () {
      //创建ul,加入到div中
      var ulObj = $("<ul style='list-style-type: none;cursor: pointer'></ul>");
      $("#div").append(ulObj);

      //创建li,加入到ul中
      $("<li>降龙十八掌</li><li>六脉神剑</li><li>葵花宝典</li><li>辟邪剑谱</li><li>少女萌萌拳</li> ")
        .appendTo(ulObj)
        .mouseenter(function () {
          $(this).css("backgroundColor", "green");
        })
        .mouseleave(function () {
          $(this).css("backgroundColor", "");
        })
        .click(function () {
          $(this).css("color", "pink").css("fontFamily", "全新硬笔行书简").css("fontSize", "50px");
        });
    });
  });
</script>

动态创建列表

<div id="div"> </div>
<input type="button" value="按钮" id="btn">
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  var array = ["风斯托罗斯基", "小苏坨萝斯基", "助教坨萝斯基", "尼古拉斯凯奇赵四", "小胖妞", "杰森斯坦森班主任", "小明", "小红", "小李", "小白", "小绿", "小黑"];

  $("#btn").click(function () {
    //先创建ul加入到div中
    var ulObj = $("<ul style='cursor: pointer'></ul>").appendTo($("#div"))

    //创建li标签,加入到ul中 -- 循环遍历数组
    for (var i = 0; i < array.length; i++) {
      $("<li>" + array[i] + "</li>")
        .appendTo(ulObj)
        .mouseenter(function () {
          $(this).css("backgroundColor", "darkgreen")
        }).mouseleave(function () {
          $(this).css("backgroundColor", "")
        });
    }
  })
</script>

属性的操作

自定义属性 attr()

attr("属性"): 获取该属性的值
attr("属性","值"): 设置值
removeAttr("属性"): 移除这个自定义属性

<input type="checkbox" name="" id="checkbox">

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  // 如果标签默认选中了,结果:checked
  // 如果标签没有选中,结果: undefined
  //attr方法针对低版本JQ单选框或者是复选框的是否选中问题,操作起来很麻烦
  if ($("#checkbox").attr("checked") == undefined) {
    $("#checkbox").attr("checked", true);
  } else {
    $("#checkbox").attr("checked", false);
  }
</script>

prop()方法

.prop("属性",值): 设置值，值一般是布尔类型 prop(): 取出或设置某个属性的值

<input type="checkbox" id="checkbox">
<input type="button" value="按钮" id="btn">

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  //获取复选框是否选中
  console.log($("#checkbox").attr("checked")) //checked | undefind
  console.log($("#checkbox").prop("checked")) // true | false

  $("#btn").click(function () {
    $("#checkbox").prop("checked", !$("#checkbox").prop("checked"));
  })
</script>

<img
  src="http://tiebapic.baidu.com/forum/w%3D580/sign=b0dfd68e61c6a7efb926a82ecdfbafe9/b844d02a2834349b54f51dd4deea15ce37d3be5d.jpg"
  alt="" srcset="">
<input type="button" value="按钮" id="btn">

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

<script>
  $("#btn").click(function () {
    var $src = $('img').prop('src');   // 取出图片的地址
    $('img').prop({ src: "http://tiebapic.baidu.com/forum/w%3D580/sign=feeafa504b6034a829e2b889fb1249d9/8d515743fbf2b211f4dcf61fdd8065380dd78e5e.jpg", alt: "Test Image" });
  })
</script>

jQuery 文档操作方法

jQuery 文档操作方法

jQuery DOM元素方法

jQuery 数据操作函数

节点元素创建

$("代码及内容")

对象.html("代码及内容")

节点值的获取 val()

样式属性操作

css 元素样式设置

.hasClass() 判断有没有这个属性

.addClass() 添加样式

.removeClass() 移除样式

.toggleClass() 切换样式

清除节点

使用empty、remove、html清除节点

使用detach 清除/恢复 节点

在父元素加元素

在元素开头插入内容（父子关系）

在元素结尾插入内容（父子关系）

元素添加到当前元素的前面的位置（兄弟元素关系）

元素添加到当前元素的后面的位置 (兄弟元素关系)

clone()

案例

创建十个p标签

点击按钮创建列表

动态创建列表

属性的操作

自定义属性 attr()

prop()方法

使用detach 清除/恢复节点