jquery笔记

作者:亚搏app官网    发布时间:2019-12-27 23:37    浏览:109 次

[返回]

图片 1

简介

jQuery可以像CSS一样选择页面内的元素。比如:$('p')会选中所有的段落。

使用$(document).ready()就可以添加文档载入完毕之后执行的代码。

使用$.fn.func = function(){}的方式可以扩展jQuery。

 

第一节认识jQuery一、jQuery简介1.什么是jQuery?jQuery是一个优秀的JavaScript库,是一个凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档,操作DOM,执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。1、jquery就是一个js的框架;2、好处就是能让我们的js代码写的更少;3、基本使用:引入script,后面使用即可;4、关于版本选择:1.*版本的兼容性比较好,大公司用的多;5、关于压缩版和为压缩版:开发用未压缩的便于看源码学习,生产环境用压缩版可以提高速度;二、jQuery的特性jQuery能做以下事情:Prototype:是最早成型的JS库之一,对于JS的内置对象做了大量的扩展。HTML元素选取HTML元素操作CSS操作HTML事件函数JavaScript特效和动画HTMLDOM遍历和修改AJAXUtilities三、jQuery介绍1.jQuery的使用方式下载后引入2.jQuery函数jQuery库只提供了一个叫jQuery的函数,该函数中以及该元素的原型中定义了大量的方法。jQuery函数具有四种参数:1)选择器jQuery函数通过该选择器获取对应的DOM,然后将这些DOM封装到一个人jQuery对象中并返回。2)DOM对象jQuery函数将该DOM封装成jQuery对象并返回。3)HTML文本字符串jQuery函数根据传入的文本创建好HTML元素并封装成jQuery对象并返回。$("divone/div");4)一个匿名函数$(function(){});当文当加载完毕之后jQuery函数调用匿名函数。3.jQuery对象jQuery对象是jQuery函数的一个实例,是一个类数组对象,数组中存放的是DOM对象,而DOM对象是Node的实例。对jQuery对象的操作实际上是对jQuery数组中的DOM对象的批量操作。jQuery对象和DOM对象可以相互转化。jQuery对象的获取通常是使用选择器来获取的。比如,获取所有clss为one元素:$(".one");•jQuery对象的本质是一个伪数组;•伪数组就是有index和length的类似于数组的对象四、jQuery选择器1.基本选择器:所有选择器*标签选择器标签名ID选择器#id类选择器.className群组选择器.one,.two多个选择器使用都好分隔,取并集复合选择器.one.two多个选择器组合使用,取交集2.层次选择器:后代选择器.one.two两个选择器使用空格隔开,表示可以获取当前元素的子代以及孙子代等等后代元素。子代选择器.one.two两个选择器使用隔开,表示只能获取当前选中元素的子代元素。3.兄弟选择器:下一个兄弟选择器.one+.two两个选择器使用+隔开,表示可以获取当前元素的下一个兄弟元素,下一个兄弟元素要能符合.two。之后所有子代选择器.one~.two两个选择器使用~隔开,表示可以获取当前元素之后的所有兄弟元素,只有所有兄弟元素要能符合.two。五、jQuery过滤器jQuery的过滤器必须用在jQuery选择器后,表示对通过前面的jQuery选择器选择到的内容的过滤。是建立在前面选择器已经选择到的元素的基础之上。语法:selector:过滤器1.基本过滤器:selector:first获取所有已选择到的元素中的第一个元素selector:last获取所有已选择到的元素中的最后一个元素selector:even获取所有已选择到的元素中的索引为偶数的元素selector:odd获取所有已选择到的元素中的索引为奇数的元素selector:eq(index)获取所有已选择到的元素中的索引为index的元素selector:lt(num)获取所有已选择到的元素中的索引值小于num的元素selector:gt(num)获取所有已选择到的元素中的索引值大于num的元素selector1:not(selector2)获取所有已选择到的元素中的除了selector2的元素selector:header获取所有已选择到的元素中的标题元素(h1~h6)2.内容过滤器:selector:contains(text)获取所有已选择到的元素中文本包含text的元素selector:empty获取所有已选择到的元素中的空元素(没有子节点)selector:parent获取所有已选择到的元素中的非空元素(有子节点),如$("div:parent");selector1:has(selector2)获取所有已选择到的元素中包含selector2的元素,如$("div:has('span')");3.可见性过滤器:隐藏类型分两种:1)不占据屏幕空间display:none;inputtype="hidden"2)占据屏幕空间visibility:hidden;opacity:0;//透明度为0使用::visible选择所有占据屏幕空间的元素:hidden选择所有不占据屏幕空间的元素4.属性过滤器:selector[attrKey]获取所有已选择到的元素中具有属性attrKey的元素selector[attrKey=attrVal]获取所有已选择到的元素中具有属性attrKey,并且属性值为attrVal的元素selector[attrKey^=attrVal]获取所有已选择到的元素中具有属性attrKey,并且属性值为以attrVal开头的元素selector[attrKey$=attrVal]获取所有已选择到的元素中具有属性attrKey,并且属性值为以attrVal结尾的元素selector[attrKey*=attrVal]获取所有已选择到的元素中具有属性attrKey,并且属性值为包含attrVal的元素selector[attrKey!=attrVal]获取所有已选择到的元素中具有属性attrKey,并且属性值不为以attrVal的元素或者没有属性attrVal的元素5.后代选择器:selector:nth-child(index)获取每个selector元素中索引为index的子元素。index从1开始selector:first-child获取每一个selector元素中的第一个子元素selector:last-child获取每一个selector元素中的最后一个子元素selector:only-child获取每一个selector元素中的独生子子元素selector:first-of-type获取每个selector元素中每种类型子元素中的第一个selector:last-of-type获取每个selector元素中每种类型子元素中的最后一个6.表单过滤器::checked选取所有被选中的元素,用于复选框、单选框、下拉框:selected选取所有被选中的元素,该选择器只适用于option:focus选取当前获取焦点的元素:text选取所有的单行文本框(inputtype="text"):password选取所有的密码框:input选取所有的input,textarea,select,button元素。*注意,$(":input")是选中可以让用户输入的标签元素;而$("input")是选择名字为input的标签元素。*:enable选取所有可用元素,该选择器仅可用于支持disable属性的html元素。(button,input,optgruop,option,select,textarea):disable选取所有不可用元素,该选择器也仅可用于支持disable属性的html元素。:radio选取所有的单选框:checkbox选取所有的多选框:submit选取所有的提交按钮:image选取所有的input类型为image的表单元素:reset选取所有的input类型为reset的表单元素:button选取所有的input类型为button的表单元素:file选取所有的input类型为file的表单元素六、jQuery中的Dom操作1.查找节点通过jQuery选择器来完成2.创建节点创建元素节点:varnewTd=$("td/td")创建文本节点:varnewTd=$("td文本内容/td")3.插入节点1)$A.append(B)将B追加到A的末尾处,作为它的最后一个子元素2)$A.appendTo(B)将A追加到B的末尾,作为它的最后一个子元素3)prepend()$A.prependTo(B)将A追加到B的前面,作为它的第一个子元素$A.after(B)在A之后追加B,作为它的兄弟元素$A.insertAfter(B)在B之后追加A,作为它的兄弟元素$A.before(B)在A之前追加B,作为它的兄弟元素$A.insertBefore(B)在B之前追加A,作为它的兄弟元素4.删除节点remove([selector])从DOM中删除所有匹配的元素,返回值是一个指向已经被删除的节点的引用,可以在以后再使用这些元素。该方法会移除元素,同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据。detach([selector])与remove()类似,但是detach()保存所有jQuery数据和被移走的元素的相关联事件。empty()无参数。从DOM中清空集合中匹配元素的所有的子节点。5.复制节点$("#id").clone(false);该方法返回的是一个节点的引用,参数默认为false,为浅复制;参数是true,为深复制,含义是:复制元素的同时复制元素中所绑定的事件。6.替换节点replaceWith(newContent);用新内容替换集合中所有匹配的元素,并且返回被删除的元素的集合。该方法会删除与节点相关联的所有数据和事件处理程序。replaceAll(target);用集合的匹配元素替换每个目标元素。颠倒了replaceWith()操作效果。7.包裹节点wrap([wrappingElement])在每个匹配的元素外层包上一个html元素warpAll([wrappingElement])将所有匹配的元素用一个元素来包裹,在所有匹配元素外面包裹一层HTML结构warpInner([wrappingElement])每个匹配元素里面内容(子元素)都会被这种结构包裹8.节点遍历children([selector])用于取得匹配元素的子元素集合(只考虑子元素而不考虑任何后代元素)$('.content.inner')=$('.content').children('.inner');find(selector)在当前对象元素中的子元素查找,和参数所匹配的所有的后代元素next([selector])取得匹配的元素集合中每一个元素紧邻的后面兄弟元素nextAll([selector])查找当前元素之后所有的同辈元素prev([selector])取得匹配元素前面紧邻的兄弟元素prevAll([selector])取得当前元素之前所有的同辈元素silibinng([selector])取得匹配元素的前后所有的兄弟元素closest(selector)取得和参数匹配的最近的元素,如果匹配不上继续向上查找父元素filter(selector)把当前所选择的所有元素再进行筛选过滤parent([selector])取得匹配元素的集合中,每个元素的父元素parents([selector])获得集合中每个匹配元素的祖先元素第二节jQuery的事件和API一、事件on()在选定的元素上绑定一个或多个事件处理函数。同一个对象绑定多个事件不会被覆盖;off()移除一个事件处理函数。不传任何参数就是移除所有的事件;传一个参数就是移除指定类型的事件;传两个参数就是移除指定类型指定回调函数的事件; trigger()根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。二、鼠标事件cick()单击dblclick()双击hover()悬停mousedown()按下mouseup()抬起mouseenter()移入不支持子元素mouseleave()离开不支持子元素mouseout()离开支持子元素mouseover()进入支持子元素mousemove()移动三、键盘事件keypress()按键按下keyup()按键抬起keydown()按键按下四、表单事件focus()聚焦事件blur()失去焦点事件change()当元素的值发生改变时激发的事件select()当textarea或文本类型的input元素中的文本被选择时触发的事件submit()表单提交事件,绑定在form上五、jQuery中常用的API1.jQuery中的html(),text(),val()方法html()无参:获取html的值有参数html:设置html的值text()无参:获取文本值有参数text:设置文本值val()无参:获取value的值有参数value:设置value的值2.jQuery中的工具方法1)get();//以数组的形式返回DOM节点。console.log($('div').get());2)toArray();//返回一个包含jQuery对象结合中的所有DOM元素数组。console.log($('div').toArray());3)eq(index);//返回index位置上的jQuery对象。console.log($('div').eq(1).get(0));4)filter(function(index,item){});//过滤器函数,返回jQuery对象。var$result=$('div').filter(function(index,item){returnindex==2;});5)map(function(index,item){});//用于获取或设置元素集合中的值。var$result=$('div').map(function(index,item){return$(item).html()});6)each(function(index,item){});//遍历一个jQuery对象。$('div').each(function(index,item){console.log(index,'--',item);});7)slice(0,3);//截取var$result=$('div').slice(0,3);console.log($result.get());});8)not()9)first()10)last()11)is()12)has()3.jQuery中属性设置函数//获取属性值attr(key)prop(key)//删除属性removeAttr(attributeName)removeProp(propertyName)//批量设置属性css(key)//添加类addClass(className)//判断有没有指定的类,有,返回true,否则返回falsehasClass(className)//删除类removeClass(className)第三节jQuery中的动画一、jQuery样式相关方法宽度=width+2padding+2border+2margin//获取视口区的宽高:1、$(window).height()2、$(window).width()//获取内容区的宽高:$('div').width();$('div').height();//获取内容+padding区的宽高:3、$('div').innerHeight()4、$('div').innerWidth()//获取内容+padding+border区的宽高:5、$('div').outerHeight()6、$('div').outerWidth()//获取内容+padding+border+margin区的宽高:$('div').outerWidth(true);$('div').outerHeight(true);//获取相对于文档的偏移7、.offset()//获取相对于定位父元素的偏移8、.position()//横向滚动条左侧的偏移9、.scrollLeft()//横向滚动条上侧的偏移10、.scrollTop()//获取离它最近的父定位元素11、.offsetParent()二、效果1.基本效果1)隐藏hide()2)显示show()3)隐藏与显示toggle()2.淡入淡出效果1)淡入fadeIn()2)淡出fadeOut()3)淡入到fadeTo()4)淡入与淡出fadeToggle()3.滑动效果1)滑下slideDown()2)滑上slideUp()3)滑上与滑下slideToggle()4.自定义效果animate()

选择器

简单示例:

<script  type="text/JavaScript">
  $(document).ready(function(){
   //选中所有的段落:
   $('p').css('color','red');
   //选中设置了title属性的段落:
   $('p[title]').css('color','blue');
   //选中href属性中包含bbs的段落:
   $('a[href*=bbs]').css('fontWeight','bold');
   //选中,含有链接的li元素
   $('li:has(a)').css('border','1px  solid black');
   //选中作为第一个子节点的p元素:
   $('p:first-child').css('backgroundColor','pink');
   //选中可见的p元素
   $('p:visible').css('fontSize','20px');
   });
  </script>

属性选择器

p[title]

只选择设置了title属性的p元素。

p[title=foo]title

title属性等于foo的。

p[title^=foo]

title属性以foo开头的。

p[title$=foo]

title属性以foo结束的。

p[title*=foo]

title属性含有foo的。

例如:

 $('p[title]').css('color','blue');

选中了设置title属性的p,并且将其颜色设置为blue。

包含选择器

li:has(a)

表示含有a的li元素。

例如:

 $('li:has(a)').css('border','1px  solid black');

选中含有a的里元素,并且设置其style的border属性。

位置选择器

p:first-child

选中作为第一个子元素的p元素。

例如:

 $('p:first-child').css('backgroundColor','pink');

类似的还有

p:nth-child(n)

例如:

$('p:nth-child(3)').css('backgroundColor','yellow');

选中第三段。

这些表示子节点位置的都是从1开始计数的。

:odd

选中位置排序是奇数的元素。

even

选择偶数位置的元素。

eq(n)

选中第n个元素。

这些都是从0开始计数的。

以上为书上的分类方式。

所有选择器

按照官方的选择器分类,而不是书上的表。

基本选择器

  1. #id

  2. element

  3. .class

  4. *

  5. selector1, selector2, selectorN

层次选择器

  1. ancestor descendant
    div p选中p,且p必须在div中。可以是隔代的关系

  2. parent > child
    div>p选中p,且p必须是div的子元素,不包括隔代。

  3. prev + next
    div+p紧跟着div的p

  4. prev ~ siblings
    div~p选中p,且p前面必须是div。

基本过滤器

  1. :first
    p:first匹配第一个p元素

  2. :last
    p:last匹配最后一个p元素

  3. :not(selector)
    过滤掉selector选中的元素

  4. :even
    偶数元素,0开始的索引。

  5. :odd
    奇数元素,0开始的索引。

  6. :eq(index)
    根据index返回一个元素。

  7. :gt(index)
    索引大于index的元素。

  8. :lt(index)
    索引小于index的元素。

  9. :header
    标题元素,h1到h6。

  10. :animated
    当前正在动画状态的元素。

内容过滤器

  1. :contains(text)
    匹配文本中包含text的元素。

  2. :empty
    匹配没有任何子节点的元素。(有文本节点算作有节点)

  3. :has(selector)
    在selector匹配的元素中,至少要包含一个才可以匹配。

  4. :parent
    匹配所有作为父元素的元素。

可见性过滤器

  1. :hidden
    所有可见元素

  2. :visible
    匹配所有不可见元素。

属性过滤器

  1. [attribute]
    设置了指定属性的元素。

  2. [attribute=value]
    属性attribute的值等于value

  3. [attribute!=value]
    属性attribute的值不等于value,或者没有指定该属性。

  4. [attribute^=value]
    属性attribute的值以value开始。

  5. [attribute$=value]
    属性attribute的值以value结束。

  6. [attribute*=value]
    属性attribute的值含有value。

  7. [attributeFilter1][attributeFilter2][attributeFilterN]
    匹配满足所有属性过滤器的元素。

子节点过滤器

  1. :nth-child(index/even/odd/equation)
    匹配元素是它们父亲元素的第n个子节点、或者是奇数偶数节点。

  2. :first-child
    作为第一个子节点的元素。

  3. :last-child
    作为最后一个子节点的元素。

  4. :only-child
    作为唯一的子节点的元素。

表单选择器

  1. :input 
    匹配input, textarea, select 以及button 元素。

  2. :text

  3. :password

  4. :radio

  5. :checkbox

  6. :submit

  7. :image

  8. :reset

  9. :button

  10. :file

  11. :hidden
    匹配不可见的元素以及input hidden

表单过滤器

  1. :enabled

  2. :disabled

  3. :checked

  4. :selected

管理选择结果

访问结果长度

$('p').size()

size方法

获取某个元素

$('p')[0]

$('p').get(0)

将结果转换为数组

get方法如果没有参数就会将

var arr = $('p').get()

取得当前节点的索引

$('#foo').index($('div'))

取得id为foo的div在所有div内的索引。

向结果中添加元素

$('p').add('a').fadeOut().fadeIn();

和$('p,a').fadeOut().fadeIn();是完全等同的。

从结果中删除元素

$('div').not('#foo').fadeOut().fadeIn();

从$('div')中去掉'#foo'。

注意not不再接受标签。不能写not('div#foo')

从结果中过滤元素

$('div').filter('#foo').fadeOut().fadeIn();

从div中再过滤一遍id等于foo的。再如:

$('p').filter('[title]').fadeOut().fadeIn();

filter与not一样不再接受标签,而且过滤的时候没有=只有^=、*=、$=。filter中也可以使用函数过滤器,返回true的选中。

$('div').filter(function(){ return true})

极端情况:

$('div').filter(function(){ return false}).fadeOut().fadeIn();

一个也不选中。

$('div').filter(function(){ return true}).fadeOut().fadeIn();

全部选中。

在结果范围内寻找元素

$('ul').find('a').fadeOut().fadeIn();

在ul的范围内再寻找a。

jQuery链

end方法

返回上一层操作的元素。

$('div').find('a').end().fadeOut().fadeIn();

end又回到了$('div')。

 

andSelf方法

$('div').find('a').andSelf().fadeOut().fadeIn();

包含$('div')以及.find('a')的结果。

 

 

操作元素

each方法

each方法可以遍历所有的选中的元素,并且使用一个函数来对其进行操作。

$('p').each(function(index){$(this).prepend(index+'.')});

选中所有的p,并且在前面加上索引号。

属性

使用attr访问和设置元素的属性。

var test = $('p[title]').attr('title');

获得了title属性的值。当传递两个参数的时候可以设置属性。

$('p[title]').attr('title','jQuery');

将title属性设置为'jQuery'。

 

$('a[href^=');

外部链接在新窗口打开。

 

removeAttr删除属性

$('p[title]').removeAttr('title');

删除了title属性。

 

CSS样式

直接使用css来设置CSS属性。

$('p').css('color','green')

addClass添加类名。

removeClass删除类名。

toggleClass切换类名。

元素内容

html()访问innerHTML

html(content)设置innerHTML

 

text()访问文本。

text(content)设置文本。

 

书上的例子,非常巧妙:

$('li').click(function(){var temp = $(this).html(); $(this).text(temp);})

点击就显示源代码。

 

操作元素

append

给元素末尾添加一个子节点。除了可以添加DOM节点之外,还可以这么写:

$('p').append('<a href=";')

如果append的目标只有一个,那么就和DOM操作的时候一样,已经在文档内的会被移动。如果目标是多个,那么是采用复制的方式。

 

appendTo

将元素添加到别的元素中作为尾部子节点。

 

prepend

给元素头部添加一个子节点。

 

prependTo

将元素添加到别的元素中作为头部子节点。

 

before、after

分别将元素插入到其它节点的前面或者后面。

 

remove

删除节点。

 

empty

清空一个节点。

 

clone

复制一个节点。

 

表单

val获取或者是设置表单域的值。

 

事件

bind

绑定事件响应函数。

$('p').bind('click',function(){$(this).prepend('<strong>Clicked!</strong>');});

每当点击p元素的时候就在前面加一段文字。

 

也可以直接使用事件名,比如click等等:

$('p').click(function(){$(this).prepend('<strong>Clicked!</strong>');});

等效上面的代码。

 

one

只执行一次的事件响应函数。

 

unbind

unbind不带参数会删除所有时间响应函数。

$('p').unbind('click')则只删除指定事件的时间响应函数。

$('p').unbind('click',func)则只删除指定的func函数。

 

事件对象

事件对象统一以函数第一个参数的形式被传入事件响应函数。

 

trigger

模拟事件触发

$('p').trigger('click');

会触发所有p元素的click事件。

 

toggle

事件响应函数的切换

function func1(){ $(this).prepend('func1');}

function func2(){ $(this).prepend('func2');}

$('p').toggle(func1,func2);

 

hover

鼠标经过的效果

function func1(){ $(this).prepend('func1');}

function func2(){ $(this).prepend('func2');}

$('p').hover(func1,func2);

 

效果

show

显示,语法:show(duration,callback),例如:

$('p').show(3000)

 

hide

隐藏,如上。

 

fadeIn、fadeOut

渐显和渐隐效果。

 

fadeTo(duration,opacity,callback)

到指定的opacity。例如:

$('p').fadeTo(2000,0.5)

在两秒之内变化到0.5。

 

slideUp、slideDown、slideToggle

滑动显示,隐藏,切换。例如:

$('p').slideUp(2000)

$('p').slideDown(2000)

animate(params,duration,easing,callback)

自定义动画

params是对象,属性就是所有要变换的CSS属性。

搜索