search

博客列表 >JS基础-jQuery中的getter/setter操作方法/jQuery中的DOM操作/jQuery常用过滤器

JS基础-jQuery中的getter/setter操作方法/jQuery中的DOM操作/jQuery常用过滤器

岂几岂几
岂几岂几原创
2020年06月06日 13:42:22803浏览

jQuery基本的getter/setter操作

    1. attr()方法: 获取/设置元素属性值.
    • 1.1 jQuery对象.attr(参数名): 获取参数值, 入参为参数名;
    • 1.2 jQuery对象.attr(参数名, 参数值): 设置参数值, 入参1是参数名, 入参2是参数值;
    • 1.3 入参为只有属性的js对象: 同时设置多个属性值.
      1. jQuery对象.attr({
      2. prop1: val1,
      3. prop2: val2,
      4. ...
      5. });
    • 1.4 jQuery对象.attr(参数名, 回调函数): 把回调函数的返回值设置为参数的值, 即, 动态为属性设置值.
    1. css()方法: 获取获取元素的最终样式(即, 计算样式); 设置元素的css样式.
    • css()的使用方法跟attr()类似, 如: jQuery对象.css(css属性名), jQuery对象.css(css属性名, 属性值), jQuery对象.css(字面量js对象), jQuery对象.css(css属性名, 回调函数). 相关解释见attr().
    1. val(): 获取/设置jQuery对象封装的元素的值(value属性值).
    • jQuery对象.val(): 获取value属性值;
    • jQuery对象.val(值): 设置value属性值;
    • jQuery对象.val(回调函数): 动态设置value属性值.
    1. html()/text(): 元素内容获取/设置操作
    • html()方法跟JS原生的element.innerHTML对应, 浏览器会解析他们的值中的HTML标签, 再输出;
    • text()方法跟JS原生的element.innerText对应, 浏览器会原样输出他们的值;
    1. data()/removeData(): 获取,设置/移除自定义属性.

  • tips: 所有setter操作, 参数都可以试试: 普通参数值, 字面量对象, 回调函数赋值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>基本的getter/setter操作-1</title>
  7.     <!-- CDN方式引用, 即内容分发方式 -->
  8.     <!-- BootCDN或者又拍云的CDN的速度都可以 -->
  9.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  10.     <!-- 本地引用 -->
  11. </head>
  12. <body>
  13.     <h3>登录</h3>
  14.     <form action="hello.php" method="POST">
  15.         <div class="item-box">
  16.             <label for="username">姓名:</label>
  17.             <input type="text" name="username" id="username">
  18.         </div>
  19.         <div class="item-box">
  20.             <label for="username">邮箱:</label>
  21.             <input type="email" name="email" id="email" value="grantkai@qq.com">
  22.         </div>
  23.         <div class="item-box">
  24.             <label for="remember_0">记住我:</label>
  25.             <input type="radio" name="remember" id="remember_0" checked><label for="remember_0">保存</label>
  26.             <input type="radio" name="remember" id="remember_1"><label for="remember_1">放弃</label>
  27.         </div>
  28.     </form>
  29. </body>
  30.     <script>
  31.         var cl = console.log.bind(console);
  33.         // 获取表单元素
  34.         var form = $('form');
  35.         cl(form);
  37.         // 1. attr()方法: 获取/设置元素属性值
  38.         /* 1.1 只有一个入参, 为读取, 入参为属性名 */
  39.         /* 获取form元素的action属性的值 */
  40.         cl(form.attr('action'));
  41.         /* 1.2 两个入参, 为设置, 入参1位属性名, 入参2位属性值 */
  42.         form.attr('action', 'hi.php');
  43.         cl(form.attr('action'));
  44.         /* 1.3 修改多个属性值, 入参一个js对象, 对象中的属性是要被修改的属性 */
  45.         form.attr({
  46.             action: 'sayHello.php',
  47.             method: 'GET'
  48.         });
  49.         /* 1.4. 入参2也可以是回调函数 */
  50.         form.attr('action', function() {
  51.             // 获取当前请求方式, 如果是GET请求, 则执行查询脚本'query.php'; 如果是非GET请求, 则执行注册脚本:`register.PHP`
  52.             // 获取当前表单的method属性值, 并转为小写
  53.             var method = $(this).attr('method').toLowerCase();
  54.             if('get' == method) {
  55.                 return 'query.php';
  56.             } else {
  57.                 return 'register.php';
  58.             }
  59.         });
  61.         // 2. css()方法: 针对HTML元素的style属性进行操作. 而它不止能获取到style属性的值, 还能获取到该元素所有的样式
  62.         // 包括: 元素的style属性指定的样式(又叫内联样式)/元素默认样式/HTML文件中<style>标签定义的样式/外部css文件定义的样式...
  63.         /* tips: 获取元素的最终样式(即, 计算样式) */
  64.         /* 使用js原生方式获取 */
  65.         // cl(window.getComputedStyle(document.forms.item(0).width));
  66.         /* 使用jq获取 */
  67.         cl(form.css('width'));
  68.         cl(form.css('border'));
  70.         // 设置样式
  71.         form.css('border', '5px solid green');
  72.         /* 支持字面量对象入参设置多个样式属性 */
  73.         form.css({
  74.             backgroundColor: "wheat",
  75.             border: "5px dashed blue"
  76.         });
  77.         /* 也支持回调 */
  78.         /* 每执行一次, 背景色随机发生变化 */
  79.         form.css('background-color', function() {
  80.             // 颜色数组
  81.             var bgcolor = ['orange', 'orangered', 'tan', 'lime'];
  82.             // 使用Math.random()生成0-1的随机数, 乘以4后, 就能生成0-4之间的随机数, 然后在用Math.floor()向下取整
  83.             var index = Math.floor(Math.random() * bgcolor.length);
  85.             return bgcolor[index];
  86.         });
  88.         // 3. val(): 获取/设置表单元素的值(value属性值)
  89.         /* 获取 */
  90.         cl($('#email').val());
  91.         /* 设置 */
  92.         cl($('#email').val('grantkai@qq.com'));
  93.         /* 获取选中radio的值 */
  94.         cl($('input:radio[name=remember]:checked').val());
  95.         /* 回调 */
  96.         cl($('#email').val(function() {
  97.             return this.defaultValue;
  98.         }));
  100.         // 4. html()/text(): 元素内容操作
  101.         /* 原生方法 */
  102.         document.querySelector('h3').innerText = '请登录';
  103.         /* jq */
  104.         $('h3').text('请登录1');
  106.         // js中的innerText属性对应jq中的text()方法, 浏览器会原样输出他们的值
  107.         // jq中的innerHTML属性对应jq中的html()方法, 浏览器会解析他们的值中的HTML标签, 再输出
  108.         $('h3').text('<span style="color: green">变绿</span>');
  109.         // $('h3').html('<span style="color: green">变绿</span>');
  111.         // 自定义数据属性
  112.         /* 增加data-desc自定义属性, 并把其值设置为'login-form' */
  113.         // 貌似并没有在开发这种局的"元素"页签中显示出来, 但是是可以获取到的, 也就是说是设置成功了的
  114.         $(form).data('desc', 'login-form');
  115.         /* 获取自定义数据属性的值 */
  116.         cl($(form).data('desc'));
  117.         /* 移除 */
  118.         cl($(form).removeData('desc'))
  119.         /* 此时再获取data-desc自定义数据熟悉的值, 就获取不到了(undefined) */
  120.         cl($(form).data('desc'));
  121.     </script>
  122. </html>

jQuery中的DOM操作

  • 创建和插入元素
    • $(元素标签文本): 根据传入的标签文本, 创建对应的元素, 可带有属性.
    • $(元素标签文本, 元素属性字面量对象): 可以把元素的属性以字面量对象的形式传入第二个参数, 创建的元素将设置有这些属性.
  • 插入元素
    • 父元素.append(子元素): 在父级元素上调用, 向里面插入元素. 参数可以是HTML元素的js对象, 封装HTML元素的jQuery对象和元素标签文本. 如果是是元素标签文本, 则先创建对应的元素, 再插入到父元素中.
    • 子元素.appendTo(父元素): 在子元素上调用, 把子元素添加到父元素中. 若父元素参数为选择器文本, 则以选择器文本查询到匹配的元素作为父元素.
    • 父元素.append(回调函数): 将在父元素中插入回调函数返回的元素.
    • 插入方式
      • 兄弟元素.before(新元素): 在某个兄弟元素前插入;
      • 新元素.insertAfter(兄弟元素): 在某个兄弟元素后插入;
      • 新元素.prependTo(父元素): 新元素将作为父元素中的第一个子元素插入.

  • 元素替换

    • 当前元素.replaceWith(新元素): 用新元素替换当前元素;
    • 新元素.replaceAll(被替换的元素): 用新元素替换指定元素;

  • tips: 所有函数的参数, 都可以试试这几种值: HTML片段文本, js对象, jQuery对象, 回调函数.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>jQuery中的DOM操作</title>
  7.     <!-- CDN方式引用, 即内容分发方式 -->
  8.     <!-- BootCDN或者又拍云的CDN的速度都可以 -->
  9.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  10.     <!-- 本地引用 -->
  11.     <style>
  12.         .active {
  13.             color: red;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  19. </body>
  20. <script>
  21.     var cl = console.log.bind(console);
  23.     // 1. 元素的插入与替换
  24.     // 1.1 append(元素字符串): 在父级元素上调用, 向里面插入元素
  25.     $('body').append('<ol>');
  26.     // $('body').append('<ol>');
  27.     // 1.2 子元素.appendTo(父元素): 把子元素添加到父元素中, appendTo()是在子元素上调用
  28.     $('<li>').text('笔记本电脑').appendTo('ol');
  29.     $('<li>').text('智能手机').addClass('active').appendTo('ol');
  30.     $('<li>').html('<a href="">格子衫</a>').addClass('active').appendTo('ol');
  31.     $('<li>', {
  32.         id: 'hello',
  33.         style: 'background-color: yellow'
  34.     }).html('<a href="">游戏机</a>').appendTo('ol');
  36.     /* append(回调) */
  37.     /* 用回调循环生成子元素 */
  38.     $('ol').append(function() {
  39.         var res = '';
  40.         for(var i = 0; i < 5; i++) {
  41.             res += '<li><a href="">最新商品' + (i + 1) + '</a></li>';
  42.         }
  44.         return res;
  45.     });
  47.     // 从第3个元素前面增加一个<li>
  48.     /* befor(): 在当前元素前添加兄弟元素 */
  49.     $('ol li:nth-of-type(3)').before("<li>新元素</li>");
  51.     /* 把新元素2的<li>添加到第4哥<li>后面 */
  52.     $('<li>新元素2</li>').insertAfter($('ol li:nth-of-type(4)'));
  54.     // prepend()/prependTo(): 把新元素插入到父容器中的第一个位置
  55.     $('<li>最新留言</li>').prependTo('ol')
  57.     // 元素替换 
  58.     // 当前元素.replaceWith(新元素); 新元素.replaceAll(当前元素)
  59.     $('ol > li:last-of-type').replaceWith('<li>商品元素五</li>');
  60.     // ↑↓表达式效果一样
  61.     $('<li>商品元素五</li>').replaceAll('ol > li:last-of-type');
  62. </script>
  63. </html>

jQuery常用的过滤器

过滤器并不是必须的, 可以用复杂的选择器来实现”相对简单的选择器+过滤器”的效果. 但”选择器+过滤器”可读性好, 先选择, 再过滤. 过滤器的返回结果也是jQuery对象.

  • 在选择器查询到的元素中过滤
    • filter(selector): 在选择器查询结果中再次筛选过滤.
    • first(): 返回选择器查询结果的第一个元素.
    • last(): 返回选择器查询结果的最后一个元素.
    • eq(index): 返回选择器查询结果中指定索引的元素.
    • slice(start, end + 1): 返回选择器查询结果中元素索引从start到end的元素
  • 在选择器查询到的元素的子元素/后代元素中过滤
    • children(): 返回选择器查询结果的所有子元素. 等效于js中的children属性. 但children()可以返回多个元素的子元素, 而children属性只能返回当前元素的子元素.
    • find(selector): 在选择器查询结果的后代元素中再次筛选过滤.
  • 可以链式调用多个过滤器.
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>jQuery常用的过滤器</title>
  7.     <!-- CDN方式引用, 即内容分发方式 -->
  8.     <!-- BootCDN或者又拍云的CDN的速度都可以 -->
  9.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  10.     <!-- 本地引用 -->
  11. </head>
  12. <body>
  13.     <ul id="first">
  14.         <li>item1</li>
  15.         <li>item2</li>
  16.         <ul>
  17.             <li class="red">item1</li>
  18.             <li>item2</li>
  19.             <li>item3</li>
  20.         </ul>
  21.         <li>item3</li>
  22.         <li>item4</li>
  23.         <li>item5</li>
  24.     </ul>
  25.     <ul id="second">
  26.         <li>item1</li>
  27.         <li>item2</li>
  28.         <li>item3</li>
  29.         <li>item4</li>
  30.         <li>item5</li>
  31.     </ul>
  32. </body>
  33. <script>
  34.     var cl = console.log.bind(console);
  36.     // 获取第一个ul
  37.     /* 方式1: 用选择器 */
  38.     cl($('ul#first'));
  39.     /* 方式2: 用选择器+过滤器 */
  40.     /* 1. filter()过滤器 */
  41.     cl($('ul').filter('#first'));
  42.     /* ↑第二种方法, 可读性更好, 先选择, 再过滤, 实现起来也更简单 */
  43.     // cl($('ul').first());
  45.     // 2. children(), 等效于js中的children属性
  46.     /* 第一个ul */
  47.     var ul1 = $('ul').filter('#first');
  48.     cl(ul1.children());
  49.     /* 第一个ul的所有子元素 */
  50.     var children = ul1.children();
  51.     /* 3. first(): 获取第一个元素; 
  52.        4. last(): 获取最后一个元素 */
  53.     children.first().css('background-color', 'red');
  54.     children.last().css('background-color', 'red');
  55.     /* 5. eq(index): 第(index+1)个元素 */
  56.     children.eq(3).css('background-color', 'yellow');
  58.     // children(选择器)只能获取到子元素, 不能获取到更深层级的元素
  59.     /* 所有下面的操作, 并不能找到class="red"的元素 */
  60.     ul1.children('.red').css('color', 'red');
  61.     // 6. 要获取到所有后代元素, 则用find(选择器)
  62.     ul1.find('li').filter('.red').css('color', 'red');
  64.     // 7. slice(start, end+1)过滤范围: 过滤出索引从start到end的元素
  65.     $('ul').filter('#second').children().slice(1, 3).css('color', 'orange');
  66.     // 如果选择器学得好, 也可以用选择器直接实现, 过滤器并不是必须的. 但是...可读性是不是很差...
  67.     $('ul#second>li:nth-of-type(-n + 3):not(:first-of-type)').css('color', 'green');
  68. </script>
  69. </html>

学习心得

  • jQuery各种getter/setter操作方法, 参数都可以试试: 普通值参数, 字面量对象参数, 回调函数作为参数;
  • jQuery的DOM操作很方便, 感觉比JS原生的DOM操作更灵活.
    -过滤器并不是必须的, 可以用复杂的选择器来实现”选择器+过滤器”的效果. 但”选择器+过滤器”可读性好.
上一条：常用compose命令和小框架实战下一条：vscode配置中文后显示乱码的解决办法：
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多