1.$()的四种参数的使用场景
代码块
<!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>
效果图
2.jQuery方法演示
代码块
<!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>
效果图
3.为什么将jQuery转为js对象
因为jquery方法的局限性,不可能封装所有的js方法