web前端学习笔记——Day9(jQuery)
程序员文章站
2022-05-10 15:33:18
...
一、jQuery是什么？
<1>jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
<2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
<3>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
<4>jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
<5>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择
二、什么是jQuery对象？
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的**.** 如果一个对象是 jQuery 对象**,** 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
$("#test").html()
//意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
// 这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;
//虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
//约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
var $variable = jQuery 对象
var variable = DOM 对象
$variable[0]：jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML
jquery的基础语法：$(selector).action()
三、寻找元素（选择器和筛选器）
3.1选择器
3.1.1基本选择器
$("*") $("#id") $(".class") $("element") $(".class,p,div")
3.1.2层级选择器
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
3.1.3基本筛选器
$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
3.1.4属性选择器
$('[id="div1"]') $('["alex="sb"][id]')
3.1.5表单选择器
$("[type='text']")----->$(":text")
注意只适用于input标签 : $("input:checked")
举例：
<!DOCTYPE html>
<html>
<head>
<title>寻找元素（选择器和筛选器）</title>
</head>
<body>
<div>hello xjy</div>
<a href="">点我啊</a>
<p id="p1" alex="sb">nihaoa</p>
<p id="p2" alex="sb">nihaoa</p>
<div class="outer">
outer
<div class="inner">
inner
<p>inner 2</p>
</div>
<p>wzq</p>
</div>
<p>xialv</p>
<div class="outer2">div1</div>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<input type="text" name="">
<input type="checkbox" name="">
<input type="submit" name="">
</body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js"></script>
<script type="text/javascript">
//基本选择器
// // $("div").css("color","red");
// $("*").css("color","red");
// $("#p1").css("color","yellow");
// $(".outer").css("background-color","green");
// $(".inner,p,a").css("background-color","blue");
//层级选择器
//$(".outer p").css("color","red");
//后代选择器(不只是儿子，也可以是孙子，只要是后代就行)
//$(".outer>p").css("color","red");
//子代选择器（只能是儿子）
//$(".outer+p").css("color","red");
//毗邻选择器（即兄弟选择器且必须是下面的还要紧挨着）
//$(".outer~p").css("color","red");
//毗邻选择器（即兄弟选择器且必须是下面的但不需要紧挨着）
//基本筛选器
//$("li")//这拿到的是一个数组，里面有四个li标签
//$("li:first").css("color","red");
//拿到其中第一个
//$("li:last").css("color","red");
//拿到其中最后一个
//$("li:eq(2)").css("color","red");
//eq()，括号里面写索引，从0开始
//$("li:even").css("color","red");
//控制所有偶数行
//$("li:odd").css("color","yellow");
//控制所有奇数行
//$("li:gt(1)").css("color","yellow");
//从第三个开始向后面的改变（它的后面，不包括它）
//$("li:lt(2)").css("color","yellow");
//从第二个开始向前面改变（它的前面，不包括它）
//属性选择器
//$("[alex='sb'][id='p1']").css("color","blue");
//表单选择器
//$(":text").css("width","500px")
</script>
</html>
3.2筛选器
3.2.1过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test")//判断是不是有class叫test的属性，返回一个布尔值
3.2.2查找筛选器（极其重要）
$("div").children(".test") $("div").find(".test")
选子代和后代
$(".test").next() $(".test").nextAll() $(".test").nextUntil()
选下面的一个和多个兄弟
$("div").prev() $("div").prevAll() $("div").prevUntil()
选上面的一个和多个兄弟
$(".test").parent() $(".test").parents() $(".test").parentUntil()
选父亲和祖宗
$("div").siblings()选上下兄弟
eg：举例：
<!DOCTYPE html>
<html>
<head>
<title>筛选器</title>
</head>
<body>
<div>hello xjy</div>
<a href="">点我啊</a>
<p id="p1" alex="sb">nihaoa</p>
<p id="p2" alex="sb">nihaoa</p>
<div class="outer">
outer
<div class="inner">
inner
<p>inner 2</p>
</div>
<p>wzq</p>
</div>
<p>xialv</p>
<div class="outer2">div1</div>
<ul>
<li>111</li>
<li id="end2">222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
<li>777</li>
<li id="end">888</li>
<li>999</li>
</ul>
<input type="text" name="">
<input type="checkbox" name="">
<input type="submit" name="">
</body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js"></script>
<script type="text/javascript">
//筛选器
//$("li").eq(2).css("color","red");
//$("li").first().css("color","yellow");
//$("li").last().css("color","yellow");
//查找筛选器
//$(".outer").children("p").css("color","red");
//查找子标签（儿子）
//$(".outer").find("p").css("color","green");
//查找后代中所有的p标签
//$("li").eq(2).next().css("color","green");
//第三个标签下面的第一个兄弟元素（即第四个）
//$("li").eq(2).nextAll().css("color","green");
//第三个标签下面的所有兄弟元素
//$("li").eq(2).nextUntil("#end").css("color","green");
//第三个标签下面的兄弟和id=end之前的兄弟之间元素，不包括两边
//$("li").eq(6).prev().css("color","green");
//第7个标签上面的第一个兄弟元素（即第五个）
//$("li").eq(6).prevAll().css("color","green");
//第7个标签上面的所有兄弟元素
//$("li").eq(6).prevUntil("#end2").css("color","green");
//第7个标签上面的兄弟和id=end2之后的兄弟之间元素，不包括两边
//console.log($(".outer .inner p").parent().html())
//找父标签
//$(".outer .inner p").parents().css("color","red")
//不停的向上找一直找到最上面（基本不用）
//$(".outer .inner p").parentsUntil("body").css("color","red")
//不停的向上找一直找到body的下面
//$(".outer").siblings().css("color","red")
//它上下的所有的兄弟标签
</script>
</html>
3.3实例之左侧菜单
<!DOCTYPE html>
<html>
<head>
<title>左侧菜单</title>
<style type="text/css">
.menu{
height: 500px;
width: 30%;
background-color: gray;
float: left;
}
.content{
width: 70%;
height: 500px;
background-color: red;
float: left;
}
.title{
line-height: 50px;
background-color: green;
color: yellow;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title">菜单一</div>
<div class="con">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</div>
<div class="item">
<div class="title">菜单二</div>
<div class="con hide">
<div>www</div>
<div>zzz</div>
<div>qqq</div>
</div>
</div>
<div class="item">
<div class="title">菜单三</div>
<div class="con hide">
<div>xxx</div>
<div>jjj</div>
<div>yyy</div>
</div>
</div>
</div>
<div class="content"></div>
</div>
</body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(".item .title").click(function(){
$(this).next().removeClass("hide").parent().siblings().children(".con").addClass("hide");
//$(this).next().removeClass("hide");
//$(this).parent().siblings().children(".con").addClass("hide");
})
</script>
</html>
3.4实例之tab切换
<!DOCTYPE html>
<html>
<head>
<title>tab切换</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.tab_outer{
margin: 0px auto;
width: 60%;
background-color: gray;
}
.menu{
background-color: #cccccc;
line-height: 40px;
border: 1px solid red;
}
.menu li{
display: inline-block;
}
.menu a{
border-right: 1px solid yellow;
padding: 11px;
}
.content{
background-color: tan;
border: 1px solid green;
height: 300px;
}
.hide{
display: none;
}
.current{
background-color: darkgray;
color: yellow;
border-top: 2px solid rebeccapurple;
}
</style>
</head>
<body>
<div class="tab_outer">
<ul class="menu">
<li xxx="c1" class="current" onclick="tab(this)">
菜单一
</li>
<li xxx="c2" onclick="tab(this)">菜单二</li>
<li xxx="c3" onclick="tab(this)">菜单三</li>
</ul>
<div class="content">
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
</body>
<script src="E:/笔记/1.4web前端笔记/JQuery/jquery-3.1.1.js"></script>
<script type="text/javascript">
function tab(self){
var index=$(self).attr("xxx");
$("#"+index).removeClass("hide").siblings().addClass("hide");
$(self).addClass("current").siblings().removeClass("current")
}
</script>
</html>