将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 ');
输出会把空格都消除