jQuery 学习 笔记

   1：将ul下面li的奇数全变色，even是偶数全部变色：

$('ul li:odd').css('background','red');

 2： 选中class为demo的li变色，过滤条件括号里面是，not和他正好相反：

$('ul li').filter('.demo').css('background','red'); 

   3:   选出li下面有span标签的：

$('ul li').has('span').css('background','red'); 

     4:Find是找前面的ul下面.demo的元素：

$('ul').find('.demo').css('background','red'); 

      5:Html标签 为li添加span标签内容 并且设置颜色：

$('ul li').html('<span style = "color:red;"> vdfs</span>')

  6:这样会输出ul li里面的所有内容，另一个使用同html是赋值 把里面的赋值到li里面：

console.log($('ul li').text() );

 

   7:多次赋值，小驼峰方式，注意写法规范，不用写单位：

$('ul li').css({width:100,heigth:20,backgroundColor:'red'})

 8:赋值属性，赋值可以一群一起，打印是打印出来一个，表单取值的话用prop不用attr：

$('ul li').attr('data','lll');

 

  9:选择的是第二个，linext();下一个兄弟节点. prev();上一个兄弟节点.index(); 当前兄弟节点中的索引

$('ul li').eq(0).next().css('background','red'); 

    10:返回索引并且返回内容

('li').click(function(){
console.log(this);
console.log($(this).index());
}) 

 11:添加类名，多个用空格隔开，也可以用函数，填进去函数索引 ，removeClass清除类名：

$('button').addClass('')

  12:将box3插入到box1之前，相当于剪切

$('.box3').insertBefore( $('.box1'));

     这两个用法一样  写法不同

$('.box1').before( $('.box3'));

 13:appendTo: **添加到###的里面(添加到最后一个子元素后)
      append: **里添加###  (同上)

$('.box3').appendTo( $('.wrapper'));

    prependTo  prepend (添加到第一个元素前)
    两个选择适应不同场景，实现链式操作（核心）哪个更方便一些

$('.box3').prependTo( $('.wrapper'));

14:jquery中remove()与detach()的区别

  Remove就是将元素移除了还有绑定的事件，再也找不回来了，detach可以；

$('.wrapper').on('click'，’div’,[{name:ll},’15’],function(e){
})

    用on绑定事件，（3）可以传递参数，在绑定函数的内部使用,(2)可以进行事件委托，选择wrapper下面的div

 

   想下面这样绑定多个事件，只能出发一次，只打印1.2

$('.wrapper').on({
mousedown:function(){
console.log('1');
},
mousedown:function(){
console.log('1');
},
mouseup:function(){
console.log('2');
}
});

15:off解除绑定

$('.wrapper').on('click',function(){
console.log(0);
$(this).off();
})

解除wrapper的所有绑定事件

function cl1 (){}
$('.wrapper').on('click',cl1).on('click',cl2);
$('.wrapper').off('click',cl1);

单个解除cl1的绑定事件

One绑定事件只能触发一次

16：

innerWidth    宽度:  content padding

outerWidth    宽度: content padding border。

滚动出去的高度: $(window).scrollTop();

 

17：可以用jquery创建dom节点，例子创建两个div标签

$('<div>222</div>').appendTo($(document.body));
$('<div/>').appendTo($(document.body));

    .end 回退操作，操作前一个父级的

   //:input仔细查一下  form表单//

18:

   输出父级的元素，offsetParent();是找他最近有定位的父级.parents的话会把所有父级全部找出来，parent（‘.wrapper’）     可  以传参，选择特定的

console.log($('.wrapper').parent());

19:获取input里面的内容

closest() 查找最近的祖先节点 可以有参数selector 能把自己选中

$(input).val()

siblings() 当前元素节点的所有兄弟节点

preAll() 当前元素上面所有兄弟节点

nextAll() 当前元素下面所有兄弟节点

prevUntil()  nextUntil --->掐头去尾选中元素

$('li').eq(0).siblings()

$('li').eq(0).nextUntil($('li').eq(7)).css()

 

20:克隆，

  里面填true的话也克隆时间方法，否则不可隆，克隆和原来一样

：$('li').clone(true).appendTo($(document.body));

21:给p标签添加父级div，里面可以传标签，复制不影响之前的，相当于深度克隆，可以复制方法，

WrapAll是统一加父级，注意可能破坏dom属性

$('p').wrap('<div></div> ')

22:给wrapper下面的子节点添加一个父级的h1标签

unWrap 删除父级，解除包装 结构化标签不能删除（body就是）

$('.wrapppr').wrapInner($(' <h1></h1> '))

23:Add可以多加操作对象，这样是一起操作这些，集中操作

$('div').add('p').add('strong').css()

24：serialize串联表单数据 serializeArray串联数据成数组

$("form").serializeArray();

25:运动

$('div').animate({
left:300,
top:500,
fontSize:25
},3000,'swing',function(){
alert(0)
});

Animate运动函数，从定义的位置运动到规定的位置，3000是时间，swing是运动函数，可以在网上添加别的，需要下载文件，function为函数，运动完以后弹出0，可以实现链式调用，加.delay（）是延时多少；

$(document).on('click',function(){
$('div').stop()
})

   stop()阻止当前运动继续后续运动stop(true) 阻止后续所有运动

   stop(true, true)停止当前所有运动 停在当前目标点

   finish()停止当前运动 并且达到最后运动的目标点

   delay() 延迟 参数 延迟时间

26：trigger主动触发事件 参数 1.事件类型2.参数

  trigger 触发事件是会事件冒泡 触发li 会冒泡到ul

  trigger 传递参数 trigger('click', data);  $('li').on('click', function (e,data) {})

  参数是在事件处理函数的第二个参数

  trigger可以触发自定义事件  eat

$('li').eq(0).trigger('click');

 $(this).outWidth()自身的宽度

$('button').index ==0;

 选定的是第一个button

27：js判断类型的三种方法

例如  判断数组 1.arr insanceof Array  2.arr.constructor == Array

          3.Object.prototype.toString.call(arr)

28：

$.trim(' aaa ');

输出会把空格都消除