文章目录
- 一、写在前面
- 二、jQuery的引入
- 二、各种查找选择器
- 四、实例之左侧菜单栏
一、写在前面
JQuery世界上使用最广泛的一个库,它是一个轻量级的库,文件大小只有几十k,但是功能却相当强大。并且它可以兼容CSS的多个版本和各种浏览器,这也是它用途极为广泛的原因。接下来几篇将要介绍jQuery的相关用法。
二、jQuery的引入
1、jQuery的下载
它在很多网站都可以下载到,这里推荐一个jquery下载所有版本(实时更新)。
下载完了后是一个压缩包,解压之后是一个js文件,我们把它复制到我们的项目文件夹里就可以使用了。
2、jQuery的引入
然后在html文档里,用<script>标签引入jQuery的文件链接:
<script src="jquery-3.4.1.js"></script>
3、jQuery的使用($的用法)
例如:
$("#test").html()
这个$符号就是使用jQuery的标志,它是一个基本原则器,因此每次使用前都需要加上它,上述代码的意思是:
获取ID为test的元素内的html代码。其中html()是jQuery里的方法
4、jQuery的基础语法
$(selector).action()
selecto就是选择器方面,action就是我们需要的操作方面(各种方法)
二、各种查找选择器
1、基本选择器($符号)
$("*") $("#id") $(".class") $("element") $(".class,p,div")
2、层级选择器
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
3、基本选择器(:索引)
$("li:first") $("li:eq(4)") $("li:even") $("li:gt(2)")
4、属性选择器
$('[id="div1"]') $('["alex="sb"][id]')
5、表单选择器
$("[type='text']").css("width","200px");
$(":text").css("width","500px");
6、练习代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery引入</title>
</head>
<body>
<div class="div1">DIV标签一号</div>
<div class="divv">DIV标签二号
<p class="ppp" name="Zahuw" id="p1">P标签一号</p>
<a href="">A标签</a>
<div class="divv">DIV标签三号
<div class="divv">DIV标签四号</div>
<p name="Luffy" id="p2">P标签二号</p>
<p name="Luffy" id="p3">P标签二号</p>
</div>
</div>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
<li>6666</li>
</ul>
<input type="text">
<input type="checkbox">
<input type="submit">
<script src="jquery-3.4.1.js"></script>
<script>
$("[name='Zahuw']").css("color","red");
$("[name='Luffy'][id='p2']").css("color","red");
$("[type='text']").css("width","200px");
$(":text").css("width","500px");
</script>
</body>
</html>
四、实例之左侧菜单栏
1、测试效果
2、测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单栏</title>
<style>
.outer{
height: 1000px;
width: 100%;
}
.menu{
height: 500px;
width: 30%;
background-color: beige;
float: left;
}
.content{
height: 500px;
width: 70%;
background-color: rebeccapurple;
float: left;
}
.title{
line-height: 50px;
background-color: #425a66;
color: yellow;}
.hide{
display:none;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title" onclick="show(this)">饮料</div>
<div class="con hide">
<div>可乐</div>
<div>红茶</div>
<div>酸奶</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">主食</div>
<div class="con hide">
<div>套饭</div>
<div>披萨</div>
<div>汉堡</div>
</div>
</div>
<div class="item">
<div class="title" onclick="show(this)">配菜</div>
<div class="con hide">
<div>鸡腿</div>
<div>鸡排</div>
<div>鸡米花</div>
</div>
</div>
</div>
<div class="content"></div>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
function show(self){
$(self).next().removeClass("hide");
$(self).parent().siblings().children(".con").addClass("hide");
}
</script>
</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)