Python学习第86天（jQuery开始）
一、jQuery是啥？
一个叫John Resig的美国程序员创建的，至今已吸引了来自世界各地的众多 javascript高手加入其team。
jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
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()
引入jQuery的方式<script src = ‘ jQuery3.1.1.1.’><script>
三、元素寻找（选择器、筛选器）
1、选择器
1.1基本选择器 （基本方式和css中的一样）
$ ( ' * ' ) 选择所有标签
$( ' #id' ) 通过选定id来找到标签
$( '.class' ) 通过类名查找标签
$（'element' ） 通过标签名称来查找标签
$（'.class ，p，div'） 逗号用于分隔，表示并列存在好几个标签
1.2层级选择器
$(".outer div") 查找所有子代的div标签，向下没有下限
$(".outer>div") 仅查找自己自带的，不会向孙子代延伸
$(".outer+div") 查找紧挨着的同级标签
$(".outer~div") 查找隔一个的同级标签
后两个用的很少
1.3 基本筛选器 （主要用在li标签，就是体现标题目录的那个标签）
$("li : first") li下的第一个标签，同时也会存在last
$("li : eq(2)") li下的第三个标签，通过eq进行索引调取
$("li : even") li所有的奇数项标签，虽然even是偶数的意思，但是因为标签索引从0开始，所以导致他显示的是奇数，偶数为odd
$("li : gt(1)") lt和gt分别表示前一个和后一个的，也可增加索引
1.4 属性选择器
$('[id="div1"]') 调取了一个属性
$('["alex="sb"][id]') 调取了两个或多个属性就行筛选
1.5表单选择器
$("[type='text']")----->$(":text") 注意只适用于input标签 : $("input:checked")
2.筛选器
2.1 过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test")
上述表示方式看起来和之前的基础选择器没有什么区别，但是这里完美的吧索引放的位置放在了文本内容之外，这样需要查找的内容就不在是自己写死的，
可以用变量进行代替
2.2 查找筛选器
$("div").children(".test") 查找子代中的类名为test的标签，这里仅向下一级，找寻自己的子代
$("div").find(".test") 查找所有子代中的类名为test的表情，向下很多代
$(".test").next() 选择同级的下一个标签
$(".test").nextAll() 选择同级的下面的剩余所有标签
$(".test").nextUntil() 在nextUntil中添加参数，遇到id是多少，class是多少，知道遇到后停止，但不包括遇到的这个标签（li:eq(2)也可以作为条件参数）
$("div").prev() $("div").prevAll() $("div").prevUntil()
表示同级标签的前面，具体内容和next是一一对应的。
$(".test").parent() $(".test").parents() $(".test").parentUntil()
表示父集标签，具体内容和next是一一对应的。parents表示无限网上找，parentUntil（）会添加参数条件进行查找。
$("div").siblings()
选定除了自己剩余的所有同级标签
下面是一个使用最新的jQuery的方法，实现下拉菜单效果，即点菜单一，显示菜单一的内容，点二显示二，同时一消失：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<script>
function tab(self){
var index=$(self).attr("xxx");
$("#"+index).removeClass("hide").siblings().addClass("hide");
$(self).addClass("current").siblings().removeClass("current");
}
</script>
<style>
*{
margin: 0px;
padding: 0px;
}
.tab_outer{
margin: 0px auto;
width: 60%;
}
.menu{
background-color: #cccccc;
/*border: 1px solid red;*/
line-height: 40px;
}
.menu li{
display: inline-block;
}
.menu a{
border-right: 1px solid red;
padding: 11px;
}
.content{
background-color: tan;
border: 1px solid green;
height: 300px;
}
.hide{
display: none;
}
.current{
background-color: darkgray;
color: yellow;
border-top: solid 2px 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>
</html>
终于是在白天完成了任务，晚上可以嗨一嗨了。
