tags: Jquery
前言
前面已经介绍过了Jquery这门语言,其实就是一个javaScript的库...能够简化我们书写的代码....本博文主要讲解使用Jquery定位HTML控件【定位控件就是获取HTML的标签】,使用Jquery操作DOM的API
选择器
Jquery提供了九个选择器给我们用来定位HTML控件..
目的:通过九类选择器,能定位web页面(HTML/JSP/XML)中的任何标签(1)基本选择器直接定位id、类修修饰器、标签(2)层次选择器有父子,兄弟关系的标签(3)增强基本选择器大于、小于、等于、奇偶数的标签(4)内容选择器定义内容为XXX、内容中是否有标签器、含有子元素或者文本的标签(5)可见性选择器可见或不可见的标签(6)属性选择器与属性的值相关(7)子元素选择器匹配父标签下的子标签(8)表单选择器匹配表单对应的控件属性(9)表单对象属性选择器匹配表单属性具体的值
通过这九种的选择器,我们基本可以能获取HTML中任何位置的标签。
Jquery关于DOM的API
前面使用Jquery的选择器来获取到了HTML标签,单纯得到标签是没有用的。我们要对其进行增删改,这样在网页上才能做出“动态”的效果...
JavaScript的DOM能够操作CSS,HTML从而在网页上做出动态的效果..
**Jquery是对JavaScript的封装,那么Jquery在得到HTML标签后,也有对应的方法来获取标签的内容,动态创建、删除、修改标签。**从而在网页上做出动态的效果
追加
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快于onloadchange:当内容改变时触发focus:焦点获取select:选中所有的文本值keyup/keydown/keypress:演示在IE和Firefox中获取event对象的不同mousemove:在指定区域中不断移动触发mouseover:鼠标移入时触发mouseout:鼠标移出时触发submit:在提交表单时触发,true表示提交到后台,false表示不提交到后台click:单击触发dblclick:双击触发blur:焦点失去
值得注意的是:当用户执行动作的时候,浏览器会自动创建事件对象,传递进去给响应事件的方法【类似与监听器的原理】,那么我们在响应方法上就可以获取一些属性:
如果您觉得这篇文章帮助到了您,可以给作者一点鼓励