jq:一个优秀的js库,简化js操作,兼容,提供了大量的方法
链式操作原理:jq对象调用jq方法时 当方法执行结束后返回当前的这个jq对象本身,继续进行方法调用.
$() 里面可以传哪几种类型的对象
1.$("选择器")
2.$(function(){}) --> (window.onload=function(){})
3.$(obj) (obj:DOM对象 window,document,this..)-->DOM对象转换为jq对象
jq对象和dom对象之间的相互转换
js对象--->转换为jq对象 $(DOM对象)
jq节点对象--->转换为js对象
1.$(".box")转换为js $(".box")[0] DOM节点
2.$(".box").get(下标)转换为js DOM节点
选择器
1.基础选择器
id,.class,tag,群组,*,子选择器,后代选择器. $("选择器")
2.筛选选择器
:not() 选择除去选择的元素
:eq() 选择到某一个 从0开始
:nth-child() 选择到某一个 从1开始
:$("tr:odd") 选取奇数位置的 <tr> 元素
:$("tr:even") 选取偶数位置的 <tr> 元素
:first
:last
3.属性选择器
[attr="val"]
[attr|="val"] 属性值以指定字符开头，识别带有-的字符
[attr^="val"] 属性值以指定字符开始的节点
[attr$="val"] 属性值以指定字符结尾的节点
[attr*="val"]
4.form表单选择器
:checked
:checkbox
:button
:text
:selected
:submit
JQ的一些方法
css() 给jQ对象设置样式/获取元素的样式 可支持对象{}来设置多个样式
attr() 给jQ对象设置标签属性/获取元素某个属性 注意jq attr设置的属性要用attr来获取
prop() jq对象的方法，用于设置js DOM对象指定的属性(传一个参代表取址,传两个参代表赋值)
html() 获取jq对象的所有内容/设置对象的内容
text() 获取jq对象的所有文本内容/设置文本
val() (不传参代表取址,传参代表赋值)
click(function(){}) 给jQ对象设置点击事件
eq(i) 遍历所有对象,获取指定的某个i:下标
index() 通过事件来获取某个对象的下标
1-不传参数 获取当前元素的下标
2-传参数 获取指定元素的索引 参数:某个元素 DOM对象 jq对象
3-传参数 如果找不到 返回-1 注意:类似于js中的indexOf()
例:
$(".box p").click(function(){
//获取p标签的对应下标
alert($(this).index()) //获取当前点击的p标签 在所有兄弟节点中的下标
alert($(".box p").index(this)) //DOM对象
alert($(".box p").index($(this))) //jq对象
})
筛选的一些方法
parent() $("div").parent() 查找div的父元素
parents $("div").parents() 查找长辈节点(可以传参数)
next() $("div").next() 下一个兄弟节点
prev() $("div").prev() 上一个兄弟节点
nextAll() $("div").nextAll() 查找div下面所有的兄弟节点
prevAll() $("div").prevAll() 查找div前面所有的兄弟元素
first() $("p").first() 查找页面中第一个p元素
last() $("p").last() 查找页面中最后一个p元素
find() $("div").find("p") 查找父级中的所 有子元素p
eq() $("p").eq() 查找页面中第n个p元素 下标从0开始
not() $("p").not(':first') 筛选不包含的 查找页面中除了第一个p元素之外的所有的p
filter() $("div").filter("p") 筛选出 只要div下的p
add() $("div").add("p") 附带某个元素
has() $("div").has("p") 选取包含某个元素的父元素
children() $("div").children("p") 查找父级中的子元素 参数:"选择器"
1.不传参数 指所有子元素
2.传参数 指定的某类子元素
siblings() $("li:first").siblings() 查找第一个li的所有兄弟，注意不包括第一个li
1.不传参数 选择某个元素所有的兄弟节点
2.传参数 选择指定的兄弟节点 参数:"选择器"
JQ动画
show("slow") 显示
hide("slow") 隐藏
toggle("slow") 往复显示或隐藏
fadeIn("slow") 淡入
fadeOut("slow") 淡出
fadeTo(0.2) 淡入到指定的透明渡
fadeToggle("slow") 淡入淡出
slideDown() 下拉
slideUp() 合上
//这些方法都可以传入三个参数
//第一个参数:代表动画完成的时间,默认(normal),可选slow,fast或者毫秒数
//第二个参数:动画切换效果,可选linear
//第三个参数:回调函数,代表动画完成后执行的函数
animate() 动画函数
可传四个参数
1.作为动画的属性是一个对象
2.动画完成的时间
3.动画的效果,liner和swing(默认)
4.动画完成之后执行的回调函数
stop() 立即结束前面,执行后面的动画
delay(time)设置一个延时来推迟执行队列中 之后的项目
JQuery事件
事件绑定bind() on()
解除绑定unbind() off()
区别:事件委托
one() 一次性事件
DOM操作
append()
appendTo()
prepend()
prependTo()
after(节点)
before (节点)
insertAfter()
afterBefore()
remove()
detach()
empty()
clone()
clone(true)
replaceWith()
replaceWith()
replaceAll()
wrap()
wrapAll()
wrapInner()
元素的尺寸
width() width
height() height
innerWidth() width+padding
innerHeight() height+padding
outerWidth() width+padding+border
outerHeight(true) height+padding+border+margin
offset().left 距离文档左侧的位移
offset().top 距离
