jq第一天。

jq对象和dom对象的不同点？

1. DOM 对象： 用原生js获取过来的对象就是DOM对象
2. jQuery对象： 用jquery方式获取过来的对象是jQuery对象。 本质：通过$把DOM元素进行了包装
3. jq对象只能使用jq方法，dom对象只能使用原生的js属性和方法
   比如 ：
   jq中隐藏对象可以使用 $(this).hide();
   js中隐藏对象是通过改变对象的属性完成的
   this.style.display = ‘none’;

jq和dom对象是可以互相转换的。因为原生js中的某些属性和方法jq并没有封装，当我们想使用这些方法时必须将jq对象转换为dom对象。
1.jq对象转换为dom对象
1.1 $(‘video’)[0].play()
1.2 $(‘video’).get(0).play()
2. DOM对象转换为 jQuery对象
// (1) 我们直接获取视频，得到就是jQuery对象
// $(‘video’);
// (2) 我们已经使用原生js 获取过来 DOM对象
var myvideo = document.querySelector(‘video’);
$(myvideo).hide();

        jq  API

• 1.JQ选择器
  1.1
  jQuery 元素选择器
  jQuery 使用 CSS 选择器来选取 HTML 元素。
  $(“p”) 选取 p 元素。
  $(“p.intro”) 选取所有 class=“intro” 的p 元素。
  $(“p#demo”) 选取所有 id=“demo” 的p 元素。
  1.2
  jQuery 属性选择器
  jQuery 使用 XPath 表达式来选择带有给定属性的元素。
  $("[href]") 选取所有带有 href 属性的元素。
  $("[href=’#’]") 选取所有带有 href 值等于 “#” 的元素。
  $("[href!=’#’]") 选取所有带有 href 值不等于 “#” 的元素。
  $("[href$=’.jpg’]") 选取所有 href 值以 “.jpg” 结尾的元素

1.3jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

实例
$(“p”).css(“background-color”,“red”);
$(“element”).css(“样式”,“属性”)

// $(“div”).css(“width”, “300px”);
// $(“div”).css(“width”, 300);
// $(“div”).css(height, “300px”); 属性名一定要加引号
$(“div”).css({
width: 400,
height: 400,
backgroundColor: “red”
// 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号

jq里的排他思想：
// 1. 隐式迭代 给所有的按钮都绑定了点击事件
$(“button”).click(function() {
// 2. 当前的元素变化背景颜色
$(this).css(“background”, “pink”);
// 3. 其余的兄弟去掉背景颜色 隐式迭代
$(this).siblings(“button”).css(“background”, “”);
});

$("#left li").mouseover(function() {
var index = $(this).index();
$("#content div").eq(index).show();
$("#content div").eq(index).siblings().hide()；
})

tab栏切换
// 1.点击上部的li，当前li 添加current类，其余兄弟移除类
$(".tab_list li").click(function() {
// 链式编程操作
$(this).addClass(“current”).siblings().removeClass(“current”);
// 2.点击的同时，得到当前li 的索引号
var index = $(this).index();
console.log(index);
// 3.让下部里面相应索引号的item显示，其余的item隐藏
$(".tab_con .item").eq(index).show().siblings().hide();
});

原生js中classname会覆盖原先的类名，jq中addclass是追加一个类名。

// 鼠标经过
// $(".nav>li").mouseover(function() {
// // $(this) jQuery 当前元素 this不要加引号
// // show() 显示元素 hide() 隐藏元素
// $(this).children(“ul”).slideDown(200);
// });
// // 鼠标离开
// $(".nav>li").mouseout(function() {
// $(this).children(“ul”).slideUp(200);
// });
// 1. 事件切换 hover 就是鼠标经过和离开的复合写法
// $(".nav>li").hover(function() {
// $(this).children(“ul”).slideDown(200);
// }, function() {
// $(this).children(“ul”).slideUp(200);
// });
// 2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
$(".nav>li").hover(function() {
$(this).children(“ul”).slideToggle();
});
})

让动画停止排队，只执行一次动画：
事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
$(".nav>li").hover(function() {
// stop 方法必须写到动画的前面
$(this).children(“ul”).stop().slideToggle();

案例代码
$(function () {
$(".wrap li").hover(function() {
$(this).siblings().stop().fadeTo(400,0.5);
// $(this).siblings().stop().fadeTo(400, 0.5);
}, function() {
// 鼠标离开，其他li 透明度改为 1
$(this).siblings().stop().fadeTo(400,1);
// $(this).siblings().stop().fadeTo(400, 1);
})

    });

3.6 自定义动画animate
animate(params,[speed],[easing],[fn])

（ 1） params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采
取驼峰命名法 borderLeft。 其余参数都可以省略。
（ 2） speed：三种预定速度之一的字符串(“slow” ,“normal” , or “fast” )或表示动画时长的毫秒数值(如： 1000)。
（ 3） easing： (Optional) 用来指定切换效果， 默认是“swing”， 可用参数“linear”。
（ 4） fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

手风琴案例
$(".king li").mouseenter(function() {
// 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
$(this).stop().animate({
width: 224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
// 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
$(this).siblings(“li”).stop().animate({
width: 69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})