<script type="text/javascript">
//1.等着页面DOM加载完毕再去执行js代码
// $(document).ready(function(){
// $("#title").hide();
// })
//2.等着页面DOM加载完毕再去执行js代码
$(function(){
// jQuery("#title").hide();
})
jQuery(function(){
// alert(11)
})
//jQuery的顶级对象$
//1.$是jQuery的别称，在代码中可以使用jQuery代替$，但一般为了方便，通常都直接使用$
//2.$是$Query的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成jQuery对象，就可以调用jQuery的方法
//1. DOM对象： 用原生js获取过来的对象就是DOM对象
var myDiv = document.querySelector('div'); //myDiv 是DOM对象
var mySpan= document.querySelector('span'); //mySpan 是DOM对象
console.log(myDiv);
//2. jQuery对象：用Jquery方式获取过来的对象是jQuery对象。 本质：通过$把DOM元素进行了包装
$('div');
$('span');
console.log($('div'));
//3. jQuery对象只能使用jQuery方法，DOM对象则使用原生的JavaScript属性和方法
// myDiv.style.display='none';
// myDiv.hide(); myDiv 是一个DOM对象不能使用jQuery里面的hide方法
// $('div').style.display='none'; 这个$('div')是一个jQuery对象不能使用原生js的属性和方法
</script>
jQuery对象和DOM对象
DOM对象与jQuery对象之间是可以相互转换的
因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换DOM对象才能使用
1.DOM对象转换为jQuery对象：$(DOM对象)；
<video sec=""></video>
<script>
//1. DOM对象转换为jQuery对象
//（1）我们直接获取视频，得到就是jQuery对象
$('video')
//（2）我们已经使用原生js获取过来DOM对象
var myvideo = document.querySelector('video');
$(myvideo);
//2. jQuery对象转换为DOM对象
//（1）$('div')[index] index是索引号
//（2）$('div').get(index) index是索引号
</script>
1.jQuery选择器
1.1 jQuery基础选择器
$("选择器") //里面选择器直接写css选择器即可，但是加引号
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $("#id") | 获取指定ID的元素 |
| 全选选择器 | $("*") | 匹配所有元素 |
| 类选择器 | $(".class") | 获取同一类class的元素 |
| 标签选择器 | $("div") | 获取同一类标签的所有元素 |
| 并集选择器 | $("div,p,li") | 选取多个元素 |
| 交集选择器 | $("li.current") | 交集元素 |
1.2 隐式迭代（重要）
遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代。
<script type="text/javascript">
$(function(){
console.log($('div'))
//给四个div设置背景颜色为粉色，jQuery对象不能使用style
$('div').css('background','red')
//3.隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
$('ul li').css("color","red")
})
</script>
<body>
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
<ul>
<li>相同的操作</li>
<li>相同的操作</li>
<li>相同的操作</li>
</ul>
筛选选择器
<script type="text/javascript">
$(function(){
$('ul li:first').css("color","red") //第一个li的字体颜色
$('ul li:eq(2)').css("color","blue")
})
</script>
<body>
<ul>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ul>
<ol>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ol>
<script type="text/javascript">
$(function(){
//1. 父 parent() 返回的是 最近一级的父级元素 亲爸爸
console.log($(".son").parent());
//2. 子 （1）亲儿子 children() 子代选择器 ul>li
$('.nav').children("p").css("color","red")
//(2) 可以选里面所有的孩子 包括儿子和孙子 find()
$('.nav').find('p').css("color",'blue')
})
</script>
<body>
<div class="father">
<div class="son">
儿子
</div>
</div>
<div class="nav">
<p>我是屁</p>
<div>
<p>我是P</p>
</div>
</div>
</body>
鼠标悬浮下拉框
<script type="text/javascript">
$(function(){
//鼠标经过
$('ul li').children('ul').hide()
$(".nav>li").mouseover(function(){
//$(this) jQuery 当前元素 this不要加引号
//show() 显示元素 hide() 隐藏元素
$(this).children("ul").show();
})
//鼠标离开
$(".nav>li").mouseout(function(){
$(this).children("ul").hide()
})
})
</script>
<body>
<ul class="nav">
<li>
<a href="">微博</a>
<ul>
<li><a href="">微博</a></li>
<li><a href="">微博</a></li>
<li><a href="">微博</a></li>
</ul>
</li>
<li>
<a href="">微博</a>
<ul>
<li><a href="">微博</a></li>
<li><a href="">微博</a></li>
<li><a href="">微博</a></li>
</ul>
</li>
<li>
<a href="">微博</a>
<ul>
<li><a href="">微博</a></li>
<li><a href="">微博</a></li>
<li><a href="">微博</a></li>
</ul>
</li>
</ul>
</body>
<script type="text/javascript">
$(function(){
//1.鼠标经过左侧的li
$("#left li").mouseover(function(){
// 2.得到当前li的索引号
var index = $(this).index();
//3. 让我们右侧的盒子相应索引号的图片显示出来
$("#content div").eq(index).show();
//4.请其他的图片（就是其他的兄弟） 隐藏起来
$("#content div").eq(index).siblings().hide()
})
})
</script>
<body>
<div class="wrapper">
<ul id="left">
<li>女靴</li>
<li>雪地靴</li>
<li>冬裙</li>
<li>呢大衣</li>
<li>毛衣</li>
<li>棉服</li>
</ul>
<div id="content">
<div>
<a href="">fgaeaf</a>
</div>
<div>
<a href="">fagaewf</a>
</div>
<div>
<a href="">afge</a>
</div>
<div>
<a href="">fgaa</a>
</div>
<div>
<a href="">afs</a>
</div>
<div>
<a href="">afbhdv s</a>
</div>
</div>
</div>
2.jQuery样式操作
2.1 操作 css 方式
jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式。
1.参数只写属性名，则是返回属性值
$(this).css("color");
2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引导
$(this).css("color","red");
3.参数可以是对象形式，方便设置多组样式。属性名和属性值用”：“隔开，属性可以不用加引号，
$(this).css({
"color":"white",
"font-size":"20px",
backgroundColor});
$("this").css({
width:400,
height:400,
backgroundColor:"red"
//如果是符合属性则必须采取驼峰式命名法，如果值不是数字，则需要加引号
})
2.2 设置类样式方法
作用等同于以前的classList,可以操作类样式，注意操作类里面的参数不要加点
2.2.1 .添加类
$("div").addClass("current");
<style type="text/css">
.aaa{
width: 100px;
height: 100px;
border: 1px solid aqua;
}
</style>
<script type="text/javascript">
$(function(){
$("div").addClass("aaa")
})
</script>
<body>
<div class="aaa"> </div>
</body>
2.2.2 删除类
$("div").addClass("current");
<style type="text/css">
.aaa{
width: 100px;
height: 100px;
border: 1px solid aqua;
}
</style>
<script type="text/javascript">
$(function(){
$("div").removeClass("aaa")
})
</script>
<body>
<div class="aaa"> </div>
</body>
2.2.3 切换类
$("div").toggleClass("current")
//有没有这个class,有这个类，切换成没有
<style type="text/css">
.aaa{
width: 100px;
height: 100px;
border: 1px solid aqua;
background-color: aquamarine;
}
</style>
<script type="text/javascript">
$(function(){
$("div").click(function(){
$(this).toggleClass("aaa")
})
})
</script>
<body>
<div class="aaa"> </div>
</body>