JQ学习笔记
属性选择
$('input[value]') //有value的元素
$('input[value=123]') //有value的元素且value=123的元素
$('input[value^=123]') //有value的元素且value起始是123的元素
$('input[value$=123]') //有value的元素且value结束是123的元素
$('input[value*=123]') //有value的元素且value包含是123的元素
//如果属性是含有空格的 应该加上引号如：
$('input [class="box box1"]')
集合长度，可以利用length来判断元素是不是JQ对象 JQ对象的length不为0；
//$()获取到的都是集合，下面表示集合的长度 $('li').size() $('li').length
添加和移除class
$('input').addClass('box1') //添加class 自动去重
$('input').addClass('box1 box2') //添加class 自动去重
$('input').removeClass('box1') //移除class 自动去重
$('input').removeClass('box1 box2') //移除class 自动去重
$('input').toggleClass('box3') //只能添加或者删除class,条件:是否存在'box3'
显示与隐藏：
//比css()方法更好 $('div').hide() //隐藏 $('div').show() //显示
节点的选择
next() //下一个兄弟节点 nextAll() //下面所有的兄弟节点 prev() //上一个兄弟节点 prevAll() //上面所有的兄弟节点 siblings() //所有的兄弟节点 不包括自身 //筛选功能 siblings('h2') //所有的兄弟节点为h2的 不包括自身
//下标 eq()
first() //所选集合的第一个节点 last() //所选集合的最后一个节点 slice(a,b) //a,b代表位置，slice选择a-b的节点(包括a),(不包括b). children() //只能获取子代元素 find() //可以获取孙节点
父节点
parent() //获取父节点 parents() //获取祖先节点 closest() //找指定的最近的祖先元素，必须要接收一个参数（只能选择到一个唯一的元素）包括自身
节点操作
$('<div>') //创建div标签
$('<div id="div1">hellow</div>')// 创建div标签
$('ul').append($li) && $li.appendTo($('ul'))// 把元素添加到指定节点里面的最后面
prepend() && $li.prependTo($('ul')) //把元素添加到指定节点里面的最前面
$('#div2').before($div1) && insertBefore() //把元素添加到指定节点的前面，1加到2之前
$('#div2').after($div1) && insertAfter() //把元素添加到指定节点的后面，1加到2之后
删除和复制节点
$('div').remove() //删除节点 原生JS=>document.body.removeChild(oDiv)
clone() //复制节点,默认不复制事件，clone(true)=>复制事件
index()索引
index() //默认兄弟中的排行 $('#span1').index('span') //所有是span的兄弟标签中的排行
遍历each()方法
其中的return false ;相当于原生的break
//elem代表原生的元素 $('li').each(function (i,elem) { elem.style.background='red'; $(elem).css('background','red'); //this==elem })
wrap()方法
wrap() //外部包装 写法=> $('span').wrap('<div>'),每个span标签外都包一个div wrapAll() //整体包装 剪切不一样的标签，再整体包装 wrapInner() //内部包装 unwrap() //删除包装 (相当于删除父节点，body不能被删除)
get()方法
转原生JS，可以进行比较
$('div').get(0).innerHTML
获取元素的大小
width()和height()
和原生JS的区别，原生JS(offsetWidth)获取不到隐藏元素的尺寸。
//里面传递参数为数字，可以设置大小 width() //width innerWidth() //width + padding outerWidth() //width + padding + border 当参数为true时包括margin height() innerHeight() outerHeight()
可视区的高和页面的高
$(window).height() //可视区的高 $(document).height() //页面的高
滚动距离
$(document).scrollTop() //获取 $(document).scrollTop(number) //设置滚动距离
$(document).scrollLeft()
元素距离
offset().left //距离值是相对于整个页面而不是可视区，与父级有无定位无关 offset().top position().left //到有定位的最近的祖先节点的距离 (不认margin) position().top offsetParent() //有定位的最近的祖先节点
=>获取到定位父级距离的小技巧
$('#div1').offset().left-$('#div1').offsetParent().offset().left
事件
on() ★★★★★
off() ★★★★★
JQ中都是绑定的形式
支持多事件写法
click()写法，也是采用off()取消
on('click mouseover',function () {
alert(123)
})
Event对象
pageX,pageY 与clientX的区别
$(document).click(function(ev){ ev.pageX //相对于页面 ev.pageY //相对于页面 ev.clientX //相对于可视区 ev.clientY //相对于可视区 })
which,keyCode
$(document).keydown(function(ev){ ev.which //键值 alert(ev.ctrlKey) //是否按下crtl })
ev.target
$(document).click(function(ev){ //ev.target :事件源 alert(ev.target) })
ev.stopPropagation() =>阻止冒泡
ev.preventDefault() =>阻止默认事件
return false; =>既阻止默认事件又阻止冒泡
$(document).contextmenu(function(ev){ ev.preventDefault() //阻止默认事件 })
避免多次添加事件，可以$('#div').off('click').click(function(){
alert(1)
})
事件委托
delegate()
$('ul').delegate('li','click',function(){
$(this).css('background','red');
})
^其中 $(ev.delegateTarget) =>委托人 $(this)=>被委托人
取消委托的方法 => 委托人.undelegate()
主动触发
trigger() ★★★★★
$('#btn').trigger('click') //$('#btn').click()
命名空间
$('#btn').on( 'click.abc',function(){
alert(1)
})
$('#btn').trigger('click.abc')//主动触发带.abc的click
=^off()也可以有这个功能，$(#btn).off('.abc')
工具方法
$().css() 之类都使给JQ对象用，
$.xxx 等方法既可以给JQ对象用，也可以给原生JS用；
判断类型
$.type() //=>原生的 typeof 查看变量的类型，更加强大 $.isFunction() // 判断是不是函数 $.isNumeric() //判断是不是数字 '123'=>弹出true $.isArray()//判断是不是数组 $.isWindow()//判断是不是window $.isEmptyObject()//判断是不是空的对象 如{},[] $.isPlainObject()//判断是不是对象自变量 {}, new Object;
对象的复制
$.extend(b,a,{age:20})
var a={name:{age:30}} var b={}; $.extend(b,a)// 支持拷贝多个对象$.extend(b,a,{age:20}) b.name.age=30 alert(a.name.age) //=> 20 =^说明默认是浅拷贝， $.extend(true,b,a) //深拷贝
this指向的改变 $.proxy()
利用变量的方式 var This=this;
function show(n1,n2) { alert(this) //默认指向window } $.proxy(show,document)(3,4);//使得this指向document。 //传参$.proxy(show,document,3,4)() ||$.proxy(show,document,3)(4) //传参的适用情况 $(document).on('click',$.proxy(show,window,3,4))
JQ中的运动
show() 和hide()
参数有 : 'fast' =>200 'normal'=>400 'slow'=>600 ||参数直接添加时间，单位(毫秒)
toggle() 参数和show()一样，功能类似于 toggleClsss()
fadeOut() 和fadeIn() // 淡入淡出 => fadeToggle()
收缩和展开 ：
slideUp()和slideDown() =>slideToggle();
复杂运动的方法：
animate()
//第一个参数： 对象{} //第二个参数时间：默认是400毫秒 //第三个参数：运动形式只有两种 'swing' (默认:缓冲-慢块慢) ;'linear'(匀速的) //第四个参数：运行结束的回调 $('#div1').animate({ width:300, //width:'+=100' 每次数值增大100; height:400 },1000,) //第二种写法 $('#div1').animate({ width:300, height:400 },{ duration:2000;, easing:'linear', complete:function() { alert(123) }, step:function(a,b){ //可以监测定时器每一次的变化 //console.log(a) //console.log(b.pos) //运动过程中的比例值 $('#div1').html(parseInt(b.pos*2345792313)) } })
队列的概念
同一个元素的三个运动按队列执行，可以写成链式运动。中间需要延迟，可以用delay()方法
运动中停止方法stop()
默认情况下只会停止当前运动，后面的链式运动继续。
stop(true)=>第一个参数可以停止所有运动。
stop(true,true)=>第二个参数可以停止到当前目标点
finish() 所有运动都到达指定的目标点。
队列的运动问题
stop()有清空队列的行为
可以解决快速mouseover mouseout造成的后续运动。
工具方法
$.parseJSON() //只能针对JSON类型的字符串，安全性好，要是严格的JSON格式
$. parseHTML() //转化HTML形式的字符串，转成DOM节点，放到一个数组当中
$. parseXML() //把XML形式的字符串转换成XML格式的节点
$. isXMLDoc() //判断是不是XML的document
$.ajax()
提交数据 , 查询数据 写法url success type data error dataType async；
dataType :'json',
async=>是否异步
<input value="" type="text" id="input1"></input>
$('#inputi').on('input',function () {
$.ajax({
dataType :'json',
url:'user.php',
type:'get'//默认get, 'post'
data:{user:$(this).val()}
success:function(data){
if (data==1) {
$('div').html('可以注册')
}else if (data==0) {
$('div').html('已经注册过了，不能注册')
}
},
error:function(err){
console.log(err.status)
}
})
})
$.get() 和$.post()
$.get('user.php',{name:'hellow'},function (data) {
console.log(data)
},'json').error(function(err){console.log(err)})
$.post('user.php',{name:'hellow'},function (data) {},'json')
浙公网安备 33010602011771号