PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > jqueryDom操作与ajax请求

jqueryDom操作与ajax请求

咸鱼老爷
咸鱼老爷 原创
2021年03月05日 18:27:55 628浏览

dom

  • 添加元素

    • 子元素.appendTo(父元素)
      1. const h2 = document.createElement('h2');
      2. h2.innerText = '这是添加元素';
      3. document.body.appendChild(h2);
      4. $('<h2>这是添加的jquery方法</h2>').appendTo(document.body)
      5. $('<h2>').text('这是jquery写法2').appendTo(document.body)
    • 父元素.append(子元素)
      1. $('body').append('<h2>这是子元素</h2>');
      2. $('body').append('<ol></ol>');
      3. const ol = $('ol')
      4. ol.append(() => {
      5. let str = '';
      6. for (let i = 0; i < 5; i++) {
      7. str += `<li>商品${i}</li>`
      8. }
      9. return str;
      10. })
    • 过滤器:从一组元素中选择哪个条件

      1. console.log($('ul').filter('#first'));
      2. console.log($('ul').filter('#first').children());
      3. console.log($('ul').filter('#first').children().first().text());
      4. console.log($('ul').filter('#first').children().last().text());
      5. console.log(document.querySelector('#first').children);
      6. console.log(document.querySelector('#first').firstElementChild.textContent);
      7. console.log(document.querySelector('#first').lastElementChild.textContent);
      8. console.log(document.querySelector('#first').children[1].textContent);
      9. // //第n个
      10. console.log($('ul').filter('#first').children().eq(1).text());
      11. // //find():children()方法只获取子元素集合,find()可以获取任何层级的元素(包括子元素);
      12. $('ul').filter('#first').children('red');
      13. $('ul').filter('#first').find('.red').css('background-color', 'yellow');

用jquery简单实现留言本案例(todolist)

  1. <body>
  2. <input type="text">
  3. <ol class="list"></ol>
  4. </body>
  5. <script>
  6. $('input').keyup(function(ev) {
  7. if (ev.keyCode == 13) {
  8. $('.list').prepend($('<li>').html($(this).val()));
  9. $(this).val('')
  10. }
  11. })
  12. </script>

$.get(请求的地址,查询参数,成功回调)

  1. $('button:first-of-type').click((ev) => {
  2. $.get('https://api.apiopen.top/getJoke?page=1&count=3&type=video', (data) => {
  3. //当前元素
  4. // console.log(ev.target);
  5. data.result.forEach(item => {
  6. console.log(item);
  7. let str = '';
  8. str += '<div>';
  9. str += '<span>' + item.sid + '</span>';
  10. str += '<span>' + item.passtime + '</span>';
  11. if (item.top_comments_header !== null) {
  12. str += "<img src=" + item.top_comments_header + ">"
  13. }
  14. str += '<span>' + item.text + '</span>';
  15. // $('body').append(str);
  16. $(ev.target).after("<div></div>").next().html(str);
  17. });
  18. });
  19. })

1、$.post(地址,参数,回调)

  1. $(' button ').click(ev => {
  2. $.post('user.php', {
  3. id: 3
  4. }, data => {
  5. console.log(data);
  6. });
  7. $(ev.target).after('<div></div>').next().html(data);
  8. })

2、$.ajax();

  1. - 1get请求
  1. $('.ajax').click(ev => {
  2. $.ajax({
  3. type: 'GET',
  4. url: "https://api.apiopen.top/getJoke?page=1&count=3&type=video",
  5. dataType: 'json',
  6. success: data => {
  7. data.result.forEach(item => {
  8. console.log(item);
  9. let str = '';
  10. str += '<div>';
  11. str += '<span>' + item.sid + '</span>';
  12. str += '<span>' + item.passtime + '</span>';
  13. if (item.top_comments_header !== null) {
  14. str += "<img src=" + item.top_comments_header + ">"
  15. }
  16. str += '<span>' + item.text + '</span>';
  17. // $('body').append(str);
  18. $(ev.target).after("<div></div>").next().html(str);
  19. });
  20. }
  21. })
  22. })

  1. - 2post请求
  1. $(' button ').click(ev => {
  2. $.ajax({
  3. type: 'post',
  4. url: 'users.php',
  5. data: {
  6. id: 2
  7. },
  8. dataType: 'json',
  9. success: function(data) {
  10. console.log(data);
  11. }
  12. })
  13. })
  1. - 3jsonp跨域
  1. $(' button ').click(ev => {
  2. $.ajax({
  3. type: 'post',
  4. url: 'users.php?jsonp=?',
  5. data: {
  6. id: 2
  7. },
  8. dataType: 'jsonp',
  9. //告诉跨域访问的服务器需要返回的函数名
  10. jsonpCallback: 'show'
  11. })
  12. })
  13. function show(data) {
  14. console.log(data);
  15. $('button').after('<div></div>').next().html(`${data.name}[${data.email}]`);
  16. }
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议