Jquery第二篇【选择器、DOM相关API、事件API】
前言 前面已经介绍过了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快于onload
[*]change：当内容改变时触发
[*]focus：焦点获取
[*]select：选中所有的文本值
[*]keyup/keydown/keypress：演示在IE和Firefox中获取event对象的不同
[*]mousemove：在指定区域中不断移动触发
[*]mouseover：鼠标移入时触发
[*]mouseout：鼠标移出时触发
[*]submit：在提交表单时触发，true表示提交到后台，false表示不提交到后台
[*]click：单击触发
[*]dblclick：双击触发
[*]blur：焦点失去
值得注意的是：当用户执行动作的时候，浏览器会自动创建事件对象，传递进去给响应事件的方法【类似与监听器的原理】，那么我们在响应方法上就可以获取一些属性：
<script type="text/javascript"> $(function () { $('pre.prettyprint code').each(function () { var lines = $(this).text().split('\n').length; var $numbering = $('<ul/>').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('<li/>').text(i)); }; $numbering.fadeIn(1700); }); }); </script>
文档来源：51CTO技术博客https://blog.51cto.com/u_12206475/3065706
页:
[1]