追加
- append():追加到父元素之后
- prepend():追加到父元素之前
- after():追加到兄弟元素之后
- before():追加到兄弟元素之前
查询层次关系
我们发现在选择器上就有层次关系的选择器,在API上也有层次关系的方法。一般地,我们用方法来定位到对应的控件比较多。
- children():只查询子节点,不含后代节点
- next():下一下兄弟节点
- prev():上一下兄弟节点
- siblings():上下兄弟节点
css样式
- addClass():增加已存在的样式
- removeClass():删除已存在的样式
- hasClass():判断标签是否有指定的样式,true表示有样式,false表示无样式
- toggleClass():如果标签有样式就删除,否则增加样式
动画效果
往这些方法下设置参数,那么就可以控制它的隐藏、显示时间
- show():显示对象
- hide():隐藏对象
- fadeIn():淡入显示对象
- fadeOut():淡出隐藏对象
- slideUp():向上滑动
- slideDown():向下滑动
- slideToggle():上下切换滑动,速度快点
CSS尺寸属性
直接调用无参就是获取,给指定的参数就是修改
- offset():获取对象的left和top坐标
- offset({top:100,left:200}):将对象直接定位到指定的left和top坐标
- width():获取对象的宽
- width(300):设置对象的宽
- height():获取对象的高
- height(500):设置对象的高
标签内容和属性
- val():获取value属性的值
- val(""):设置value属性值为""空串,相当于清空
- text():获取HTML或XML标签之间的值
- text(""):设置HTML或XML标签之间的值为""空串
- html():得到标签下HTML的值
- **attr(name,value):给符合条件的标签添加key-value属性对 **
- removeAttr():删除已存在的属性
增删改标签
- **
$("<div id='xxID'>HTML代码</div>")
:创建元素,属性,文本 ** - remove():删除自已及其后代节点
- clone():只复制样式,不复制行为
- clone(true):既复制样式,又复制行为
- replaceWith():替代原来的节点
迭代
由于Jquery对象都是被看成是一个数组,each()方法就是专门用来操作数组的。
- each():是jQuery中专用于迭代数组的方法,参数为一个处理函数,this表示当前需要迭代的js对象
Jquery事件API
JavaScript一大特性就是事件驱动,当用户用了执行了某些动作以后,JavaScript就会响应事件,在事件的方法上,我们就可以对用户的动作“回馈”一些信息给用户!
Jquery也对JavaScript事件进行了封装,我们看一下以下的API:
- window.onload:在浏览器加载web页面时触发,可以写多次onload事件,但后者覆盖前者
- ready:在浏览器加载web页面时触发,可以写多次ready事件,不会后者覆盖前者,依次从上向下执行,我们常用$(函数)简化
- ready和onload同时存在时,二者都会触发执行,ready快于onload
- change:当内容改变时触发
- focus:焦点获取
- select:选中所有的文本值
- keyup/keydown/keypress:演示在IE和Firefox中获取event对象的不同
- mousemove:在指定区域中不断移动触发
- mouseover:鼠标移入时触发
- mouseout:鼠标移出时触发
- submit:在提交表单时触发,true表示提交到后台,false表示不提交到后台
- click:单击触发
- dblclick:双击触发
- blur:焦点失去
值得注意的是:当用户执行动作的时候,浏览器会自动创建事件对象,传递进去给响应事件的方法【类似与监听器的原理】,那么我们在响应方法上就可以获取一些属性:
这里写图片描述
Jquery对ajax常用的API
我们在开始使用JavaScript学习AJAX的时候,创建异步对象时,需要根据不同的浏览器来创建不同的对象….装载XML文件的时候,也有兼容性的问题。
Jquery就很好地屏蔽了浏览器不同的问题,不需要考虑浏览器兼容的问题,这是非常非常方便我们开发的。
- **$.ajax([options]) **
- load(url, [data], [callback])
- **$.get(url, [data], [fn], [type]) **
- $post(url, [data], [callback], [type])
- serialize()
前4个方法的功能都是差不多的,都是向服务器发送请求,得到服务器返回的数据。
最后一个是对表单的数据进行封装,将表单的数据封装成JSON格式