jQuery

ready

dome和js同时加载 等同于 window.document = function(){}

 $(function (){
	console.log("js代码区域")
}

获取dome

 var $div1 = $('#div1');
 var $div1 = $('.div1');

改变样式

$div1.css({'color':'green','font-size':'40px'}); 

选择器

var $li = $('.list li'); //集合

$li.eq(n)  //查找集合中索引为n的元素

$li.filter('.p')  //集合中查找元素

$('.list').find('.a')  //查找子元素

前后与移动

$li.eq(1).prev() //获取同级前一个元素

$li.eq(1).next() //获取同级后一个元素

$li.eq(1).prevAll()  //获取同级前全部元素

$li.eq(1).nextAll() //获取同级后全部元素

$li.eq(1).siblings()  //返回当前元素的所有同级元素。

$li.insertBefore(''<a>百度</a>")   //在当前元素前插值

$li.insertAfter("<a>百度</a>")      //在当前元素后插值

读取元素&属性

$('.div01')..html()  //取元素内容

$a.prop('title')      //取元素属性

样式操作

  $div.addClass('big'); //添加类

  $div.removeClass('big') //删除类

  $div.toggleClass('big'); //有添加无删除

特效

.fadeOut(1000,function (){})  //逐渐消失(延时1s)

.fadeIn(2000)  //逐渐显示(延时2s）

.fadeToggle()    //切换淡入淡出 

.hide()   //隐藏元素

.show()  //显示元素

.toggle()   //切换元素可见与不可见

.slideDown()   //向下展开

.slideUp()   //向上卷起 

.slideToggle()    //切换展开或卷起

.stop()   //特效反复出现延时时停止

动画

.animate({'left':'+=100' },1000,()=>{})

.animate({'left':-500 },1000,()=>{})

 $('html,body').animate({"scrollTop":0},200); //获取html或body标签 动画到顶部0的位置

遍历

$li_s.each(()=>{
    //$(this) 不论是点击还是遍历，都指向当前点击或遍历那个
	console.log($(this).index()) 
})

bind绑定&解绑

bind可以绑定多个事件，满足某个条件unbind可以解绑事件

.bind('click mouseover',()=>{       //绑定
	$(this).unbind('mouseover');    //解绑
})

事件冒泡

祖级嵌套父集,父集嵌套子及 子及绑定有事件触发时,祖父有事件也会跟着触发

.click(function (v){
      v.stopPropagation()   //阻止事件冒泡()
      return false              //简单写法
    })

事件委托

$('list li').click(function (){}) //一次性绑定好,后加入的li元素得重新绑定

$('.list').delegate('li','click',function (){})  //后加入li元素不用重新绑定

事件大全

.blur()   //元素失去焦点

.focus(）//元素获得焦点  有输入框时不用点击就能输入文字

.click()    //鼠标单击

.mouseover()   //鼠标进(进入子元素也触发)

.mouseout()     //鼠标离开（离开子元素也触发)

.mouseenter()   //鼠标进入（进入子元素不触发)

.mouseleave(） //鼠标离开(离开子元素不触发)

.hover()      //mouseenter和mouseleave事件切换写法

.remove()   

窗口发生变动

  $(window).resize(function (){
        var $witch = $(window).width();
        var $height = $(window).height();
        document.title = $witch + 'x' + $height;
 })

滚动事件

$(window).scroll(()=>{
       document.title = $(document).scrollTop() 
 })
 
$(document).scrollTop()   //页面滚动的距离,可单独使用

节点操作

内部添加

.append('<a>百度一下,你就知道!</a>');    

.prepend('<a>百度一下,你就知道!</a>');   

外部添加

.after('<a>百度一下,你就知道!</a>');

.before("<a>百度一下,你就知道!</a>");