jquery

等着页面加载完再执行

$(function(){
});
$(document).ready(function(){})

原生对象和jquery对象相互转化（因为video标签$没有播放属性，所以只能用原生）

<video src="mov.mp4" muted></video> //muted是google浏览器的兼容性写法
1、jquery对象
 $('video')
2、原生对象
 var myVideo=document.querySelector('video');
3、原生对象改为jquery对象
 $(myVideo)
4、juery对象转化为原生对象
 方法一：$('video')[0].play()
 方法二：$('video').get(0).play()

jquery选择器

$('选择器') //里面是css选择器即可

筛选选择器

jquery筛选方法

1、jquery内部有隐式迭代的功能

$('div').css('background','pink') //此代码会将页面中所有的div都置换成粉色

jquery中的排他思想

//1、隐式迭代 给所有的按钮都绑定了一个点击事件
$("button").click(function(){
  var index=$(this).index()//获取当前索引号
  //2、当前的元素变化背景颜色
  $(this).css("background","pink")
  //3、其余的兄弟去掉背景颜色 因为隐式迭代的原因不需要使用for循环了
  $(this).siblings('button').css('background','')
  //链式编程的写法
  $(this).css('color','red').siblings().css('color','');
})

jquery样式操作

操作样式css修改

1、返回属性值
$(this).css(‘color’)
2、设置属性值
$(this).css(‘color’,’red’)
$(this).css({
width： 100，
height： 200
}) //如果css里的参数是对象，则属性可以不加引号

修改样式操作类

$("div").click(function(){
  $(this).addClass('current') //current是类名
  $(this).removeClass('current') //移除类名
  $(this).toggleClass('current') //切换类
})

jquery效果

显示/隐藏

show([speed,[easing],[fn]])
speed: 'slow'/'normal'/'fast'/1000(毫秒)
easing:(Optional)用来指定切换效果，默认'swing',也可用‘linear’
fn：回调函数，在动画执行完之后，执行的函数，只会执行一次
$('li').hover(function(){
  //鼠标经过
  $(this).children('ul').slideDown(200);
},function(){
  $(this).children('ul').slideUp(200);
})
hover如果只写一个函数，那么鼠标经过和鼠标离开都会出发
$('li').hover(function(){
  $(this).children('ul').slideToggle();
})
动画队列及其停止排队方法
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果的排队执行
停止排队 stop()
$('li').hover(function(){
  $(this).children('ul').stop().slideToggle(); //解决排队动画的效果
})

hide()
toggle()
滑动效果
slideDown()
slideUp()
slideToggle()
淡入淡出
fadeIn()
fadeOut()
fadeToggle()
fadeTo() //修改透明度
自定义动画
animate()

animate(params,[speed],[easing],[fn])
自定义动画
$('button').click(function(){
  $('div').animate({
    left: 500,
    top: 200
  })
},function(){
  //回调函数
})

jquery属性操作

获取属性值的方式

获取元素固有属性值

获取：element.prop(‘属性名’)
设置：element.prop(‘属性名’，‘属性值’)

获取自定义属性值

获取：element.attr(‘属性名’)
设置：element.attr(‘属性名’，‘属性值’)

数据缓存data()这个里面的数据是存放在元素内存里面

设置：
$("span").data('uname','andy') //这里在span的属性上面并看不到uname属性，起到一个暂存的作用
获取：
$("span").data('uname'）
也可以获取h5自定义属性，第一个不用写data- 而且返回的是数字型

全选按钮案例

$(".checkall").change(function(){
  $("j-checkbox",".checkall").prop("checked",$(this).prop("checked"))
})
$(".j_checkbox").change(function(){
  if($(".j_checkall:checked").length===$('.j_checkbox').length){
    $(".checkall").prop("checked",true);
  }else{
    $(".checkAll").prop("checked",false)
  }
})

jquery文本属性值

1、普通元素内容html() (相当于原生innerHTML)
html() 获取元素的内容
html(‘内容’) 设置元素的内容

2、普通元素文本内容text() (相当于原生innerText)

增加商品数量模块 首先声明一个变量，当我们点击+号（increment）,就让这个值++，
然后赋值给文本框
$(".increment").click(function() {
  //val 获取表单元素的值
  var n=$(this).siblings('.text').val()
})
$(this).parent() //获取父级元素的值
$(this).parents() //获取所有的祖先元素
$(this).parents(选择器名) //获取指定元素

jquery元素操作

jquery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同操作
就需要用到遍历

语法

$("div").each(function(index,domEle){XXX;})
1、each()方法遍历匹配的每一个元素。主要用于Dom操作
2、index索引号，demEle是每个DOM元素，不是jquery对象
$.each(object,function(index,element {}))
1、$.each()方法可用于遍历任何对象，主要用来数据处理，比如数组，对象
2、里面的函数有2个参数：index是每个元素的索引号；element遍历内容
整数字符串转化为整数数字类型：parseInt()
浮点数字符串转化为整数数字类型：parseFloat()

创建元素

element.append(‘内容’) //类似原生appendChild()

内部添加元素，生成之后，它们是父子关系
外部添加元素，生成之后，他们是兄弟关系
$(function(){
  // 1、创建元素
  var li=$("<li>我是后来创建的li</li>")
  // 2、 添加元素
  // (1) 内部添加
  $("ul").append(li);//内部添加并且放到内容的放在后面
  $("ul").prepend(li);//内部添加并且放到内容的最前面
  //（2）外部添加
   var div=$("<div>我是kkkk</div>")
   //$(.test).after(div)
      $(".test").before(div)
  // 3.删除元素
      $("ul").remove()  //删除匹配的元素（本身）
  ele.empty() //删除匹配的元素集合中所有的子节点（本身元素不删除）
  ele.html("") //清空匹配的元素内容，html里是“” 和empty作用一样
  $(".j-checkbox:checked").parents(".cart-item").remove()
})
// 给选中的商品添加背景颜色 check-card-item
if($(this).prop("checked")) {
  // 让所有的商品添加 check-card-item
  $(".card-item").addClass("check-card-item")
}else{
    $(".card-item").removeClass("check-card-item")
}

jquery尺寸、位置操作

尺寸

以上参数为空，则是获取相应的值，返回的是数字型
如果参数是数字，则是修改相应的值
参数可以不必写单位

位置

1、获取设置距离文档的位置 （偏移）offset
 取值：$(".son").offset() //返回时一个Object ：$(".son").offset().top
 设置值：$(".son").offset({
   top: 200,
   left: 200
 })
2、获取距离带有定位父级位置 （偏移） position 如果没有带有定位的父级，则以文档为准
$(".son").position() // 只能获取，不能设置偏移
3、获取被卷去头部的距离
$(window).scroll(function(){ //监听页面滚动的方法
  $(document).scrollTop(); //获取
  $(document).scrollTop(100); //设置
})
4、带有动画的返回顶部
$('.back').click(function(){
  //1、核心原理：使用animate动画返回顶部
  //2、animate动画函数里面有个scrollTop属性，可以设置位置
  //3、但是是元素做动画，因为$("body,html").animate({scrollTop})
     $("body,html").stop().animate({
           scrollTop: 0
   })
})

<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>
</ul>
$(function(){
    //鼠标经过
  $('.nav>li').mouseover(function(){
    // $(this) jquery的当前元素 this不要用引号
    $(this).children('ul').show();
  })
  $('.nav>li').mouseout(function(){
    // $(this) jquery的当前元素 this不要用引号
    $(this).children('ul').hide();
  })
})
//电梯导航
//点击电梯导航页面可以滚动到相应内容区域
$(".fixedtool li").click(function() {
  //当我们每次点击小li 就需要计算出页面要去往的位置
  var cuurent=$(“.floor .w”).eq($(this).index()).offset().top
    $("body html").stop().animate({
      scroolTop: cuttent
  })
  $(this).addClass("current").siblings().removeClass()
})
//页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名
$(".floor .w").each(function(i,ele) {
  if($(document).scrollTop()>=$(ele).offset().top){
      $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
  }
})

jQuery事件

jQuery事件注册 on/one(只会触发一次)

$("ul").on("click","a",function(){
  $(this).parent().slideUp(function(){
      //slideUp之后，a还是在的，只是隐藏了，我们需要再
    //它的毁调函数中删除该标签
    $(this).remove();
  })
})

事件处理off()解绑事件

jQuery事件处理

jQuery事件对象

JQuery种的其他方法

jquery对象的拷贝方法

Jquery多库共存的两种方式

jquery插件