jQuery初级篇

一、jQuery自我理解

　　是对js与css功能的封装，并且简化一些基本的功能，调用jQuery可以用更少的代码来实现想要的功能；

　　核心功能：标签的定位-->标签的属性及内容的增删改查；

二、寻找元素

　　记住先要导入jQuery

 

　　2.1基本查找　　

　　$("#i1")      通过 id查找

　　$(".c1")　　 通过类名查找

　　$("div")　　 通过标签名超找

　　$(".class,p,div")  同时查找符合条件的

　　$("*")　　   所有标签都列出来

　　2.2层级

　　$(".outer div")    

　　$(".d1>a")      $(".d1 a")       二者功能一样 表示类下 所有标签

　　$(".d1+div")          表示 紧跟.d1后面的而且是div 只有这样才能被超找，否则 null

　　$(".d1~div")         类 d1 同辈中所有的div  不包括自己。  

　　2.3基本筛选器

　　$("li:fist")　　第一个          

　　$("li:eq(2)")　　查找 所有li集合中序列为2的元素

　　$("li:even")   　 查找 所有li集合中序列偶数的元素

　　$("li:gt(1)")       查找 所有li集合中序列数值比1大的序列

　　2.4表单选择器

　　$("[type="text"]")  --->$(":text")

　　$("input:checked")     input标签的专属

　　2.4筛选器

　　$(".w1").children()　　w1l类下的所有的儿子　　　

　　$(".w1").children(":first")   表示第一个儿子

　　$(".w1").children(":last ")   最后一个儿子

　　next()　   下一个兄弟

　　nextAll()　　自己下面的所有兄弟  

　　nextUntill("d5")    自己下面的所有兄弟一直到".d5"终止(不包括'.d5')

　　prev()     同辈中上一个元素

　　...

 

　　find()      查找符合要求的所有标签

　　parent()  父级元素

　　parents() 爸爸、爷爷、爷爷的爸爸...（祖先）

　　siblings() 所用同辈不包括自己

二、操作元素

　　1.HTML代码/文本/值

　　html() 获取对象下所有的文本及html，传人参数就是设置对像下的内容

　　text()  不传参数就是获取 对象下的所有文本，传入参数就是清空原来的内容设置该参数为新内容。

　　2.css

　　addClass("c1") 添加上"c1" 类

　　removeClass("c1")删除"c1"类

　　3.属性

　　attr("href")    获取属性为href的值

　　attr("href","789")   值更改为789

　　attr({name="hied",name2="css"})　批量设置

　　removeAttr(name)   删除一个属性

　　prop("checked",true)  和attr()有同样的功能，对于要设置true或false的用prop　

三、文档的处理

　　：就是插入一个自己写的标签

　　1.内部插入

　　append()    尾部追加

　　prepend()　头部追加

　　2.外部插入

　　after()       尾部追加

　　before()    头部追加

　　3.复制标签

　　clone()  复制标签及内容

　　

四、事件

　　特点：执行的标签不需要设置οnclick=func() 

　　方式一  $(".li").click(function(){

　　　　　　　　　　$(this)........

　　　　　　　　　　　　})

　　方式二 $("ul"):delegate("li","click:function(){

　　　　　　　　　　　　　　　　　　......

　　　　　　　　　　　　　　　　　　}")

　　二者的区别：方式一 加载的时候就已经绑定好了，如果你再添加新li标签是不会有效果的

　　　　　　　　方式二 用的时候才给你加载。

　　扩展： $(document).ready(function(){}) -----------> $(function(){})

　　　　　 这句的用法 把函数放在$()内  意味着 只有页面全部加载完之后才会执该函数。

四、位置

　　1.获取滚轮的位置值： index = $(window　　).scrollTop()

　　2. $(document).height() == $(window).height()+index    文档高度 == 窗口高度+滚轮高度

　　3.  offset().top  上边框距离文档顶部的高度

　　4.  position().top   距离父级上边框的距离  

五、扩展

　　1.each循环

　　　　$().each(function(){

　　　　　　　if($(this)){...}

　　　　　　　else{.....}

　　　　　　　　})

　　$(":checkbox").prop("checked",false)　 这句表示全部为假它并不是循环着的。　　　

　　2. each 第二种循环

　　　var li=[11,22,33,44,55,66]

　　　　$.each(li,function(x,y){console.log(x,y)})

　　　注意  只有return false 时他才会终止。