前言
jQuery是一个别人已经写好的js文件库,我们可以直接拿来使用.jQuery封装了很多方法(函数),极大的简化了JavaScript编程,并且jQuery兼容所以的主流浏览器,包括IE6!
//使用jquery需要写入口函数
$(document).ready(function(){
//具体代码实现
})
jQuery选择器
基本选择器
跟css中的选择器类似,只是作为字符串传入了jQuery的选择器中.
- 标签选择器
语法:$(标签名) 返回值:一个类数组对象,里面包含了对应的标签名的所有标签对象. - id选择器
语法:$(#id) 返回值:一个类数组对象,里面包含了页面第一个id符合的元素. - class选择器
语法:$(.class) 返回值:一个类数组对象,里面包含了页面所有class符合的元素. - 并集选择器
语法:$(selector1,selector2,...) 获取满足任意一个选择器的标签组合一个集合 - 交集选择器
语法:$(selector1selector2...) 获取满足所有选择器的标签元素
层级选择器
- 后代选择器
语法:$(selector1 selector2 ...) 选择类似css中后代选择器中选择的目标元素 - 子代选择器
语法:$(selector1>selector2) - 相邻选择器
语法:$(selector1+selector2) - 兄弟选择器
语法:$(selector1~selector2) 选取selector1后面满足selector2的所有兄弟元素
过滤选择器
$(selector:even) 选择满足selector的index为偶数的元素
$(selector:odd) 选择满足selector的index为奇数的元素
属性选择器
$([attribute]) 选择包含attribute的所有元素
$([attribute=value]) 选择属性的值满足条件的元素
jQuery操作css
jQuery提供一个获取和设置css属性的方法
$(selector).css(propertyname,value,[propertyname,value])
//获取css属性的值
var box = $("#box")
console.log(box.css("width");
//设置css属性的值
box.css("width",100)
box.css({"wideth":100,"height":100,"color":"red"})
//jQuery会根据你传入的参数的个数和形式判断你到底是想要使用那些功能.
jQuery操作class
- addClass $.addClass(className) 向目标对象中添加一个或多个class
- removeClass $.removeClass(className) 移除目标对象中的一个或多个class
- toggleClass $.toggleClass(className) 添加或移除目标对象的一个或多个className
节点操作
- 创建节点 $("<标签名>") 返回值:和指定标签名的同类型的节点(jQuery对象)
- 添加节点
将一个子节点(元素/文本)添加到指定的父节点中,作为父节点的最后一个子节点
parentNode.append(childNode) childNode.appendTo(parentNode) parentNode.prepend(childNode)
把一个节点插入到另一个节点之后 $(selector).after(node)
把一个节点插入到另一个节点之前 $(selector).before(node) - 删除节点 $(selector).remove() 将一个节点及其子节点全部删除
- 清空节点 $(selector).empty() 将一个节点的所有子节点删除
- 克隆节点 $(selector).clone(true|false) true:复制已经绑定的事件处理程序 false:不复制已经绑定的事件处理程序
查找元素的方法
- parent方法
语法:$(selector).parent() 获取满足选择器的元素的父节点 返回jQuery对象 - find方法---效率并不高,少用
$(selector).find(selector2) 在满足selector1的元素的后代元素中查找满足selector2的后代元素 - children方法
$(selector1).children(selector2) 在满足selector1的子代元素中查找selector2的子代元素 - siblings方法
$(selector1).siblings(selector2) 获取满足selector1的兄弟元素中满足selector2的兄弟元素 - next方法
$(selector).next() 获取满足选择器的下一个元素节点 - nextAll方法
$(selector).nextAllselector2() 获取满足选择器1的元素之后的所有满足选择器2的元素 - prev方法
$(selector1).prev() 获取满足selector1的元素的上一个元素 - prevAll方法
$(selector1).prevAll(selector2) 获取满足selector1的元素之前的兄弟元素中满足selector2的元素
-eq方法
$(selector).eq(index) 获取满足selector的jquery对象中的第index个jQuery对象
-index方法
$(selector).index(element) 获取的是element在selector所选中的所有元素中的索引
链式编程
链式编程就是不简单的执行代码.因为每个对象的方法最终返回的都是调用的对象,返回值是对象,对象可以继续的点方法,这是链式编程的核心思想.在方法内部,最终返回调用方法的对象是(this).
链式编程见面了代码的繁琐,避免重复的获取对象,调用方法.
$("#box").css("width",200).css("height",200).css("background-color","blue");
person.sayHi().sayHi().sayHi();
动画
- 隐藏与显示动画
$(selector).hide(speed,callback) //指定满足selector的元素在speed毫秒之后完全隐藏,完成后执行callback回调函数
$(selector).show(speed,callback) //指定满足selector的元素在speed毫秒之后完全显示,完成后执行callback回调函数
$(selector).toggle(speed,callback) //指定满足selector的元素在speed毫秒之后完全显示/隐藏,完成后执行callback回调函数
- 淡入淡出
$(selector).fadeIn(speed,callback) //淡入
$(selector).fadeOut(speed,callback) //淡出
$(selector).fadeToggle(speed,callback) //淡入/淡出
$(selector).fadeTo(speed,opacity,callback)
//参数: 毫秒speed 透明度opacity 回调函数callback
- 滑动
$(selector).slideDown(speed,callback) //向下滑动
$(selector).slideUp(speed,callback) //向上滑动
$(selector).slideToggle(speed,callback) //向上/下滑动
- 多属性动画
$(selector).animate({params},speed,callback) //控制多个属性同时改变的动画 params动画属性键值对
- 停止动画
$(selector).stop(stopAll,gpToEnd) //将jQuery的动画停止
// stopAll true:清除所有的动画效果 false:仅清除当前活动的动画,下一个动画继续执行
// goToEnd true:停止之后立刻到达结束效果,并执行callback false:停止之后立刻到达结束效果,不执行callback
jQuery中的注册事件
- 快速方式 jQuery中提供了很多快速的注册事件的方式 更多点击事件参考
$(selector).click(callback) //注册点击事件
$(selector).hover(callback) //鼠标移入移出事件
$(selector).keydown(callback) //键盘点击事件
- on的方式(推荐使用)
语法:$(selector).on(event,childSelector,data,callback)
参数:event事件 childSelector指定注册事件的子元素 data传入的callback额外参数 callback绑定的事件处理程序
$(document).ready(function(){
console.log("test")
})
-
bind的方式
语法:$(selector).bind(event,data,callback)
备注:on和bind几乎没有区别,官方推荐使用on! -
delegate的方法
语法:$(selector).delegate(childSelector,event,data,callback)
解绑处理程序
- off
语法:$(selector).off(event,selector,callback) - unbind
语法:$(selector).unbind(event,callback) - undelegate
语法:$(selector).undelegate(childSelector,event,callback)
获取或设置DOM元素的属性
- attr 访问或设置DOM元素的自定义属性
语法:$(selector).attr(attribute,value)
参数:attribute参数 value值 //只有一个参数是获取 有值是设置 - prop 访问DOM元素的固有属性(HTML中支持的)
语法:$(selector).prop(attribute,value)
获取和设置表单控件的值
语法:$(selector).val(value)
参数:value用于设置的值 //不传参就是获取,传了就是设置
获取和设置标签中的内容
- text方法
语法:$(selector).text(content)
参数:content用于设置内容(文本形式) //传参设置,不传获取 - html方法
语法:$(selector).html(content)
//区别 content可以是标签
操作位置
- offset方法
语法:$(selector).offset({top:value,left:value})
获取或设置某个元素的偏移量 - position方法
语法:$(selector).position() 获取某个元素的位置(position只能获取)
操作滚动
语法:$(selector).scroll() 为指定元素绑定滚动时间的处理程序
- 获取滚动高度
$(selector).scrollTop()获取元素高度$(selector).height()