Community Learn Tools Library Leisure
search
English
Home > List of blog posts > jQuery中$()函数的四个参数以及getter/setter方法
Blogger Information
Blog 45
fans 3
comment 0
visits 45639
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
jQuery中$()函数的四个参数以及getter/setter方法
残破的蛋蛋
Original
1063 people have browsed it

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()

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