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() 复制标签及内容
四、事件
特点:执行的标签不需要设置onclick=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 时他才会终止。