jquery

Jquery介绍

• Query是一个js库
• Javasscript库：将封装的函数封装到一个文件中 这个文件就是一个库
• 其他js库：Prototype YUI(网络响应一般) Dojo ExtJS

Query优点

写的少做的多 体积小 功能强大 链式编程 隐式迭代 插件丰富 开源 免费

• 隐式迭代: jQuery内部循环操作
• 链式编程: 对象调用方法之后返回对象

jQuery操作对象

• 通过dom方式和jq获得的对象不是同一个

jQurey对象转换

1. dom对象转jQuery对象:$(dom对象)
2. jQurey对象转dom对象:jQurey对象[0]/jQurey对象.get(0);

常用方法

// ========================
val() //获取/设置value属性的值 *还有选中的作用
text()//获取/设置文本内容 js中innerText 无兼容问题
html(pram)//获取/添加标签中的html内容 可以添加标签
index() //索引值
//css======================
css() //设置css样式 
removeClass()//删除类样式
addClass() //添加类样式 如果添加多个中间用空格隔开 
hasClass()//boolean 是否应用了类样式
//event========================
click()// 
mouseenter()//over
mouseleave()//out
// 方法======
stop()//停止
end()//修复断链 
show(time,fn)//显示 数字或者fast normal slow 第二个参数回调函数 
hide(time,fn)//隐藏
slideToggle()//切换 滑入滑出
slideUp()
slideDown()
fadeToggle()//淡入淡出
fadeIn()
fadeOut()
//window.onload
    $(function(){});
    $(document).ready(function(){})
    $(window).load(function(){});
animate()//四个参数 css样式{json数据模式} speed动画速度 easing动画效果默认swing/linear callBack回调函数
//属性
attr(p1,p2);//操作自定义属性 操作checked推荐使用prop
prop(p1,p2) //获取复选框是否选中返回布尔用这个
each(function(ele,index){});//遍历jq对象

创建元素的方法

1. 创建一个元素

var pObj = $('<p>123</p>');

2. 添加这个元素到div中

pObj.appendTo($('div'));或者 $('div').append(pObj);

3. 这种创建方式会先将原来的内容清除

$('div')html('pObj');

4. 插入到该元素的子级里面的第一个

prepend() prependTo()

5. 插入到该元素的前面/后面(兄弟级)

before() after()

移除元素的方法

1. html("");//清空子元素
2. empty();//清空子元素
3. remove();//自杀

元素的样式操作

1. width() height() //设置/获取元素的宽高
2. offset()//获取的是对象 可以设置/获取 offset({'left':100,'top',200})
3. scrollTop(); scrollLeft() //获取元素卷曲出去的距离的值

绑定事件的四种方法

1.click(处理函数);
2.bind(事件名,处理函数);//如果采用json格式 后面的会覆盖前面的
3.delegate(子级元素,事件名,处理函数) //给子级绑定事件 
4.on(事件名,子级元素,处理函数);//同上 
//前两种只能为存在的元素绑定事件 后添加的元素没有事件 
//后两种父亲替儿子绑定事件 后添加的元素也有事件 

解绑事件

unbind(event);//解绑所有的event事件
unbind();//解绑所有事件
unbind('event1 event2');//同时解绑多个事件
undelegate(selector,event,funciton);
off()
    off();//解绑自己和孩子的所有事件 
    off(event);//解绑自己和孩子的所有event事件  解绑多个用空格隔开
    off(event,selector)//解绑孩子的事件
    off(,selector);//解绑孩子的所有事件
    off(event,'**');//解绑所有孩子的event事件

常用的选择器

1. .类 #id 标签 
2. 索引选择器 两种写法 `$('div:eq(index)')`或者 $('div').eq(index);
eq(index)//填入索引值获取对应的元素
:lt(index)//小于索引值的元素
:gt(index)//大于索引值的元素
:first() :last() //第一个/最后一个元素
sibling(index)//符合的兄弟元素
prev()//前一个兄弟元素
prevAll()//前面的所有兄弟元素
next()//后一个兄弟元素
nextAll()//后面的所有兄弟元素
find(index)//查找符合的元素
children('ul')//从所有子元素中找ul 
3. 其他选择器 
$(div~span)//获取div后面的所有兄弟级的span元素
$(div+span)//获取div后面的直接的兄弟级的span元素
$(div:odd)//奇数
$(div:even)//偶数
$(div span)//后代/层次
$(div,span)//并集/多条件
$(div.span)//交集/标签加类
$(div>span)//直接子代

return false; 阻止事件冒泡

事件的触发

event.
    button //鼠标
    shiftKey//是否按下了组合键 返回布尔值  
    altKey
    ctrlKey

让权

var xy = $.noConflict();//避免命名冲突

属性

innerWidth()//没有边框的宽度
innerHeight()
outerWidth(boolean)//有边框的宽度
outerHeight(boolean)
target//触发事件的目标对象
currentTarget//触发事件的当前对象
screenX/screenY//鼠标相对屏幕的坐标
delegateTarget//代理的这个对象

拓展方法

position().left/top //相对父元素的left值
stop(true).animate()//执行动画之前停下所有事情
prop()//与attr相似 操作元素的固有属性建议用prop 自定义属性用attr
hover(f1,f2)//鼠标进入和离开事件
$(window).resize()//页面刷新