jQuery的学习笔记4

JQuery学习笔记3

2.9属性选择器

属性选择器就是根据元素的属性和属性值作为过滤条件,来匹配对应的DOM元素。属性选择器一般都以中括号作为起止分界符

它的形式如下:

[attribute]

[attribute=value]

[attribute!=value]

[attribute^=value]作用:匹配给定的属性是以某些值开始的元素

[attribute*=value]作用:匹配给定的属性是以包含某些值的元素

[attribute$=value]作用:匹配给定的属性是以某些值结束的元素

2.10JQuery选择器优化

遵从以下的几个原则:
1.多用ID选择器

2.少用class选择器

3.多用父子关系少用嵌套关系

4.缓存JQuery对象

Chapter three使用过滤器

3.1过滤

过滤的方法:
类过滤:
语法结构:
hasClass(classname);

作用:该方法用于判断操作,判断当前的JQuery对象是否包含指定的类名,如果包含就返回true,否则就返回false,因此它的返回值是一个布尔值

下标过滤:

语法结构:
eq(index)

作用:使用下标过滤就可以精确选取出JQuery对象中指定下标的元素

参数index是由0开始的,用于指定元素在JQuery对象中的下标位置

表达式过滤

语法结构:
1.filter(字符串/函数)

该方法还可以带多个表达式,表达式之间通过逗号进行分割,这样就可以过滤更多的符合不同条件的元素。

  1. has(字符串/元素)

作用:专门用来保留包含特定后代的元素,去掉那些不含有特定后代的元素。

判断:
语法结构:

Is(字符串/元素)

作用:用来检测JQuery对象中是否包含特定符合条件的元素

3,映射

语法结构:
map(回调函数)

作用:通过映射关系,把JQuery对象中每一个元素映射到一个数组之中,也就是说将一组元素转换成其他数组。

4.清洗

语法结构:not(expr)

作用:能够从jquery对象中删除符合条件的元素

5.截取

语法结构:

Slice(start,【end】)

start和end都是整数,前者的作用是用来表示开始选取子集的位置,第一个元素是0,如果该参数是负数,表示从尾部开始选取,end是可选的,如果不定义的话就表示到子集的末尾,如果指定的话就要注意:它不包含所指定的那一位。

3.2查找

向下查找后代元素

1.children()

语法结构:
children(【expr】)

作用:查找当前元素的所有或者部分子元素

2.contents()

语法结构:

Contents()

注意:他不能够加表达式

作用:和前者的作用差不多,区别在于他不能带参数,另外,不仅可以查找所有子元素还可以查找文本节点和注释节点

3.find(expr)

作用:能够查找所有的后代元素,而children()只能查找子元素,所以他的能力比它强;但是他的能力会比contents()弱一点,因为他不能查找文本节点和注释节点

向上查找祖先元素

1.parents()

语法结构:

Parents([expr])

作用:查找所有匹配元素的祖先元素。如果省略了参数的话就会查找所有元素的祖先元素

2.parent()

语法结构:

Parent([expr])

作用:取得一个包含所有匹配元素的唯一的父元素

3.parentUntil()

语法结构:
parentUntil([selector])

作用:查找指定范围内的所有祖先元素,相当于在parents()所找的所有祖先元素截取一部分

4.offsetparent()

作用:能够定位到当前元素的第一个父元素

5.closeset()

作用:用来查找指定的父元素

向上查找兄弟元素

1.prev()

语法结构:
prev([expr])

作用:匹配上一个相邻的元素

2.prevall()

语法结构:
prev([expr])

作用:匹配上面所有的同辈的子元素

3.prevuntil()

语法结构:

Prevuntil([expr])

作用:介于prev和prevall()之间,作用是用来选择指定范围之内的所有的同辈的子元素

向下查找兄弟元素

1.next()

语法结构:
next([expr])

作用:只能匹配下一个相邻的元素,和prev刚好相反

2.nextall()

语法结构:

Nextall([expr])

作用:能够匹配下面所有的同辈的元素

3.nextuntil()

语法结构:

Nextuntil([expr])

作用:能够在指定的范围之内查找所有的同辈元素

查找兄弟元素

1.sibling()

语法结构:

Sibling([expr])

作用:能够查找所有同辈的元素,不管是在下面还是上面的

添加查找对象

1.add(expr,[context])

作用:向查找的结果添加新的查找内容

3.3串联
addself()

作用:把前面的两个的JQuery对象链起来,变成一个对象,这时候设置的属性就能够够前面两者同时起作用,起到绑定的作用

End()

作用:返回前一个JQuery对象

第四章 DOM操作

4.1创建节点

创建元素

语法结构:
document.creatElement(name)

作用:
创建了指定的对象,并返回新创建的元素对象,但是返回的对象只对js的上下文有效,要想让他能够在页面之中显示出来还需要调用element对象

代码如下:
<script>

Window.Onload=function(){

Var div=document.creatElement("div");

Document.Body.Appendchild(div)

</script>

输入文本

语法结构:
var text=document.Create TextNode("teXt")

注意:text不能单独存在,必须要包含在元素节点里面

设置属性

E.Setattribute(name,value)

4.2插入内容

内部插入

1.Append();

语法结构:
append(content)

Append(function(index,html))

作用:讲参数指定的元素插入到指定节点内的尾部

注意:
append()不仅能够接收HTML语句还能够接收JQuery对象,但是这个时候要注意的是它不能形成新的jquery对象,只能把原来的jquery对象移动位置,这样他原来的位置的内容就会被删除

2.Appendto()

作用:他和append()唯一的不同之处就在于他的容器和添加者的位置的相反了,appendto()括号内容的指的是容器,append()括号内容的指的是添加者

3.prepend()

语法结构:
prepand(content)

Prepand(function(index,html))

作用:能够把参数指定的内容插入到节点的最前面

注意:append()一样,prepand()同样的有相对应的preapandto()用法和前者类似

外部插入

1.After()

 语法结构:
  after(content)

After(function(index,HTML))

作用:在每个匹配的元素后面插入内容

2.Before()

 语法结构:

Before(content)

Before(function(index,html))

作用:在每个匹配的元素前面插入内容

3.insertAfter()

和after的区别只在于主语的不一样

4.insertBefore()

 和before的区别只在于主语的不一样

4,3删除内容

1.移出

 语法结构:
remove([selector])

作用:用来删除指定节点和他包含的子节点,另外更重要的是它能够同时移出元素内部的一切,包括绑定的事件和jquery数据

2.清空

 语法结构:
  empty()

  作用:清空元素包含的内容,他和remove的区别在于remove能够把这个元素删除(顺便把内容删除),而empty只能够把内容清除并不能删除这个元素

3.分离

 语法结构:

 Detach([expr])

作用:将需要移出的元素从dom中过滤出来,和remove()的区别在于detach()能够保留所有的jquery数据,这样就能实现移走一个事件之后又能够把它移回来。

时间: 2024-10-14 06:48:00

jQuery的学习笔记4的相关文章

jQuery插件学习笔记

最近在研究jQuery插件,插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护. JQuery除了提供一个简单.有效的方式进行管理元素以及脚本,它还还提供了例外一种机制:即给核心模块增加自己的方法和额外的功能.通过这种机制,Jquery允许我们自己创建属于我们自己的插件,提高我们在开发过程中的效率. 虽然在jQuery命名空间中,我们禁止使用了大量的javaScript函数名和变量名.但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我们习

jquery.extend 学习笔记

//// jquery.extend 学习笔记// jquery.extend 扩展方法设计的很巧妙,动态增加静态方法和属性 // 虽然网上资料很多,还是跟据自已的学习理解记录一下.// //定义一个Person构造函数function Person(iname,iage){ this.uname = iname; this.age = iage;} //定义原型方法Person.prototype = { showN:function(){ //调用静态方法 Person.showName(t

jQuery的学习笔记2

jQuery学习笔记 Day two Chapter two 选择器 类选择器 语法结构:$(“.classname”) javascript里面没有类选择器所以这个时候使用jQuery会更加的简便 通配选择器 语法结构:jQuery(“*”) 例如下列代码就是匹配body里面的所有的元素 <script type="text/javascript"> $(function() { $("*").css("color","r

jQuery的学习笔记

JQuery学习笔记 Chapter one初识jQuery 1.2测试jQuery 在jQuery库中,$是jQuery的别名,如:$()相当于jQuery() 注意:在使用JQuery进行开发的时候如果在做所有事情之前,希望jQuery操作DOM文档,就必须保证在DOM载入完毕后开始执行,应该使用ready事件作为处理HTML文档的开始. 1.4JQuery的核心功能 1.对外接口单一让使用更简单 2.链式语法让编码更加的快速和优雅 3.模仿CSS选择器让选取元素更加的精确的灵活 4.拓展接

jQuery 基础学习笔记总结(一)

Jquery 学习笔记 总结 感想: 此前在做站点时用到过jquery相关,特别是Ajax相关技术.但是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料基本的了解下Jquery的特性和插件,感觉原来好多前端设计中感觉非常麻烦的东西.通过Jquery的函数和插件都非常easy的实现了而且效果极佳.这里仅仅是简单的介绍下Jquery有哪些知识点. 1.基础选择器 (1). $("button").attr("disabled","true&

Javascript,jQuery,ajax学习笔记。持续更新中。[荐]

欢迎大家关注我的博客,我的博客是在平常学习看书中和总结而撰写的,欢迎大家和我交流,不足之处还很多,希望大家和我交流. 一:javascript基础系列(已完结) 二:javascript基础系列之DOM(已完结) 三:jQuery系列文章(未完结) 四:AJAX(未完结) 五:JavaScript权威指南第6版中文版   一:javascript基础系列: Javascript基础系列之(一)JavaScript语法 Javascript基础系列之(二)变量 Javascript基础系列之(三)

jQuery源代码学习笔记:jQuery.fn.init(selector,context,rootjQuery)代码具体解释

3.1 源代码 init: function( selector, context, rootjQuery ) { var match, elem, ret, doc; // Handle $(""), $(null), or $(undefined) //假设selector为空格.!selector为false if (!selector) { //此时this为空jQuery对象 return this; } // Handle $(DOMElement) //nodeType节

Jquery API学习笔记

学习网站 : http://www.jquery123.com/ 学习一遍API可以更熟练的运用jquery并且拓展思路. 这里只挑选了一些我认为有用的API,并不是全部的API. .add("p")         匹配元素后添加元素 .addClass("类名")   匹配元素添加样式 .after('<p></p>')     匹配元素后外添加HTML .animate({},2000)     匹配元素根据css执行一组动画,时间 .

Jquery Mobile 学习笔记(一)

1.模拟器,IOS:XCODE GENYMOTION  ANDROID:ECLIPSE GENYMOTION 2.jquery mobile data-role:page 代表一个页面 data-position:fixed 代表固定工具栏 data-transition:slide 跳转动画效果 data-rel:dialog 弹窗口 button:A <button>  B <input type="button" />  C <a class=&qu