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：焦点失去

值得注意的是：当用户执行动做的时候，浏览器会自动建立事件对象，传递进去给响应事件的方法【相似与监听器的原理】，那么咱们在响应方法上就能够获取一些属性：