码迷,mamicode.com
首页 > Web开发 > 详细

jQuery自学打卡二

时间:2016-07-21 23:19:53      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:

  今天学习w3c上的jQuery Html和jQuery遍历部分。本来打算是边学边整理,后来一想,那样的话跟抄一遍没什么两样,所以我想学完之后,在脑子里好好琢磨一下,尽量有一些自己的感受在里面,昨天兴高采烈的给女朋友看了第一篇,竟然被女朋友嘲讽我是抄的,唉……真是冤枉啊,在追梦的路上这点小打击不算什么,更何况那个人是你最爱的人呢,哈哈,不扯了,说干就干~

  首先是jQuery Html部分,这里面需要引入一个名词就是DOM(Document Object Model)即文档对象模型,看了看百度百科,我所理解的就是DOM将整个Html文件变成了一个树形分层结构,每一个元素和属性都是一个个的节点,jQuery可以对这些节点进行获取和修改他们的内容,结构,样式。下面开始细划。

  1.jQuery获取。获取包含三个函数,text(),html(),val(),text()函数获取的是文本内容,例如:$("p").text();这样是可以获取到p元素里的文本内容,而如果p元素里包含一个span元素的话,在用html()函数获取时,上面的例子获取到的就是<span>XXX<span>,即它带有子标签,而val()函数获取的是文本框里的字段。还有最后一个函数就是attr(),这个函数是用来获取属性,如一个<a>标签,里面有很多的属性,href、value、 name等等,通过attr()即可以获取到想要的属性。(属性要加引号)

  2.jQuery设置。上面第一个内容是获取,在获取之后还可以对内容结构进行修改,这样就用到了这一部分。这个比较简单易懂,同样用到的也是上面的几个函数,只要在括号里加上想修改的值就可以了,类似一个传参的过程,可能之前会有人有疑问,html()函数获取到标签有什么用,看到这一部分就知道了可以直接通过加标签的方式对样式进行修改如$("p").html("<b>asdffghh</b>"),这样就直接将段落加粗,注意:这几个函数括号里的内容都要加分号,很简单,就不一一解释了,还有比较重要的一点是括号内不仅仅可以是值,还可以是回调函数,回调函数在第一篇里已经有写到,是在执行完当前函数后立即执行的函数。

  3.jQuery添加。添加有四个函数,分别是append()在元素的结尾添加内容,prepend()在被选元素的开头插入内容,after()在被选元素之后插入内容,before()在被选元素之前插入内容,说实话,这个append和after以及prepend()和before()的区别,我没有弄的太明白,暂时就先理解为一个在内部一个在外部吧,以后用到的时候再多加注意吧。

  4.jQuery删除。删除也比较简单,主要就是两个函数,第一个是remove(),第二个是empty(),前者是删除整个元素,而empty()是删除元素内的子元素。这里remove()函数可以接受一个参数,例如$("p").remove(#a);即删除id=a的p元素。

  5.jQuery CSS类。这一部分包含四个函数,addClass():向被选元素增加一个或多个类、removeClass()从被选元素删除一个或多个类、toggleClass()在增加和删除做切换操作、css()是返回一个css属性,而且不光是获取,还可以设置css属性,具体方式是在括号内加值如css("property","value"),如果是多个属性css(""property":"value", "property":"value");

  6.jQuery尺寸。包括六个函数,width(),height(),innerWidth(),innerHeight(),outerWidth(),outerHeight(),前两个是设置或获取元素的宽度和高度,中间两个包括内边距的宽度和高度,最后两个包括包括内边距和边框的宽度和高度,如果想加上外边距的宽度和高度的话只需在最后两个函数的括号内写上"true"。

  

  以上是jQuery Html部分,下面是jQuery遍历。

  1.w3c上说遍历就是"异动",我觉得遍历就是在DOM树中查找,例如在果树上摘果子,果子有大果子,小果子,这是一个分层结构,从上往下为曾祖父,祖父,父亲,同胞,儿子,孙子,曾孙子,根据一个指定的元素去找和他有关系的元素,通过这些“辈分”。

  2.jQuery祖先。这里包含三个函数parent()、parents()、parentsUntil(),parent()函数返回被选元素的直接父元素,即仅向上一级进行遍历,parents()方法返回被选元素的所有祖先元素,单词后面加了“s”,代表复数。这里可以做一个过滤操作,即在parents()括号内加上元素名。最后一个函数是查找两个元素之间的元素,这个也比较简单。

  3.jQuery后代。包含两个函数childen()和find(),前者是查找被选元素的直接子元素,且可以在括号内进行过滤操作,后者是向下一直查找所有子元素,括号内可以进行过滤,如果为find("*"),即为查找所有子元素。

  4.jQuery同胞。siblings()返回被选元素的所有同胞元素,括号内可以设置过滤条件如:siblings("p"),next()方法返回被选元素的下一个元素,nextAll()返回的是被选元素后面跟随的所有同胞元素,和siblings()不同的是,选取只是后面的所有而不是全部,nextUntil()元素,顾名思义,也是介于两个元素之间的元素。还有三个函数prev(),prevAll(),prevUntil(),和上面的那三个是一样的,只不过方向相反而已。

  5.jQuery过滤。这也很容易理解,每一个函数都很容易懂,first()函数即返回第一个元素,last()是最后一个,eq()括号里的是数字索引,从零开始,零代表第一个,以此类推,filter()和not()这两个函数是一对相反的函数,前者是返回符合括号内设置的条件的元素,后者为返回不符合括号内设置的元素。

 

jQuery自学打卡二

标签:

原文地址:http://www.cnblogs.com/JX-star/p/5693360.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!