![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：
Collection
Collection
代码块
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><ul><li class="item">item1</li><li class="item">item2</li><li class="item">item3</li><li class="item">item4</li></ul><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script>// jquery $()的四种类型参数与使用场景// 1.元素选择器$('.item, ul').css('color','red');//2.将js对象包装成jquery对象，包装器$(document.body).css('background','green');//3.$(html文本),创建dom元素，包装成jquery对象返回$("<p>hello world</p>").insertAfter('ul');//4.$(回调)： dom树一旦创建完成，就会立即执行这个回调$(()=>{$('h2').css('color','white');})</script><h2>hahaha</h2></body></html>
效果图
代码块
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>属性操作：attr</title><style>.item {color: red;}</style></head><body id="main"><ul><li class="item">item1</li><li class="item">item2</li><li class="item">item3</li><li class="item">item4</li></ul><input type="text" value="123"><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script><script>//获取属性 第二个参数允许使用回调函数console.log($('body').attr('id'));//删除属性$('ul li').removeAttr('class');//css操作console.log( $('ul').css('width'));//设置多个样式// $('ul').css({// border : '1px solid red',// })//颜色随机变换$('ul').css('background',()=>{const color = ['green','red','lime'];return color[Math.floor(Math.random() * color.length)];})// 获取元素value的值console.log($('input').val());//text():读写入文本//html():读写入html文本</script></body></html>
效果图
因为jquery方法的局限性，不可能封装所有的js方法