search

博客列表 >jQuery中$()函数的四个参数以及getter/setter方法

jQuery中$()函数的四个参数以及getter/setter方法

残破的蛋蛋
残破的蛋蛋原创
2021年01月19日 15:49:231062浏览

jQuery中$()函数的四个参数以及getter/setter方法

一、$()函数的四个参数

1.$(selector, context)：获取元素 => $(选择器，上下文)

  • 案例：给id=first的元素下面的子元素的字体变成蓝色。
  1. // 原生写法
  2. document.querySelectorAll('li').forEach(li => li.style.color = 'red');
  3. // jQuery
  4. $("#first li").css("color", "blue");
  • 效果图：

jq

其中，jQuery中还能传入第二个参数，上述样式也可以这样写，效果也是一样的：

  1. $("li", "#first").css("color", "blue");

2.$(JS对象)：jQuery包装器，JS对象是原生的JS对象，将原生的JS对象转为jQuery对象

  • 案例：使用jQuery中的css方法来设置style属性（内联样式）。
  1. $(document.body).css("background", "lightgreen");
  • 效果图：

$(JS对象）

将jQuery对象还原成原生的js对象集合，然后就可以使用forEach方法遍历每个元素了。

  1. console.log([...$(document.querySelectorAll('li'))]);

[...$(document.querySelectorAll('li'))])]”)

使用get(n)方法，将jQuery集合中的某一个对象还原成原生的js对象

  1. console.log($(document.querySelectorAll('li')).get(2));

以上两个方法在得到原生的JS对象之后，都可以使用原生的JS对象属性对元素进行样式操作。

3.$(html文本)：生成dom元素

  1. // 原生js语法生成元素
  2. document.querySelector('#first').insertAdjacentHTML('beforeend', '<li>大家晚上好</li>');
  3. // jQuery
  4. $('<li>大家晚上好</li>').appendTo(document.querySelector('#first'));
  • 效果图：

appendTo

4.$(callback回调函数)：传一个回调函数，当页面加载完成之后自动执行它

  1. // 此代码不会执行，因为页面元素还没有加载完成
  2. // $('<li>大家晚上好</li>').appendTo(document.querySelector('#first'));
  3. // 使用$(回调函数)，页面加载完成之后自动执行
  4. $(function () {
  5.     // $('<li>大家晚上好</li>').appendTo(document.querySelector('#first'));
  6. });

二、jQuery中的getter/setter方法

现在有一个登录表单，HTML代码如下：

  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.     <script src="https://lib.baomitu.com/jquery/3.5.1/jquery.js"></script>
  8.     <style>
  9.         body {
  10.             display: flex;
  11.             flex-direction: column;
  12.             align-items: center;
  13.             color: #666;
  14.         }
  16.         form {
  17.             width: 400px;
  18.             /* height: 150px; */
  19.             padding: 20px 10px;
  20.             border: 1px solid #aaa;
  21.             box-shadow: 0 0 5px #888;
  22.             box-sizing: border-box;
  23.             background-color: #eee;
  24.             display: grid;
  25.             grid-template-columns: 80px 200px;
  26.             gap: 10px;
  27.             place-content: center center;
  28.         }
  30.         button {
  31.             grid-column: 2 / 3;
  32.             height: 26px;
  33.         }
  35.         button:hover {
  36.             color: white;
  37.             background-color: #888;
  38.             border: none;
  39.             cursor: pointer;
  40.         }
  42.         .red {
  43.             color: red;
  44.         }
  45.     </style>
  46. </head>
  47. <body>
  48.     <h2 class="red">用户登录</h2>
  49.     <form action="handle.php" method="POST" id="login">
  50.         <label for="email">Email:</label>
  51.         <input type="email" name="email" id="email" autofocus value="leture@php.cn" />
  52.         <label for="password">Password:</label>
  53.         <input type="password" name="password" id="password" value="不少于6位" />
  54.         <label for="confirm">记住我:</label>
  55.         <div>
  56.             <input type="radio" name="save" id="confirm" value="1" checked /><label for="confirm">保存</label>
  57.             <input type="radio" name="save" id="cancel" value="0" /><label for="cancel">放弃</label>
  58.         </div>
  59.         <button>登录</button>
  60.     </form>
  61. </body>
  62. </html>
  • 效果图：

登录表单

获取form表单：

  1. const form = $('form');

2.1 attr()：获取/设置元素属性

  • attr(name)：获取元素属性
  1. // 获取表单中的action属性
  2. console.log(form.attr('action')); // handle.php
  • attr(name, value)：获取元素属性
  1. // 设置表单中的action属性
  2. form.attr('action', 'admin/check.php');
  3. console.log(form.attr('action')); // admin/check.php
  • attr(name, callback)：第二个参数传一个回调函数
  1. form.attr('action', () => {
  2.     let method = form.attr('method').toUpperCase();
  3.     return method === 'GET' ? 'query.php?id=2' : 'register.php';
  4. });
  5. console.log(form.attr('action')); // register.php

2.2 css()：获取/设置元素的行内样式（style）

  • css(name)：获取元素的行内样式

在使用原生JS的时候，如果我们想要获取元素的CSS样式表中的元素宽度，只能使用计算样式（computedStyle），使用obj.style.width只能获取到元素的内联样式的宽度。

  1. // 使用原生JS获取元素的CSS样式表中的宽度
  2. let width = window.getComputedStyle(document.querySelector('form'), null).getPropertyValue('width');
  3. console.log(width); // 400px

但是，如果要是使用css()方法就方便了很多：

  1. console.log($('form').css('width')); // 400px
  • css(name, value)：设置元素的行内样式
  1. form.css("border-top", "6px solid green");

css()不仅接收单值，还接收传入一个对象：

  1. form.css({
  2.     "border-bottom": "6px solid blue",
  3.     "background-color": "lightcyan" 
  4. });
  • 效果图：

css()

  • css(name, callback)：第二个参数支持传入一个回调函数

以下就是一个刷新页面随机展示背景颜色案例：

  1. form.css("background-color", () => {
  2.     const colors = ["pink", "lightblue", "lime", "yellow"];
  3.     // 四种颜色值
  4.     let i = Math.floor(Math.random() * colors.length);
  5.     console.log(i);
  6.     return colors[i];
  7. });
  • 效果图：

css

2.3 val() 获取表单元素的值，表单控件的value属性

  • val()：获取表单控件value值

在使用原生JS时，我们如果要获取一个表单控件的value属性值，需要这样写：

  1. // 原生
  2. console.log(document.forms.login.email.value); // leture@php.cn

而使用jQuery时，可以这样写：

  1. console.log($("#email")[0].value);
  2. console.log($("#email").get(0).value);

使用val()属性可以更简单：

  1. console.log($("#email").val()); // leture@php.cn

获取表单控件password的值：

  1. console.log($("input[name=password]").val()); // 123456

获取单元按钮被选中的控件的值：

  1. console.log($('input[type=radio]:checked').val()); // 1
  • val(value)：设置表单控件value的值

修改表单控件email的值：

  1. let value = $("#email").val("aaa@bbb.cn");
  2. console.log(value); // aaa@bbb.cn
  • val(callback)：使用回调函数设置value值
  1. $("#email").val(() => 'user@admin.cn');

此时，email的值被修改为user@admin.cn了。

  • 效果图：

val()

上一条：Vue自学：父子组件通信-父传子props下一条：Vue条件渲染，计算属性Computed与侦听器Watch的共性与区别
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多