jQuery 文档操作方法

·  阅读 85

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>
复制代码
分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改