jquery基础知识点总结

[align=justify]Jquery是一个优秀的js库，它简化了js的复杂操作，不需要关心浏览器的兼容问题，提供了大量实用方法。[/align]
[align=justify]Jquery的写法[/align]
[align=justify]方法函数化[/align]
[align=justify]链式操作[/align]
[align=justify]取值赋值合体][/align]
[align=justify]$(“p”).html(); 取值[/align]
[align=justify]$(“p”).html(‘hello’); 赋值[/align]
[align=justify]（当一组元素的时候，取值是一组中的第一个，赋值是一组中的所有元素。）[/align]
[align=justify]Jq与js可以共存，不能混用[/align]
[align=justify]主要的筛选方法[/align]
[align=justify]has() not() filter()[/align]
[align=justify]next() prev() find() eq() index() attr() indexOf()[/align]
[align=left]Attr() 对属性进行操作，给元素添加属性且赋值，或者取得某个属性的值。[/align]
[align=left] $(“div”).attr(‘title’,’123’);[/align]
[align=left] <div title=”123”></div>[/align]
[align=left]Filter() 对一组元素进行筛选，过滤[/align]
[align=left]满足条件的会被留下来[/align]
[align=left]$(‘div’).filter(‘.box’).css(‘background’,’red’);[/align]
[align=left]含有box类的div背景颜色会改变[/align]
[align=left]Not() filter的反义词[/align]
[align=justify] $(‘div’).not(‘.box’).css(‘background’,’red’);[/align]
[align=justify] 不含有box类的div背景颜色会改变[/align]
[align=justify]（filter和not是针对当前元素的，has是针对元素里面的内容的）[/align]
[align=justify]Has() 包含的意思[/align]
[align=left] $(".box").has('#ul').css("background","#ccc");[/align]
[align=left] $(“.box”).has(span).css(“background”,“red”);[/align]
[align=left]Next() 找到当前元素的下一个兄弟节点[/align]
[align=left]Prev() 找到当前元素的上一个兄弟节点[/align]
[align=left]Find() 查找[/align]
[align=justify]$(‘div’).find(‘h2’).css(‘background’,’red’);[/align]
[align=justify]eq() 获得对应下标的元素[/align]
[align=justify] $(‘div’).find(‘h2’).eq(1).css(‘background’,’red);[/align]
[align=justify]Index(); 获得当前元素的索引。索引就是当前元素在所有兄弟节点中的位置[/align]
[align=justify]$(‘#h’).index();[/align]
[align=justify]编写选项卡[/align]
<input type="submit" value="111">

<input type="submit" value="222">

<input type="submit" value="333">

<div id="div">

<div class="active">111</div>

<div>222</div>

<div>333</div>

</div>

<script>

$(function(){

$("input").click(function(){

var i=$(this).index();

$("#div div").eq(i).show().siblings().hide();

});

});

</script>
[align=justify]Jquery中常用的属性操作方法[/align]
[align=justify]addClass()[/align]
[align=justify] 添加类名[/align]
[align=justify]$(‘div’).addClass(‘box2 box3’);[/align]
[align=justify]removeClass() [/align]
[align=justify] 删除类名[/align]
[align=justify]$(‘div’).removeClass(‘box2 box3’);[/align]
[align=justify]width() [/align]
[align=justify] 获取元素的宽度，不包含padding[/align]
[align=justify]Height()[/align]
[align=justify] 获取元素的高度[/align]
[align=justify]innerWidth() [/align]
[align=justify] 获取元素不包含变宽的宽度(包含padding)[/align]
[align=justify]outerWidth()[/align]
[align=justify] 获取元素外的宽度，包含padding border[/align]
[align=justify] outerWidth(true) (包含padding,border,和margin)[/align]
[align=justify]节点操作常用方法[/align]
[align=justify]insertBefore() 插入到节点的前面（动词）剪切的功能[/align]
[align=justify]$(‘span’).insertBefore($(‘div’));[/align]
[align=justify]<span>1213</span>[/align]
[align=justify]<div>2345</div>[/align]
[align=justify]before() 节点的前面插入某元素（名词）[/align]
[align=justify]insertAfter() 插入到节点的后面（动词）(原生js中没有这个方法)[/align]
[align=justify] $(‘div’).insertAfter($(‘span’));[/align]
[align=justify] <span>1213</span>[/align]
[align=justify] <div>2345</div> [/align]
[align=justify]after() 节点的后面插入某元素（名词）[/align]
[align=justify]appendTo()[/align]
[align=justify] 插入到节点内部所有子节点的后面（动词形式）[/align]
[align=justify]append() （名词形式）[/align]
[align=justify]prependTo()[/align]
[align=justify]插入到节点内部所有子节点的前面（动词形式）[/align]
[align=justify]prepend() （名词形式）[/align]
[align=justify]区别（后续操作不一样，）[/align]
[align=justify]$(‘span’).insertBefore($(‘div’)).css(‘background’,’red’);[/align]
[align=justify]$(‘div’).before($(‘span’)).css(‘background’,’red’);[/align]
[align=justify]remove() 删除节点[/align]
[align=justify]on()[/align]
[align=justify]$(‘div’).on(‘click mouseover’,function(){[/align]
[align=justify] Alert(123);[/align]
[align=justify]})[/align]
[align=justify]自定义事件,也可以写多个事件，来针对一个操作[/align]
[align=justify] $(‘div’).on({[/align]
[align=justify] ‘click’:function(){[/align]
[align=justify] Alert(123);[/align]
[align=justify]},[/align]
[align=justify]‘mouseover’:function(){[/align]
[align=justify] Alert(456);[/align]
[align=justify] $(‘div’).off(‘mouseover’);[/align]
[align=justify]}[/align]
[align=justify]});[/align]
[align=justify]off() 关闭它的所有事件操作[/align]
[align=justify]scrollTop() 获取滚动条的滚动距离[/align]
[align=justify] $(document).click(function(){[/align]
[align=justify] Alert($(window).scrollTop());[/align]
[align=justify]})[/align]
[align=justify]弹窗(popup)，动态创建[/align]
[align=justify]创建标签[/align]
[align=justify]关键点，弹框的位置，绝对定位，position : absolute;[/align]
[align=justify]Left: (窗口宽度 - 弹框宽度)/2；[/align]
[align=justify]Top: (窗口的高度 – 弹框的高度)/2 + 滚动条的高度；[/align]
[align=justify]监听窗口大小变化和滚动事件[/align]
[align=justify]$(window).on(‘resize scroll’,function(){[/align]
[align=justify] [/align]
[align=justify]})[/align]
[align=justify]事件细节[/align]
[align=justify]Event对象，对事件细节进行操作[/align]
[align=justify] ev :兼容后的even对象[/align]
[align=justify]ev.pageX (相对于文档的)[/align]
[align=justify]ev.clientX (相对于可视区，可视区加上滚动条距离就是pageX)[/align]
[align=justify]ev.pageY (相对于文档的)[/align]
[align=justify]ev.clientY (相对于可视区的)[/align]
[align=justify]ev.which : keyCode 找键盘的键值 回车（13），可以记录鼠标的键值[/align]
[align=justify]阻止默认事件 ev.preventDefault();[/align]
[align=justify]阻止冒泡的操作 ev.stopPropagation(); return false; // 阻止默认事件 +阻止冒泡的操作[/align]
[align=justify]One() 表示事件只执行一次[/align]
[align=justify]$(‘div’).one(‘click’,function(){[/align]
[align=justify] alert(123);[/align]
[align=justify]})[/align]
[align=justify]offset() 获取元素距离屏幕的距离[/align]
[align=justify]$(‘div’).offset().left[/align]
[align=justify]$(‘div’).offset().top[/align]
[align=justify]Position() 获取元素距离父元素的距离，元素被定位，margin不算，只能是left值，[/align]
[align=justify] 到有定位的父级的left值，把当前元素转化成类似定位的形式[/align]
[align=justify]$(‘div’).position().left;[/align]
[align=justify]$(‘div’).position().top;[/align]
[align=justify]parent() 获取父级[/align]
[align=justify]offsetParent() 获取有定位的父级[/align]
[align=justify]val()[/align]
[align=justify]$(‘input’).val();[/align]
[align=justify]size() 获取一组元素的长度，像length[/align]
[align=justify]$(‘li’).size();[/align]
[align=justify]each() 相当于原生的for()循环 each()当中可以接受回调函数[/align]
[align=justify]$(‘li’).each(function(下标，元素)){[/align]
[align=justify]}[/align]
[align=justify]$(‘li’).each(function(I,elem){[/align]
[align=justify] $(elem).html(i);[/align]
[align=justify]})[/align]
[align=justify]<li>0</li>[/align]
[align=justify]<li>1</li>[/align]
[align=justify]<li>2</li>[/align]
[align=justify]<li>3</li>[/align]
[align=justify]一参（下标），二参（每个元素）[/align]
[align=justify]编写拖拽[/align]
[align=justify]$(window).width() //浏览器当前窗口可视区域宽度,不包含滚动条[/align]
[align=justify]$(window).height() //浏览器当前窗口可视区域高度，不包含滚动条[/align]
[align=justify]$(document).width() //浏览器当前窗口文档对象宽度，不包含右边的滚动条的宽度[/align]
[align=justify]$(document).height() //浏览器当前窗口文档的高度，包含了滚动条的高度[/align]
[align=justify]alert($(document.body).width()); //浏览器当前窗口文档body的宽度[/align]
[align=justify]alert($(document.body).height()); //浏览器当前窗口文档body的高度[/align]
[align=justify]$(document.body).outerWidth(true) //浏览器当前窗口文档body的总宽度 包括border padding margin[/align]
[align=justify]$(document.body).outerHeight(true) //浏览器当前窗口文档body的总高度 包括border padding margin[/align]