Community Learn Tools Library Leisure
search
English
Home > List of blog posts > jqueryDom操作与ajax请求
Blogger Information
Blog 45
fans 0
comment 0
visits 34630
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jqueryDom操作与ajax请求
咸鱼老爷
Original
653 people have browsed it

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);
      10. // //第n个
      11. console.log($('ul').filter('#first').children().eq(1).text());
      13. // //find():children()方法只获取子元素集合，find（）可以获取任何层级的元素（包括子元素）；
      14. $('ul').filter('#first').children('red');
      16. $('ul').filter('#first').find('.red').css('background-color', 'yellow');

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

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

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

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

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.  - 1、get请求
  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.                     }
  17.                     str += '<span>' + item.text + '</span>';
  18.                     // $('body').append(str);
  19.                     $(ev.target).after("<div></div>").next().html(str);
  20.                 });
  21.             }
  22.         })
  23.     })

  1. - 2、post请求
  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. - 3、jsonp跨域
  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.     })
  14.     function show(data) {
  15.         console.log(data);
  16.         $('button').after('<div></div>').next().html(`${data.name}[${data.email}]`);
  17.     }
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post