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

jQuery基本的getter/setter操作

attr()方法: 获取/设置元素属性值.

1.1 jQuery对象.attr(参数名): 获取参数值, 入参为参数名;
1.2 jQuery对象.attr(参数名, 参数值): 设置参数值, 入参1是参数名, 入参2是参数值;
1.3 入参为只有属性的js对象: 同时设置多个属性值.
```
jQuery对象.attr({
prop1: val1,
prop2: val2,
...
});
```
1.4 jQuery对象.attr(参数名, 回调函数): 把回调函数的返回值设置为参数的值, 即, 动态为属性设置值.

css()方法: 获取获取元素的最终样式(即, 计算样式); 设置元素的css样式.

css()的使用方法跟attr()类似, 如: jQuery对象.css(css属性名), jQuery对象.css(css属性名, 属性值), jQuery对象.css(字面量js对象), jQuery对象.css(css属性名, 回调函数). 相关解释见attr().

val(): 获取/设置jQuery对象封装的元素的值(value属性值).

jQuery对象.val(): 获取value属性值;
jQuery对象.val(值): 设置value属性值;
jQuery对象.val(回调函数): 动态设置value属性值.

html()/text(): 元素内容获取/设置操作

html()方法跟JS原生的element.innerHTML对应, 浏览器会解析他们的值中的HTML标签, 再输出;
text()方法跟JS原生的element.innerText对应, 浏览器会原样输出他们的值;

data()/removeData(): 获取,设置/移除自定义属性.

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>基本的getter/setter操作-1</title>


<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

</head>
<body>
<h3>登录</h3>
<form action="hello.php" method="POST">
<div class="item-box">
<label for="username">姓名:</label>
<input type="text" name="username" id="username">
</div>
<div class="item-box">
<label for="username">邮箱:</label>
<input type="email" name="email" id="email" value="grantkai@qq.com">
</div>
<div class="item-box">
<label for="remember_0">记住我:</label>
<input type="radio" name="remember" id="remember_0" checked><label for="remember_0">保存</label>
<input type="radio" name="remember" id="remember_1"><label for="remember_1">放弃</label>
</div>
</form>
</body>
<script>
var cl = console.log.bind(console);
// 获取表单元素
var form = $('form');
cl(form);
// 1. attr()方法: 获取/设置元素属性值
/* 1.1 只有一个入参, 为读取, 入参为属性名 */
/* 获取form元素的action属性的值 */
cl(form.attr('action'));
/* 1.2 两个入参, 为设置, 入参1位属性名, 入参2位属性值 */
form.attr('action', 'hi.php');
cl(form.attr('action'));
/* 1.3 修改多个属性值, 入参一个js对象, 对象中的属性是要被修改的属性 */
form.attr({
action: 'sayHello.php',
method: 'GET'
});
/* 1.4. 入参2也可以是回调函数 */
form.attr('action', function() {
// 获取当前请求方式, 如果是GET请求, 则执行查询脚本'query.php'; 如果是非GET请求, 则执行注册脚本:`register.PHP`
// 获取当前表单的method属性值, 并转为小写
var method = $(this).attr('method').toLowerCase();
if('get' == method) {
return 'query.php';
} else {
return 'register.php';
}
});
// 2. css()方法: 针对HTML元素的style属性进行操作. 而它不止能获取到style属性的值, 还能获取到该元素所有的样式
// 包括: 元素的style属性指定的样式(又叫内联样式)/元素默认样式/HTML文件中<style>标签定义的样式/外部css文件定义的样式...
/* tips: 获取元素的最终样式(即, 计算样式) */
/* 使用js原生方式获取 */
// cl(window.getComputedStyle(document.forms.item(0).width));
/* 使用jq获取 */
cl(form.css('width'));
cl(form.css('border'));
// 设置样式
form.css('border', '5px solid green');
/* 支持字面量对象入参设置多个样式属性 */
form.css({
backgroundColor: "wheat",
border: "5px dashed blue"
});
/* 也支持回调 */
/* 每执行一次, 背景色随机发生变化 */
form.css('background-color', function() {
// 颜色数组
var bgcolor = ['orange', 'orangered', 'tan', 'lime'];
// 使用Math.random()生成0-1的随机数, 乘以4后, 就能生成0-4之间的随机数, 然后在用Math.floor()向下取整
var index = Math.floor(Math.random() * bgcolor.length);
return bgcolor[index];
});
// 3. val(): 获取/设置表单元素的值(value属性值)
/* 获取 */
cl($('#email').val());
/* 设置 */
cl($('#email').val('grantkai@qq.com'));
/* 获取选中radio的值 */
cl($('input:radio[name=remember]:checked').val());
/* 回调 */
cl($('#email').val(function() {
return this.defaultValue;
}));
// 4. html()/text(): 元素内容操作
/* 原生方法 */
document.querySelector('h3').innerText = '请登录';
/* jq */
$('h3').text('请登录1');
// js中的innerText属性对应jq中的text()方法, 浏览器会原样输出他们的值
// jq中的innerHTML属性对应jq中的html()方法, 浏览器会解析他们的值中的HTML标签, 再输出
$('h3').text('<span style="color: green">变绿</span>');
// $('h3').html('<span style="color: green">变绿</span>');
// 自定义数据属性
/* 增加data-desc自定义属性, 并把其值设置为'login-form' */
// 貌似并没有在开发这种局的"元素"页签中显示出来, 但是是可以获取到的, 也就是说是设置成功了的
$(form).data('desc', 'login-form');
/* 获取自定义数据属性的值 */
cl($(form).data('desc'));
/* 移除 */
cl($(form).removeData('desc'))
/* 此时再获取data-desc自定义数据熟悉的值, 就获取不到了(undefined) */
cl($(form).data('desc'));
</script>
</html>

jQuery中的DOM操作

创建和插入元素

$(元素标签文本): 根据传入的标签文本, 创建对应的元素, 可带有属性.
$(元素标签文本, 元素属性字面量对象): 可以把元素的属性以字面量对象的形式传入第二个参数, 创建的元素将设置有这些属性.

插入元素

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

元素替换

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery中的DOM操作</title>


<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

<style>
.active {
color: red;
}
</style>
</head>
<body>
</body>
<script>
var cl = console.log.bind(console);
// 1. 元素的插入与替换
// 1.1 append(元素字符串): 在父级元素上调用, 向里面插入元素
$('body').append('<ol>');
// $('body').append('<ol>');
// 1.2 子元素.appendTo(父元素): 把子元素添加到父元素中, appendTo()是在子元素上调用
$('<li>').text('笔记本电脑').appendTo('ol');
$('<li>').text('智能手机').addClass('active').appendTo('ol');
$('<li>').html('<a href="">格子衫</a>').addClass('active').appendTo('ol');
$('<li>', {
id: 'hello',
style: 'background-color: yellow'
}).html('<a href="">游戏机</a>').appendTo('ol');
/* append(回调) */
/* 用回调循环生成子元素 */
$('ol').append(function() {
var res = '';
for(var i = 0; i < 5; i++) {
res += '<li><a href="">最新商品' + (i + 1) + '</a></li>';
}
return res;
});
// 从第3个元素前面增加一个<li>
/* befor(): 在当前元素前添加兄弟元素 */
$('ol li:nth-of-type(3)').before("<li>新元素</li>");
/* 把新元素2的<li>添加到第4哥<li>后面 */
$('<li>新元素2</li>').insertAfter($('ol li:nth-of-type(4)'));
// prepend()/prependTo(): 把新元素插入到父容器中的第一个位置
$('<li>最新留言</li>').prependTo('ol')
// 元素替换
// 当前元素.replaceWith(新元素); 新元素.replaceAll(当前元素)
$('ol > li:last-of-type').replaceWith('<li>商品元素五</li>');
// ↑↓表达式效果一样
$('<li>商品元素五</li>').replaceAll('ol > li:last-of-type');
</script>
</html>

jQuery常用的过滤器

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

在选择器查询到的元素中过滤

filter(selector): 在选择器查询结果中再次筛选过滤.
first(): 返回选择器查询结果的第一个元素.
last(): 返回选择器查询结果的最后一个元素.
eq(index): 返回选择器查询结果中指定索引的元素.
slice(start, end + 1): 返回选择器查询结果中元素索引从start到end的元素

在选择器查询到的元素的子元素/后代元素中过滤

children(): 返回选择器查询结果的所有子元素. 等效于js中的children属性. 但children()可以返回多个元素的子元素, 而children属性只能返回当前元素的子元素.
find(selector): 在选择器查询结果的后代元素中再次筛选过滤.

可以链式调用多个过滤器.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery常用的过滤器</title>


<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

</head>
<body>
<ul id="first">
<li>item1</li>
<li>item2</li>
<ul>
<li class="red">item1</li>
<li>item2</li>
<li>item3</li>
</ul>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<ul id="second">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
</body>
<script>
var cl = console.log.bind(console);
// 获取第一个ul
/* 方式1: 用选择器 */
cl($('ul#first'));
/* 方式2: 用选择器+过滤器 */
/* 1. filter()过滤器 */
cl($('ul').filter('#first'));
/* ↑第二种方法, 可读性更好, 先选择, 再过滤, 实现起来也更简单 */
// cl($('ul').first());
// 2. children(), 等效于js中的children属性
/* 第一个ul */
var ul1 = $('ul').filter('#first');
cl(ul1.children());
/* 第一个ul的所有子元素 */
var children = ul1.children();
/* 3. first(): 获取第一个元素;
4. last(): 获取最后一个元素 */
children.first().css('background-color', 'red');
children.last().css('background-color', 'red');
/* 5. eq(index): 第(index+1)个元素 */
children.eq(3).css('background-color', 'yellow');
// children(选择器)只能获取到子元素, 不能获取到更深层级的元素
/* 所有下面的操作, 并不能找到class="red"的元素 */
ul1.children('.red').css('color', 'red');
// 6. 要获取到所有后代元素, 则用find(选择器)
ul1.find('li').filter('.red').css('color', 'red');
// 7. slice(start, end+1)过滤范围: 过滤出索引从start到end的元素
$('ul').filter('#second').children().slice(1, 3).css('color', 'orange');
// 如果选择器学得好, 也可以用选择器直接实现, 过滤器并不是必须的. 但是...可读性是不是很差...
$('ul#second>li:nth-of-type(-n + 3):not(:first-of-type)').css('color', 'green');
</script>
</html>

学习心得

jQuery各种getter/setter操作方法, 参数都可以试试: 普通值参数, 字面量对象参数, 回调函数作为参数;

jQuery的DOM操作很方便, 感觉比JS原生的DOM操作更灵活.
-过滤器并不是必须的, 可以用复杂的选择器来实现”选择器+过滤器”的效果. 但”选择器+过滤器”可读性好.

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：下周三(10日)之后, 建议博客不要以"作业"形式发布了

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

jQuery基本的getter/setter操作

jQuery中的DOM操作

jQuery常用的过滤器

学习心得